VB_WEB

As a frontend developer, implement the Footer for the Home page. The Footer is a static layout component with no state, structured into four columns: brand column (logo 'VB.' + tagline + social icon row), Quick Links column (About, Projects, Research, Experience as `<a>` tags), Resources column (Skills, Writing, Media, Contact), and a legal/bottom bar. Social links include inline SVG icons for GitHub, LinkedIn, Google Scholar, and ORCID — each rendered via a socialLinks array. Navigation arrays `quickLinks` and `resourceLinks` map to anchor lists. Imports `Footer.css`. Component may already exist from other pages; verify before recreating.

As a frontend developer, implement the HeroSection for the Home page. The section renders a two-column layout: a portrait column (`hs-hero__portrait-col`) and a content column. The portrait is a decorative placeholder with initials 'VB', surrounded by a glow ring (`hs-hero__portrait-glow`), a rotating orbit ring (`hs-hero__orbit`) with an orbit dot, and three background orbs (`hs-hero__bg-shape--1/2/3`). Five `<Particle>` components (pure CSS `hs-particle` divs, `aria-hidden`) float at hardcoded positions with staggered `animationDelay` and `animationDuration` values. Stat pills (`hs-hero__stats`) display '3+ Years Research' and similar quick stats. A `QUICK_LINKS` array (Projects, Research, Writing, Contact) renders as pill anchors. A scroll-line element (`hs-hero__scroll-line`) receives class `hs-hero__scroll-line--active` via `setTimeout(1400ms)` on mount using `scrollLineRef`. Imports `HeroSection.css` (12 589 chars of animation/layout CSS).

As a frontend developer, implement the ResearchPreview section for the Home page. The section maps a hardcoded `areas` array of four research domains (Computational Drug Discovery, Protein Structure Prediction, Genomic Data Analysis, AI in Healthcare Diagnostics) into `<article class='rp-card'>` elements inside an `rp-grid`. Each card has a colored icon wrapper (`background: ${color}12`, `border: 1px solid ${color}28`), a title, a description paragraph, and a `rp-card__border-accent` div (bottom hover accent bar) styled with `area.color`. Uses `useRef` + `IntersectionObserver` (threshold 0.12) on `gridRef` to set `visible` state, which toggles `rp-grid--visible` class to trigger staggered reveal with `transitionDelay: i * 90ms` per card. Header includes `rp-label` span, `rp-title` h2, and `rp-subtitle` paragraph. Imports `ResearchPreview.css`.

As a frontend developer, implement the TimelineSection for the Home page. The section renders six hardcoded `milestones` (2021–2024: Biotechnology Program, Open Source Contribution, Healthcare AI Internship, Research Publication, Advanced Bioinformatics Certification, AI Research Fellowship) as horizontally scrollable `tl-item` cards inside a `trackRef` container. Uses three refs: `trackRef` (card container), `lineRef` (animated fill line), and `scrollRef` (scroll container). State includes `visible` (a `Set` of revealed card indices) and `canScrollLeft`/`canScrollRight` booleans for scroll arrow button enablement. `IntersectionObserver` (threshold 0.2, rootMargin '0px 0px -30px 0px') observes each `.tl-item` (keyed by `data-idx`) and adds its index to `visible` Set on intersection. A second `useEffect` watches `visible.size` to update the fill-line percentage on `lineRef`. A `useCallback` scroll handler updates `canScrollLeft`/`canScrollRight` based on `scrollLeft`, `scrollWidth`, and `clientWidth`. Left/right arrow buttons trigger programmatic scroll. Each card displays `year`, `category` badge, `title`, `description`, and a colored dot/connector styled by `milestone.color`. Imports `TimelineSection.css` (8 815 chars).

As a frontend developer, implement the Navbar section for the About page. This component uses useState for scrolled and mobileOpen state, useEffect for scroll detection (window.scrollY > 30 threshold), active path detection via window.location.pathname, Escape key handler via useCallback, and body scroll locking when mobile menu is open. Includes AnimatePresence with overlayVariants (opacity fade) and mobileVariants (spring animation y:-12 to 0) from framer-motion. Features a NAV_LINKS array with 5 routes (About, Research, Experience, Media, Contact), a command palette trigger that dispatches a synthetic Ctrl+Meta+K KeyboardEvent, isActive() helper for path matching, and closeMobile() handler. Note: this component likely already exists from the Home page task [45e2be25-e090-4bc2-a83d-0fea2ef8bfd9] — reuse or verify it renders correctly on the About page.

As a Frontend Developer, implement the global Command Palette component triggered by Ctrl/Cmd+K keyboard shortcut. The palette provides fast navigation to all 9 page routes (Home, About, Projects, Research, Experience, Skills, Writing, Media, Contact) and section anchors within each page. Implement: (1) global keydown listener for Ctrl+K / Cmd+K that dispatches open event, (2) modal overlay with fuzzy-search input using a lightweight search algorithm over route labels and descriptions, (3) keyboard-navigable result list (arrow keys + Enter), (4) Escape to close, (5) AnimatePresence for open/close animations, (6) ARIA role='dialog' with aria-modal and proper focus trapping, (7) recent/suggested commands shown when input is empty. This component is referenced in the Navbar (45e2be25) via synthetic KeyboardEvent dispatch.

As a Frontend Developer, configure the Next.js App Router project structure with the global root layout (app/layout.tsx) that wraps all pages. Implement: (1) root layout with HTML lang attribute, ThemeSwitcher provider, global CSS imports, font loading via next/font (Inter or equivalent), (2) page-level layouts for each of the 9 routes (app/about/page.tsx, app/projects/page.tsx, etc.), (3) dynamic route for Projects detail page (app/projects/[id]/page.tsx), (4) loading.tsx and error.tsx boundaries per route, (5) not-found.tsx (404 page), (6) Next.js Image component configuration in next.config.ts for external Unsplash domains, (7) code splitting and lazy loading boundaries using React.lazy/Suspense for heavy D3/Framer Motion sections, (8) environment variable setup for API base URL. This is a prerequisite for all frontend page tasks.

