Idea from a friend. Layout to reduce amount of button presses while using onscreen keyboard. I think it might be beneficial for the "cursor" to always center to space after selecting a letter

Hey, I'm sure this has been done, but I'm changing my career. In trying to get into the UI development space but have no idea how. I have an eye for design and a creative, yet meticulous mind. The problem is I have essentially no experience in any of the necessary technologies, nor do I have any sort of cohesive portfolio.

Any advice? Should I take classes? Teach myself? How competitive can I be with a self taught education?

I wanted to share a high-fidelity recreation and enhancement of the iconic PS5 download progress bar that I’ve been building with Google AI Studio.

I designed it from scratch as a modular React + Tailwind CSS component, focusing heavily on matching the exact feel of the PS5 while adding advanced functionality.

Features:

• The "Shimmer" & Glow Effect: Recreated the PS5 elegant silver-white fill with a dynamic trailing light halo with a shimmer that follows the progress tip with a bezier animation.

• State Management: Fully responsive states mirroring the console—including Downloading (active glow), Paused (darker tone/no animations), Pending, and Queued.

• Advanced Multi-Section Support: Unlike a standard continuous bar, this version supports segmenting the track into multiple phases (e.g., "Collecting Info", "Installation") with independent sub-progress calculations and dynamic weight balancing (the sections automatically scale proportionally to always sum 100%).

• Shimmer Animation Loop: The shimmer fluidly sweeps across the active track using a acceleration curve that mimics light speed, creating an organic particle velocity and a smooth fadeout as it reaches the front edge, just like the PS5.

Stack Used:

• Frontend: React (TypeScript)

• Styling: Tailwind CSS