Aarush Karak — Portfolio

3D spatial portfolio built with React 19 + Three.js + TypeScript 6

Live Demo · Features · Tech Stack

---

A dark cinematic portfolio with interactive 3D scenes powered by React Three Fiber — featuring floating geometries, particle constellations, a scroll-driven timeline, and 6 color themes.

Demo

→ aarushkarak.vercel.app

Features

• 6 immersive 3D scenes — Hero, About, Experience, Skills, Projects, Contact — each with unique Three.js backgrounds
• Scroll-driven 3D timeline — Experience page with animated nodes on a curved spatial path
• Particle constellations — Skills scene with reactive Three.js particle system
• 5 color themes — Magma, Forest, Ocean, Sunset, Midnight — dynamically switchable
• 3D tilt cards — Project cards with mouse-driven perspective transforms
• Custom cursor with particle trail — Reads theme colors dynamically
• Smooth page transitions — Spatial scale+rotate animations between pages
• Lenis smooth scroll — Butter-smooth scrolling throughout
• Fully responsive — Works across desktop, tablet, and mobile

Tech Stack

Layer	Technology
Framework	React 19 + TypeScript 6
3D Engine	React Three Fiber 9 + Drei 10 + Three.js 0.185
Build	Vite 8
Styling	Tailwind CSS 3
Animation	Framer Motion + Lenis
Post-processing	@react-three/postprocessing
Routing	React Router DOM 7

Getting Started

git clone https://github.com/3ni8ma/aarushkarak-website.git
cd aarushkarak-website
npm install
npm run dev

Project Structure

src/
  assets/         # Static assets (images)
  components/     # Reusable UI components
    about/        # AboutScene (floating 3D geometries)
    contact/      # ContactScene (reactive particle field)
    experience/   # ExperienceScene (3D scroll timeline)
    home/         # HeroScene (R3F geometries + particles)
    layout/       # Navbar, Footer, PageTransition
    projects/     # ProjectsSection (3D tilt cards)
    skills/       # SkillsScene (particle constellation)
    ui/           # GlassCard, SectionHeading, Tag, AnimatedCounter
  hooks/          # Custom React hooks (useThemeColors, etc.)
  pages/          # Route pages
  App.tsx         # Root component with routes
  main.tsx        # Entry point
  index.css       # Global styles + Tailwind directives
public/           # Static files (images, favicon, resume.pdf)

Scripts

• npm run dev — Start development server
• npm run build — Type-check and build for production
• npm run lint — Lint all source files
• npm run preview — Preview production build locally

License

MIT