This personal portfolio is made using Next.js and Tailwind CSS, with the goal of making it an interactive web application rather than a static showcase.

The site is split into two panels:

• On the left, I implemented persistent navigation with keyboard shortcuts (H, A, E, P, U), live local time, social links, and a Firebase-powered like counter.

• On the right, I built the core sections: About, an Experience/Education timeline with tabbed navigation, a Projects carousel with custom media-player style controls, and a real-time public chat modal that uses Firebase to store and sync messages while assigning random “Avengers-inspired” usernames.

Technically, I focused on:

• Next.js (App Router) for structured layouts and SSR.

• Framer Motion for performant animations and section transitions.

• Firebase for persisting likes and powering real-time chat with snapshot listeners.

• React hooks & context for state management.

• Lazy loading + memorization for performance optimization.

• Canvas + motion utilities for playful visuals like the Vegas-style cursor-following sphere and draggable floating tech-stack icons.

I designed the entire structure in Figma, then translated it into production with pixel-accurate Tailwind components, ensuring a balance between engineering depth and creative UX.