shadow-portfolio

As a frontend developer, implement the HomeHero section for the Home page. This component uses a custom useTypewriter hook cycling through TAGLINES array ('Full-Stack Developer', 'IT Engineering Student', etc.) with TYPE_SPEED=80ms and DELETE_SPEED=50ms, a useMousePosition hook with requestAnimationFrame throttling for parallax mouse tracking, useAnimation from Framer Motion for contentControls, useRef for rootRef and shapesRef array, and GSAP staggered entrance animations for geometric background shapes. The hero renders Bhavik's name, a typewriter tagline, profile intro, and MagneticCTA buttons. Parallax background shapes translate at different speeds based on mouse position. CSS includes responsive scaling at 767px and 1024px breakpoints.

As a frontend developer, implement the IntroSection for the Home page. Uses useInView with once:true and margin:'-80px' for scroll-triggered reveal, useState for linesRevealed (triggered 800ms after inView). Renders a two-column layout: left column with staggerContainer/lineVariant animations for headline lines featuring 'Bhavik Tanna' in primary accent and 'Engineer' in gold accent, two descriptionLines with highlighted spans, accentLineVariant custom-delay vertical bars, and buttonVariant spring-scaled CTA buttons. Right column shows a sideCardVariant animated card with a barFillVariant width animation (0% to 78% over 1.2s). Decorative background shapes use shapeVariantLeft/Right with CSS parallax via --scroll variable. CSS has responsive breakpoints for mobile/tablet/desktop.

As a frontend developer, implement the SummarySection for the Home page. Renders a 6-card grid using summaryCards array with icons from react-icons/fi (FiAward, FiCode, FiBookOpen, FiCpu, FiUsers, FiTrendingUp). Each card uses cardVariants with rotateY:-90 to 0 flip entrance animation staggered by index*0.15. Cards show icon, title, desc, tag pills with conditional cssClass styles (ss-tag--accent, ss-tag--green, ss-tag--secondary), and optional stat display (e.g. '8+ Projects Shipped'). The 'status' card (id:'status') shows a showStatus indicator. Header uses headerVariants opacity/y animation. Imports SummaryCard.css and SummarySection.css. CSS includes grid layout collapsing for mobile.

As a frontend developer, implement the SocialLinksSection for the Home page. Renders three MagneticIconButton components for LinkedIn, GitHub, and Email (mailto:bhavik@shadow-portfolio.dev) using FiLinkedin, FiGithub, FiMail from react-icons/fi. Each MagneticIconButton uses useRef, useState for offset/hovering/ripples, useCallback for handleMouseMove (magnetic offset up to 10px), handleMouseEnter/Leave, and handleClick. Click spawns ripple elements via rippleCounter with AnimatePresence — each ripple animates scale:0→3.5 and opacity:0.7→0 over 600ms. Button animates backgroundColor between '#F4511E' and '#FF9800' on hover, scale:1.15 on hover via Framer Motion spring (stiffness:350, damping:20). Each button has an sl-icon-label below. CSS includes responsive layout.

As a frontend developer, implement the FilterToggleSection for the Home page. Uses useState for activeFilter ('all' or 'tech'). Renders two filter buttons from FILTERS array with aria-pressed attributes. Active button shows a spring-animated fts-badge (scale:0→1), a shared layoutId 'fts-active-underline' motion.div for animated tab indicator (spring stiffness:400, damping:30), and an AnimatePresence-driven fts-glow div with infinite boxShadow pulse animation cycling between 12px and 20px gold glow (rgba(255,215,0)). Background has two parallax decorative circles translated via --scroll CSS variable. CSS includes fts-root, fts-toggle-wrapper, fts-btn, fts-btn--active, fts-underline, fts-glow styles.

As a frontend developer, implement the CTASection for the Home page. Uses useRef for sectionRef, gradientRef, waveRef, primaryBtnRef, secondaryBtnRef; useInView (once:false, margin:'-100px') for isInView; useState for mouseOffset. GSAP scroll-driven gradient shift via gsap.ticker.add: reads section getBoundingClientRect, computes progress (0-1), dynamically updates gradient background angle (135+progress*30 deg) and gold/blue opacity, and shifts waveRef translateY by progress*20px. handleButtonMouse applies magnetic offset (dx*6, dy*4) on primary/secondary buttons. Framer Motion containerVariants uses spring stiffness:120/damping:20 with staggerChildren:0.15; childFromLeft/Right animate x:-60/60→0; childFadeUp variant also used. CSS includes wave SVG, responsive layout.

As a frontend developer, implement the Footer section for the Home page. Uses useState for openMobile (accordion index). Renders 3 columns: Navigate (navLinks list with ftr-nav-link hover translateX(4px) and arrow reveal), Connect (FiLinkedin, FiGithub as motion.a with whileHover scale:1.12/y:-3 spring), Contact (FiMail/FiMapPin with bhavik@shadow-portfolio.dev and Gujarat, India). Mobile accordion uses AnimatePresence with height:0→auto/opacity transitions per column. Desktop shows ftr-desktop-wrap via CSS media query. Animated ftr-separator uses whileInView scaleX:0→1 over 1.2s. Decorative parallax layer with 3 shapes at --scroll speed -0.15. Bottom bar shows copyright with ftr-brand-accent and tagline. CSS has accordion logic, responsive breakpoints at 767px and 1024px. Note: component may already exist from HiddenURL page.

As a frontend developer, implement the SkillsNavbar section for the Skills page. This reuses the shared Navbar component (may already exist from the Home page task 66d84d08-c169-449d-bc2d-9c5b428c8742). The navbar uses useState for activeLink ('Home') and mobileOpen state, renders NAV_LINKS array with MagneticNavItem sub-components that use useRef, useCallback, and Framer Motion spring animations for magnetic cursor-tracking hover effects. Includes LogoSVG with motion.path pathLength draw-on animation, LinkedIn/GitHub social links with SVG icons, a 'Get In Touch' CTA button, and an AnimatePresence-powered mobile menu with staggered motion.li entries. Uses nb- CSS prefix with sticky positioning, backdrop-filter blur, and responsive hamburger toggle at 767px breakpoint.

As a frontend developer, implement the shared Navbar component for the Projects page. This component may already exist from the Home page (task 66d84d08-c169-449d-bc2d-9c5b428c8742). It uses useState for activeLink and mobileOpen state, renders NAV_LINKS array with MagneticNavItem sub-components that track cursor offset via useRef/useCallback for magnetic hover effect, Framer Motion AnimatePresence for mobile menu slide-in, LogoSVG with motion.path draw animation, LinkedIn/GitHub social links, and a hamburger button with animated line transforms. CSS handles sticky positioning, backdrop-filter blur, and responsive hide/show of desktop vs mobile nav.

