April 28, 2024 – Version 0.1.0
You know that feeling when you’re staring at a blank canvas, excited and slightly terrified? That was me this week, starting from scratch on this design. Let me walk you through what happened.
Added
- Base structure: I went with Hugo + PaperMod as the foundation. Why? Speed, simplicity, and that sweet static site generation. The setup was surprisingly smooth - until it wasn’t (more on that later).
- Dark mode support: Remember squinting at those all-white websites at 2 AM? Yeah, not happening here. Added system preference detection so your eyes don’t hate you.
- Navigation: Created the main pathways through the site - About, Projects, Blog, Contact. Simple but purposeful.
- Project structure: Mapped out the content organization. Had to give this extra thought since it’s the skeleton everything else hangs on.
Improved
- Theme integration: The dark/light mode switch was initially triggering a “flash of unstyled content” between pages. If you’ve ever seen a website briefly blind you before going dark, you know what I mean. Fixed that with some clever inline script placement.
- Performance: Stripped away the redundant code and decided to streamline the CSS variables. “Doing more with less” is the mantra here.
Learned
- Hugo theme customization: There’s this constant tension between directly editing templates versus using theme hooks. It’s like choosing between surgery and medication - both work, but the side effects differ wildly.
- Dark mode implementation: Who knew toggling a few colors could be so complicated? The dance between localStorage, system preferences, and user choice was in the least delicate matter.
- CSS architecture: Found myself in that classic dilemma - how much should i make reusable versus when do i just hardcode a value and move on. Still don’t have a perfect answer, but i’am getting closer.
Reflection
So here’s what really happened: I initially thought dark mode would be a quick 10 minute task. “Just add a toggle button, swap some colors, done!” 30 minutes later, I was deep in JavaScript event listener territory, perplexed by the flashing white screens between page loads.
The breakthrough came when I realized I needed to apply the theme before the page renders, not after. It’s like those movie scenes where someone catches a falling vase just before it shatters - timing is everything.
What fascinates me is how such a seemingly simple feature (dark mode) touches on so many fundamental web concepts: DOM loading, localStorage persistence, CSS variables, and user preference detection. It’s humbling how even “small” features can become rabbit holes of learning.
Next Steps
- Building truly responsive layouts for all devices - because nobody likes horizontal scrolling on mobile
- Filling the About section with something besides “Lorem ipsum” (im kidding!)
- Creating project templates that actually show off the work instead of obscuring it