Building My Portfolio Website with React & Vite

A deep dive into how I built my portfolio website from scratch using React, Vite, Tailwind CSS, and Framer Motion — complete with a glassmorphism navbar, scroll-driven signature animation, and dark/light mode theming.

12 February 20263 min read
reactvitetailwindcssframer-motionportfolio

The Vision

When I set out to build my portfolio, I wanted something that felt premium — not just another template. The goal was a site that would make visitors pause and explore, with smooth animations, a distinct dark/light mode, and a design language that felt uniquely mine.

Tech Stack

Here's what I used and why:

  • React — Component-based architecture for reusable UI pieces
  • Vite — Lightning-fast dev server and builds
  • Tailwind CSS v4 — Utility-first CSS with custom theme tokens
  • Framer Motion — Declarative animations that just work

The Signature Animation

The most unique feature is the scroll-driven signature animation. As you scroll past the hero section, an SVG of my signature draws itself stroke by stroke.

// Using Framer Motion's useScroll and useTransform
const { scrollYProgress } = useScroll({
  target: heroRef,
  offset: ["start start", "end start"]
});

const pathLength = useTransform(
  scrollYProgress, 
  [0.35, 0.65], 
  [0, 1]
);

The animation is split into three phases:

  1. 0% - 35%: Hero scales down and fades out
  2. 35% - 65%: Signature SVG draws itself using pathLength
  3. 65% - 100%: About Me section slides up

Glassmorphism Navbar

The navbar uses a frosted glass effect that works in both themes:

.navbar {
  background: rgba(10, 10, 10, 0.25);
  backdrop-filter: blur(1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

It only appears after scrolling past the hero, using Framer Motion's scroll-based transforms for a smooth reveal.

Dark & Light Mode

I didn't want a simple "invert colors" approach. Each mode has its own carefully curated palette:

TokenLightDark
Primary#182E6F (Navy)#8b5cf6 (Purple)
Background#FFFDE7 (Warm White)#0a0a0a (Near Black)
Accent#141e2e (Mirage)#06b6d4 (Cyan)

The theme persists in localStorage and respects the system preference on first visit.

What I Learned

Building this portfolio taught me a lot about:

  • Scroll-based animations — Framer Motion's useScroll is incredibly powerful
  • Design systems — Having consistent tokens made theming easy
  • Performance — Lazy loading sections and optimizing images matters
  • Accessibility — Dark mode, keyboard navigation, and semantic HTML

What's Next

I'm planning to add an Experience timeline section and potentially integrate a blog (you're reading it right now! 🎉).

Check out the portfolio at umashankars.co.in.