As a frontend developer, implement the AchievementsHero section for the Achievements page. This section uses a `section.ah-root` container with three layered visual systems: (1) decorative animated background blobs via `.ah-shape--1/2/3` divs, (2) 12 floating `.ah-particle` elements (including 2 large variants), and (3) a geometric SVG accent with concentric hexagons in rgba white/gold/coral strokes. The main content uses Framer Motion `containerVariants` with `staggerChildren: 0.12` and `delayChildren: 0.15`, plus `itemVariants` (opacity/y slide-up) and `headlineVariants` (larger y: 40 travel). A `useRef` on `accentLineRef` drives a GSAP shimmer sweep: `backgroundPosition` animates from `200% center` to `-200% center` over 2.4s with `repeat: -1` and `repeatDelay: 4`, creating a moving shine across the gradient headline text. STATS array renders 4 stat cards: 30+ Achievements, 12 Certifications, 5 Awards, 3 Hackathons Won. Note: Navbar/MagneticNavItem component likely already exists from Skills or Projects page.

As a frontend developer, implement the HiddenHero section for the HiddenURL page using hh- CSS prefix. Renders a decorative background with hh-glow div, hh-deco-dots dot grid pattern, and 7 absolutely-positioned hh-deco-shape elements (hh-deco-shape--1 through --7) for geometric depth. Includes an SVG hh-geo-top with two nested polygon outlines (points='160,10 300,100 20,100' and inner polygon) in #1A73E8. Main hh-content contains: framer-motion animated hh-badge with hh-badge-dot and 'Restricted Access' text (opacity/y fade, duration:0.5), h1 hh-headline with hh-headline-accent span for 'Admin Access' (delay:0.1), hh-divider with scaleX:0→1 animation (delay:0.25, transformOrigin:center), hh-subheadline paragraph (delay:0.2), and hh-intro paragraph (delay:0.32). All purely static with entrance animations, no state.

As a frontend developer, implement the Footer section for the HiddenURL page using ftr- CSS prefix. This reuses the shared Footer component (may already exist from Projects/Skills/Achievements pages). Uses useState(null) for openMobile accordion state with toggleMobile(idx) toggle function. Renders ftr-root footer with: ftr-deco-layer containing 3 ftr-deco-shape circles (absolute positioned decorative blobs). motion.div ftr-separator with scaleX:0→1 whileInView animation (duration:1.2). ftr-columns with 3 motion.div ftr-column items (staggered delay: 0.15*idx): 'Navigate' column with ftr-nav-list anchors and ftr-nav-link-arrow spans, 'Connect' column with FiLinkedin/FiGithub motion.a ftr-social-btn elements (whileHover scale:1.12 y:-3), 'Contact' column with FiMail/FiMapPin contact items. Mobile accordion via AnimatePresence height:0→auto on ftr-mobile-body. Desktop content always visible via ftr-desktop-wrap. ftr-bottom with copyright mentioning 'Bhavik Tanna' and tagline.

As a frontend developer, implement the Navbar section for the Login page. This component (Navbar.css, React with useState for activeLink and mobileOpen) may already exist from Projects/HiddenURL pages — reuse or reference the shared component. Includes: LogoSVG with SVG draw animation, MagneticNavItem components with framer-motion shared layout underline for desktop nav links (NAV_LINKS array: Home, Projects, Achievements, Skills, Dashboard), LinkedIn/GitHub social icon links, 'Get In Touch' CTA button pointing to /Login, and animated hamburger button with aria-expanded toggling mobile menu via AnimatePresence.

Implement full Projects REST API in Express: GET /api/projects (public, supports ?category=tech filter), POST /api/projects (auth-protected), PUT /api/projects/:id (auth-protected), DELETE /api/projects/:id (auth-protected). Handles Cloudinary image URL storage. Uses Mongoose Project model with fields: title, description, category (tech/non-tech), imageUrl, githubLink, liveLink, techStack, createdAt, updatedAt. Required by ProjectsGrid, ProjectsTechOnly, ProjectsFilters, DashboardProjectsPreview sections.

Implement full Achievements REST API in Express: GET /api/achievements (public, supports ?category=tech filter), POST /api/achievements (auth-protected), PUT /api/achievements/:id (auth-protected), DELETE /api/achievements/:id (auth-protected). Mongoose Achievement model with fields: title, description, category (tech/non-tech), imageUrl, date, createdAt, updatedAt. Required by AchievementsGrid, AchievementsTimeline, AchievementsStats, DashboardAchievementsPreview, and AchievementsPreviewSection sections.

Implement Skills REST API in Express: GET /api/skills (public, supports ?category=tech filter), POST /api/skills (auth-protected), PUT /api/skills/:id (auth-protected), DELETE /api/skills/:id (auth-protected). Mongoose Skill model with fields: name, category (tech/non-tech), level (percentage), createdAt. Required by SkillsGrid, SkillsCategories, SkillsPreviewSection, and SkillsFilter sections.

Implement POST /api/upload endpoint in Express using Multer for multipart/form-data handling and Cloudinary SDK for cloud storage. Returns secure Cloudinary image URL. Supports JPG, PNG, GIF, PDF, MP4, SVG (max 10MB per file). Auth-protected via JWT middleware. Required by UploadDragZone, UploadFileList, and UploadActions sections (tasks 3d85b9bf, f5411fc4, 30d3effb).

Create backend/middleware/auth.js that extracts Bearer token from Authorization header, verifies it using jsonwebtoken with JWT_SECRET env variable, attaches decoded admin payload to req.admin, and returns 401/403 on failure. Applied to all protected routes (POST/PUT/DELETE for projects, achievements, skills, upload). Prerequisite for all CRUD API tasks.

Create backend/seed.js script to populate initial data into MongoDB: default Admin user (admin@bhavikportfolio.com + hashed password), Bhavik's 6 real projects (College Campus App, IoT Smart System, Hospital Management, Sign Language Detection, Web Platforms, Portfolio Website) with correct categories and metadata, and 4 achievements (hackathon prizes, chess tournaments) from the SRD. Run once on first deployment. Includes a --reset flag to clear and re-seed.

