3D Portfolio Universe — Muhammad Aman Khan

An immersive, space-themed interactive portfolio where each planet is a portfolio section. Built with React Three Fiber, GSAP, and Framer Motion.

Live: coming soon

---

Features

• Galaxy scene — procedural starfield, spiral galaxy particles, nebula clouds, sun core with bloom
• Planet navigation — 6 interactive planets, each opening a holographic content panel
• Camera flight — GSAP-powered cinematic camera travel between planets
• Holographic UI — glassmorphism panels with scanlines, corner accents, and Framer Motion animations
• HUD — SVG galaxy minimap, planet info card on hover, hint overlay for first-time visitors
• Keyboard shortcut — ESC to return to galaxy from any planet
• Custom cursor — dot + lagging ring, mix-blend-mode: difference

Planets

Planet	Section
Blue	About
Purple	Projects
Teal	Skills
Amber	Experience
Rose	Contact
Gold (rings)	Vault (auth coming soon)

Tech Stack

Layer	Tech
Framework	React 19 + TypeScript + Vite
3D	Three.js, React Three Fiber, Drei
Post-processing	@react-three/postprocessing — Bloom, Vignette
Animation	GSAP (camera), Framer Motion (UI), @react-spring/three (hover)
State	Zustand
Styling	Tailwind CSS 4, custom holographic CSS
Contact form	EmailJS

Getting Started

npm install
npm run dev

Configuration

EmailJS (contact form)

Set your credentials in src/sections/contact.data.ts:

emailjs: {
  serviceId:  'YOUR_SERVICE_ID',
  templateId: 'YOUR_TEMPLATE_ID',
  publicKey:  'YOUR_PUBLIC_KEY',
}

Personal data

All content lives in src/sections/:

src/sections/
├── about.data.ts
├── projects.data.ts
├── skills.data.ts
├── experience.data.ts
└── contact.data.ts

Project Structure

src/
├── scene/              # Three.js / R3F scene
│   ├── environment/    # Starfield, galaxy, nebula, sun
│   ├── planets/        # Planet meshes, labels, moons, rings
│   ├── camera/         # CameraRig (GSAP), CameraControls
│   └── postprocessing/ # Bloom + Vignette
├── components/
│   ├── layout/         # LoadingScreen, CustomCursor, NavHUD, BackButton,
│   │                   # HintOverlay, PlanetInfoCard
│   ├── panels/         # HoloPanel + 6 content panels
│   └── cards/          # ProjectCard, SkillBadge
├── store/              # Zustand: useSceneStore, useUIStore
├── sections/           # Content data files
├── constants/          # Planet configs, scene config
├── types/              # TypeScript interfaces
├── lib/                # Math utils, keyboard shortcuts
└── styles/             # holographic.css

Contact

Muhammad Aman Khan amaanwaseem24@hotmail.com github.com/amaank23 · linkedin.com/in/amankhandev