Skip to content

replit.md

Latest commit

 

History

History
35 lines (30 loc) · 1.82 KB

replit.md

File metadata and controls

35 lines (30 loc) · 1.82 KB

Aniket Khullar - 3D Portfolio Website

Overview

A modern interactive 3D portfolio website for web developer Aniket Khullar. Features dark futuristic theme with neon blue/purple lighting, 3D animated hero section with floating geometric shapes, smooth scroll animations, and mobile responsiveness.

Recent Changes

  • Feb 2026: Initial build - all sections implemented (Hero 3D, About, Skills, Projects, Experience, Contact, Music Toggle, Navbar)

Architecture

  • Frontend: React + TypeScript with Vite
  • 3D Graphics: React Three Fiber (@react-three/fiber) + Drei helpers
  • Animations: Framer Motion for scroll/hover animations
  • Styling: Tailwind CSS with custom dark neon theme
  • State: Zustand for audio state management
  • Server: Express.js serving the frontend
  • Fonts: Inter + Space Grotesk (Google Fonts)

Project Structure

  • client/src/App.tsx - Main app component composing all sections
  • client/src/components/Navbar.tsx - Fixed navigation with scroll tracking
  • client/src/components/Hero3D.tsx - 3D animated hero with floating shapes, particles, stars
  • client/src/components/AboutSection.tsx - Profile card and introduction
  • client/src/components/SkillsSection.tsx - 3D rotating cubes + skill cards grid
  • client/src/components/ProjectsSection.tsx - Styleka & GlossyTips project tiles
  • client/src/components/ExperienceSection.tsx - Achievements cards grid
  • client/src/components/ContactSection.tsx - LinkedIn, GitHub, Email, Resume links
  • client/src/components/MusicToggle.tsx - Background music on/off button
  • client/src/lib/stores/useAudio.tsx - Audio state management
  • client/src/index.css - Global styles, neon theme, animations

Theme

  • Dark background (#0a0a0f)
  • Neon blue (#00d4ff), purple (#a855f7), pink (#ec4899)
  • Glass-morphism card effects
  • Gradient text effects