Implement frontend/src/context/AuthContext.jsx providing AuthProvider with state for admin user, JWT token (stored in localStorage), login(email, password) function calling authService, logout() clearing storage, and isAuthenticated boolean. Export useAuth hook. Wire up frontend/src/components/PrivateRoute.jsx to redirect unauthenticated users to /HiddenURL. Used by Dashboard, Upload, and all admin panel pages. Note: basic login is already done — this task focuses on the global context wiring and PrivateRoute guard.

Set up backend/server.js with Express: configure CORS middleware with CLIENT_ORIGIN whitelist, express.json() body parser, express-fileupload or multer global setup, mount all routers (/api/auth, /api/projects, /api/achievements, /api/skills, /api/upload), connect to MongoDB via Mongoose with error handling, and start server on PORT. Add health check GET /api/health endpoint returning {status: 'ok', timestamp}.

As a frontend developer, implement the ProjectsPreviewSection for the Home page. Renders 4 project cards (Inventory Management System, Weather Analytics Dashboard, Collaborative Task Tracker, E-Commerce Platform) each with Unsplash thumbnail images, tech stack tags, liveUrl/repoUrl links, and color-coded accents. Uses useState/useRef/useCallback/useEffect from React and gsap for animations. Cards support a flip-on-hover interaction revealing fullDesc, tech stack, and action buttons. A horizontal carousel is implemented with drag functionality and navigation arrows. AnimatePresence handles card transitions. PROJECTS array includes id, title, desc, fullDesc, tech, color, thumb, liveUrl, repoUrl. CSS handles carousel layout, card flip 3D transform, and responsive grid collapse.

As a frontend developer, implement the AchievementsPreviewSection for the Home page. Renders 6 achievement cards using achievements array with ids, title, date, description, category, and isTech flag. Uses useState for hoveredId and useInView (gridRef, once:true, margin:'-60px') for scroll reveal. categoryConfig maps Academic/Technical/Leadership to cssClass (ap-badge--academic, ap-badge--technical, ap-badge--leadership) and emoji icons. Background has two parallax layers: ap-deco-bg (speed -0.25) with ap-shape--amber-lg and ap-shape--blue-md, and ap-deco-mid (speed -0.4) with additional shapes. Cards animate in on inView. CSS includes grid layout with responsive columns and hover state transitions.

As a frontend developer, implement the SkillsPreviewSection for the Home page. Uses useState for filter ('all'/'tech') and hoveredTag, useRef for rootRef, and IntersectionObserver (threshold:0.1) to set isVisible state. SKILL_DATA has 4 categories: Frontend (8 skills), Backend (6 skills), Tools (7 skills), Soft Skills (5 skills) — each with name, icon (Unicode symbols), and projects count. filter===tech hides the Soft Skills category. filteredCategories total is computed. Skill tags show on hover with AnimatePresence. Decorative background layer uses --scroll CSS variable for parallax (speed -0.25). CSS includes skp-root, category grid, skill tag styles, and responsive breakpoints.

As a frontend developer, implement the SkillsHero section for the Skills page. Uses useRef for decoLayerRef with a GSAP scroll listener that sets y: scrollY * -0.3 for a parallax effect on the sh-deco-layer div containing 3 circles, 2 squares, 3 lines, and 3 dots as decorative elements. Renders STATS array (30+ Technologies, 6 Domains, 3+ Years Coding) with Framer Motion whileHover y:-4 spring animations and dividers between items. Renders CHIPS array of 6 technology domain labels (Frontend Stack, Backend & APIs, DevOps & Cloud, Databases, Languages, Tools & Workflow) each with a unique SRD color. Headline uses sh-headline-accent span for 'Skills' keyword. Uses sh- CSS prefix. Responsive across mobile/tablet/desktop.

As a frontend developer, implement the SkillsFilter section for the Skills page. Uses useState for activeFilter ('all' | 'tech'). Renders FILTERS array with 2 buttons ('All Skills' with ◈ icon, 'Tech Only' with ⟨/⟩ icon). Each button uses AnimatePresence with layoutId='skf-pill' for an animated active pill background and layoutId='skf-underline' for a scaleX underline indicator, both using spring physics (stiffness 380-420, damping 28-32). Displays a skf-badge with motion scale animation (0.85→1) keyed to displayCount, showing TOTAL_SKILLS=28 or TECH_SKILLS=21 with aria-live='polite'. Uses skf- CSS prefix with role='group' for accessibility. Responsive stack on mobile.

