I finally reached the point where I could no longer ignore it. My personal website needed an upgrade.
- Not a quick refresh
- Not a few cosmetic tweaks
- A proper rebuild
This post marks the start of version 2 of my personal site and, more importantly, the start of documenting the process through blog posts. The goal isn't just to show the finished product, but to explain how and why decisions are made along the way.
Why a Rebuild?
Version 1 of my site did its job. It existed, it worked, and it represented where I was at the time. But as my skills improved, the gap between what I could build and what I had built kept growing.
I wanted:
- Cleaner structure
- More intentional styling
- Better scalability
- Code that actually reflects how I think now as a developer
Rather than patching over old decisions, I chose to start fresh with a clear vision and updated skills.
Step 1: Defining the Theme & Style
Before touching any real content, I focused entirely on theme and style.
This meant answering some important questions upfront:
- Should this feel minimal or expressive?
- Light or Dark?
- Subtle or bold?
- Portfolio-first or writing-first?
- How much animation?
I landed on a dark, modern, developer-focused aesthetic with subtle animations to enhance usability without distraction. The kind of design that doesn't shout for attention, yet feels deliberate.
Translating Style Into Code
Once the direction was clear, I moved straight into CSS architecture.
Instead of jumping into random styles, I started with:
- A core color palette using CSS variables
- Surface layers for depth and separation
- Consistent spacing and border-radius values
- Reusable shadows and transitions
This approach lets the site grow without turning it into a pile of one-off styles. Every visual decision ties back to a small, controlled set of variables.
I also made a conscious effort to keep things framework-light; relying on modern CSS rather than heavy abstractions. The goal is clarity. Both visually, and in the codebase.
Laying the Foundation
At this stage, there's no flashy content and no complex features. That is completely intentional.
This phase is about building a solid foundation:
- Predictable layout behavior
- Accessible navigation
- Responsive design principles
- Maintainable, readable code
Everything else: projects, posts, and experiments will all sit on top of this.
What Comes Next
With the theme and base styling in place, the next steps will focus on:
- Expanding layout components
- Refining typography
- Adding real content and structure
- Gradually introducing interactivity where it actually adds value
This blog will track that progress step by step.