A cyberpunk-aesthetic developer portfolio featuring a WebGL 4D Tesseract, particle disintegration effects, and immersive scroll-driven animations — built with React, Vite & Tailwind CSS.
| Feature | Description |
|---|---|
| 4D Tesseract (WebGL) | A real-time 4D hypercube rendered via Three.js that teleports from the hero to a corner widget on scroll — complete with expanding cyan rings and a 620 ms cooldown lock |
| Particle Disintegration | Elements dissolve into particles as you scroll, creating a cinematic visual experience |
| Scroll-Spy Sidebar | Fixed left nav with IntersectionObserver scroll-spy and a layoutId animated glow ring that slides between active sections |
| Glassmorphism Hero | Backdrop-blur card with scroll-triggered fade animations and an animated EXPLORE chevron |
| Starfield Background | Multi-layer CSS keyframe galaxy — three independent star layers creating depth |
| Framer Motion | Spring-physics animations, scroll-triggered transitions, and smooth section reveals throughout |
- React 18 + Vite 7 — lightning-fast HMR dev experience
- Tailwind CSS 3 — utility-first styling with custom cyberpunk color palette
- Three.js / WebGL — interactive 4D Tesseract rendered on canvas with custom GLSL shaders
- Framer Motion — scroll-triggered animations, spring-physics navbar indicator, teleport phases
- React Icons — comprehensive icon library
- Custom Fonts — Abolition (headings), Lil Grotesk (body)
src/
├── App.jsx # Root layout & section orchestration
├── NavbarPortal.jsx # Fixed left sidebar nav with scroll-spy & glow indicator
├── FloatingSphere.jsx # Tesseract controller — teleports hero ↔ mini on scroll
├── Tesseract.jsx # Three.js WebGL 4D hypercube renderer
├── Hero.jsx # Landing section (glassmorphism card + scroll-fade)
├── About.jsx # About me — background, philosophy, interests
├── Education.jsx # Education timeline cards
├── Skills.jsx # Skill categories with icons
├── SelectedWork.jsx # Interactive project showcase panel
├── Leadership.jsx # Leadership & teamwork highlights
├── Contact.jsx # Contact form + social links
├── DisintegrationWrapper.jsx # Particle disintegration scroll effect
├── ParticleCanvas.jsx # Canvas-based particle system
├── particleStore.js # Global particle state management
├── index.css # Global styles, fonts, starfield keyframes
└── assets/ # Static assets & GLSL shaders
# Clone the repo
git clone https://github.com/codeC02003/My-portfolio.git
cd My-portfolio
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview| Section | Highlights |
|---|---|
| Hero | Name, title, location · CTA buttons — GitHub, LinkedIn, Email, Resume |
| About | Background story, tech philosophy, personal interests |
| Education | MS CS @ University of Arizona · BE IT @ K.J. Somaiya College of Engineering |
| Skills | C++, Python, JavaScript / React, Node.js, Tailwind CSS / Docker, AWS, Git / Figma, Canva |
| Projects | Gait Analysis (IoT + ML) · WeConnect (NGO platform) · Ticket Booking System |
| Leadership | KJSCE Insignia Art Team Head · Codecell Creative Member |
| Contact | Email form + all social links |
- Semantic HTML structure with proper heading hierarchy
- Meta tags optimized for search engines and social sharing
- Lazy-loaded assets and code-split bundles via Vite
- Deployed on Vercel with automatic HTTPS and global CDN
- Lighthouse-optimized for performance, accessibility, and best practices