When I decided to rebuild my portfolio, I faced a choice that every developer knows well: reach for a framework (Next.js? Astro? Gatsby?) or build it from scratch with vanilla HTML, CSS, and JavaScript.

I chose the latter. And honestly? It was one of the best decisions I've made as a developer. Here's why.

The Case for Vanilla

Frameworks are incredible tools. They solve real problems — routing, SSR, bundling, data fetching. But for a personal portfolio, most of those concerns don't apply. My site has a few sections, some animations, and a contact form. That's it.

By going vanilla, I got:

  • Instant load times — No JavaScript framework to parse. No hydration. Just HTML that renders immediately.
  • Total creative control — Every animation, every hover effect, every pixel is mine. No framework opinions to fight.
  • No build step — Edit a file, refresh the browser, see the change. That's it.
  • A deeper understanding — Building without a framework forces you to actually understand how the web works.
✦ ✦ ✦

How I Structured It

The site is a single index.html file with embedded CSS and JS. I know — "embedded styles and scripts?" But for a site this size, it's the right call. No extra HTTP requests, no dependency management. Every page load is one request, one response, done.

Here's the rough structure:

index.html
├── <style>    /* All CSS in one block */
├── <nav>      /* Fixed navbar with scroll effect */
├── Sections   /* Hero, About, Skills, Projects, Timeline, Contact */
├── <footer>
└── <script>   /* Scroll effects, nav toggle, form handling */

Each section is a <section> with an ID for smooth scrolling. The CSS uses custom properties for theming, and the Intersection Observer API handles all the scroll-reveal animations.

Making It Feel Alive

A portfolio shouldn't be boring. I added small touches that make the site feel playful:

  • Cursor glow — A subtle radial gradient that follows your mouse.
  • Scroll progress bar — A thin blue line at the top showing your position.
  • Typewriter effect — The hero heading cycles through different words.
  • Micro-interactions — Cards lift on hover, links have smooth transitions, and the navbar blurs on scroll.

None of these require a library. They're all pure CSS and vanilla JS, which means they're light, fast, and maintainable.

"The best tool is the one that gets out of your way and lets you build."

What About the Blog?

For the blog, I created a separate blog.html page and individual post files in a blog/ directory. It's not a CMS — there's no database, no admin panel, no markdown parser. But it works perfectly for my use case. When I want to write a new post, I create an HTML file.

Is this approach right for everyone? No. But for a personal site where you want maximum performance and full control, going vanilla is a fantastic choice.

What I Learned

Building this portfolio reminded me why I love web development. It's not about having the fanciest toolchain or the most popular framework. It's about creating something that works, feels good, and is unmistakably yours.

If you're thinking about rebuilding your site, I challenge you to try it without a framework. You might be surprised at what you learn — and how much fun it is.

Feel free to reach out if you want to chat about it, or check out the source code on GitHub.