tough-3d

As a frontend developer, implement the LandingHero section. Uses Framer Motion's useScroll and useTransform to reactively animate a CSS gradient background angle from 135deg to 315deg as the user scrolls (driven via useMotionValueEvent writing directly to a gradientRef div). Five headline words in headlineWords array stagger in with opacity+y animations (delay 0.3 + i*0.1s). A parallax midground layer (lh-midground) with four lh-deco-shape divs uses a CSS variable --scroll for translateY. A badge with lh-badge-dot animates in with opacity+y. Three stat items (10K+, 3D, < 5s) are displayed below the headline. Includes Upload and Play lucide icons for CTA buttons.

As a frontend developer, implement the LandingDemo3D section. This is the most complex section — it renders an inline SVG OfficeScene (1200x700 viewBox with floor, wall, window, bookshelf, desk, and monitor elements using multiple linearGradient defs). It also manages a GSAP-animated particle system: PARTICLE_COUNT=12 particles in PARTICLE_COLORS array (coral, indigo, yellow, amber) that burst and animate on state changes. Uses Framer Motion AnimatePresence for overlay transitions. Four techTags (Three.js, WebGL, React Fiber, GSAP) are rendered as colored badges. useState and useRef manage scene interaction state. The SVG scene acts as the interactive 3D demo preview — ensure the scene wrapper is width:100%; height:min(70vh,640px) to avoid the tiny-speck bug.

As a frontend developer, implement the LandingFeatures section. Renders four feature cards from a features array (3D Resume Analysis, Real-time Feedback, Detailed Insights, Export Results) using lucide-react icons (Box, MessageSquareText, BarChart3, FileOutput). Each card uses cardVariants (opacity+y, delay i*0.15s) and iconVariants (rotateX -90→0 spring animation with stiffness 120, damping 14) driven by Framer Motion custom variants. Two parallax decorative layers: lf-parallax-bg (--scroll * -0.3px) and lf-parallax-mid with three lf-mid-shape divs (--scroll * -0.5px). Section header includes lf-label 'Why tough-3d', h2 headline, and subheadline paragraph.

As a frontend developer, implement the LandingHowItWorks section. Three steps array (Upload, AI Analysis, Explore in 3D) with Upload, BarChart3, Compass lucide icons. Uses Framer Motion useInView (once:true, margin:'-80px') to trigger cardVariants — alternating left/right slide-in (x: i%2===0 ? -40 : 40) with delay i*0.3s. Badge number indicators use badgeVariants (scale 0.6→1) plus a badgePulse (scale [1,1.12,1]) on hover. A timeline connector line is dynamically computed via useEffect and ResizeObserver — queries [data-badge] elements' DOMRect positions relative to a timelineRef container to draw SVG connector segments between step badges. useState lineSegments stores y1/y2 pairs for each connector.

As a frontend developer, implement the LandingVisualization section. Two-column layout: left text column with five benefits list items (Layered 3D Analysis, Real-Time Feedback, Section-by-Section Scoring, Interactive Exploration, Export-Ready Reports) using staggerContainer (staggerChildren 0.1s, delayChildren 0.25s) and itemVariant (opacity+x: -40→0) — triggered by useInView. Right column contains a mock chart/visualization panel with two sets of mockBarHeights arrays (6 bars each) rendered as animated bar charts. Uses useScroll+useTransform on the section for parallax imageY (40→-40px) applied to the right panel. Two decorative parallax layers (lv-deco-bg with blobs, lv-deco-mid with line and dots) at --scroll * -0.25px and -0.45px respectively.

As a frontend developer, implement the LandingTestimonials section. Carousel of four testimonials (Priya Sharma, Arjun Patel, Sneha Reddy, Rahul Verma) with ChevronLeft/ChevronRight/Star lucide icons. The HighlightedQuote subcomponent parses testimonial text for highlight keywords and wraps matched spans in motion.span with a looping color animation (color: ['#212121', '#FFD600', '#212121'], duration 2s infinite). Carousel uses useState currentIndex and isDragging, useAnimation controls, and a useCallback autoplay ref (autoPlayRef) for auto-advance. Drag-to-swipe support on the trackRef. Star ratings rendered per testimonial. Avatar initials displayed as colored circles (no images).

