When I set out to build my personal website, the first question was obvious: what stack should I use? React? Next.js? Astro? After going back and forth, I decided on the simplest option — plain HTML, CSS, and vanilla JavaScript. Here's why, and what I learned.
Why no framework?
Frameworks are great for apps, but a personal portfolio is fundamentally a static document. I don't need client-side routing, state management, or a virtual DOM. I need text, links, and some visual polish.
Going framework-free meant zero build step, zero dependencies, and zero config. I can open index.html in a browser and see exactly what gets deployed. There's something refreshing about that.
CSS custom properties for theming
Instead of hardcoding colors everywhere, I defined a set of CSS custom properties in :root and referenced them throughout the stylesheet. This made it trivial to maintain a consistent palette and later add a light mode — just override the variables under a [data-theme="light"] selector.
Scroll reveal without a library
I wanted elements to fade in as you scroll down the page. Instead of pulling in a library like AOS, I used the browser's built-in IntersectionObserver API. A few lines of JavaScript, a CSS transition on opacity and transform, and it just works.
What I'd do differently
- Extract the navbar and footer into a shared template to avoid repeating them across every page
- Add a favicon and Open Graph meta tags from day one
- Set up a simple markdown-to-HTML pipeline for blog posts instead of writing raw HTML
Takeaways
You don't need a complex stack to build a good-looking personal site. Plain HTML and CSS are more than enough. The constraint of simplicity forced me to think carefully about structure, and the result is a site that loads instantly, has zero JavaScript dependencies, and is easy to maintain.