As a Frontend Developer, implement global accessibility infrastructure to meet WCAG AA+ standards across the entire website. Tasks include: (1) skip-to-content link rendered as first focusable element in root layout, (2) focus-visible styles for keyboard navigation (custom CSS outline on :focus-visible), (3) ARIA landmark roles audit across all pages (main, nav, header, footer, aside, region), (4) reduced motion global handler — detect prefers-reduced-motion and pass a flag via React context to disable Framer Motion animations, (5) color contrast audit against the design token palette ensuring all text/background combos meet 4.5:1 ratio, (6) semantic HTML audit — ensure all headings follow a logical h1→h6 hierarchy per page, (7) screen reader utility classes (sr-only), (8) keyboard trap utility for modals (command palette, lightbox). This cross-cutting task must be completed alongside design system setup.

As a frontend developer, implement the AboutHero section for the About page. This component uses useRef for canvasRef and portraitRef, and a D3-powered particle constellation rendered on an HTML canvas. 50 particles are generated via d3.range(N) with random base positions, frequency, phase, and amplitude for gentle sinusoidal oscillation. Mouse repulsion is tracked via mousemove/mouseleave events on the portrait column element. An rAF animation loop runs ctx.clearRect and redraws particles with connection lines. Framer Motion containerVariants uses staggerChildren: 0.12 and delayChildren: 0.2; itemVariants animates opacity 0→1 and y 22→0 with cubic-bezier easing. Displays QUICK_LINKS array (Projects, Research, Writing, Contact) and STATS array (3+ Years Research, 10+ Projects, 1 Publication). Canvas is DPR-aware with resize handler.

