Why I Built My Portfolio with Vanilla Stack (Instead of Reaching for Heavy Frameworks)

When you decide to build a developer portfolio today, the default advice is almost always the same: spin up a modern JavaScript framework, install a heavy UI component library, configure a bundler, and deploy.

For complex, state-heavy web applications, that stack makes complete sense. For a portfolio website? Often, it is overkill.

When I set out to build CyberNova, my web and AI solutions portfolio, I made a deliberate engineering choice: skip the heavy frameworks and build the entire frontend using a pure Vanilla Stack (HTML5, CSS3, and Vanilla JavaScript).

Here is why going lightweight was the right call—and what it taught me about frontend performance.

1. Eliminating Unnecessary Bloat

Modern frameworks ship with significant runtime overhead before a single line of your own content renders. For a site whose primary job is to showcase projects, technical skills, and services clearly, loading hundreds of kilobytes of JavaScript just to render static sections slows down the user experience.

By sticking to semantic HTML5, modern CSS, and lightweight vanilla scripts, the site stays fast even on slower mobile connections.

2. Total Control Over Layout & Styling

Using pure CSS3 gave me direct, unobstructed control over the design system without fighting framework-specific overrides or bloated utility dependencies:

• CSS Custom Properties (:root): Made managing a consistent dark-mode color palette, spacing scale, and typography effortless.
• CSS Grid & Flexbox: Handled responsive multi-column project cards and navigation layouts natively.
• Zero Specificity Wars: Every style rule was written intentionally, keeping the stylesheet clean, readable, and easy to maintain.

3. Clean, Purposeful JavaScript

Instead of importing third-party packages for simple UI interactions, writing clean vanilla JavaScript kept the logic transparent and dependency-free:

• Smooth mobile menu toggles and active navigation states
• Lightweight scroll animations using the native IntersectionObserver API
• Form handling and interactive UI transitions in just a few dozen lines of code

// Example: Lightweight scroll reveal with IntersectionObserver
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

4. Better SEO & Technical Foundations

Static semantic HTML is naturally crawler-friendly. Pairing clean markup with structured JSON-LD Schema (WebSite and ProfessionalService), proper canonical URLs, and Open Graph metadata ensured search engines could parse the site structure cleanly without relying on client-side rendering workarounds.

When Frameworks Still Win

Choosing vanilla for a portfolio doesn't mean avoiding frameworks everywhere. When I am building full-stack backend systems, authentication flows, or dynamic data-driven platforms (like PHP/Laravel applications or complex dashboards), frameworks provide structure, security patterns, and scalability that plain scripts shouldn't replicate from scratch.

The key is matching the tool to the problem rather than reaching for the heaviest stack out of habit.

Final Thought

Sometimes the strongest engineering decision isn't adding another tool to your package.json—it's knowing how much you can build cleanly without one.

What stack did you use for your latest portfolio, and why? Let me know in the comments!