As a frontend developer, implement the LandingCTA section. Features a magnetic CTA button using Framer Motion's useMotionValue, useTransform, and useSpring (stiffness:250, damping:22, mass:0.8) — onMouseMove calculates cursor distance from button center, and within MAGNETIC_RADIUS*3 (180px) applies a proportional pull via btnX/btnY spring values. onMouseLeave resets to 0,0. Three parallax layers: lc-parallax-bg with gradient (--scroll * -0.3px), lc-parallax-mid with three lc-diamond elements that animate opacity 0→0.12 on whileInView (staggered 0.2/0.4/0.6s delays), and six decorative accent dots using decoVariants (scale 0.4→1, opacity 0.4–0.7 range). ArrowRight lucide icon in the primary CTA button.

As a frontend developer, implement the Footer section for the Landing page. Three link column groups: Product (Resume Analyzer, 3D Visualization, Education Insights, Experience Review — all linking to /Analysis), Company (About Us, Careers, Blog, Contact), and Resources (Documentation, API Reference, Privacy Policy, Terms of Service). Each motion.li link item uses whileHover={{ x: 3 }} with spring (stiffness:400, damping:25) for a subtle slide effect. Social icons row with five icons (Twitter, Github, Linkedin, Youtube, Mail from lucide-react) with hover trail animations. Company info block with ftr-logo (3D text badge + 'tough-3d' brand name), tagline paragraph, and ftr-glow decorative element. Uses darker surface background. The component may already exist as a shared Footer component — check before creating.

As a frontend developer, implement the Navbar section for the Analysis page. This component (nb-root) reuses the same Navbar from the Landing page with framer-motion stagger animations (staggerContainer, linkVariant variants), a path-draw SVG logo animation using motion.path with pathLength from 0→1 over 0.8s, an animated coral circle (motion.circle) with scale entrance at 0.7s delay, scroll-based nb-scrolled class toggling via window.scrollY > 10, and a mobile menu with mobileOpen state that sets document.body.style.overflow to 'hidden'. Nav links include Landing and Analysis routes. Uses Upload, Menu, X from lucide-react. Component may already exist from Landing page — verify and reuse or adapt as needed. Depends on Landing Navbar task to establish page chain.

As a Backend Developer, implement the POST /api/v1/resumes/upload FastAPI endpoint that accepts multipart file uploads (PDF, DOCX formats), validates file type and size, stores the file to disk or object storage, creates a Resume database record with status 'pending', and returns a resume_id UUID. Include file validation middleware, error handling for unsupported formats, and a GET /api/v1/resumes/{resume_id} endpoint to retrieve resume metadata and analysis status. NOTE: Frontend tasks AnalysisHeader and AnalysisActions depend on this endpoint.

As a Frontend Developer, create a centralized API client module (src/api/client.js) using Axios or native fetch with a configured base URL from environment variables (VITE_API_BASE_URL or REACT_APP_API_BASE_URL). Implement the following typed service functions: uploadResume(file, onProgress) → resumeId, getResumeStatus(resumeId) → status, triggerAnalysis(resumeId) → void, getAnalysisResults(resumeId) → AnalysisData, downloadReport(resumeId, format) → Blob. Include request/response interceptors for error normalization and loading state. This is a shared utility required by Landing upload flow and all Analysis sections.

As a frontend developer, implement the AnalysisHeader section (ah-root) for the Analysis page. Uses GSAP fromTo animation on mount — elements stored via addRef callback into animRefs.current array, animated with opacity 0→1, y 12→0, duration 0.45s, stagger 0.07s, ease power2.out. Renders a breadcrumb nav (ah-breadcrumb) with Home → Analysis → Resume Analysis links using ChevronRight separators. Main row (ah-main) contains a title block with ah-avatar-mobile showing 'AK' initials, h1 displaying 'Ananya Kumar — Senior Software Engineer', meta row with Calendar icon and 'Uploaded May 18, 2026' date, and an ah-badge with pulsing dot and 'Analysis Complete' status. Actions block (ah-actions-block) includes Re-upload anchor, Share and Settings buttons, and ah-avatar-desktop. Uses Calendar, Upload, Share2, Settings, ChevronRight from lucide-react.

