photography-portfolio

byMD ABDULLA

Build a single-page dark cinematic photography portfolio for MD Abdulla using React + Vite + TypeScript + Tailwind CSS + GSAP + GSAP ScrollTrigger + Framer Motion + hls.js + react-router-dom + tailwindcss-animate. Use Motion/Framer Motion for declarative UI, entrance, filtering and lightbox animations, and GSAP for timelines, marquee and advanced scroll/parallax effects. The site is a premium digital photography exhibition showcasing MD Abdulla's real photographs, live moments, landscapes, nature, people, travel, architecture, street scenes and everyday beauty. It must feel cinematic, minimal, premium, artistic, editorial, emotional and immersive, never corporate or like a generic agency portfolio. NAME: MD Abdulla INSTAGRAM: @axr.md URL: https://instagram.com/axr.md MESSAGE: “Capturing moments. Preserving emotions. Telling stories through photographs.” IMPORTANT: Do NOT include any email, email address, mailto link, phone number, contact form or fake/placeholder contact details. Instagram is the only contact/social CTA. DESIGN SYSTEM Google Fonts: Inter 300–700, Instrument Serif italic 400. --font-body:'Inter',sans-serif; --font-display:'Instrument Serif',serif; --bg:0 0% 4%; --surface:0 0% 8%; --text:0 0% 96%; --muted:0 0% 53%; --stroke:0 0% 12%; --accent:0 0% 96%; Tailwind colors use "hsl(var(--...))". Accent gradient: "linear-gradient(90deg,#89AACC 0%,#4E85BF 100%)". Create ".accent-gradient" for logo ring, loading progress, hover borders and subtle highlights. Force dark theme. No light-mode toggle. Use large typography, generous negative space, subtle borders, cinematic overlays, slow transitions and natural image ratios. Avoid bright colors, excessive UI, generic stock images, excessive cards and artificial-looking photography. LOADING SCREEN Create "LoadingScreen" controlled by: "{isLoading && <LoadingScreen onComplete={()=>setIsLoading(false)} />}" Fullscreen "fixed inset-0 z-[9999] bg-bg". Animate counter 000 → 100 with requestAnimationFrame over 2700ms. Top-left: PHOTOGRAPHY, uppercase, tiny muted typography with y/opacity entrance. Center cycle every 900ms: Observe / Capture / Remember Use "AnimatePresence mode="wait"", y "20→0→-20", Instrument Serif italic. Bottom-right: huge tabular "000...100". Bottom progress: 3px stroke track with gradient inner bar using "scaleX(count/100)" and subtle glow. At 100 wait 400ms then close. HERO Full viewport cinematic hero. Use this HLS video: "https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8" Use "hls.js"; initialize HLS when supported and fall back to native HLS when available. Video: "autoPlay muted loop playsInline", full-screen "object-cover". Overlay "bg-black/35"; bottom cinematic fade to background. NAVBAR Fixed floating pill at top center with backdrop blur, dark surface and subtle border. Logo: 9×9 circle with gradient ring, MA inside using Instrument Serif italic. Hover scale 1.1. Links: Home / Gallery / Journal / Explorations / About Active: light text + subtle stroke background. Inactive: muted with hover transition. Final button: Instagram ↗ Link to "https://instagram.com/axr.md". HERO TEXT Centered. Eyebrow: LIVE PHOTOGRAPHY • MD ABDULLA Main heading: MD Abdulla Use "text-7xl md:text-8xl lg:text-9xl font-display italic". Tagline: Capturing the beauty of real moments. Description: Photography is the art of noticing what others might pass by. Buttons: Explore Gallery and Instagram ↗ Use rounded-full buttons, subtle hover scale and elegant transitions. GSAP entrance: name fades from opacity 0/y50; remaining elements fade from blur(10px)/y20 with stagger, using "power3.out". Bottom: SCROLL TO EXPLORE + animated vertical line. LIVE GALLERY Call this section Live Gallery, never “Selected Works”. Eyebrow: 01 — LIVE GALLERY Heading: Moments I capture Make “capture” Instrument Serif italic. Description: A collection of photographs captured in real moments, from quiet landscapes to fleeting human experiences. Create a responsive masonry gallery: 3 columns desktop / 2 tablet / 1 mobile. Preserve natural aspect ratios. Do not unnecessarily crop photographs. Categories: All / Nature / Landscape / People / Travel / Architecture / Street / Night Animate filtering with Framer Motion. PHOTO CARDS Rounded-3xl, overflow-hidden, dark surface, subtle border. Images remain authentic and use smooth hover zoom. Hover overlay: View Photograph ↗ Show minimal metadata such as category and year. LIGHTBOX Click a photograph to open fullscreen "bg-black/95". Show the original photograph centered without distortion. Controls: Previous / Next / Close / Counter / Category / Caption Keyboard: Escape closes; Left/Right navigate. Animate with opacity "0→1" and scale ".96→1". FEATURED PHOTO Large cinematic photograph section. Heading: A moment worth remembering. Use GSAP ScrollTrigger for subtle parallax. Overlay: 01 / MOMENT / MD ABDULLA / 2026 Keep important image details unobstructed. RECENT FRAMES Heading: Recent Frames Make “Frames” Instrument Serif italic. Subtext: Small stories behind the photographs. Show 4–6 elegant horizontal entries with image, title, date, location, story and read time. Titles can include: After the Rain / The Quiet Road / Golden Hour / Between Two Moments / Where the Sky Meets the Earth / A Walk Through Silence Hover: subtle image zoom, brighter card and moving arrow. VISUAL EXPLORATIONS Create "min-h-[300vh]" scroll-driven photography exhibition. Heading: Visual Explorations Subtext: A collection of places, textures, people and moments that caught my eye. Create 2–3 vertical image columns. Use GSAP ScrollTrigger for different parallax speeds and subtle rotations "-2deg / 1deg / -1deg". Every image opens the lightbox. ABOUT Heading: Behind the Lens Make “Lens” Instrument Serif italic. Text: I'm MD Abdulla — a photographer drawn to the beauty hidden in ordinary moments. Additional: From landscapes and quiet streets to people, light and fleeting expressions, I photograph the moments that make a place feel alive. Show Instagram @axr.md ↗. Keep the section personal and understated. STATS Three artistic statistics: 100+ — Moments Captured 50+ — Places Explored ∞ — Stories to Tell Use large Instrument Serif typography. Avoid corporate styling. FINAL CTA Heading: Let's capture something beautiful. Description: For photography collaborations, creative projects, or simply to connect. Button: Instagram ↗ Only link to "https://instagram.com/axr.md". No email, phone or form. FOOTER Left: MD Abdulla Center: © 2026 MD Abdulla Right: Instagram ↗ Add: ● Available for photography & creative collaborations Use subtle pulsing dot. MARQUEE GSAP infinite marquee: CAPTURE THE MOMENT • Repeat 10×, "xPercent:-50", "duration:40", "ease:"none"", "repeat:-1". Use Instrument Serif italic, "text-5xl md:text-7xl". NAVIGATION Smooth-scroll between: Home / Gallery / Journal / Explorations / About Use native smooth scrolling or GSAP and highlight active section with Intersection Observer/ScrollTrigger. RESPONSIVE Optimize for mobile, tablet, laptop and large desktop. Mobile: compact/hamburger navigation, one-column gallery, natural image ratios, smaller typography, touch-friendly controls and no horizontal overflow. Never crop important parts of photographs unnecessarily. PHOTO DATA Create "src/data/photographs.ts": export const photographs=[ {id:1,src:"/images/photo-01.jpg",title:"After the Rain",category:"Nature",date:"2026",location:"India",description:"A quiet moment after the rain."} ]; All gallery, filtering, lightbox, featured content and explorations must use this centralized array. Adding/removing a photo must automatically update the website. AUTHENTICITY Use only MD Abdulla's actual photographs. Never AI-generate or transform them. Do not alter: - faces or facial features - skies - landscapes - objects - scenery - composition - identity - important colors/details No artificial people or objects. Allowed presentation effects only: hover zoom, lightbox, parallax, cinematic overlays, subtle brightness/contrast and smooth transitions. Photographs must remain authentic. PERFORMANCE Lazy-load images and use responsive image sizes. Clean up HLS instances, video listeners and GSAP ScrollTriggers on unmount. Avoid unnecessary React renders. Respect "prefers-reduced-motion". ACCESSIBILITY Use semantic HTML, correct heading hierarchy, descriptive alt text, keyboard-accessible navigation/lightbox, visible focus states and ARIA labels where appropriate. SEO Title: MD Abdulla — Photography Description: MD Abdulla — Photographer capturing landscapes, people, nature, travel and beautiful moments through photography. OG Title: MD Abdulla — Photography OG Description: Capturing moments. Preserving emotions. Telling stories through photographs. FILE STRUCTURE src/ ├── components/ │ ├── LoadingScreen.tsx │ ├── Navbar.tsx │ ├── Hero.tsx │ ├── Gallery.tsx │ ├── PhotoCard.tsx │ ├── Lightbox.tsx │ ├── FeaturedPhoto.tsx │ ├── CategoryFilter.tsx │ ├── Journal.tsx │ ├── Explorations.tsx │ ├── About.tsx │ ├── Stats.tsx │ ├── Contact.tsx │ └── Footer.tsx ├── data/photographs.ts ├── pages/Index.tsx └── index.css Add CSS animations for "scroll-down", "role-fade-in" and "gradient-shift". FINAL EXPERIENCE The site must feel like entering a premium digital photography exhibition. Priority: 1. Photography 2. Atmosphere 3. MD Abdulla 4. Instagram @axr.md Make visitors slowly explore, open photographs fullscreen, discover stories and follow Instagram. Overall feeling: Cinematic • Authentic • Minimal • Emotional • Immersive • Photography-first Final message: “Beautiful moments don't last forever. Photographs make them stay.”