A cinematic scroll-driven developer portfolio built with Next.js 16, Framer Motion and Tailwind CSS 4. Features scroll-synced video, animated bento-grid projects, and a functional contact form with email delivery.
| Feature | Description |
|---|---|
| Scroll-Synced Video | Video playback tied to scroll position using useScroll and useSpring from Framer Motion |
| Blob Pre-Download | Entire video is downloaded as a blob via ReadableStream before the site loads — plays from memory for zero-buffer scrolling |
| Adaptive Video Quality | Automatic bandwidth test on load — serves 1080p (≥3 Mbps) or 720p, both re-encoded with every-frame keyframes for smooth scrubbing |
| Auto-Cleanup on Exit | Blob URL revoked via beforeunload, visibilitychange, and React unmount — frees browser memory when user leaves |
| Futuristic Loading Screen | Animated loading overlay with gradient orbs, scanning line, spinning rings, and real download progress tracking |
| Cinematic Text Overlays | Multi-section text overlays that fade, scale, and blur based on scroll progress |
| Smooth Spring Physics | Spring-based scroll interpolation with RAF-throttled seeking and fastSeek() for buttery smooth video scrubbing |
| Scroll Indicator | Animated "Scroll" indicator with bouncing arrow on initial load |
| Feature | Description |
|---|---|
| macOS-Style Dock | Floating navigation dock with spring-based magnetic scaling on hover |
| Responsive Dock Overflow | Dock auto-adjusts visible icons based on screen width; extra items collapse into a "More" popup menu |
| Custom Contact Fields | Floating labels, left-side icons (user/envelope/chat), glassmorphic containers, and animated gradient underlines on focus |
| Custom Form Validation | Animated inline error messages with red border/icon states — replaces default browser tooltips |
| Honeypot Spam Protection | Hidden honeypot field on contact and testimonial forms to trap bots — bots receive silent 200 OK to prevent detection |
| Testimonial Submission | Visitors can submit reviews via an in-page "Write a Review" modal — submissions are emailed for manual approval |
| Infinite Marquee Carousel | Testimonial cards auto-scroll in an infinite loop (tripled array), pauses on hover, with gradient fade edges |
| Shared Layout Animation | Project cards morph into expanded modals via Framer Motion layoutId for seamless transitions |
| View More / Show Less | Progressive project loading with animated expand/collapse and auto-scroll-back on collapse |
| Dock Icon Tooltips | Animated label tooltips with AnimatePresence on dock icon hover |
| Smooth Scroll Navigation | One-page navigation via anchor links with scroll-behavior: smooth |
| Framer Motion Everywhere | whileInView, whileHover, staggered delays, and spring physics throughout |
| Glassmorphism Design | backdrop-blur, semi-transparent borders, and frosted glass cards |
| Background Ambience | Subtle gradient orbs with blur-[120px] across all sections |
| Feature | Description |
|---|---|
| Lazy Loading | All below-the-fold sections lazy-loaded via next/dynamic for fast initial paint |
| 1-Year Immutable Video Cache | Cache-Control: public, max-age=31536000, immutable on .mp4 files with auto cache-busting via file mtime |
| Gzip/Brotli Compression | compress: true in Next.js config for smaller payloads |
| AVIF/WebP Image Formats | Next.js image optimization with modern format support and responsive sizes hints |
| Dynamic OG Image | Auto-generated Open Graph image using next/og with edge runtime |
| Dynamic Favicon | Code-generated SVG favicon via next/og — no static file needed |
| Full SEO Metadata | Open Graph, Twitter Cards, canonical URL, robots directives, JSON-LD |
| Sitemap & Robots | Auto-generated /sitemap.xml and /robots.txt via Next.js route handlers |
| Google-Ready | Structured data (schema.org/Person) with knowsAbout skills array for rich search results |
| Feature | Description |
|---|---|
| Security Headers | X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy (camera/mic/geo disabled) via next.config.mjs |
| XSS Sanitization | escapeHtml() sanitizes all user inputs server-side before embedding in email templates |
| Server-Side Validation | Input length limits enforced on API (name: 50, email: 100, message: 3000) + email regex check |
| Custom HTML Email Templates | Rich dark-themed email bodies with gradient headers, sender info cards, and quick-reply buttons |
| Technology | Version | Purpose |
|---|---|---|
| Next.js | 16.1.6 | React Framework (App Router, API Routes, SSR) |
| React | 19.2.4 | UI Library with Hooks |
| Framer Motion | 12.x | Scroll animations, layout transitions, spring physics |
| Tailwind CSS | 4.x | Utility-first styling with custom theme |
| Nodemailer | 8.x | Email delivery for contact form & testimonials |
| ESLint | 10.x | Code linting with eslint-config-next |
| Vercel | — | Hosting & deployment platform |
portfolio/
├── public/
│ ├── hero-video-720p.mp4 # Scroll-synced hero video (720p, ~4 MB)
│ ├── hero-video-1080p.mp4 # Scroll-synced hero video (1080p, ~11 MB)
│ ├── projects/ # Project screenshots
│ │ └── QuickMeet HomePage.png
│ └── resume.pdf # Downloadable resume
│
├── src/
│ ├── app/
│ │ ├── api/
│ │ │ ├── send-email/
│ │ │ │ └── route.js # Contact form email API
│ │ │ └── submit-testimonial/
│ │ │ └── route.js # Testimonial submission API
│ │ │
│ │ ├── globals.css # Global styles & Tailwind imports
│ │ ├── icon.jsx # Dynamic favicon (next/og)
│ │ ├── layout.jsx # Root layout with SEO metadata
│ │ ├── opengraph-image.jsx # Dynamic OG image (next/og)
│ │ ├── page.jsx # Home page with JSON-LD
│ │ ├── robots.js # Crawler rules (/robots.txt)
│ │ └── sitemap.js # Sitemap generator (/sitemap.xml)
│ │
│ └── components/
│ ├── Blog.jsx # Insights / article cards
│ ├── Contact.jsx # Contact form with custom validation, socials & footer
│ ├── Dock.jsx # macOS-style floating navigation with overflow menu
│ ├── Hero.jsx # Hero wrapper + blob pre-download + bandwidth detection
│ ├── LoadingScreen.jsx # Futuristic loading overlay with real progress
│ ├── Overlay.jsx # Scroll-driven text overlays
│ ├── Projects.jsx # Bento grid projects showcase
│ ├── ScrollyVideo.jsx # Scroll-to-video sync engine (accepts blob URL)
│ ├── Skills.jsx # Technical skills section
│ ├── Testimonials.jsx # Testimonial carousel & form
│ └── Timeline.jsx # Journey / experience timeline
│
├── .env.local # Environment variables (git-ignored)
├── jsconfig.json # Path alias (@/ → ./src/)
├── next.config.mjs # Next.js configuration
├── postcss.config.mjs # PostCSS with Tailwind plugin
├── package.json # Dependencies & scripts
├── LICENSE # MIT License
└── README.md # Project documentation
- Node.js 18+ (recommended: 22.x LTS)
- npm package manager
- Gmail account with App Password for email functionality
-
Clone the repository
git clone https://github.com/arkaghosh2005/Portfolio.git cd Portfolio -
Install dependencies
npm install
-
Configure environment variables (see Environment Variables)
-
Start the development server
npm run dev
-
Open your browser and navigate to
http://localhost:3000
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Create optimized production build |
npm run start |
Serve the production build locally |
npm run lint |
Run ESLint across the project |
Create a .env.local file in the project root:
# Gmail credentials for contact form & testimonial emails
EMAIL_USER=your_gmail_address@gmail.com
EMAIL_PASS=your_gmail_app_password
# Public site URL (used for SEO metadata, sitemap, OG images)
NEXT_PUBLIC_SITE_URL=https://your-domain.comNote:
EMAIL_PASSmust be a Gmail App Password, not your regular password. This requires 2FA enabled on your Google account.
If you find this project helpful or inspiring, consider supporting its development!
Your support helps cover hosting costs and enables new features. Every contribution is greatly appreciated! ☕✨
This project is licensed under the MIT License — see the LICENSE file for details.
Made with ❤️ using Next.js, Framer Motion and Tailwind CSS by Arka Ghosh