As a frontend developer, implement the AnalysisSidebar section for the Analysis page. Features a Three.js 3D progress ring rendered on a canvas ref — creates a TorusGeometry(1.9, 0.14) ring in #1A237E with a coral progress arc of 64 SphereGeometry segments, PerspectiveCamera at position [0, 0.5, 8], ambient and directional lights, and a custom animation loop via requestAnimationFrame stored in animRef. Includes a tab navigation system with activeTab state cycling through sectionTabs array (overview, education, experience, skills, summary) each with LayoutDashboard, GraduationCap, Briefcase, Star, ClipboardCheck icons and numeric badges. Renders a progressSteps list with done/progress/pending status indicators. Has mobileOpen state for collapsible mobile drawer toggle via ChevronDown. Uses framer-motion AnimatePresence for tab transitions. Uses Three.js directly (not via R3F) for the canvas ring.

As a frontend developer, implement the AnalysisVisualization section for the Analysis page. Renders a React Three Fiber Canvas with three interactive 3D Room components positioned at [-4.5,0,0], [0,0,0], [4.5,0,0] for Education, Experience, and Feedback respectively — each room has floor mesh with floorRef opacity pulsing via useFrame when isActive, glow plane with opacity lerping between 0.08 and 0.5, and walls in the room's brand color. A Particles component renders 40 floating spheres (sphereGeometry 0.04r) that oscillate vertically via useFrame using per-particle speed/offset values. isActive room state drives camera target animation via OrbitControls. UI overlay includes Eye, Maximize2/Minimize2, RotateCcw, Move, ScanEye action buttons from lucide-react, framer-motion AnimatePresence for room label overlays, and GSAP for entrance animations. Supports fullscreen toggle state and active room selection. Uses @react-three/drei OrbitControls, Text, Box, Plane, Sphere, Cylinder, RoundedBox.

