✨ Ravi Damor — Portfolio & Tech Showcase

A premium, ultra-interactive, and highly visual personal portfolio website built using a state-of-the-art web stack. This site acts as a professional resume, project showcase, and interactive canvas showcasing advanced front-end interaction, custom synthesis sound design, and premium UI animations.

Live site: ravithemore.vercel.app

---

🚀 Key Features

🌗 1. Persistent Dark / Light Mode Theme Engine

• Fully Persistent: Uses next-themes to remember the user's selected theme across page visits, reloads, and route navigation.
• System Preference Sync: Automatically checks and defaults to the user's operating system preferences on first load.
• Class Variant Hook: Configured Tailwind CSS v4's class variant @variant dark (.dark &); to cleanly toggle colors for background shapes, cards, text, and divider borders under a unified state.

🌀 2. Cinematic Page-Slide Transitions

• Native View Transitions: Harnesses the modern View Transitions API in standard CSS for buttery-smooth visual page switches.
• Premium Overlay Slide: The incoming theme layer slides in horizontally from the right over the preceding layer using custom cubic-bezier spring physics (350ms cubic-bezier(0.16, 1, 0.3, 1)), complete with a subtle overlay drop-shadow for depth.

🔊 3. Tactile Audio Interactions (Web Audio API)

Designed and synthesized premium sound effects natively in code with zero external assets, ensuring instantaneous latency-free triggers:

• Mechanical Switch Mode Click: Toggling the light/dark mode switch produces a satisfying mechanical tactile contact sound.
• Elastic Pull & Snap (Footer): Grabbing and dragging the animated avatar GIF in the footer triggers a rising elastic pitch sweep (rubber band tension), followed by a snappy "boing" pitch wobble decay upon release.

🎬 4. Dynamic Project Video Streamer

• Dynamic Slugs: Detail routes under app/projects/[slug]/page.tsx parse route parameters and automatically retrieve project metadata from the central database.
• Static Streaming: Resolves relative URLs into clean public root asset files in the browser (/Project/ProjectVideos/...), streaming corresponding project screencasts automatically on load.

🎨 5. Theme-Adaptive Vector Patterns

• Dotted Grids & Gradients: Dynamic variables bind dot patterns (.dotted-background), line grids (.grid-background), and repeats (.divider-background) to dark/light colors smoothly using pure CSS variables.
• Canvas Dot Matrix: Beautiful canvas grid drawings powered by custom mathematical spring physics.

---

🛠️ Technology Stack

• Core Framework: Next.js 16 (App Router) & React 19
• Language: TypeScript
• Styling System: Tailwind CSS v4, PostCSS, Vanilla CSS variables
• Physics Animations: Motion (Framer Motion v12)
• Icon Sets: Lucide React & React Icons
• Integrations:
  • Supabase: Secure contact form database storage (lib/supabase.ts).
  • Cal.com: Direct booking meeting widgets embedded inside the Profile card.

---

📂 Project Directory Structure

ravithemore/
├── app/ # Next.js 16 App Router Routing and Pages
│ ├── Component/ # Modular layouts and portfolio segments
│ │ ├── Profile/ # Avatar card, meet scheduler, live ticking clock
│ │ ├── HeroPage/ # Bio details, experience badges, and introductions
│ │ ├── Project/ # Projects grid layouts and custom cards
│ │ ├── Global/ # Navbar dockbar, dividers, below-blurs, back-to-top
│ │ └── Footer/ # Draggable coder GIF with pull/snap sounds
│ ├── blogs/ # Blog layout, lists, and articles
│ ├── projects/ # Projects routes and dynamic slug detail pages
│ ├── get-in-touch/ # Supabase-integrated contact forms
│ ├── globals.css # Core styling tokens, animation variants & CSS variables
│ └── layout.tsx # Global wrappers (RootLayout, theme providers)
├── components/ # Atomic and decoupled UI helpers
│ ├── ui/ # Basic spinner, separator, tooltip components
│ ├── motion-primitives/ # Framer Motion utility springs (loops, custom accordions)
│ └── theme-provider.tsx # next-themes hydration-safe layout hook wrapper
├── lib/ # Central logic and asset stores
│ ├── data/ # Dynamic project metadata database (project.tsx)
│ ├── assest/ # Aggregation files and image imports
│ └── supabase.ts # Supabase DB client setup
└── public/ # Public static media directory (GIFs, PNGs, and MP4s)

---

🏁 Getting Started

1. Clone & Install Dependencies

cd ravithemore
npm install

2. Configure Environment Variables

Create a .env.local file inside the ravithemore directory:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-urlNEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anonymous-key

3. Launch Development Server

npm run dev

Open http://localhost:3000 in your browser to interact with the portfolio!

---

📝 Customization

• Projects Data: To add, remove, or modify featured projects, update the registry inside lib/data/project.tsx.
• Blog Listing: To edit article metadata, configure the listing indexes inside app/Components/Blogs.tsx.