Build a premium, single-page (with smooth-scroll sections acting as 10 "pages") Next.js portfolio website for a high-end Instagram Reels & short-form video editor named "Mahfooz Alam". Luxury, cinematic personal brand site, mobile-first.
DESIGN TOKENS: Background #090909, secondary panels #101827, glass panels rgba(255,255,255,0.08) with backdrop-blur and border rgba(255,255,255,0.12), accent cyan #00F5FF, accent purple #7A5CFF, white text. Headings: Space Grotesk (next/font/google). Body: Inter. Rounded cards 16-24px, soft neon glow shadows.
SECTIONS (framer-motion scroll reveals, respect prefers-reduced-motion):
- COVER — full-bleed hero, glowing "MAHFOOZ ALAM" name with layered glow + floating animation, subtitle "Instagram Reels & Content Editor", animated particle background, floating glass shard decorations, scroll indicator.
- INTRODUCTION — two-column (stacks mobile): avatar placeholder with glow ring + intro paragraph; vertical stat strip with count-up animation.
- SERVICES — glass card grid, lucide-react icons: Instagram Reels, Viral Shorts, Motion Graphics, Cinematic Editing, Color Grading, Sound Design, Captions, 3D Text Animation, Logo Animation, Thumbnail Design.
- EDITING STYLE — draggable before/after slider (placeholder gradient blocks), two-column feature list: Speed Ramping, Motion Blur, Camera Shake, Cinematic Color, Premium Transitions, 3D Graphics, Dynamic Zoom, Sound FX.
- PROCESS — animated timeline, glowing progress line on scroll, 6 nodes: Client Idea → Script → Editing → Motion Graphics → Sound Design → Delivery.
- PORTFOLIO SHOWCASE — CSS-drawn iPhone mockup grid with placeholder gradient reel thumbnails + play button; glass chip stats below (views, likes, editing type, duration, software). 6 items.
- WHY CHOOSE ME — glass cards: Fast Delivery, Professional Quality, Unlimited Creativity, High Retention Editing, Premium Motion Graphics, Clean Workflow, Modern Design.
- SOFTWARE — glass badge chips (generic icons, not real logos): Premiere Pro, After Effects, Photoshop, Illustrator, Blender, DaVinci Resolve, CapCut Pro, Media Encoder.
- TESTIMONIALS — 3-4 glass review cards, 5-star icons, dummy quotes, placeholder names.
- CONTACT/FOOTER — centered black section, heading "Let's create something viral.", glowing pill buttons Instagram/Email/WhatsApp (placeholder # hrefs), placeholder QR block, "MA" monogram, copyright.
TECH: Next.js App Router, TypeScript, Tailwind CSS, framer-motion, lucide-react. Component per section. Sticky top nav smooth-scrolling to sections, glass on scroll. Mobile-first responsive throughout.