Internal · Project Brief
Hero video animation setup guide and the Claude Code master prompt for building an Awwwards-level interactive AI operating system portfolio. Click Copy on either card to grab the text.
Prepare your 3D head video asset (`Me-3d.mp4`) before running the Claude Code master prompt.
Video Preparation Instructions:
Provide your head rotating video (`Me-3d.mp4`) and animate it using Google Flow or Grok so your face slowly turns left and right before transforming into a futuristic armored tech mask.
Attach your CV (`RUTURAJ_2026_CV.pdf`) and 3D head video (`Me-3d.mp4`) alongside this prompt in Claude Code to build an Awwwards / Marvel / Apple level futuristic AI operating system portfolio.
@"/Users/ruturajjena/Downloads/RUTURAJ_2026_CV.pdf" @"/Users/ruturajjena/Downloads/Me-3d.mp4" You are an award-winning creative developer from Awwwards, FWA and CSS Design Awards. Your task is NOT to create a portfolio. Your task is to create an unforgettable cinematic digital experience that tells my story through scroll. The website should feel like a Marvel title sequence mixed with Apple's precision and Linear's smoothness. ──────────────────────────── TECH STACK Use: • Next.js • TypeScript • TailwindCSS • GSAP • ScrollTrigger • Lenis Smooth Scroll • Framer Motion where appropriate • Three.js only if absolutely necessary • Responsive on every device • Performance optimized (60fps) Animations must be GPU accelerated. Absolutely no cheap fade-ins. Every animation should feel handcrafted. ──────────────────────────── COLOR PALETTE Primary: #8B0000 #C1121F #FF2E2E Accent: White Silver Dark metallic gray Background: Almost black with deep crimson gradients. The entire website should feel like a futuristic AI operating system. Glass panels should have a slight red glow. No blue. ──────────────────────────── OVERALL EXPERIENCE The visitor should feel like they are entering an AI laboratory. Every scroll should reveal another layer of who I am. Nothing should appear instantly. Everything should be assembled. Words should form. Cards should build themselves. Lines should draw. Background grids should activate. Particles should react. The site should constantly feel alive. ──────────────────────────── HERO SECTION I will provide a hero video. The video already contains my face slowly turning left and right before transforming into a futuristic armored mask. Use that video as the centerpiece. The video should remain fixed while scrolling. As the user scrolls: The camera should slowly zoom. The UI should build around the helmet. Floating HUD graphics should appear. Energy rings should rotate. Scanning lines should activate. My name should reveal one letter at a time. Your name Then AI Engineer Data Engineer Creative Developer Founder of Macrova Each title should morph into the next instead of replacing abruptly. Scrolling should continue revealing the next section. ──────────────────────────── BACKGROUND Animated grid. Floating particles. Moving red energy lines. Subtle smoke. Procedural noise. Occasional digital glitches. Everything should react to scrolling. ──────────────────────────── SECTION 2 SYSTEM INITIALIZATION Instead of About Me Create a futuristic boot sequence. Example SYSTEM BOOTING ██████████ 100% Loading Experience... Loading Projects... Loading AI Models... Loading Creativity... Loading Engineering... Verified. As each progress bar fills, the corresponding content appears. ──────────────────────────── SECTION 3 THE ENGINEER get details from attached cv ──────────────────────────── SECTION 4 THE CREATOR This section should reveal that I don't just build data systems. I also build products. Create premium project cards. Project 1 Get the details from attached cv for experience Project 2 Interactive Websites Display cinematic previews. Use parallax. Hover should explode layers apart. Project 3 Creative AI Video generation Brand storytelling Automation Interactive experiences ──────────────────────────── SECTION 5 EXPERIENCE Instead of a vertical timeline, Create a horizontal moving conveyor belt. Get the details from attached cv for experience Every company card should rotate in 3D as it reaches the center. ──────────────────────────── SECTION 6 METRICS Animated counters. Years Experience Projects Technologies Applications Built Certificates Followers Everything counts up while scrolling. ──────────────────────────── SECTION 7 MY PROCESS Represent my workflow as an AI pipeline. Idea ↓ Research ↓ Architecture ↓ Engineering ↓ Automation ↓ Deployment ↓ Optimization Each stage should animate into the next. ──────────────────────────── SECTION 8 CONTACT The final section should feel like activating Jarvis. Large animated circular interface. Center button INITIATE CONNECTION Hover creates expanding energy rings. Background pulses. Button glows. Contact options emerge from the circle. LinkedIn - ruturajjena GitHub - ruturajjena Email Macrova - macrova.in Resume - attached ──────────────────────────── SCROLL EFFECTS The website must feel controlled by scroll. Examples Panels slide away. Layers separate. Words assemble. Images reveal through masks. Cards emerge from darkness. Background changes continuously. The hero video should slowly reduce in scale while transitioning into the next section. Never hard cut. ──────────────────────────── MICRO INTERACTIONS Cursor reacts to elements. Buttons generate energy ripples. Hover activates lighting. Cards slightly tilt. Text gets illuminated. HUD graphics rotate slowly. ──────────────────────────── TYPOGRAPHY Huge editorial typography. Mix: Space Grotesk Satoshi Inter Massive headings. Tight spacing. Large white typography. Red highlights. ──────────────────────────── SOUND (optional) Very subtle futuristic ambience. Tiny hover sounds. Startup sound. Muted by default. ──────────────────────────── PERFORMANCE Images lazy loaded. Videos optimized. Animations paused when off-screen. No layout shift. Everything should remain above 90 Lighthouse. ──────────────────────────── IMPORTANT Do NOT build a normal developer portfolio. Build an immersive cinematic experience where visitors feel they are discovering the operating system of an AI engineer. The goal is that recruiters and clients remember this website after seeing hundreds of portfolios. Every section should surprise the visitor.