Sample Portfolio

A high-performance, dark-themed 3D Creator portfolio landing page built using React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React.

---

🚀 Getting Started

1. Navigate to the project directory

Open your terminal (PowerShell / Command Prompt / Bash) and navigate to the project folder:

cd"C:\Users\arjun\.gemini\antigravity-ide\scratch\jack-3d-portfolio"

2. Install Dependencies (if not already installed)

npm install

3. Start the Development Server

npm run dev

By default, this will run the local server at http://localhost:5173/.

---

🛠️ Other Useful Commands

Command	Description
npm run dev	Runs the Vite development server with Hot Module Replacement (HMR).
npm run build	Runs TypeScript type checking (tsc -b) and generates the production bundle in dist/.
npm run preview	Serves the production build locally to test production performance.

---

✨ Features & Architecture

• Dark Theme Palette: #0C0C0C background with Google Font Kanit (weights 300–900).
• Hero Section:
  • Full-screen layout with 4-item navigation bar ("About", "Price", "Projects", "Contact").
  • Massive .hero-heading gradient typography (Hi, i'm jack).
  • Interactive Magnet 3D hero portrait that follows cursor movements.
  • Custom pill ContactButton with vibrant multi-stop gradient, inset purple glow, and white outline.
• Marquee Section:
  • Dual horizontal rows moving in opposite directions based on scroll offset.
  • 21 animated GIFs from motionsites.ai.
• About Section:
  • 4 floating 3D corner artifacts (Moon, 3D object, Lego, 3D group).
  • Character-by-character scroll-linked text opacity reveal.
• Services Section:
  • Crisp white background with rounded top corners and 5 numbered services.
• Projects Section:
  • 3 sticky-stacking project cards that scale down smoothly on scroll.
  • Multi-image project showcase with CloudFront visuals and "Live Project" ghost buttons.
• Interactive Contact Modal:
  • Floating dialog with project inquiry form and feedback state.