🧩 Project Overview
A film portfolio should feel like the medium it is showcasing. This one is built around motion: a projector-styled hero, full-bleed reel video sections, and momentum-based smooth scrolling that makes the whole page move like footage rather than a document.
Built on the Next.js App Router with SEO handled properly — generated sitemap and robots configuration — so the work is discoverable as well as good-looking.
✨ Core Features
Projector-style hero — cinematic entry treatment setting the tone immediately.
Reel video sections — full-bleed showreel playback integrated into the page flow.
Smooth momentum scrolling — Lenis-driven scroll with eased page transitions between routes.
Animated background layers — custom canvas and gradient background treatments.
Experience roadmap — career and project progression as a visual timeline.
Gear rack — equipment and toolset showcase, with technology icons mapped from a data file.
Bento-style about section — modular grid layout for background and capability.
Dedicated gallery route — separate gallery page with its own layout, driven by a typed data file.
Sticky navigation — persistent nav that tracks section position.
SEO configured — generated
sitemap.tsandrobots.ts.
🖥️ Page Highlights
Home — projector hero, reel video, about bento, experience roadmap, gear rack.
Gallery — dedicated showcase route with its own layout and data source.
About — background, timeline, and capability detail.
🔧 Technical Notes
Next.js App Router, TypeScript, Lenis smooth scroll, canvas-based background effects, scroll-triggered animation components. Gallery content and the technology icon map live in src/data/.
Category | Technology |
|---|---|
Framework | Next.js (App Router) |
Language | TypeScript |
Scrolling | Lenis |
Background effects | HTML Canvas |
SEO | Generated sitemap.ts + robots.ts |
🌐 Live Site & Reference
Live: https://film.kkvasan.ca/