As a frontend developer, implement the AboutBiography section for the About page. This section includes an ExpertiseNetwork sub-component that renders a D3 force-directed graph using an SVG ref. The graph has 8 expertiseNodes (biotech, bioinfo, ai, compbio, drugdisc, molbio, datasci, health) with group-based coloring via GROUP_COLORS map (core: #1A202C, domain: #38B2AC, tool: #2D3748, impact: #F6AD55) and 13 expertiseLinks. A useState hook tracks the selected node for detail panel display. An achievements array of 4 items (3+, 10+, 1, 3) is rendered as stat cards. Framer Motion fadeInUp variant animates opacity 0→1 and y 28→0; staggerList uses staggerChildren: 0.1 and delayChildren: 0.08 for list items. The D3 simulation uses forceLink, forceManyBody, and forceCenter forces.

As a frontend developer, implement the AboutValues section for the About page. Includes a ValuesNodeBackground sub-component that uses a D3 force simulation (forceX, forceY, forceCollide, forceManyBody) run via sim.tick(140) then stopped, generating a static node-link SVG background that scales with container size. Node count is dynamically computed as Math.max(18, Math.floor((w*h)/18000)). Proximity links are drawn for nodes within maxDist = Math.min(w,h)*0.28. The VALUES array has 4 entries (Innovation, Integrity, Impact, Collaboration) each with a Lucide icon (Sparkles, Shield, Target, Users), title, and description. Card interactions use framer-motion useMotionValue, useSpring, and useTransform for 3D tilt effect on hover. useCallback is used for mouse event handlers.

As a frontend developer, implement the AboutTimeline section for the About page. The TIMELINE_MILESTONES array contains 6 entries (B.S. Biochemistry 2020, Summer Internship 2021, Graduate Research 2021–2023, First Publication 2023, AI-Driven Drug Discovery Fellow 2023–Present, Conference Speaker 2024) each with id, year, title, institution, description, category, and color (#38B2AC accent). The TimelineCard sub-component uses useState for isHovered state and Framer Motion cardVariants with a custom delay per index (i * 0.1) and whileInView trigger with viewport margin '0px 0px -100px 0px' and once: true. Cards use alternating desktop layout via at-card__spacer div. The parent component renders a vertical timeline with a central line connecting all cards.

As a frontend developer, implement the AboutSkills section for the About page. Uses useState to track the active skill category tab (scientific, programming, research, laboratory). The SKILL_CATEGORIES array has 4 categories: Scientific (3 skills: Molecular Biology 92%, Genomics 88%, Biochemistry 85%), Programming (4 skills: Python 94%, JS/TS 82%, Bash 89%, R 80%), Research (4 skills: Literature Review 91%, Experimental Design 87%, Data Analysis 93%, Communication 84%), and Laboratory (skills include Lab Safety 96%, Chromatography 85%). Each skill has years, confidence percentage, and an evidence array of 3 bullet strings. The UI renders category tabs for filtering and skill cards with animated confidence bars and expandable evidence lists. No D3 or framer-motion in JSX — pure React with CSS transitions.

As a frontend developer, implement the AboutCTA section for the About page. This is a purely static section with no state or animations. Renders an ac-root section with aria-label, two decorative background orbs (ac-bg-accent--1 and ac-bg-accent--2) as aria-hidden divs, and an ac-container wrapping ac-content. Content includes an h2 heading 'Ready to collaborate?', a descriptive paragraph, and two CTA anchor links: ac-btn--primary linking to /Projects with an ac-btn__arrow span containing '→', and ac-btn--secondary linking to /Contact. CSS handles decorative gradient orbs and button hover states.

As a frontend developer, implement the Footer section for the About page. Renders quickLinks (About, Projects, Research, Experience) and resourceLinks (Skills, Writing, Media, Contact) as two navigation columns. Includes socialLinks array with 4 entries (GitHub, LinkedIn, Google Scholar, ORCID) each with an inline SVG icon and external href. The footer is fully static with no state or animations. Note: this component likely already exists from the Home page task [e6766499-2a19-4d73-9e4a-f891da32659d] — reuse or verify it renders correctly on the About page.

As a frontend developer, implement the ExperienceHero section for the Experience page. Based on the JSX (which shares the Navbar import pattern), this hero section introduces the Experience page with animated entrance content using framer-motion. It establishes the page's visual identity with a headline, subtitle, and introductory copy specific to Vishal's experience narrative. Implement scroll-aware animations, motion variants for staggered content reveal, and responsive layout consistent with the overall design system. Ensure the hero visually anchors the page before the timeline and credential sections below.

As a frontend developer, implement the EducationTimeline section for the Experience page. Uses `useState` for `expandedId` with a `toggleExpand(id)` toggle function (collapse/expand accordion). Renders `EDUCATION_DATA` array of 4 entries: Ph.D. Computational Biology (Stanford, 2024, 3.94 GPA, Summa Cum Laude), B.S. Molecular Biology & CS (UC Berkeley, 2019, 3.88 GPA), Professional Certificate in AI & ML (DeepLearning.AI, 2023), and Advanced Diploma in Biotechnology (India, 2015, Gold Medal). Each card displays degree, institution, graduationYear, gpa, honors, a coursework chip list, and a highlights paragraph. The expanded state reveals full coursework and highlights. Section root uses class `et-root` with `et-container`, `et-header` (label, h2 title, subtitle), and `et-label` 'Educational Background'. Imports `EducationTimeline.css`.

As a frontend developer, implement the InternshipsResearch section for the Experience page. Uses `useState` for expanded card state and imports `ChevronDown` from lucide-react. Renders two data arrays: `INTERNSHIPS` (3 entries: Regeneron Pharmaceuticals Bioinformatics Intern Jun–Aug 2023, Cold Spring Harbor Lab Computational Biology Intern May–Aug 2022, Memorial Sloan Kettering Research Intern Jan–May 2021) and `RESEARCH` (entries including MIT CSAIL AI-Driven Drug Discovery Sep 2023–Present, Stanford Human-AI Interaction Lab Feb–Jun 2023). Each card displays company, position, duration, location, achievements list, description, technologies chip array, and impact statement. ChevronDown icon animates on expand. Tab or toggle UI switches between Internships and Research sub-sections. Imports `InternshipsResearch.css`.

As a frontend developer, implement the VolunteerLeadership section for the Experience page. Uses `useState` for expanded card state. Renders `ROLES_DATA` array of 5 entries typed as 'volunteer', 'leadership', or 'mentorship': Community Health Advocate (Health Without Borders, 2022–Present), Research Lab Co-Lead (Institute of Computational Biology, 2023–Present), Student Mentor & Advisor (MIT Biotech Club, 2021–Present), Science Education Volunteer (STEM Bridge Initiative, 2020–2023), and a 5th International Collaboration leadership role. Each card has icon (emoji), title, organization, duration, teaserDescription (visible collapsed), fullDescription (visible expanded), and an impact array rendered as bullet points. Filter tabs or type badges distinguish volunteer/leadership/mentorship. Cards expand/collapse on click. Imports `VolunteerLeadership.css`.

As a frontend developer, implement the TeachingMentorship section for the Experience page. Uses `useState` for `expanded` per-card and `useRef` + `useInView` from framer-motion (margin '-100px', once: true) for scroll-triggered animations. The `TeachingMentorshipCard` sub-component animates with `motion.div` (initial opacity 0, y 20 → opacity 1, y 0, duration 0.5, staggered by `index * 0.08`). Renders `TEACHING_DATA` array of 5 entries: Computational Biology Fundamentals TA (Stanford, 180 students, Spring 2024), AI Applications in Drug Discovery Instructor (UC Berkeley, 42 students, Fall 2023), Undergraduate Research Mentorship at MIT (5 students, year-round 2023), Biostatistics & Data Visualization Workshop Lead (Harvard Medical School, 120 students, Summer 2023), Molecular Biology & Genetics Tutoring (24 students, ongoing 2022). Cards display course, institution, role badge, studentCount, semester, topics chips, and expandable outcomes paragraph. Imports `TeachingMentorship.css`.

As a frontend developer, implement the TimelinePreview section for the Experience page. Uses `useState` for `expandedId`, `useEffect` for D3 connector drawing, and `useRef` for the SVG element. Imports `* as d3` from 'd3' and `motion` from framer-motion. Renders 5 `MILESTONES` (2020 Research Begin, 2021 First Publication, 2022 Internship, 2023 AI Integration, 2024 Current Focus) each with id, year, title, summary, category ('major'|'secondary'), org, desc, impact, and tags array. The D3 `drawConnector` function uses `svgRef.current`, reads parent `getBoundingClientRect()`, clears SVG with `svg.selectAll('*').remove()`, sets `viewBox`, and draws a horizontal path at `height * 0.35` on desktop (>767px) or a vertical path on mobile. A ResizeObserver or window resize listener triggers redraw. Milestone nodes are clickable to expand detail panels with year, org, desc, impact, and tag chips. Imports `TimelinePreview.css`.

As a frontend developer, implement the ExperienceCTA section for the Experience page. Uses `useRef` for `dividerRef` and `useEffect` for a D3 animated accent divider rendered into an SVG container. Imports `* as d3` from 'd3' and `motion` from framer-motion. Defines `containerVariants` (staggerChildren 0.14, delayChildren 0.25, easeOut) and `itemVariants` (spring stiffness 280, damping 26, y: 28→0) for staggered entrance animation. Three inline SVG icon components: `ArrowIcon` (chevron right path), `DownloadIcon` (download arrow + bottom bar paths), and `ConnectIcon` (bracket arrows + slash paths), each accepting a `className` prop defaulting to `ecta-btn__icon`. The CTA renders action buttons (e.g., View Research, Download CV, Connect) using `motion.div` with `whileHover={buttonHover}` (scale 1.03, spring 400/18) and `whileTap={buttonTap}` (scale 0.97, spring 500/20). Imports `ExperienceCTA.css`.

As a frontend developer, implement the ProjectsHero section for the Projects page. This is a static presentational section using a `ph-hero` root element with `ph-hero__container`. Renders a decorative `ph-hero__accent-line` div (aria-hidden), an h1 with class `ph-hero__title` containing 'Projects', a `ph-hero__subtitle` paragraph describing the curated collection spanning biotechnology, bioinformatics, and artificial intelligence, and a `ph-hero__descriptor` paragraph explaining the scope (problem statements, technical architectures, outcomes, and impact). Section has aria-label 'Projects — Introduction'. No state or interactivity — pure static markup with CSS styling.

As a frontend developer, implement the ProjectsFilter section for the Projects page. Uses useState for three controlled values: `selectedCategory` (default 'All'), `searchTerm` (default ''), and `sortBy` (default 'latest'). CATEGORIES array has 7 items: All, Biotechnology, AI, Bioinformatics, Healthcare, Machine Learning, Data Analysis. SORT_OPTIONS array has 4 entries: latest, complexity, impact, alphabetical. Renders a `pf-header` block with span.pf-label ('Discover'), h2.pf-title ('Filter Projects'), and p.pf-subtitle. Controls section includes a `pf-search-wrapper` with a controlled text input (aria-label 'Search projects') and a `pf-sort-wrapper` with a label and select element (id='sort-select'). Category buttons use handleCategoryClick which toggles back to 'All' if the same category is re-selected. handleClearFilters resets all three state values. `hasActiveFilters` boolean and `activeFilterCount` integer are derived values used to conditionally render a clear-filters control. Sort dropdown is desktop-only via CSS @media query.

As a frontend developer, implement the ProjectsCTA section for the Projects page. This is a static presentational section with no state. Renders a `pc-root` section (aria-label 'Call to action — explore more or get in touch') containing `pc-container`. Includes a decorative `pc-accent-line` (aria-hidden), h2.pc-headline ('Couldn't find what you're looking for?'), and p.pc-description. Primary actions (`pc-actions`) contain two anchor elements: `pc-btn-primary` linking to /Research ('View My Research') and `pc-link-secondary` linking to /Contact ('Get In Touch'), each with an inline SVG arrow icon (strokeWidth=2, M13 7l5 5m0 0l-5 5m5-5H6 path). A `pc-divider` (aria-hidden) separates primary and secondary content. Secondary block (`pc-secondary`) contains p.pc-secondary-headline ('Want to collaborate or connect?') and `pc-secondary-links` with four anchor links: GitHub (https://github.com), LinkedIn (https://linkedin.com), Google Scholar (https://scholar.google.com), and /Contact Email — separated by bullet span elements with opacity 0.3.

As a frontend developer, implement the ResearchHero section for the Research page. This is a static hero section with a two-column layout: a left badge column containing an rh-badge with layered rh-badge__bg, rh-badge__inner, and rh-badge__icon divs, and a right text column containing an rh-label span, an h1 rh-title ('Advancing Biotech Through Science & AI'), an rh-subtitle paragraph describing computational biology/drug discovery focus, and an anchor rh-cta linking to #research-interests with an rh-cta__arrow span. The inline IconResearchFlask SVG (72x72, flask shape with droplet circles) is used as the badge icon with aria-label 'Research and Discovery'. Section uses aria-label 'Research — Vishal B.'.

As a frontend developer, implement the ResearchInterests section for the Research page. This section renders a RESEARCH_INTERESTS data array with 6 interest cards using inline SVG icon components: IconDna, IconPill, IconCpu, IconMicroscope, IconFlask, and IconNetwork (all 28x28 with strokeWidth 1.8). Each interest card displays a title, description, and an array of tag strings. Interest entries cover Computational Biology (Bioinformatics/ML/Genomics), Drug Discovery, AI/ML Applications, Lab Techniques, Synthetic Biology, and Systems Biology. The section is fully static with no interactive state — pure JSX data rendering with CSS grid/card layout.

As a frontend developer, implement the ResearchPublications section for the Research page. This section uses useState to manage filter state (by type: peer-reviewed vs preprint, and by year). Publications data array contains 4 entries with fields: id, title, authors, date, journal, type, abstract, citations, doi, pdfUrl, and scholarUrl. Each publication card renders a collapsible abstract, citation count badge, DOI link, PDF link, and Google Scholar link. Filter controls allow toggling between publication types. The section includes a stats summary row showing total publications, citations, and journals. All links use anchor tags with href fields from the data (currently '#' placeholders). Section is complex with interactive filter/expand state.

As a frontend developer, implement the ResearchFuture section for the Research page. This section uses useState(null) for expandedGoal to toggle accordion expansion on planned research items. The plannedResearch array contains 3 items (AI-Driven Drug Discovery, Precision Medicine, Synthetic Biology), each with id, title, description, and keyTerms array. The emergingInterests array has 4 items (Quantum Computing, Microbiome Engineering, Neuromorphic AI, Protein Folding Prediction), each with label and subtitle. Inline SVG icons IconTarget (concentric circles) and IconSpark (star/sparkle) are used for section labels. Layout uses a two-column rf-content grid with planned research accordion on the left and emerging interests list on the right, plus an rf-header with rf-label, rf-title, and rf-intro.

As a frontend developer, implement the ResearchLabExperience section for the Research page. This section uses useState for an active/selected lab card and imports motion from framer-motion for card animations. The labExperiences array has 3 entries: Boston Children's Hospital Computational Biology Lab (Harvard Medical School, Jun 2023–Present, PI Dr. Sarah Chen), Stanford AI for Healthcare Lab (Stanford University, Jan–May 2023, PI Prof. James Wu), and MIT Synthetic Biology & Biodesign Lab (MIT, PI Dr. Lisa Park). Each lab entry includes id, labName, institution, location, pi, datePeriod, researchFocus, projects array (3 items each), tools array (6 items each), publications count, and keyAchievements string. Inline SVG icons: IconInstitution (house/building, 16x16), IconLocation (pin, 16x16), IconResearcher (person, 16x16) used as metadata badges on each card.

As a frontend developer, implement the ResearchPhilosophy section for the Research page. This is a fully static section with no interactive state. It renders a PHILOSOPHY_PILLARS array of 6 items: Reproducibility (IconReproduce — refresh arrows SVG), Collaboration (IconCollaborate — multi-person SVG), Interdisciplinary (IconInterdisciplinary — network nodes SVG), Practical Impact (IconImpact — concentric circles SVG), Ethical Research (IconEthics — shield SVG), and Open Science (IconOpenScience — globe with meridian SVG). All icons are 24x24 with strokeWidth 2. The section uses rph-section/rph-container wrapper, and the pillars are likely displayed in a grid. The section has aria-label 'Research Philosophy — Vishal B.'s approach and values' and communicates core research values.

As a frontend developer, implement the ResearchCTA section for the Research page. This is a static two-column call-to-action section. The left column contains an rc-cta__badge with an rc-cta__badge-bg div and an rc-cta__icon containing the inline IconHandshake SVG (72x72, two speech-bubble chat shapes, strokeWidth 1.5). The right column contains an h2 rc-cta__heading ('Ready to Collaborate?'), an rc-cta__description paragraph about research collaboration, and an rc-cta__actions div with two anchor buttons: rc-cta__btn--primary linking to /Contact ('Start a Collaboration') and rc-cta__btn--secondary linking to /Projects ('View Projects'). Section uses aria-label 'Call to action — collaboration and projects'.

As a frontend developer, implement the WritingHero section for the Writing page. This is a static hero section rendered inside `<section className='wh-hero'>` with a `wh-container` inner div. It displays a `wh-label` span ('Articles & Essays'), an `<h1>` with class `wh-title` containing a teal-accented `wh-title-accent` span ('Writing'), a `wh-subtitle` paragraph about exploring biotechnology/bioinformatics/AI topics, and a `wh-description` paragraph describing the curated collection. Below the text, a `wh-stats` div renders three `wh-stat-item` elements showing '24+ Articles', '6 Categories', and '2 Featured' using `wh-stat-value` and `wh-stat-label` spans. No state or interactivity — purely presentational with CSS-driven layout and teal accent styling from WritingHero.css.

As a frontend developer, implement the WritingFilters section for the Writing page. This interactive filter bar uses five useState hooks: `searchQuery`, `activeCategories` (array), `sortBy` (default 'newest'), `dateFrom`, and `dateTo`. Renders inside `<section className='wf-root'>` with a `wf-container`. The `wf-controls` row contains a `wf-search-wrapper` with an inline SVG search icon and a text input bound to `searchQuery`. A `wf-sort-wrapper` contains a labeled `<select>` bound to `sortBy` iterating over SORT_OPTIONS ['newest', 'oldest', 'mostread']. Below, 8 CATEGORIES are rendered as toggleable pill buttons via `toggleCategory()` which adds/removes IDs from `activeCategories` array. A `wf-date-range` row provides two date inputs for `dateFrom` and `dateTo`. A Reset button calls `handleReset()` to clear all state, conditionally shown when `hasActiveFilters` is truthy. All inputs have proper aria-labels for accessibility.

As a frontend developer, implement the MediaHero section for the Media page. Based on the JSX structure (which shares the Navbar component code), this hero section introduces the Media page with framer-motion animations, including AnimatePresence with `overlayVariants` and `mobileVariants`. The section renders a visually prominent header communicating Vishal's media presence — photography, presentations, conferences, and lab work — using motion components for entrance animations. Styled via Navbar.css (shared stylesheet reference in the JSX). Verify the hero's heading, subtext, and layout are distinct from the Navbar and render correctly below it.

As a frontend developer, implement the PhotographyGallery section for the Media page. The `PhotographyGallery` component renders a 9-image grid from the `GALLERY_IMAGES` array (Unsplash sources at 800x600, covering Lab Research Setup, Microscopy Analysis, DNA Sequencing, Lab Collaboration, Biotech Innovation, Data Visualization, Research Documentation, Equipment Calibration, Sample Preparation). Uses `useState` for `lightboxOpen` (boolean) and `currentImageIndex` (number). Implements `openLightbox(index)`, `closeLightbox()`, `goToPrevious()`, and `goToNext()` via `useCallback`. The lightbox supports keyboard navigation and wraps around at array boundaries. Styled via PhotographyGallery.css (9645 chars).

As a frontend developer, implement the PresentationsGallery section for the Media page. The `PresentationsGallery` component uses `useState`, `useEffect`, `useRef`, `useMemo`, and `useCallback` hooks. It integrates D3 (`* as d3`) for SVG-based data visualizations using color constants `C_ACCENT (#38B2AC)`, `C_ACCENT_LIGHT (#4FD1C5)`, `C_TEXT_MUTED`, `C_BORDER`, `C_SURFACE`, `C_PRIMARY`, and `C_BG`. Framer-motion `motion` and `AnimatePresence` are used for card animations. Lucide-react icons include `Presentation`, `FileText`, `Calendar`, `MapPin`, and `X`. The `PRESENTATIONS` array contains 7 entries with id, title, date, venue, tags array, CSS gradient string, and slides count. Each card renders a gradient background, tag chips, slide count, venue with MapPin, and date with Calendar icon. A modal/detail view uses `X` to close. Styled via PresentationsGallery.css (9404 chars).

As a frontend developer, implement the ConferenceGallery section for the Media page. The `ConferenceGallery` component uses `useState`, `useCallback`, and `useEffect`. The `CONFERENCE_DATA` array has 8+ entries each with id, eventName, date, location, image (Unsplash 800x600), description, eventLink, and category (Conference, Symposium, Expo, Workshop, Fellowship). Includes category-based filtering UI, a card grid rendering event images with overlaid metadata (eventName, date with location, category badge, description), and click-through to `eventLink`. Implements a lightbox or detail panel using `useCallback` open/close handlers. Styled via ConferenceGallery.css (13326 chars — largest CSS in this page).

As a frontend developer, implement the LabGallery section for the Media page. The `LabGallery` component uses `useState` for `selectedImage` (null or image object) and `useCallback` for `openLightbox(imageId)` and `closeLightbox()`. The `LAB_IMAGES` array has 6 entries each with id, caption, tags array (e.g., ['genomics', 'sequencing', 'lab-equipment']), and Unsplash image URL (600x450). Renders a `section.lg-root` with a `.lg-header` containing `.lg-label`, `.lg-title` ('Laboratory Workspace'), and `.lg-subtitle`. A grid of image cards supports click-to-open lightbox. The lightbox overlay handles Escape key (via `React.useEffect` + `document.addEventListener`) and overlay click via `handleOverlayClick` (checks `e.target === e.currentTarget`). Displays caption and tags in the lightbox. Styled via LabGallery.css (8379 chars).

As a frontend developer, implement the ContactHero section for the Contact page. Based on the provided code structure (which mirrors the Navbar JSX pattern with Framer Motion AnimatePresence, overlayVariants, and mobileVariants using spring stiffness 380/damping 32), implement the hero banner for the Contact page. The section should render a prominent heading and subtitle introducing the contact page, styled via its dedicated CSS. Integrate Framer Motion entrance animations consistent with the overall page motion system.

As a frontend developer, implement the ContactInfoGrid section for the Contact page. This component (styled via '../styles/ContactInfoGrid.css') renders a static grid of six contact method cards using the contactMethods array, each containing: a Lucide React icon (Mail, Phone, MapPin, Github, Linkedin, FileText), title, description, contact info string, and an anchor CTA button. The grid uses cig-card elements with cig-card__icon-wrapper, cig-card__content, cig-card__title, cig-card__description, cig-card__contact, and action anchor tags. Contacts include email (mailto:vishal@example.com), phone (tel:+15551234567), location (Cambridge MA via Google Maps), GitHub (@vishal-b), LinkedIn (/in/vishal-b), and resume PDF download. Each card renders an IconComponent dynamically from method.icon with aria-hidden='true'.

As a frontend developer, implement the ContactForm section for the Contact page. This component (styled via '../styles/ContactForm.css') uses useState for formData ({name, email, subject, message}), errors, submitting boolean, and status ({type, message}). Implements validateForm() with field-level validation: name ≥2 chars, email regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/, subject ≥5 chars, message ≥10 chars. handleChange clears individual field errors on input. handleSubmit is async — calls POST to 'http://localhost:7011/api/contact/send' with JSON body, sets status to success ('Thank you! Your message has been sent successfully…') on 200, clears formData and errors on success, and sets error status on catch. Form includes four controlled inputs (name, email, subject, message textarea) with error display, a submitting state to disable the submit button, and a success/error status message banner.

As a frontend developer, implement the SocialLinksGrid section for the Contact page (styled via '../styles/SocialLinksGrid.css'). This component renders a grid of SOCIAL_PLATFORMS entries: GitHub (open-source projects), LinkedIn (professional profile), Google Scholar (academic publications, h-index), ResearchGate (preprints and collaboration), and ORCID (persistent researcher identifier). Each platform entry includes: id, platform name, description string, external href, and an inline SVG icon (32×32, stroke='currentColor', strokeWidth=1.5, aria-hidden='true'). The GitHub SVG uses a complex path for the Octocat shape; LinkedIn uses path+circle; Google Scholar uses two paths; ResearchGate uses circle+paths; ORCID uses a circle outline with the ORCID D-shape. Cards link externally and present academic/professional networking channels.

As a frontend developer, implement the ContactFAQ section for the Contact page. Based on the provided code (which shares the Framer Motion AnimatePresence/motion pattern with overlayVariants and mobileVariants spring animations), implement an accordion-style FAQ section. Each FAQ item should toggle open/closed using local useState, with AnimatePresence controlling the enter/exit of answer content (opacity 0→1, y -12→0 spring with stiffness 380, damping 32; exit opacity 0, y -8, duration 0.16 easeIn). Styled via '../styles/Navbar.css' pattern — implement dedicated ContactFAQ.css. FAQ items should cover common contact-related questions (response times, collaboration inquiries, media requests, etc.).

As a frontend developer, implement the ContactCTA section for the Contact page (styled via '../styles/ContactCTA.css'). This component uses useRef (svgRef) and useEffect to run a D3.js animated rings backdrop: selects svgRef.current, sets SVG dimensions to 600×400 with viewBox, clears prior content via d3.select().selectAll('*').remove(), then binds rings data [80, 140, 200, 260] as circle elements with cx=300, cy=200, fill='none', stroke='#38B2AC', strokeWidth=1.5, opacity=0.25, classed as 'ccta-ring ccta-ring--{1-4}'. Framer Motion wraps three content elements: motion.div (containerVariants: hidden {opacity:0,y:20} → visible {duration:0.6,easeOut}), motion.h2 'Ready to collaborate?' (textVariants: delay 0.1), motion.p supporting text (textVariants), and motion.div.ccta-actions (actionsVariants: delay 0.25). All use whileInView='visible' with viewport {once:true, amount:0.3}. CTA actions link to the contact form anchor and a direct contact method.

As a Frontend Developer, implement performance optimization infrastructure to achieve Lighthouse score of 100. Tasks: (1) configure Next.js Image component for all images (Unsplash, portrait) with correct sizes, priority flags for LCP images, and WebP/AVIF format output, (2) implement dynamic imports with React.lazy for all heavy third-party libraries (D3, Framer Motion sections, MDX renderer) so they are code-split and lazily loaded, (3) configure next.config.ts with bundle analyzer, (4) add resource hints (preconnect for fonts, Unsplash CDN), (5) ensure all animations use CSS transform and opacity only (GPU-accelerated), (6) implement Intersection Observer for deferred rendering of below-the-fold sections, (7) add font-display: swap for web fonts, (8) configure caching headers for static assets. Target: LCP <2.5s, CLS <0.1, FID/INP <100ms.

As a Backend Developer, implement the MDX content pipeline for the Writing page. Tasks: (1) configure next-mdx-remote or @next/mdx with appropriate plugins (remark-gfm, rehype-highlight, rehype-slug, remark-frontmatter), (2) define a content directory structure (content/articles/, content/notes/, content/journal/) with MDX files for each article, (3) implement a content API — getArticles(), getArticleBySlug(), getFeaturedArticles() utility functions that read and parse MDX frontmatter (title, category, excerpt, date, readTime, author, featured, tags), (4) implement dynamic route app/writing/[slug]/page.tsx that renders individual article pages with MDX content, (5) implement generateStaticParams() for all writing articles, (6) add RSS feed generation at app/feed.xml/route.ts. This replaces the mock ARTICLES array in WritingGrid with real content. Note: WritingGrid (d8ae0393), WritingHero (8cafe2ab), WritingFilters (37f5ee57), and WritingPagination (362ba128) frontend tasks depend on this content pipeline.

As a Tech Lead, verify the end-to-end integration of the SEO metadata and structured data backend implementation across all 9 frontend pages. Ensure each page has correct title tags, meta descriptions, canonical URLs, Open Graph tags, Twitter Cards, and JSON-LD structured data. Validate sitemap.xml includes all routes, robots.txt is correctly configured, and RSS feed is accessible. Use Google Rich Results Test and Open Graph debugger to verify outputs.

As a frontend developer, implement the ProjectsGrid section for the Projects page. Uses `useMemo` for performance-optimized derived data. Imports `motion` from framer-motion for animated card entrances. Imports `line`, `curveCardinal`, `scaleLinear`, and `max` from d3 to render inline SVG sparkline timelines on each project card. PROJECTS array contains 6 biotech/AI projects: DrugSynth AI (impact 92, complexity 88, timelineData [12,24,38,55,74,100]), GenVar Explorer (impact 87, complexity 94), ProteoFold (impact 95, complexity 96, 7-point timeline), BioDash, and 2 others. Each project has id, title, description, problem statement, techStack array (each with label and variant: 'accent'|'secondary'|'highlight'|'primary'), impact score, complexity score, timelineShort string, timelineData array, category, icon (emoji), image (null), and href. Cards use framer-motion `motion` wrappers for staggered animation. D3 `line` with `curveCardinal` interpolation generates SVG path data for the timeline sparkline. `scaleLinear` and `max` scale timelineData to fit SVG viewport. Each card links to /Projects/[id]. CSS file is 10530 chars covering grid layout, card variants, badge styles, and sparkline SVG.

As a frontend developer, implement the WritingGrid section for the Writing page. This section uses `framer-motion` for animated card entrances and `useState` for expanded/selected article state. It renders a mock ARTICLES array of 6+ article objects each with fields: `id`, `title`, `category`, `excerpt`, `date`, `readTime`, `author` (with `initials`, `name`, `role`), `featured` (boolean), and `image` (null). Featured articles (e.g. 'ai-drug-discovery', 'bioinformatics-pipelines') are rendered in a visually distinct featured card layout with larger presentation. Non-featured articles render in a standard grid card layout. Each card uses `motion` wrappers for staggered fade/slide-in animations. Author avatars display `initials` in a styled circle. Cards show category badge, read time, date formatted from ISO string, excerpt text, and a 'Read Article' CTA. The grid layout from WritingGrid.css handles responsive columns. No real API calls — data is static mock content.

As a frontend developer, implement the SkillsHero section for the Skills page. This section renders a `<section className='sk-hero'>` containing a header block with `sk-hero__title` ('Skills & Expertise'), a subtitle paragraph, and a decorative `sk-hero__underline` div. Below the header, implement the `sk-hero__controls` block containing: (1) a search input wrapper with a Lucide `Search` icon (size=18) and a controlled `<input>` using `useState('')` for `searchQuery` with `handleSearchChange`, and (2) a `sk-hero__filter` role='group' containing a label and a row of filter buttons rendered from the `SKILL_CATEGORIES` array (ids: all, scientific, programming, research, bioinformatics, ai, soft). Filter buttons toggle `sk-hero__filter-btn--active` class and set `aria-pressed` based on `selectedCategory` state managed via `useState('all')` and `handleCategorySelect`. Include an `aria-live='polite'` `sk-hero__meta` result count indicator. Wire up all CSS classes from SkillsHero.css.

As a Tech Lead, verify the end-to-end integration between the Contact page ContactForm frontend implementation and the Contact Form API backend endpoint. Ensure the form POST to /api/contact/send works correctly with the real backend, API responses (success, validation errors, rate limit errors) are handled and displayed properly in the UI, CORS is configured correctly, and the success/error status messages render as expected. Test with valid and invalid form data.

As a frontend developer, implement the WritingPagination section for the Writing page. This interactive pagination component uses `useState` for `currentPage` (default 1) and `isLoading` (default false), with `totalPages` hardcoded to 8. `handlePageChange(page)` validates bounds, sets `isLoading` true, uses a 300ms `setTimeout` to update `currentPage`, reset loading, and call `window.scrollTo({ top: 0, behavior: 'smooth' })`. `handleLoadMore()` increments `currentPage` similarly. `getPageNumbers()` uses a delta of 1 to compute a windowed page list with 'ellipsis-left' and 'ellipsis-right' sentinels rendered as `<span className='wp-ellipsis'>…</span>`. The `wp-controls` row renders Previous/Next nav buttons (`wp-btn--nav`) with disabled state and aria-labels, page number buttons with `wp-page--active` class on current page, and a Load More button below. The `wp-container` wraps inside `<section className='wp-pagination' role='navigation'>` with proper aria-labels on page count.

As a frontend developer, implement the SkillsCategories section for the Skills page. This section uses `useState('scientific')` for the active category and two refs: `svgRef` for the D3 SVG layer and `tabsScrollRef` for the horizontal tab scroll container. Implement the `drawConnections` callback using `d3.select`, `d3.scalePoint`, and `d3.range` to render animated inter-category arc paths defined in the `CONNECTIONS` array (10 adjacency pairs) across the 9 `CATEGORIES` (scientific, programming, research, laboratory, ai, bioinformatics, communication, leadership, languages). Each arc path animates stroke-dashoffset from full length to 0 over 1800ms with per-arc delays of `120 + i*100ms` using `d3.easeCubicInOut`. Wire a `setTimeout(drawConnections, 200)` on mount and a debounced `window resize` listener (300ms) to redraw. Render category tabs using `framer-motion` with the `SPRING` config `{type:'spring', stiffness:500, damping:30}` for active indicator animations. Each tab shows the category icon emoji, name, and skill count badge. Apply all classes from SkillsCategories.css.

As a frontend developer, implement the SkillDetail section for the Skills page. This section renders a detailed skill view driven by the `SKILLS_DATA` array of 12 skill objects (id, name, experience, confidence 82–98%, category, projects[]). Implement the `ConfidenceBar` sub-component which renders a `sd-confidence-bar-bg` track containing a `framer-motion` `motion.div` with class `sd-confidence-bar-fill` that animates `width` from 0 to `${confidence}%` over 0.8s easeOut, with ARIA `role='progressbar'` attributes. The main section uses `useState` for selected skill state. Render skill cards/list items for all 12 skills (bioinformatics 95%, python 98%, machine-learning 92%, molecular-dynamics 88%, deep-learning 85%, react 87%, fastapi 86%, genomics 93%, statistics 91%, git 89%, communication 88%, leadership 82%). Each skill entry shows name, experience duration, category badge, associated projects, and the animated ConfidenceBar. Apply all classes from SkillDetail.css.

As a frontend developer, implement the SkillsEvidence section for the Skills page. This section renders 6 evidence items (Projects, Publication, Certification, Writing, Experience types) as alternating left/right animated cards using `framer-motion` `cardVariants` with a custom `side` parameter — `opacity:0, x: side==='left' ? -50 : 50` hidden state animating to `opacity:1, x:0`. Each card shows type badge, title, description, date, and an internal `<a href>` link (linking to /Projects, /Research, /Skills, /Writing, /Experience routes) with a linkLabel. Implement a D3 donut/bar chart using `useRef` and `useEffect` driven by the `evidenceDistribution` array (Projects:2, Publications:1, Certifications:1, Writing:1, Experience:1) to visualise evidence type breakdown. Wire all `framer-motion` entrance animations and D3 chart drawing on mount. Apply all classes from SkillsEvidence.css.

As a frontend developer, implement the SkillsCTA section for the Skills page. This section uses `useRef(null)` for `sectionRef` and `useInView(sectionRef, { once: true, margin: '-100px' })` from framer-motion to trigger scroll-based entrance animations. Render three staggered `motion` elements: (1) `motion.h2` with class `scta-headline` ('Ready to Collaborate?') animating `opacity:0, y:20` → `opacity:1, y:0` at delay 0.08s, (2) `motion.p` with class `scta-subtitle` animating at delay 0.2s, and (3) `motion.div` with class `scta-actions` at delay 0.32s. All transitions use `duration:0.55` and cubic-bezier `[0.4, 0, 0.2, 1]`. The actions div contains two `<a>` tags: primary `scta-btn scta-btn--primary` linking to `/Projects` ('View All Projects' + arrow span) and secondary `scta-btn scta-btn--secondary` linking to `/Contact` ('Get in Touch' + arrow span). Apply all classes from SkillsCTA.css. Note: similar CTA pattern may exist from other pages (e.g. ResearchCTA, ContactCTA).

As a Frontend Developer, implement the dynamic project detail page at app/projects/[id]/page.tsx. This page receives a project ID param and renders the full project view with: overview, problem statement, solution, architecture diagram, technologies list, challenges, results/outcomes, image gallery, GitHub link, live demo link, and documentation link. Data is sourced from the PROJECTS array (same 6 entries used in ProjectsGrid: DrugSynth AI, GenVar Explorer, ProteoFold, BioDash, and 2 others). Implement generateStaticParams() for static generation of all 6 project routes. Include breadcrumb navigation (Home > Projects > [Project Name]). Add appropriate JSON-LD structured data for each project page. Styled consistently with the Projects page design system. Note: This page is linked from ProjectsGrid cards via /Projects/[id].

As a Tech Lead, verify the end-to-end integration between the Writing page frontend sections (WritingGrid, WritingHero, WritingFilters, WritingPagination) and the MDX content pipeline backend. Ensure real article data flows correctly from MDX files into WritingGrid replacing mock data, filters and search work against real content, pagination reflects actual article count, and individual article detail pages render MDX content correctly with syntax highlighting and proper formatting.