Portfolio Website Build

Act as an elite frontend developer. Build a cinematic, highly interactive, dark-mode portfolio for Shehab Sherif, a Premium Video Editor & Motion Designer (Brand: Cactus Studio / cactus.mp4). The site must be built using React, Tailwind CSS, Lucide React icons, and Framer Motion for buttery-smooth animations.

Aesthetics:

Strictly Dark Mode: Background bg-black, text text-[#F5F2ED].
Vibe: Luxurious, cinematic, Apple-level smoothness, high-end agency.

Key Features & Animations to Implement:

Custom Cursor: Create a custom cursor component that tracks mouse movement and expands slightly when hovering over clickable elements.
Smooth Scroll & Physics: Use Framer Motion with spring physics (stiffness, damping) for natural, fluid hover states.
Video-First Approach: All project cards should feature a 16:9 aspect ratio. Add a hover-to-play mechanic (simulate this using an image that crossfades into a looping video placeholder on hover).

Page Structure (Single Page App format):

Navbar: Sticky, glassmorphic (backdrop-blur-md bg-black/50), with links (Work, Services, Store, Contact).
Hero Section: Full-screen height. Background is a dark, cinematic video placeholder. Large, staggered staggered text reveal (bottom to top): "Shehab Sherif" / "Creative Video Editor & Motion Designer". Include two magnetic buttons.
Services Section: Grid of animated cards highlighting tools and skills (DaVinci Resolve, Premiere Pro, CapCut, AI Generation, Motion Graphics). Cards scale slightly on hover.
Work/Reel Section: A cinematic grid (masonry or uniform 16:9) of video projects. Hovering over a card darkens the rest of the grid slightly and reveals play icons.
Contact Section: A sleek, minimal form. Inputs have an animated bottom-border glow on focus. Large headline: "Let's Create Something Extraordinary."

Output production-ready, clean, and fully responsive code. Ensure all Framer Motion imports and animations are correctly wired.

Show full message

11d ago

Now I'll build this cinematic portfolio with all the requested features. Let me start by updating the globals.css with the dark theme, then create all the components.

Your cinematic portfolio for Shehab Sherif / Cactus Studio is now complete! Here's what I built:

Key Features Implemented:

Custom Cursor - A smooth, physics-based cursor with spring animations that expands when hovering over interactive elements, with a secondary ring for added depth
Glassmorphic Navbar - Sticky navigation with backdrop-blur-md and bg-black/50, smooth entrance animation, and mobile-responsive hamburger menu
Hero Section - Full-screen with staggered text reveal animations (bottom-to-top with 3D rotation), cinematic background overlay with film grain effect, two magnetic buttons with physics-based hover effects, and animated scroll indicator
Services Section - Animated card grid showcasing DaVinci Resolve, Premiere Pro, CapCut, AI Generation, and Motion Graphics with hover gradients and scale effects, plus stats section
Work/Reel Section - 16:9 video project cards with hover-to-play mechanics (darkens other cards, reveals play button), smooth image zoom transitions, and a showreel CTA
Store Section - Digital products grid with hover animations for LUTs, transitions, and sound packs
Contact Section - Sleek form with animated bottom-border glow on focus using Framer Motion, project type dropdown, and social links

Design System: Pure black background (bg-black), warm off-white text (#F5F2ED), spring-based physics animations throughout, and custom scrollbar styling for a premium feel.

11d ago

Aesthetics:

Strictly Dark Mode: Background bg-black, text text-[#F5F2ED].
Vibe: Luxurious, cinematic, Apple-level smoothness, high-end agency.

Key Features & Animations to Implement:

Custom Cursor: Create a custom cursor component that tracks mouse movement and expands slightly when hovering over clickable elements.
Smooth Scroll & Physics: Use Framer Motion with spring physics (stiffness, damping) for natural, fluid hover states.
Video-First Approach: All project cards should feature a 16:9 aspect ratio. Add a hover-to-play mechanic (simulate this using an image that crossfades into a looping video placeholder on hover).

Page Structure (Single Page App format):

Navbar: Sticky, glassmorphic (backdrop-blur-md bg-black/50), with links (Work, Services, Store, Contact).
Hero Section: Full-screen height. Background is a dark, cinematic video placeholder. Large, staggered staggered text reveal (bottom to top): "Shehab Sherif" / "Creative Video Editor & Motion Designer". Include two magnetic buttons.
Services Section: Grid of animated cards highlighting tools and skills (DaVinci Resolve, Premiere Pro, CapCut, AI Generation, Motion Graphics). Cards scale slightly on hover.
Work/Reel Section: A cinematic grid (masonry or uniform 16:9) of video projects. Hovering over a card darkens the rest of the grid slightly and reveals play icons.
Contact Section: A sleek, minimal form. Inputs have an animated bottom-border glow on focus. Large headline: "Let's Create Something Extraordinary."

Output production-ready, clean, and fully responsive code. Ensure all Framer Motion imports and animations are correctly wired.

Now I'll build this cinematic portfolio with all the requested features. Let me start by updating the globals.css with the dark theme, then create all the components.

Your cinematic portfolio for Shehab Sherif / Cactus Studio is now complete! Here's what I built:

Key Features Implemented:

Custom Cursor - A smooth, physics-based cursor with spring animations that expands when hovering over interactive elements, with a secondary ring for added depth
Glassmorphic Navbar - Sticky navigation with backdrop-blur-md and bg-black/50, smooth entrance animation, and mobile-responsive hamburger menu
Hero Section - Full-screen with staggered text reveal animations (bottom-to-top with 3D rotation), cinematic background overlay with film grain effect, two magnetic buttons with physics-based hover effects, and animated scroll indicator
Services Section - Animated card grid showcasing DaVinci Resolve, Premiere Pro, CapCut, AI Generation, and Motion Graphics with hover gradients and scale effects, plus stats section
Work/Reel Section - 16:9 video project cards with hover-to-play mechanics (darkens other cards, reveals play button), smooth image zoom transitions, and a showreel CTA
Store Section - Digital products grid with hover animations for LUTs, transitions, and sound packs
Contact Section - Sleek form with animated bottom-border glow on focus using Framer Motion, project type dropdown, and social links

Design System: Pure black background (bg-black), warm off-white text (#F5F2ED), spring-based physics animations throughout, and custom scrollbar styling for a premium feel.

11d ago