Pagani Zonda — Interactive Hypercar Portfolio

A cinematic, high-performance interactive portfolio inspired by the Pagani Zonda

🔥 Live Demo

---

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 🔋 Features
• 🧱 Project Structure
• 🤸 Quick Start
• 🎨 UI & Animations
• 📎 Assets
• 🚀 More

---

✨ Introduction

Pagani Zonda Portfolio is a modern, visually immersive web experience inspired by the design philosophy and craftsmanship of the legendary Pagani Zonda.

This project focuses on:

• High-end UI aesthetics
• Smooth animations & transitions
• Interactive scrolling experiences
• Clean component architecture
• Performance-optimized rendering

Built with Next.js App Router, TypeScript, and TailwindCSS, the project delivers a premium automotive showcase experience similar to luxury brand websites.

---

⚙️ Tech Stack

Frontend

• Next.js 15 (App Router)
• React 18
• TypeScript
• Tailwind CSS

Animations & Graphics

• Framer Motion
• Canvas-based scroll effects
• Custom animation timelines

Tooling

• ESLint
• PostCSS
• Modern folder architecture
• Fully responsive layout

Deployment

• Vercel

---

🔋 Features

🚘 Pagani Zonda Experience

• Dedicated Zonda showcase section
• Smooth scroll-based storytelling
• Performance-focused layout

🎨 Color Selector

• Interactive color switching
• Dynamic UI updates
• Car theme transitions

🧭 Specs & Features Grid

• Engine details
• Performance metrics
• Design highlights
• Responsive grid layout

🌀 Scroll Canvas Animation

• Frame-by-frame scroll animation
• Optimized canvas rendering
• Smooth interpolation

🌌 Vibe Section

• Cinematic typography
• Luxury brand aesthetics
• Motion-based storytelling

📱 Fully Responsive

• Mobile-first design
• Desktop immersive layout
• Optimized breakpoints

---

🧱 Project Structure

pratham22r-pagani_portfolio/
│
├── app/
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
│
├── components/
│ ├── Navbar.tsx
│ ├── Footer.tsx
│ ├── Features.tsx
│ ├── SpecsGrid.tsx
│ ├── ColorSelector.tsx
│ ├── VibeSection.tsx
│ ├── ZondaExperience.tsx
│ └── ZondaScrollCanvas.tsx
│
├── data/
│ └── carData.ts
│
├── public/
│ └── readme/
│
├── next.config.ts
├── eslint.config.mjs
├── postcss.config.mjs
├── tsconfig.json
└── package.json

---

🤸 Quick Start

1️⃣ Clone the Repository

git clone https://github.com/Pratham22R/pagani_portfolio.git
cd pratham22r-pagani_portfolio

2️⃣ Install Dependencies

npm install

3️⃣ Run Development Server

npm run dev

4️⃣ Open in Browser

http://localhost:3000

---

🎨 UI & Animations

• Smooth scroll-driven transitions
• Framer Motion page reveals
• GPU-accelerated animations
• Canvas-based storytelling visuals
• Minimal luxury design language

Inspired by:

• Pagani official website
• Luxury automotive landing pages
• High-end brand interaction patterns

---

📎 Assets

All visual assets including:

• Cover images
• Demo banners
• Screenshots
• UI previews

are located inside:

public/readme/

---

More

Author

Pratham Raghuvanshi

• Frontend Developer
• Next.js Enthusiast
• UI/UX Explorer

Show Support

If you like this project:

• Star the repository
• Fork it
• Share it

---

Final Note

This project is built for:

• Portfolio showcase
• UI Inspiration
• Animation Practice
• Next.js App Router mastery

Not affiliated with Pagani Automobili S.p.A. Created purely for educational and showcase purposes.

---