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
├── Research.jsx # Research experience cards (VLM research, gait analysis)
├── 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
# Configure the contact form (free key from https://web3forms.com)
cp .env.example .env.local
# then edit .env.local and set WEB3FORMS_KEY
# 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 |
| About | Background story, tech philosophy, personal interests |
| Education | MS CS @ University of Arizona · B.Tech IT @ K.J. Somaiya School of Engineering |
| Skills | Languages · AI/ML · Web Development · Databases & Retrieval · Tools & Platforms |
| Research | Graduate Researcher, D-REP Lab @ UArizona — chart understanding with VLMs · Gait Analysis (IMU + ML) |
| Projects | Boolean IR Engine (sharding + parallelization) · FinRAG (multimodal document QA) |
| Leadership | KJSCE Insignia Art Team Head · Codecell Creative Member |
| Contact | Working contact form (Web3Forms) + 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