How I Built Aditya Portfolio: A Neobrutalist React, Vite & Tailwind CSS v4 Showcase

Every developer needs a place to showcase their work, but most portfolio websites end up looking the same. I wanted something with a stronger personality, so I built Aditya Portfolio — a neobrutalist portfolio powered by React, Vite, and Tailwind CSS v4.

Rather than relying on pre-made templates, I focused on creating a fast, responsive, and distinctive experience while keeping the codebase clean and maintainable.

🎨 Design Philosophy: Neobrutalism

Instead of following modern minimal design trends, I chose a neobrutalist approach that emphasizes bold visuals and strong contrast.

Some of the key design elements include:

Bold Black Borders using border-4 border-black
Solid Color Palette with vibrant backgrounds instead of gradients
Hard Offset Shadows using shadow-[4px_4px_0px_rgba(0,0,0,1)] to create a retro desktop-style appearance
High Contrast Typography for improved readability
Simple, Functional Layouts with minimal visual clutter

The goal was to create a portfolio that feels memorable while remaining easy to navigate.

⚡ Performance Optimization

A visually rich interface shouldn't compromise performance. During development, I audited the website and optimized several areas to improve rendering efficiency.

Eliminating Forced Reflow (Layout Thrashing)

One issue came from the scroll progress indicator.

Initially, the scroll handler recalculated layout values such as scrollHeight and clientHeight on every scroll event. Since these values require layout information, repeatedly reading them during scrolling caused unnecessary reflows and reduced rendering performance.

The Solution

I optimized the implementation by:

Calculating the maximum scroll distance only on mount and window resize
Using requestAnimationFrame() to synchronize updates with the browser's rendering cycle
Updating the progress bar directly through a useRef reference instead of triggering React state updates
Registering the scroll listener as passive to improve scrolling performance
useEffect(() => {
let maxScroll =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;

const handleResize = () => {
maxScroll =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
};

let ticking = false;

const handleScroll = () => {
if (!ticking) {
requestAnimationFrame(() => {
const scrollTop =
window.scrollY || document.documentElement.scrollTop;

    const progress =
      maxScroll > 0 ? (scrollTop / maxScroll) * 100 : 0;

    if (progressBarRef.current) {
      progressBarRef.current.style.width = `${progress}%`;
    }

    ticking = false;
  });

  ticking = true;
}

};

window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleScroll, {
passive: true,
});

return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("scroll", handleScroll);
};
}, []);

This reduced unnecessary layout calculations, improved scrolling smoothness, and kept the UI responsive even during continuous scrolling.

🚀 Tech Stack
React
Vite
Tailwind CSS v4
Framer Motion
React Icons
Responsive Design
Performance-focused architecture

Building this portfolio wasn't just about creating a personal website—it was an opportunity to experiment with design systems, optimize browser performance, and apply frontend engineering best practices.

I'm continuously improving it by adding new projects, refining animations, and exploring better optimization techniques.

Portfolio: https://aadi-sharma.dev

I'd love to hear your thoughts or suggestions for future improvements.