As a frontend developer, implement the AnalysisEducation section for the Analysis page. Features a React Three Fiber Canvas with an AcademicCap 3D scene — a group containing boxGeometry base platform (#534BAE), cap board (#1A237E), FFAB00 tassel knob with emissiveIntensity 0.6, cylindrical tassel string, and four gray pillar connections at corners. AcademicCap uses mouseTarget ref for interactive rotation via useFrame with lerp on rotation.y (0.7 factor) and rotation.x (0.4 factor). EducationScene handles mousemove events on containerRef updating mouseTarget.current. Section renders expandable education cards with useState for expanded ID, GSAP entrance animation on card elements, framer-motion AnimatePresence for accordion detail panels. Icons include GraduationCap, ShieldCheck, Sparkles, ChevronDown, Lightbulb, Award, TrendingUp, BookOpen, Zap from lucide-react. Education data includes degree details, institution, GPA, coursework analysis, and AI improvement suggestions.

As a frontend developer, implement the AnalysisExperience section for the Analysis page. Features a React Three Fiber Canvas with a TimelineRings component — four concentric ringGeometry meshes in #FF7043, #1A237E, #534BAE, #FFD600 with decreasing opacity, plus a central coral sphereGeometry, all in a groupRef animated via GSAP timeline (repeat -1, yoyo true) scaling 1→1.06 over 2.5s sine.inOut. Experience data array contains two entries (Senior Software Engineer at TechCorp, Full Stack Developer at InnovateTech) each with impact narrative, skills array, improvements text, and accomplishments list. Renders expandable accordion cards with expandedId state, framer-motion AnimatePresence for detail panels, GSAP entrance animations on mount. Icons include Building2, Calendar, Star, TrendingUp, Lightbulb, Zap, ChevronDown from lucide-react. Skills displayed as pill badges.

As a frontend developer, implement the AnalysisFeedback section for the Analysis page. Uses GSAP ScrollTrigger (registered via gsap.registerPlugin). Renders two data-driven accordion groups — strengthsData (4 items: Strong Educational Foundation, Career Progression Trajectory, In-Demand Technical Skills, Quantifiable Impact Statements) and weaknessesData with expandable detail arrays. Each item has icon component (Award, TrendingUp, Star, ShieldCheck for strengths; AlertTriangle, AlertCircle for weaknesses), title, summary text, and details string array. State manages expandedStrength and expandedWeakness IDs. Uses Three.js directly for a decorative canvas element with gsap scroll-driven animations. framer-motion AnimatePresence handles accordion open/close transitions with height animation. Icons from lucide-react include Target, Lightbulb, Compass, ChevronDown, ChevronRight, Zap, FileText, GraduationCap, Clock, Users, BarChart3, PenTool, MessageSquare.

As a frontend developer, implement the AnalysisActions section for the Analysis page. Manages download flow state: format (pdf/docx/json), downloading boolean, progress 0→100 via simulated interval, done boolean with Check icon confirmation. Share flow: activeShare state switching between email, linkedin, twitter panels — email panel has controlled input with emailSent confirmation state. Three.js particle burst system: WebGLRenderer on canvasRef with PerspectiveCamera at z=12, particle objects tracked in particlesRef array with vel.x/y/z, life decrementing 0.008/frame, gravity via vel.y -= 0.002, scale and opacity tied to life value, particles rendered as spheres. GSAP animates downloadBtnRef on submit and progressRef bar width. Toast notification system: toastMsg/toastVisible state, showToast helper with 2800ms auto-dismiss, GSAP fade on toastRef. File format selector renders fileFormats array (pdf/docx/json) as toggle buttons. Share platforms use Mail, Linkedin, Twitter icons. Download/Share/Printer icons from lucide-react.

As a frontend developer, implement the Footer section for the Analysis page. Renders ftr-root with a ftr-glow decorative element. Company info block shows '3D tough-3d' logo with ftr-logo-icon span and tagline about 3D resume analysis. Three link columns (Product, Company, Resources) each rendered as ftr-link-col with ftr-link-col-title headings and motion.li items using whileHover={{ x: 3 }} spring animation (stiffness 400, damping 25). Product links point to /Analysis, Company and Resource links point to /Landing. Social icons row renders Twitter, Github, Linkedin, Youtube, Mail from lucide-react as anchor tags with aria-labels. Component may already exist from Landing page — verify and reuse or adapt with Analysis-specific product links as needed.

As a Backend Developer, implement the POST /api/v1/resumes/{resume_id}/analyze endpoint that triggers async resume analysis using GPT-4 (SRD specifies GPT 5.4 but use latest available). The endpoint should: parse uploaded resume text (using pdfplumber/python-docx), call the OpenAI API with a structured prompt to extract and score Education, Experience, Skills, and provide Strengths/Weaknesses feedback, store structured results in the ResumeAnalysis database table, and update resume status to 'completed'. Also implement GET /api/v1/resumes/{resume_id}/analysis to retrieve analysis results. NOTE: Frontend tasks AnalysisVisualization, AnalysisEducation, AnalysisExperience, AnalysisFeedback, and AnalysisMetrics depend on this endpoint.

As a Tech Lead, verify the end-to-end integration between the Landing page resume upload frontend and the backend upload API. Ensure: (1) the upload file picker in LandingHero/LandingCTA correctly calls uploadResume() from the API client, (2) upload progress is reflected in global state and displayed to the user, (3) on success the resumeId is stored in global state and the user is navigated to /Analysis, (4) error states (file too large, wrong format, server error) are handled gracefully with user-visible messages. NOTE: Depends on both the Landing frontend sections and the backend upload endpoint being complete.

As a Backend Developer, implement the GET /api/v1/resumes/{resume_id}/report endpoint that generates and returns a downloadable report in the requested format (PDF, DOCX, JSON) via query param ?format=pdf. PDF generation using ReportLab or WeasyPrint; DOCX using python-docx. The report should include resume score, section feedback, strengths, weaknesses, and recommendations. NOTE: Frontend task AnalysisActions depends on this endpoint for the download flow.

As a Tech Lead, verify the end-to-end integration between the Analysis page frontend sections and the backend analysis API. Ensure: (1) on page load the resumeId is read from global state or URL param, (2) GET /api/v1/resumes/{resumeId}/analysis is called and results populate AnalysisMetrics, AnalysisEducation, AnalysisExperience, AnalysisFeedback, and AnalysisVisualization with real data (not static mock data), (3) the AnalysisSidebar progress indicators reflect real section scores, (4) loading and error states are handled gracefully in each section, (5) the 3D visualization rooms reflect the real analysis section scores. Confirm data contracts match between FastAPI response schema and frontend data expectations.

As a Tech Lead, verify the end-to-end integration between the AnalysisActions frontend download flow and the backend report generation API. Ensure: (1) the format selector (PDF/DOCX/JSON) correctly passes the ?format= query param, (2) the download button calls GET /api/v1/resumes/{resumeId}/report and handles the Blob response to trigger a browser file download with the correct filename and MIME type, (3) the progress simulation in AnalysisActions is replaced or supplemented with real download progress via XHR onprogress events, (4) the share via email flow either sends an email via a backend endpoint or copies a shareable link.