As a frontend developer, implement the SkillsHighlight section for the Skills page. Renders PROFICIENCY_CARDS array with 3 specialty cards: Frontend Specialist (92%, #2A2D8F), Full-Stack Builder (87%, #E94E77), Cloud Architecture (78%, #FF8A65). Each card has tags, metrics array (3 values each), a ProficiencyBar sub-component using motion.div with width 0→`${pct}%` animated on inView with 1.1s ease duration. SkillCard sub-component uses useRef with GSAP y: -6 on mouseEnter and y: 0 on mouseLeave (power2.out, overwrite: true). useState for activeCard tracking which card is active (sh-card--active class). useInView hook for sectionInView trigger. Uses sh- CSS prefix. Cards render with icon, iconBg, accentColor, description, tags, and proficiency bar.

As a frontend developer, implement the SkillsCTA section for the Skills page. Uses useRef for rootRef and headlineRef, useInView with once:true margin:'-80px'. GSAP animates headlineRef backgroundPosition from '200% center' to '0% center' (1.4s power2.out, delay 0.2) on inView for an animated gradient text effect. Renders stats array (20+ Technologies, 15+ Projects Built, 3+ Years Experience) with Fragment and scta-stat-divider separators. Framer Motion containerVariants with staggerChildren 0.13s, itemVariants (opacity 0→1, y 28→0, spring stiffness 280 damping 26) applied to eyebrow badge, headline, description, stats row, and CTA buttons. Decorative scta-shapes with 5 floating shape divs and scta-bg animated gradient. Uses scta- CSS prefix.

As a frontend developer, implement the SkillsFooter section for the Skills page. This reuses the shared Footer component (may already exist from Home page task 7a512859-af5c-4442-b5e9-ebf6f567ccaa). Uses useState for openMobile accordion state. Renders 3 columnData entries: Navigate (ftr-nav-list with 5 nav links + ftr-nav-link-arrow), Connect (ftr-social-list with FiLinkedin and FiGithub via react-icons, motion.a with whileHover scale:1.12 y:-3, spring stiffness 400 damping 18), Contact (FiMail link to bhavik@shadow-portfolio.dev, FiMapPin for Gujarat India). Motion.div ftr-separator scaleX 0→1 whileInView. Mobile accordion with AnimatePresence height 0→auto, desktop ftr-desktop-wrap toggle. Footer bottom shows copyright with ftr-brand-accent and tagline. Uses ftr- CSS prefix.

As a frontend developer, implement the ProjectsHero section with a STATS array (12+ Projects Built, 8 Tech Stacks, 3 Live Products). Uses useRef for rootRef, accentRef, decoLine1Ref, decoLine2Ref, statsRef; useInView with once:true and -60px margin; useAnimation from Framer Motion. On inView, adds 'ph-animated' class to rootRef and runs a GSAP context with two animations: stat values pop in via scale 0.7→1 with back.out(1.8) easing and 0.12 stagger, and accent line bars scale from scaleX:0 with power3.out. Framer Motion variants handle eyebrow (delay 0.08), headline (delay 0.2), subtext (delay 0.36), and underline scaleX reveal (delay 0.52). Decorative layer includes ph-deco-lines with 3 lines and 2 circles positioned absolutely.

As a frontend developer, implement the ProjectsFilters section with a FILTERS array containing 'all' (12 projects) and 'tech' (8 projects) options with inline SVG icons. Uses useState for activeFilter and isScrolled; useRef for stickyRef and labelRef. Scroll listener sets isScrolled when window.scrollY > 80, toggling 'pf-scrolled' class for elevated shadow. GSAP entrance animates labelRef from opacity:0/x:-12 to visible on mount. handleButtonClick via useCallback creates a DOM ripple element (className 'pf-ripple') at click coordinates, appends to button, removes after 550ms. AnimatePresence renders active filter indicator with layoutId-based shared layout animation between filter buttons.

As a frontend developer, implement the ProjectsCTA section with a STATS array (12+ Projects Built, 8+ Tech Stacks, 3+ Years Coding). Uses useRef for rootRef and statsRef; useInView with once:true and -80px margin; useState for visible boolean. On inView, sets visible:true and runs GSAP counter animation on all '.pcta-stat-number' elements using a shared obj.val tween (power2.out, 1.4s duration, 0.15s stagger per stat) that updates textContent with Math.round + '+' suffix. Framer Motion containerVariants with staggerChildren:0.12 wraps itemVariants (opacity 0→1, y 28→0) for eyebrow, h2 with pcta-headline-accent span, supporting paragraph, and CTA button group. Three absolute-positioned pcta-bg-shape blobs for decorative background.

As a frontend developer, implement the shared Footer component for the Projects page. This component may already exist from the Home page (task 7a512859-af5c-4442-b5e9-ebf6f567ccaa). Uses useState for openMobile accordion index. Renders columnData array with 3 columns: Navigate (navLinks list with hover arrow reveal), Connect (FiLinkedin/FiGithub from react-icons/fi as Framer Motion whileHover scale:1.12/y:-3 buttons), Contact (FiMail/FiMapPin items for bhavik@shadow-portfolio.dev and Gujarat, India). Framer Motion motion.div with whileInView/viewport for each column entrance. ftr-deco-layer has 3 absolutely positioned shape divs. Animated ftr-separator uses scaleX 0→1 whileInView. Mobile accordion uses AnimatePresence height:0→auto. Desktop ftr-column hover expands flex via CSS.

As a frontend developer, implement the AchievementsFilter section for the Achievements page. This section uses `useState('all')` to track the active filter among 4 options: All (24), Tech Only (16), Leadership (5), Academic (3). Filter buttons are `motion.button` elements with `whileTap={{ scale: 0.96 }}` and `whileHover={{ y: -1 }}`. A shared `layoutId='af-active-underline'` `motion.span` animates between active buttons with spring physics (`stiffness: 500, damping: 30`). A visual `af-divider` separates buttons at index 2. An `AnimatePresence mode='wait'` block renders the result count label (e.g. '16 achievements') with `opacity/y` crossfade on filter change. The section uses `.af-sticky-wrapper` for sticky positioning below the navbar. Counts are currently static; wire up to emit filter state if a shared context is later added.

As a frontend developer, implement the AchievementsStats section for the Achievements page. This section renders 4 stat cards using a custom `useCountUp(target, isVisible, duration)` hook that uses `gsap.to` on a `{ val: 0 }` object, calling `setCount(Math.round(obj.val))` on each update tick. Stats are: 24+ Total Achievements, 9 Awards Received, 15+ Certifications Earned, 4yrs Years Active. Each `StatCard` component uses `useInView` from framer-motion with `once: true, margin: '-60px'` to trigger the count-up. `motion.div` cards animate with `opacity: 0, y: 32` → visible using staggered `delay: index * 0.12`. Each card contains an `.ast-icon-wrap` (emoji), `.ast-number-row` with number + suffix span, `.ast-label`, `.ast-sublabel`, and a decorative `.ast-card-ring` pseudo-element. A `.ast-bg-accent` decorative div sits behind the content grid.

As a frontend developer, implement the AchievementsCertifications section for the Achievements page. This section renders 6 certification cards from the `certifications` array: AWS Solutions Architect (March 2024), Google Cloud Professional Data Engineer (Jan 2024), Meta Front-End Developer Certificate (Oct 2023), CKA (Aug 2023), TensorFlow Developer (Jun 2023), HackerRank Python Advanced (Apr 2023). Each card displays: `ShieldIcon` SVG (custom inline component with checkmark path), issuer name, date via `CalendarIcon` SVG component, a skills chips list, and a credential link using `ExternalLinkIcon` SVG component. GSAP is imported and used via `useRef` for entrance animations on scroll. Cards use `motion.div` with stagger. The section header includes an eyebrow label and title with accent text. Skills chips render as inline flex tags per cert.

As a frontend developer, implement the AchievementsTimeline section for the Achievements page. This section renders a vertical timeline from `TIMELINE_ITEMS` array (7 items spanning 2019–2024): SSC Board 94.6%, HSC 91.2%, State Hackathon 1st Place (highlight + ribbonLabel 'Award'), GSoC Contributor, AWS Certification, Technical Head Leadership, and shadow-portfolio Production Launch (highlight + ribbonLabel 'Current'). Uses `useScroll` and `useSpring` from framer-motion to animate a progress line that fills as the user scrolls through the section. GSAP is used via `useRef` for individual item entrance animations. `useState` tracks which items are visible. Highlighted items (`highlight: true`) receive special visual treatment (ribbon badge with `.ribbonLabel`). Tags render as colored chips per item. The timeline uses alternating left/right layout on desktop, collapsing to single-column on mobile.

As a frontend developer, implement the AchievementsCTA section for the Achievements page. This section uses `useInView(sectionRef, { once: true, margin: '-80px' })` to trigger a Framer Motion `containerVariants` (staggerChildren: 0.12) with `itemVariants` (y: 30 spring, ease [0.34,1.2,0.64,1]). A GSAP `context` block animates `.acta-deco-ring` elements from `opacity: 0, scale: 0.85` to visible with `stagger: 0.2` on inView. The decorative layer includes `.acta-deco-grid`, 3 `.acta-deco-orb` blobs, and 3 `.acta-deco-ring` rings. Content includes: an `acta-badge` with pulsing dot ('Open to Opportunities'), `acta-headline` with `.acta-headline-accent` styled text ('Let's Build Something Remarkable'), and 4 inline stats (25+ Achievements, 10+ Certifications, 3 Awards, 2 Hackathons). Two CTA buttons use `primaryBtnRef` and `secondaryBtnRef` with GSAP `back.out(1.8)` hover scale/y animations. A footer component (reused from Home/Projects/Skills) renders below.

As a frontend developer, implement the HiddenLoginForm section for the HiddenURL page using hlf- CSS prefix. Manages 6 state hooks: email (useState('')), password (useState('')), rememberMe (useState(false)), showPassword (useState(false)), error (useState('')), isLoading (useState(false)). handleSubmit validates empty email/password fields setting inline error messages, then simulates API call via setTimeout(1400ms) that sets 'Invalid credentials. Access denied.' error. Renders motion.div hlf-card with opacity/y entrance (duration:0.5, cubic-bezier easing). hlf-header contains hlf-lock-icon SVG (padlock rect+path), hlf-title 'Admin Access', hlf-subtitle. AnimatePresence wraps hlf-error alert div with height:0→auto animation (role='alert', aria-live='assertive'). Form has email input with hlf-input-wrap/hlf-input-icon, password field with showPassword toggle button revealing eye/eye-off SVG, rememberMe checkbox, and submit button showing spinner SVG when isLoading=true.

As a frontend developer, implement the LoginHero section for the Login page using LoginHero.css and framer-motion. Renders a staggered entrance animation sequence: eyebrow tag ('Admin Access') with lh-eyebrow-dot fades in at delay 0.05s, h1 headline 'Welcome back, Bhavik.' with lh-headline-accent comma fades in at delay 0.15s, subheadline 'Sign in to manage your portfolio' at delay 0.25s, description paragraph at delay 0.35s, and a decorative lh-divider with two lh-divider-line spans flanking a lock SVG icon at delay 0.45s. All elements use initial opacity:0/y:16 to animate:opacity:1/y:0 transitions with easeOut.

As a frontend developer, implement the LoginForm section for the Login page using LoginForm.css and ArrowRightIcon.css. Manages six useState hooks: email, password, rememberMe, showPassword, isLoading, and error. The lf-card contains: LockIcon in lf-card-icon, email input with MailIcon prefix (autocomplete='email', placeholder 'bhavik@shadow-portfolio.dev'), password input with KeyIcon prefix and lf-pw-toggle button toggling showPassword to switch input type between 'text'/'password', rememberMe checkbox, AnimatePresence-driven error message display, and submit button. handleSubmit prevents default, validates fields, simulates 1200ms async auth delay, then redirects to /Dashboard on success or sets error state on failure. isLoading state controls button spinner/disabled state.

As a frontend developer, implement the LoginSignupPrompt section for the Login page using LoginSignupPrompt.css and framer-motion. Renders a lsp-divider made of five lsp-dot spans (center dot has lsp-dot--center modifier), followed by a motion.div (lsp-inner) with initial opacity:0/y:8 animating to opacity:1/y:0 at delay 0.2s easeOut. Inside: a lsp-prompt-text paragraph ('New to shadow-portfolio?') and an anchor lsp-signup-link pointing to /Register with a lsp-signup-arrow span displaying '→'.

As a frontend developer, implement the Footer section for the Login page using Footer.css and react-icons (FiLinkedin, FiGithub, FiMail, FiMapPin). This component may already exist from Projects/HiddenURL pages — reuse or reference the shared Footer component. Manages openMobile useState for accordion toggling via toggleMobile. Renders: parallax ftr-deco-layer with three decorative shape divs using CSS var(--scroll) transform, animated ftr-separator line via motion.div scaleX 0→1 whileInView, three columnData columns (Navigate with navLinks list + arrow spans, Connect with motion.a social buttons using whileHover scale:1.12/y:-3 spring animation, Contact with FiMail/FiMapPin items). AnimatePresence handles mobile accordion expand/collapse.

As a frontend developer, implement the Navbar section for the Dashboard page. This component (likely already exists from previous pages) uses useState for activeLink and mobileOpen state, renders a LogoSVG with draw animation, a MagneticNavItem list mapped from NAV_LINKS array (Home, Projects, Achievements, Skills, Dashboard), LinkedIn/GitHub social SVG icon links, a 'Get In Touch' CTA anchor, and an animated hamburger button with nb-hamburger/nb-open CSS classes. Uses framer-motion AnimatePresence for mobile menu transitions. Import from ../styles/Navbar.css.

Implement frontend/src/services/api.js using Axios with a configured base URL from VITE_API_URL env variable. Includes request interceptor to attach JWT token from localStorage to Authorization header, and response interceptor to handle 401 errors by redirecting to /HiddenURL. Export typed functions: getProjects(category?), createProject(data), updateProject(id, data), deleteProject(id), getAchievements(category?), createAchievement(data), updateAchievement(id, data), deleteAchievement(id), getSkills(category?), uploadFile(formData), login(email, password). Required by all frontend sections that fetch dynamic data.

Implement frontend/src/routes/AppRoutes.jsx defining all React Router v6 routes: public routes (/ → HomePage, /projects → Projects, /achievements → Achievements, /skills → Skills, /HiddenURL → HiddenURL, /login → LoginPage, /privacy → PrivacyPage, /terms → TermsPage) and protected routes wrapped in PrivateRoute (/ dashboard → Dashboard, /upload → Upload). Ensure hidden admin URL (/HiddenURL) is not referenced in any public navigation component. Wire up in App.jsx with BrowserRouter.

Configure Render deployment for the Node.js/Express backend: set start command to 'node server.js', configure all env variables (MONGODB_URI, JWT_SECRET, CLOUDINARY_*, CLIENT_ORIGIN) in Render dashboard, set up MongoDB Atlas free cluster and whitelist Render IPs, configure Cloudinary free tier for image hosting. Document deployment and post-deploy seed script execution steps.

As a frontend developer, implement the SkillsGrid section for the Skills page. Renders SKILL_CATEGORIES array with 6 categories (frontend, backend, databases, devops, tools, soft) each containing individual skill objects with name, icon emoji, and proficiency level (65-97%). Uses GSAP for animated skill bars via useRef and useEffect on scroll. Framer Motion containerVariants with staggerChildren and cardVariants (opacity 0→1, y 40→0, scale 0.96→1, spring stiffness 260 damping 22) triggered via whileInView. Each category renders as a card with sg-tag-- color classes: sg-tag--frontend (#4C5ACF), sg-tag--backend (#E94E77), sg-tag--databases (#2aa44e), sg-tag--devops (#8B5CC5), sg-tag--tools (#FF8A65), sg-tag--soft (#FFD54F). Uses sg- CSS prefix. Responsive grid 1→2→3 columns.

As a frontend developer, implement the SkillsCategories section for the Skills page. Renders CATEGORIES array of 6 category cards (frontend, backend, devops, databases, languages, soft) each with theme class, icon, title, and skill tag array. Uses CategoryCard sub-component with useRef and GSAP mouseEnter/mouseLeave handlers animating --card-glow CSS variable (power2.out/in easing). Framer Motion containerVariants with staggerChildren 0.1s, cardVariants (opacity 0→1, y 32→0, scale 0.97→1, spring stiffness 260 damping 24) via useInView. Renders STATS row (6 Categories, 50+ Technologies, 3+ Years Coding, 15+ Projects Built) with statVariants spring animations. headerVariants fade-up on section header. Uses sc- CSS prefix. Responsive 1→2→3 grid.

As a frontend developer, implement the ProjectsGrid section rendering a PROJECTS array of 6+ project objects (shadow-portfolio, Smart Attendance, Campus Connect, StockSense, DevOps Toolkit, EcoTrack). Each project card has: id, title, description, category with categoryClass (pg-card-category--web/ml/mobile/systems), emoji, bgClass for gradient (pg-card-img-bg--1 through 5+), techStack array, github/live URLs, year, and featured boolean. Cards render with Framer Motion motion.div for scroll-reveal animations. Featured projects get a visual badge. Tech stack chips, GitHub link, and optional live demo link render in card footer. Uses useState for any hover/modal state. CSS grid collapses from 3-col desktop to 1-col mobile.

As a frontend developer, implement the ProjectsTechOnly section rendering a TECH_PROJECTS array of 5+ detailed tech projects (User Management System, shadow-portfolio, Dynamic CI/CD Pipeline, ML Sentiment Classifier, Real-Time Chat Engine). Each project has: id, title, year, icon emoji, description, tags array with label/color pairs (green/blue/indigo/coral/amber/pink), githubUrl, liveUrl (nullable), and complexity (1-3). Uses useState and useEffect with AnimatePresence for tab/filter switching. GSAP from gsap import handles entrance animations. Tag color variants map to CSS classes. Complexity renders as dot indicators. Cards include GitHub and optional live URL action buttons.

As a frontend developer, implement the AchievementsGrid section for the Achievements page. This section renders a card grid from a `ACHIEVEMENTS` array of 6+ items including: National Hackathon Winner (SIH 2023), Top Open Source Contributor (15k-star Python ML lib), Published IEEE Research Paper (18 citations), GTU University Rank 3 (8,400+ students), TechFest Lead Organizer (1,200 attendees), and more. Each card implements a CSS flip interaction: front face shows emoji, title, description, category badge (`.ag-badge--competition/open-source/academic/leadership`), and date; back face reveals `backDetail` text, a `techStack` chips array, and a link. `useState` tracks `flippedCard` id. GSAP animates card entrance via `gsap.fromTo` on scroll intersection via `IntersectionObserver` ref stored in `useRef`. The section uses `motion.div` wrappers for stagger entrance animations. Category badges use distinct color classes per category type.

As a frontend developer, implement the HiddenSecurityBadge section for the HiddenURL page using hsb- CSS prefix. Purely static with entrance animations, no state. Renders hsb-root section with aria-label='Security indicators'. Contains motion.div hsb-badge with opacity/y entrance (delay:0.3). Inside hsb-indicators row: hsb-lock-icon SVG (padlock), two hsb-divider separators, two motion.span hsb-pill elements animated with opacity/scale:0.9→1. First pill has hsb-pill-dot and 'SSL Encrypted' text (delay:0.45), second pill has hsb-pill-dot hsb-pill-dot--jwt and 'JWT Protected' text (delay:0.55), both with title attributes for tooltip text. motion.div hsb-footer-row (delay:0.65) contains hsb-footer-note span 'shadow-portfolio admin', hsb-footer-sep '·', and anchor to /PrivacyPolicy with hsb-privacy-link class.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for activeItem and a mobile collapsed state. Renders two nav item groups: NAV_ITEMS (Overview, Projects/badge:5, Achievements/badge:3, Upload, Skills) and SECONDARY_ITEMS (Settings), each with inline SVG icons. Active item is highlighted; badge counts displayed as pills. Uses framer-motion AnimatePresence for collapse/expand transitions. Import from ../styles/DashboardSidebar.css.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState(new Date()) and a useEffect setInterval (1000ms, cleared on unmount) to keep currentTime live. Renders three staggered framer-motion divs: a welcome row (label 'Admin Dashboard', h1 'Welcome back, Bhavik' with dh-name-accent span), a meta row with dh-date-badge (calendar SVG + formatDate en-IN locale) and dh-time-badge (animated dot + clock SVG + formatTime en-IN 12hr), a dh-divider, and a quick-actions bar with anchor buttons linking to /Projects. Import from ../styles/DashboardHeader.css.

As a frontend developer, implement the DashboardMetrics section for the Dashboard page. Renders a 4-card grid from the METRICS array (Total Projects 24, Total Achievements 17, Total Views 8420, Engagement Rate 74%). Each MetricCard uses useRef for valueRef and fillRef, and a useEffect that triggers a GSAP count-up animation on the numeric value and animates a progress bar fill. Cards use framer-motion containerVariants (staggerChildren: 0.1) and cardVariants (spring, opacity/y). Each card shows label, trend badge (trendType up/down), progress bar with progressLabel, accent color, and icon with iconBg/iconBgHover. Import from ../styles/DashboardMetrics.css.

As a frontend developer, implement the DashboardProjectsPreview section for the Dashboard page. Uses useState for projects list (5 entries: shadow-portfolio, TaskCollab Pro, SkillMap AI, EduPulse LMS, CampusConnect with tech stacks, avatar initials, avatarColor CSS modifier classes, status active/completed/inactive) and deletingId. handleDelete sets deletingId then uses setTimeout 350ms to filter the project out and reset. Renders a dpp-card with header (icon, title 'Recent Projects', subtitle, live project count badge) and a dpp-table-wrapper with StatusBadge sub-component (colored dot + label). Uses framer-motion AnimatePresence for row exit animations. Import from ../styles/DashboardProjectsPreview.css.

As a frontend developer, implement the DashboardAchievementsPreview section for the Dashboard page. Uses useState for achievements (5 entries: SIH 2024 Finalist, Head of Technical Events, Best FYP Award, Open Source 500+ Stars, Tech Lead IEEE) and deletingId, plus useRef tableRef. useEffect runs gsap.fromTo on .dap-row elements for staggered entrance animation. Renders CategoryBadge sub-component (category-specific CSS modifier + dot), EditIcon/DeleteIcon/ArrowRightIcon/TrophyIcon SVG helper components, and AnimatePresence for row deletion exit. Import gsap from 'gsap' and framer-motion. Import from ../styles/DashboardAchievementsPreview.css.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. Imports both ../styles/FilterTabs.css and ../styles/DashboardRecentActivity.css. Uses useState for active filter tab. Renders activityData (8 items: project, achievement, upload, edit, skill, achievement, delete, login types) with per-type icon components IconProject/IconAchievement/IconUpload/IconEdit/IconDelete/IconSkill/IconLogin (inline SVGs). Each activity row shows action title, description, timestamp, and a tag badge. FilterTabs allow filtering by activity type. Rows animate in via framer-motion motion.div with stagger. ACTIVITY_TYPES constant maps type keys to string values.

As a frontend developer, implement the Footer section for the Dashboard page. This component (likely already exists from previous pages — Projects, HiddenURL, Login) uses useState for openMobile accordion state, renders three columnData entries (Navigate with navLinks list, Connect with FiLinkedin/FiGithub motion.a social buttons with whileHover scale+y spring, Contact with FiMail/FiMapPin items). Includes a ftr-deco-layer with parallax CSS variable transform, three ftr-deco-shape divs, and a motion.div ftr-separator with scaleX whileInView animation. Uses react-icons/fi. Import from ../styles/Footer.css.

As a frontend developer, implement the Navbar section for the Upload page. This component may already exist from the Dashboard page (task 56c2a291-4074-432b-9da3-0109eb595357). It uses useState for activeLink and mobileOpen state, renders NAV_LINKS array (Home, Projects, Achievements, Skills, Dashboard) with MagneticNavItem sub-components that apply cursor-tracking magnetic hover via onMouseMove/onMouseEnter/onMouseLeave handlers and framer-motion spring animations. Includes LogoSVG with motion.path pathLength draw-on animation and a motion.circle pop-in. Right side has LinkedIn/GitHub SVG social links and a 'Get In Touch' CTA. Mobile hamburger toggles AnimatePresence-driven overlay and slide-down menu with staggered motion.li entries. Fully responsive via CSS media queries hiding nav-links below 767px and showing hamburger.

Configure Vercel deployment for the React/Vite frontend: add vercel.json with rewrites for SPA routing (all paths → index.html), set VITE_API_URL environment variable to the Render backend URL in Vercel dashboard, ensure build command is 'npm run build' and output directory is 'dist'. Document deployment steps. Note: the hidden /HiddenURL route must not appear in any public sitemap or robots.txt.

As a frontend developer, implement the UploadHeader section for the Upload page. Renders a breadcrumb nav with items [Dashboard → Projects → Upload] using ChevronRightIcon separators, with the current item (Upload) styled as .uh-breadcrumb-current. Includes a motion.a back button with whileHover x:-2 and whileTap scale:0.97 linking to /Dashboard. The main content row shows an UploadIcon badge (cloud-upload SVG) and h1 'Upload Work' with a description about adding projects/achievements to shadow-portfolio. Uses two useRef hooks (titleRef, iconRef) with GSAP animations on mount: backgroundSize 0%→100% underline on the title and scale 0.6→1 with back.out(1.7) ease on the icon badge. A horizontal .uh-divider animates via CSS uh-bar-expand keyframe. Responsive padding adjusts at 768px and 1024px breakpoints.

As a frontend developer, implement the UploadDragZone section for the Upload page. Uses useState for isDragOver and selectedFiles, useRef for zoneRef, fileInputRef, and dragCountRef. GSAP entrance animation on mount: opacity 0→1, y 16→0, scale 0.98→1 with back.out(1.4). Second GSAP effect toggles boxShadow between golden glow (rgba 255,215,0) on drag and subtle blue on idle. Handles drag events (handleDragEnter, handleDragLeave, handleDragOver, handleDrop) using dragCountRef to prevent flickering on child elements. Drag zone has corner accent elements (.udz-corner--tl/tr/bl/br) that expand on dragover. Content includes CloudUploadIcon with animated .udz-icon-arrow bounce, primary/sub text, file type chips for ACCEPTED_TYPES [JPG, PNG, GIF, PDF, MP4, SVG], and a hidden file input. Shows .udz-files-selected pill with pulsing dot when files are selected. Bottom hint bar shows max file size and multi-file support hints.

As a frontend developer, implement the UploadFileList section for the Upload page. Uses useState for a files array seeded with DEMO_FILES (5 entries: project-hero-banner.png, bhavik-resume-2026.pdf, portfolio-intro.mp4, achievement-certificate.jpg, skills-data.json). Includes utility functions getFileCategory, getFileTypeLabel, formatFileSize, getTotalSize. Renders a table-like list with grid-template-columns: 36px 1fr auto 44px, with a header row and per-file rows. File icon uses categoryIconMap (FiImage, FiVideo, FiFileText, FiArchive, FiCode, FiFile from react-icons/fi) with color-coded backgrounds per category. Each row has an .ufl-remove-btn with FiX icon that rotates 90deg on hover via CSS and triggers a GSAP-driven exit animation (ufl-row-exit keyframe). AnimatePresence wraps rows with rowVariants (hidden: x:-16, scaleY:0.9 → visible with staggered delays). Footer summary bar shows total file count/size with a 'Clear All' button. Hides file size column below 599px.

As a frontend developer, implement the UploadProgressBar section for the Upload page. Uses useState for progMap (per-file progress object keyed by file id) and isActive boolean. DEMO_FILES array has 5 files (hero-banner-2026.png, project-showcase-reel.mp4, bhavik-tanna-resume.pdf, skills-infographic.png, achievement-certificate.jpg). overallPct computed as average of all file progresses. GSAP animates the overall percentage counter via gsap.to on a {val} object with onUpdate writing to overallPctRef.current. startUpload uses per-file gsap.to timelines staggered by 0.6s delay each, animating val 0→100 over 2.8–4.0s. Status derived as idle/uploading/success. Renders overall progress card with linear-gradient fill, shimmer animation (.upb-fill-shimmer), and spinning status badge. Per-file list shows file icon emoji, name, size, individual progress track with .upb-file-fill--active/success/pending classes, percentage text, and status icon with upb-spin animation for active files. Demo controls panel has Start/Reset buttons.

As a frontend developer, implement the UploadActions section for the Upload page. Uses useState for fileCount (0), isUploading (false), and uploadDone (false). Two useRef hooks: dividerRef and rowRef. GSAP on mount: divider animates scaleX 0→1 from left; button row animates opacity 0→1, y 14→0 with 0.15s delay. Primary upload button is a motion.button with class ua-btn-upload, disabled when fileCount===0 or isUploading or uploadDone; shows FiUploadCloud icon normally, spinning .ua-spinner during upload, FiCheckCircle on success. handleUpload simulates async with setTimeout 2200ms. ua-btn-upload has a shimmer ::before pseudo-element sliding left→right on hover and ua-pulse-ring keyframe animation. Secondary clear button (ua-btn-clear) resets state. Dynamic helperText/helperClass reflects current state (warn/ready). ua-file-count badge inside button shows count. Demo button handleSimulateAddFile increments fileCount. Responsive: buttons stack vertically below 480px, row layout above.

As a frontend developer, implement the UploadPreview section for the Upload page. Uses useState for images array (seeded with 5 DEMO_IMAGES with Unsplash URLs: project-hero-banner.jpg, dashboard-screenshot.png, mobile-ui-preview.jpg, skills-chart.png, achievements-cover.jpg) and removingId. headerRef with GSAP fromTo on mount (opacity 0→1, y -10→0). handleRemove sets removingId then filters image out after 280ms timeout. Renders a CSS grid (.upv-grid: repeat(2,1fr) mobile, repeat(3,1fr) desktop). Each .upv-card has hover translateY(-2px) and border-color shift to #1A73E8 via CSS. .upv-thumb img scales to 1.04 on card hover. .upv-remove-btn overlays top-right corner, opacity 0→1 on card hover with scale 0.7→1 transform. AnimatePresence wraps cards with upv-slide-in animation and nth-child staggered delays (0.04s increments). Shows file name, formatted size (formatBytes), and alt text label below thumbnail. Empty state shows dashed border with icon when images array is empty.

As a frontend developer, implement the UploadMetadataForm section for the Upload page. Uses useState for altText, description, tagInput, tags array, focusedField, showToast, and toastExiting. accentBarRef and headingRef with GSAP on mount: accentBar scaleX 0→1 with power3.out; heading opacity 0→1, y 12→0. SUGGESTED_TAGS array: [React, Python, FastAPI, Node.js, Docker, Machine Learning, UI/UX, Portfolio, Open Source, Hackathon]. ALT_TEXT_MAX=125, DESCRIPTION_MAX=500. addTag normalizes input (capitalize first char), prevents duplicates, enforces max 10 tags. handleTagInputKeyDown handles Enter/comma to addTag, Backspace to remove last tag. toggleSuggestedTag adds/removes from tags; active suggested tags get .umf-tag-active class (filled blue). Form fields: alt text input with character counter (.umf-char-counter, red when over limit), textarea for description, tag text input with FiPlus add button, suggested tags row, tags chips display with FiX remove buttons (.umf-tag-chip with chip-pop animation). handleSave shows toast (umf-toast with border-left:4px solid #1A73E8) for 3s then triggers umf-toast-exit animation. handleReset clears all fields.

As a frontend developer, implement the UploadStatusAlert section for the Upload page. Maintains an alerts array state with unique IDs via alertIdCounter. ALERT_VARIANTS object defines three types: success ('Upload Successful' — files uploaded to shadow-portfolio), error ('Upload Failed' — check JPG/PNG/PDF format), warning ('Review Required' — files exceed 10MB or missing metadata). Each Alert sub-component uses alertRef with GSAP fromTo on mount (x:-24,opacity:0 → x:0,opacity:1 with back.out(1.5)). Auto-dismiss after 4000ms via setTimeout calls handleDismiss which animates x:40,opacity:0 with power2.in before calling onDismiss. .usa-alert-progress bar animates width 100%→0% over 4s via usa-progress-drain CSS keyframe. Three alert variants have distinct background colors: success=#FFD700, error=#F4511E, warning=#4A90E2. Close button triggers same dismiss animation. Demo controls panel renders three usa-demo-btn buttons to trigger each alert type. AnimatePresence wraps alert list.

As a frontend developer, implement the Footer section for the Upload page. This component may already exist from Dashboard/Login/HiddenURL pages. Uses useState for openMobile (accordion index). columnData array has three columns: Navigate (navLinks: Home, Projects, Achievements, Skills, Dashboard as .ftr-nav-link with arrow span), Connect (FiLinkedin, FiGithub as motion.a with whileHover scale:1.12,y:-3 and spring transition), Contact (FiMail to bhavik@shadow-portfolio.dev, FiMapPin for Gujarat, India). motion.div separator animates scaleX 0→1 whileInView. Column motion.divs stagger with 0.15*idx delays. Desktop: flex columns with hover flex:1.6 expansion. Mobile: accordion with AnimatePresence height:0→auto via motion.div, + icon rotates on open. DesktopContent wrapper hides mobile body above 768px. Copyright '© 2026 shadow-portfolio. Built by Bhavik Tanna.' with ftr-brand-accent span. Parallax deco shapes (3 circles) at very low opacity.