██████╗ ██████╗ █████╗ ████████╗██╗ ██╗ █████╗ ███╗ ███╗███████╗███████╗██╗ ██╗
██╔══██╗██╔══██╗██╔══██╗╚══██╔══╝██║ ██║██╔══██╗████╗ ████║██╔════╝██╔════╝██║ ██║
██████╔╝██████╔╝███████║ ██║ ███████║███████║██╔████╔██║█████╗ ███████╗███████║
██╔═══╝ ██╔══██╗██╔══██║ ██║ ██╔══██║██╔══██║██║╚██╔╝██║██╔══╝ ╚════██║██╔══██║
██║ ██║ ██║██║ ██║ ██║ ██║ ██║██║ ██║██║ ╚═╝ ██║███████╗███████║██║ ██║
╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝╚══════╝╚═╝ ╚═╝
"Visual storytelling through light, motion, and precision."
A cinematic, dark-themed portfolio built for award-winning cinematographer and video editor Prathamesh Sutar. Designed to leave a lasting impression — every frame, every pixel, every motion is intentional.
This isn't a template. This is a visual experience.
| Feature | Description |
|---|---|
| 🎥 Cinematic Hero | Scan-line reveal animation with parallax photo and red laser effect |
| 🖱️ Custom Cursor | Brand-specific cursor that reacts to interactive elements |
| 🌌 Live Canvas BG | Animated particle/noise canvas background |
| 🃏 Rotating Card | 3D-flipping card showcasing key skills or works |
| 📸 Instagram Section | Embedded live Instagram feed integration |
| 🛠️ Arsenal Section | Tools & tech stack display with hover effects |
| 🎞️ Video Web Section | Cinematic video reel / showreel embed |
| 📬 Contact Section | Animated contact form with smooth reveal |
| 🔤 Stagger Animations | Letter-by-letter, word-by-word entrance effects |
| 📱 Fully Responsive | Looks stunning on all devices |
| ⚡ Optimized SEO | Full OpenGraph, Twitter Card & metadata setup |
├── Framework → Next.js 15 (App Router)
├── Language → TypeScript
├── Styling → Tailwind CSS + Custom CSS
├── Animations → Framer Motion
├── Fonts → Bebas Neue · Inter · Space Mono (Google Fonts)
├── Canvas → HTML5 Canvas API
├── Deployment → Vercel
└── Version Ctrl → Git + GitHub
- Node.js
v18+ - npm / yarn / pnpm / bun
# Clone the repository
git clone https://github.com/PS068/prathamesh_editor_portfolio.git
# Navigate into the project
cd prathamesh_editor_portfolio
# Install dependencies
npm installnpm run devOpen http://localhost:3000 in your browser.
npm run build
npm startsrc/
├── app/
│ ├── layout.tsx # Root layout + SEO metadata
│ ├── page.tsx # Main page — assembles all sections
│ └── globals.css # Global styles, animations, font vars
│
└── components/
├── HeroSection.tsx # Cinematic hero with scan-line reveal
├── BackgroundCanvas.tsx # Animated particle canvas background
├── RotatingCard.tsx # 3D flipping card component
├── ArsenalSection.tsx # Tools & tech arsenal display
├── VideoWebSection.tsx # Video reel / showreel section
├── InstagramSection.tsx # Live Instagram feed embed
├── ContactSection.tsx # Contact form with animations
└── CustomCursor.tsx # Brand-custom cursor component
Color Palette
─────────────────────────────────────────
Primary Background → #000000 (Pure Black)
Primary Accent → #DC2626 (Cinematic Red)
Text Primary → #FFFFFF
Text Secondary → rgba(255,255,255,0.70)
Text Muted → rgba(255,255,255,0.30)
Typography
─────────────────────────────────────────
Display → Bebas Neue (headings, hero titles)
Body → Inter (paragraphs, UI text)
Mono → Space Mono (labels, tags, code)
Motion
─────────────────────────────────────────
Easing → [0.22, 1, 0.36, 1] (custom cubic-bezier)
Spring → stiffness: 80, damping: 20
Stagger → 0.04–0.06s per character/word
This portfolio is deployed on Vercel with automatic deployments on every push to main.
This project is personal and proprietary. All design, content, and code belongs to Prathamesh Sutar.
Not licensed for reuse or distribution without permission.
Crafted with obsession. Deployed with precision.
TIME · LIGHT · TRUTH
