A high-end, immersive personal portfolio website built with Next.js, Framer Motion, and Tailwind CSS. Designed to break away from traditional resume templates, this portfolio uses pure scroll physics, intelligent WebGL-style node interactions, and cinematic frame sequences to tell a story about bridging Data Science with Full-Stack Engineering.
- Cinematic Scrollytelling Hero: A custom-built 99-frame high-resolution video sequence driven entirely by precise scroll progress using
framer-motion'suseScrollmapped to an HTML5<canvas>. - Interactive Neural Network Background: A globally running, lightweight 2D canvas particle system that mimics a neural network. It actively draws data connections between floating nodes and physically reacts to user mouse movements.
- Dynamic System Architectures: Embedded highly-stylized, interactive SVG architecture maps for individual projects. Features four unique geometric animated layouts including: Branching logic, Linear pipelines, Diamond Node Cycles, and Y-Convergence patterns.
- Glassmorphism & Deep Dark UI: Carefully crafted gradient overlays and strict
#121212backgrounds layered beneathbackdrop-blurcomponents to enforce a premium, modern aesthetic.
- Framework: Next.js (App Router)
- Styling: Tailwind CSS
- Animation Engine: Framer Motion
- Icons: React Icons
- Language: TypeScript
- Clone the repository:
git clone https://github.com/pranavv1210/Personal-Portfolio-Website.git- Install dependencies:
npm install- Run the development server:
npm run devOpen http://localhost:3000 to view it in the browser.
Deployable effortlessly on Vercel or Netlify.