One of the standout features on this site is the horizontal clock you’ve probably noticed ticking away near the bottom. I wanted something more than just a plain, circular clock — something minimal, modern, and interactive. On top of that, I added a twist: clicking the moving indicator instantly toggles between light and dark mode, making it both functional and fun.

Why a Horizontal Clock?

Most clocks stick to the classic round format. I wanted a fresh take, one that stretched across the page like a timeline, showing the progression of the day in a single glance. It’s part functional timepiece, part ambient visual, and now also a quick theme switcher.

The Look

The design uses daytime and nighttime bars, color-coded with CSS variables so they’re easy to tweak. Hover effects subtly expand the bars, giving them a dynamic feel without being distracting. The moving indicator, paired with a sun/moon icon, shows the current time’s position while also acting as a toggle button for dark mode.

The Code

The implementation is clean and responsive:

• HTML: A flexbox-based row of spans representing each hourly mark, plus an absolutely positioned indicator element.
• CSS: Uses flexbox for even spacing, transitions for smooth movement, and CSS variables to instantly change colors for light/dark themes.
• JS: Calculates the indicator’s position based on the current time, updates it in real-time, and toggles the theme when the indicator is clicked.

What I Learned

This project taught me how small UI elements can change the personality of a site. It’s not just about telling the time — it’s about giving the page rhythm.

I’m excited to keep refining it, maybe even adding weather-based sliders in the future.

When I first started this project, I knew I wanted to make something visually stunning but had no clue where to begin. After diving into different design techniques and concepts, I found myself gravitating towards a few that really shaped how everything turned out. So, here’s a little breakdown of what inspired me and what I ended up using.

Glassmorphism: A Touch of Depth

One thing I absolutely had to include was glassmorphism. It’s this super cool effect that makes elements look like frosted glass, with subtle shadows and a layered, transparent look. It adds depth and a modern feel to the design without making it too crowded. Once I tried it out, I was hooked – it gave the whole site this clean, airy vibe while still keeping the focus on the important stuff.

CSS Animations: Making Things Move

Animations are another thing I wanted to get right. I spent a lot of time playing around with different CSS animations, trying to give the site a smooth, interactive feel. You know, little things like buttons growing when you hover or text fading in as you scroll. These small touches really make the site feel alive and polished, without being overwhelming.

SVG Animations: Custom Visuals

SVG animations were also a game-changer. What’s great about SVGs is that you can scale them without losing quality, which is perfect for animating icons, logos, or any other graphics. I had fun adding custom animations to certain elements, giving them a more personalized, eye-catching look. Plus, it keeps the site light and fast – win-win!

Fonts: Setting the Vibe

Let’s talk fonts, because choosing the right ones was crucial for setting the tone of the site. I’m a big fan of:

• Averia Serif Libre: It’s got this warm, slightly imperfect look that makes it feel human and approachable. Perfect for longer reads.
• Kola: Super bold and modern. I used it for headings and titles to really grab attention.
• Kontanter: Clean and geometric, but still creative. It’s got a good balance between simplicity and character.
• Getai Grotesk Display: This one’s more expressive and bold, perfect for when I needed something a bit more eye-catching.

Each font brings its own vibe to the design, and I love how they all come together to give the site personality while still being easy to read.

Design Resources: Where I Got My Ideas

Throughout this whole process, I turned to a few awesome websites for inspiration and guidance:

• Awwwards: This place is a goldmine for stunning website designs. Every time I’m stuck, I head here for a dose of inspiration.
• Laws of UX: If you want to understand the psychology behind user experience, this site is a must.
• CodePen: I’m always messing around with different ideas here. It’s the best place to experiment with animations and interactive elements.
• ColorHunt: Sometimes I need help with color palettes, and ColorHunt always comes through with great options.

These sites really helped me figure out what direction to take, and they’ve become my go-tos for all things web design.

Wrapping Up: What’s Next?

This project has been such a fun ride. I’ve learned a ton, from glassmorphism and animations to playing around with fonts and getting inspired by the web design community. It’s been all about experimenting and bringing those ideas to life in a way that feels both beautiful and functional. Can’t wait to see where this project goes next!