sustainability

As a frontend developer, implement the Navbar section for the Skills page. This component may already exist from the About page. It uses useState for `open` (mobile menu toggle) and `scrolled` (scroll position), useEffect with a passive scroll listener to apply `nav-scrolled` class when scrollY > 8, and renders a `<header className='nav-root'>` with nav-brand (Leaf icon + 'Hinza Iman' / 'Sustainability & ESG' text), desktop nav-links mapping NAV_PAGES array ['About', 'Experience', 'Skills', 'Education', 'Contact'], a nav-cta button with Mail icon linking to /Contact, and a mobile toggle button with Menu/X icons from lucide-react. The mobile drawer `nav-mobile` conditionally adds `nav-mobile-open` class. Import from '../styles/Navbar.css'.

As a backend developer, implement read-only FastAPI endpoints to serve static profile content for the frontend pages. Endpoints: GET /api/profile/summary (returns professional summary, availability, target roles), GET /api/profile/skills (returns core skills and certifications arrays), GET /api/profile/experience (returns timeline entries, key achievements, BomekEcoVadis project data), GET /api/profile/education (returns degrees, coursework categories, certifications, academic highlights), GET /api/profile/social-links (returns LinkedIn, portfolio, GitHub, email links). Data is served from JSON seed files or DB tables. All responses use Pydantic response models. Include appropriate cache-control headers (Cache-Control: public, max-age=3600) for performance.

As a backend developer, create database seed scripts and/or JSON fixture files to populate profile content used by the Profile Data API endpoints. Seed data must include: professional summary text, availability status (Full-time, Gothenburg), target roles list, skills array (EcoVadis, CSRD, ESG Reporting, Gap Analysis, Supplier Sustainability, Circular Design), certifications (CSRD Fundamentals Level 1, EcoVadis Assessor, GHG Protocol, GRI Standards, ISO 14001), experience timeline (Bomek Verkstads AB 2024-Present, Freelance 2023-2024, Thesis 2022-2023), education degrees (MSc Sustainability Studies UoG 2024, BA Interior Design HDK-Valand 2021), and social links. Seed data must be sourced from Hinza's actual LinkedIn profile details as updated by the user.

As a frontend developer, set up React Router v6 for client-side routing across all pages. Define routes: / (Landing), /About, /Experience, /Skills, /Education, /Contact. Configure BrowserRouter in App.jsx with lazy-loaded page components using React.lazy and Suspense for code splitting and performance. Add a 404 Not Found fallback route. Ensure Navbar active link highlighting works with useLocation hook. Set up scroll-to-top on route change using useEffect + window.scrollTo. This is a prerequisite for all page-level frontend tasks.

As a full stack developer, implement GDPR compliance features as required by SRD Section 11. Frontend: Add a cookie consent banner component (CookieBanner) that appears on first visit, storing consent preference in localStorage. Add a Privacy Policy page or modal with data processing disclosure. Backend: Implement GET /api/gdpr/export and DELETE /api/gdpr/delete endpoints for data subject rights. Add data retention configuration: contact_submissions older than 2 years are eligible for purge. Ensure no PII is logged in application logs. Include a PRIVACY.md document. The cookie banner should use the SRD color theme and framer-motion for entrance animation.

As a frontend developer, implement the SkillsHero section for the Skills page. Uses useRef (canvasRef, animRef) and useEffect to bootstrap a Three.js WebGLRenderer with alpha/antialias on a canvas element. The 3D scene contains a PerspectiveCamera at position (0,0,6), AmbientLight (0x2A9D8F) and DirectionalLight (0xA8DADC), an IcosahedronGeometry(1.15, 1) MeshPhongMaterial core mesh with 55% opacity, three TorusGeometry(1.45, 0.04, 32, 80) rings rotated on x/y/z axes, and dot SphereGeometry(0.05) accents. A resize handler updates renderer size and camera aspect. Framer Motion `containerVariants` with staggerChildren:0.14 animates `headlineWords` array ['Skills', '&', 'Certifications'] using `itemVariants` (opacity 0→1, y 28→0). Three statPills rendered with Award, TrendingUp, CheckCircle icons showing 'CSRD Certified / Level 1', 'EcoVadis / Practitioner', 'ESG Domains / 4 Pillars'. Import from '../styles/SkillsHero.css'.

As a frontend developer, implement the CoreSkills section for the Skills page. Renders a `<section className='csk-root'>` with two decorative background glow divs (csk-bg-glow--a, csk-bg-glow--b). Inside csk-inner, a header with label 'Core Competencies', h2 'Technical Skills', and subtitle text. Maps over an 8-item `skills` array — each with a lucide-react icon (BarChart3, FileText, PieChart, Search, Leaf, Truck, Recycle, FolderOpen), a title, and 3 bullet strings — to render skill cards in a CSS grid. Skills include EcoVadis Submissions, CSRD Reporting, ESG Analysis, Gap Analysis, Sustainability Strategy, Supplier Sustainability, Circular Design, and Evidence Organization. Pure static JSX with no animation hooks. Import from '../styles/CoreSkills.css'.

As a frontend developer, implement the Certifications section for the Skills page. Uses useRef and Framer Motion's useInView (once: true, margin: '-60px 0px -60px 0px') to trigger scroll-based animations. The section header animates with opacity 0→1, y 20→0 on inView. Maps over 4 certifications — CSRD Fundamentals (Level 1) with Award icon marked primary:true, EcoVadis Practitioner with BarChart3 icon, GRI Certified Sustainability Professional with Leaf icon, Supplier Sustainability & ESG Due Diligence with Shield icon — rendered as a `<ul>` with `itemVariants` using custom(i) delay (i*0.12) and x: -30→0 slide-in animation. Each cert card shows icon, name, issuer, date, badge ('Verified'/'Active'), and desc text. Primary cert receives special `primary` styling. Import from '../styles/Certifications.css'.

As a frontend developer, implement the Expertise section for the Skills page. Renders a `<section className='exp-root'>` with a Framer Motion header using `headerVariants` (opacity 0→1, y 20→0, whileInView with viewport once:true margin:'-60px') containing label 'Strategic Expertise', h2 'Competencies That Drive ESG Impact', and subtitle text. Maps over 6 `expertiseData` items — Gap Analysis (Gauge icon), Evidence Mapping (FileSearch icon), Action Prioritization (Target icon), Confirmation Gap Resolution (ShieldCheck icon), Time-Sensitive Submission Management (CalendarCheck icon), Resource Efficiency & Benchmarking (BarChart3 icon) — rendered as motion.div cards in exp-grid. Uses `cardVariants` with custom(i) delay (i*0.09), y 32→0 animation. Alternating cards at odd indices receive `exp-card-alt` class. Import from '../styles/Expertise.css'.

As a frontend developer, implement the SkillsCTA section for the Skills page. Uses useRef (sectionRef), useInView (once:true, margin:'-60px'), and four separate useAnimation controls: headingControls, subtextControls, actionsControls, availControls. A single useEffect watches isInView and sequentially fires all four animation controls with staggered delays (0s, 0.15s, 0.3s, 0.5s) using ease [0.4, 0, 0.2, 1]. Renders three decorative blob divs (scta-blob--a/b/c). Inside scta-inner: motion.h2 with 'sustainability goals' accent span, motion.p subtext about ESG analyst in Gothenburg, motion.div scta-actions with two anchor buttons — primary 'Contact Me' (Mail icon, href=/Contact) and secondary 'View Experience' (Briefcase icon, href=/Experience) — and motion.div scta-availability with an animated scta-pulse-dot and 'Available for full-time roles in Gothenburg, Sweden' text. Import from '../styles/SkillsCTA.css'.

As a frontend developer, implement the Footer section for the Skills page. This component may already exist from the About page. Renders a `<footer className='ftr-root'>` with a decorative ftr-leaf-band div and two glow divs (ftr-glow-a, ftr-glow-b). Inside ftr-inner > ftr-top: a ftr-brand column with 'HI' badge mark, 'Hinza Iman / Sustainability & ESG Analyst' name, tagline paragraph, and ftr-availability span with ftr-pulse dot. A ftr-cols container with three ftr-col columns — 'Explore' mapping navLinks array (About, Experience, Skills, Education, Contact as anchor tags), 'Expertise' mapping 4 static expertise strings (EcoVadis Submissions, CSRD Reporting, ESG Gap Analysis, Supplier Sustainability) as non-linked spans, and 'Get in Touch' with MapPin location, mailto link, and ftr-socials row with Linkedin/Globe/Mail/FileText icons from lucide-react. Dynamic year via `new Date().getFullYear()`. Import from '../styles/Footer.css'.

As a frontend developer, implement the ExperienceHero section for the Experience page. This section uses a Three.js-based canvas dot grid background rendered via raw Canvas API (not WebGL) with radial alpha falloff from center using THREE.Color for color parsing. State includes `decorOpacity` (scroll-driven fade via `handleScroll` watching `sectionRef.current.getBoundingClientRect()`), and `containerInView` via Framer Motion's `useInView` hook with `once: false` and `-80px` margin. The `dotsRef` canvas is appended dynamically in a `useEffect` with `requestAnimationFrame` render loop and resize handling. Four `rolePills` (EcoVadis Assessments, CSRD Reporting, ESG Gap Analysis, Supplier Sustainability) are rendered with colored dot indicators (`exh-dot-teal`, `exh-dot-coral`, `exh-dot-amber`, `exh-dot-navy`). Apply all ExperienceHero.css styles. Note: Navbar component may already exist from the Skills page.

As a frontend developer, implement the ExperienceTimeline section for the Experience page. This section renders a vertically stacked interactive timeline with three entries from `TIMELINE_DATA`: 'Bomek Verkstads AB' (2024–Present), 'Freelance Sustainability Consultant' (2023–2024), and 'Master Thesis Researcher' (2022–2023). Each entry contains an expandable `details` array with Lucide icons (CheckCircle, TrendingUp, Users, Target, Shield, Zap) and descriptive text. Uses `useState` for active/expanded entry state, `useEffect` for any intersection-based reveals, `useRef` for timeline DOM refs, `useCallback` for event handlers, and Framer Motion `motion` for animated entry transitions. Apply all ExperienceTimeline.css styles including the 10419-char stylesheet for timeline line, dot indicators, and card expansions.

As a frontend developer, implement the BomekEcoVadisProject section for the Experience page. This is a featured project spotlight card with `useState` for `activePillar` tracking interactive pillar selection. Renders four `sustainPillars` (Environment, Labor & Human Rights, Ethics, Supply Chain) each with a custom inline SVG icon via the `SustainIcon` switch component (globe, users, shield, truck). Displays three `projectMetrics` (100% EcoVadis Submission Complete, 21 Indicators Assessed, 4 ESG Pillars Covered) and a `responsibilities` list of six bullet points detailing Bomek Verkstads AB EcoVadis engagement. Uses Framer Motion `motion` for card/pillar entrance animations. Apply all BomekEcoVadisProject.css styles (9826-char stylesheet).

As a frontend developer, implement the KeyAchievements section for the Experience page. Renders a responsive 8-card grid using the `achievements` array, each card containing a Lucide icon (Search, FileCheck, ClipboardList, Map, TrendingUp, ShieldCheck, BarChart3, Users), a title, and a description. Uses Framer Motion with `containerVariants` (staggerChildren: 0.1, delayChildren: 0.15) and `cardVariants` (spring animation: opacity 0→1, y 40→0, scale 0.96→1, stiffness 80, damping 18, mass 0.8). Scroll trigger via `useInView` on `gridRef` with `once: true` and `-80px 0px` margin. Section header includes `ka-label` badge, `ka-title` h2, and `ka-subtitle` paragraph. Apply all KeyAchievements.css styles.

As a frontend developer, implement the ExperienceCTA section for the Experience page. Uses `useState` for `hovered` state tracking ('primary' | 'secondary' | null) to conditionally render animated ArrowRight icon via Framer Motion `AnimatePresence` (opacity/x transition, duration 0.2). Renders decorative background with five absolutely-positioned shapes (`excta-decor-circle--1/2/3`, `excta-decor-line--1/2`), a pulse glow div (`excta-glow`), and a content card with `motion.div` entrance (opacity 0→1, y 36→0, duration 0.7, cubic-bezier ease). Two `motion.a` CTA buttons with `whileHover` (scale 1.03) and `whileTap` (scale 0.97): primary linking to '/Skills' with Briefcase icon, secondary linking to '/Education' with GraduationCap icon. `ctaData` drives all copy. Apply all ExperienceCTA.css styles (6725-char stylesheet).

As a frontend developer, implement the Landing page interactive 3D sustainability landscape using @react-three/fiber and @react-three/drei as specified in SRD Section 7. Create a Three.js scene with four distinct 3D elements representing ESG pillars: (1) Wind turbine mesh for Environment, (2) Handshake geometry for Ethics, (3) People/group mesh for Labor, (4) Chain-link or truck mesh for Supply Chain. Each element should respond to hover (tooltip with ESG pillar info and user stories) and click (smooth transition/navigation to corresponding page section). Implement parallax scroll effect on the landing page canvas as per Section 8. Use framer-motion for page-level entrance animations. Ensure mobile fallback (static 2D illustration) when WebGL is not supported. Import @react-three/fiber, @react-three/drei, three.

As a Tech Lead, verify the end-to-end integration between the About page frontend sections (AboutHero, AboutProfessionalSummary, AboutCoreCompetencies, AboutAvailability, AboutSocialProof) and the GET /api/profile/summary and GET /api/profile/social-links backend endpoints. Ensure professional summary text, availability status, target roles, and social links (LinkedIn, portfolio) are correctly fetched from the API and rendered in the respective components. Validate that AboutSocialProof LinkedIn and portfolio hrefs match backend data. Note: About frontend tasks (0defefba, 390ede7a, 8130e60a, 8db01820, c5169e02) should depend on temp_backend_profile_api.

As a frontend developer, ensure the entire website meets SRD Section 9 responsiveness and accessibility requirements. (1) Audit and fix all page CSS for responsive breakpoints: mobile (< 640px), tablet (640px–1024px), desktop (> 1024px). Ensure Navbar mobile drawer, 3D landscape fallback, and all grid layouts adapt correctly. (2) Add ARIA labels to all interactive elements (Navbar links, CTA buttons, form inputs, social links, 3D canvas). (3) Ensure keyboard navigation works across all pages (tab order, focus indicators). (4) Verify color contrast ratios meet WCAG AA (4.5:1 for text, 3:1 for large text) against the SRD color palette. (5) Add skip-to-content link. (6) Test with screen reader simulation. Run browser_verification_agent on mobile viewport (375px).

As a frontend developer, implement the EducationHero section for the Education page. This section uses React hooks: useState for `visible` (scroll-reveal trigger) and `mousePos` (magnetic offset {x,y}), useRef for `rootRef` (intersection target) and `magnetRef` (magnetic anchor element). An IntersectionObserver (threshold 0.2, rootMargin '0px 0px -40px 0px') sets `visible=true` once and unobserves. A global `mousemove` listener computes magnetic pull using distance from center of `magnetRef`, scaling offset by `pull * 0.18` (clamped to maxDist = max(width,height)*1.2). Framer Motion is imported for animation primitives. A custom inline graduation cap SVG uses a linearGradient `capGrad` (#2A9D8F → #1D7972), cap body path with #1D3557 stroke, and an orange (#E76F51) tassel with partial opacity stroke. A `revealClass(delay)` helper appends CSS classes for cascade reveal. Imports EducationHero.css. Note: Navbar/Footer components may already exist from the Skills page tasks.

As a Tech Lead, verify the end-to-end integration between the Skills page frontend sections (SkillsHero, CoreSkills, Certifications, Expertise, SkillsCTA, Navbar, Footer) and the GET /api/profile/skills backend endpoint. Ensure skills and certifications data rendered in the UI matches the seeded backend data. Confirm API responses are correctly mapped to frontend component props. Validate that Certifications section displays the correct 4 certifications matching Hinza's actual LinkedIn profile. Note: Skills frontend tasks (87682e52, 8f19c057, 6deb570d, ade699e8, 697c5f5a, 5c9cdea0, e677e801) should depend on temp_backend_profile_api.

As a Tech Lead, verify the end-to-end integration between the Experience page frontend sections (ExperienceHero, ExperienceTimeline, KeyAchievements, BomekEcoVadisProject, ExperienceCTA) and the GET /api/profile/experience backend endpoint. Ensure timeline entries, project metrics, and achievement cards reflect the actual seeded backend data. Confirm the BomekEcoVadis project pillar data and metrics (100% submission, 21 indicators, 4 pillars) are correctly rendered from API response. Note: Experience frontend tasks (91201797, ecc2eca3, f0c3b393, fc420e80, 96729fcc) should depend on temp_backend_profile_api.

As a frontend developer, implement performance and SEO optimizations for the sustainability website. (1) Add React Helmet or Next-style meta tags: title, description, Open Graph (og:title, og:description, og:image), Twitter card, canonical URL per page. Meta description should reference 'Hinza Iman, Sustainability Analyst, Gothenburg, ESG, CSRD'. (2) Implement image lazy loading and WebP conversion for any profile images. (3) Add a sitemap.xml and robots.txt served from the FastAPI backend or as static files. (4) Configure Lighthouse-friendly resource hints: preconnect for fonts, preload for critical CSS. (5) Ensure Three.js canvas is deferred and does not block LCP. (6) Validate Core Web Vitals (LCP < 2.5s, CLS < 0.1, INP < 200ms) using browser-verification-agent.

As a frontend developer, implement the EducationDegrees section for the Education page. This section renders a `degrees` array of two objects: MSc Sustainability Studies (University of Gothenburg, 2024) and BA Interior Design (HDK-Valand Academy, 2021), each with `id`, `degree`, `school`, `location`, `year`, `description`, `tags` (array of {label, icon} using lucide-react icons: BookOpen, Leaf, Sprout, FlaskConical), and a primary `icon`. Uses `useRef(sectionRef)` and Framer Motion `useInView` (once:true, margin:'-80px 0px'). Section header animates with `initial={{ opacity:0, y:24 }}` → `animate={isInView ? {opacity:1,y:0} : {}}`. Degree cards use `cardVariants` with `hidden: {opacity:0, y:48}` and `visible(i)` custom variant with `delay: i*0.18`, easing `[0.25,0.46,0.45,0.94]`. Decorative `egdeg-bg-motif-a` and `egdeg-bg-motif-b` divs provide atmospheric background. Tag chips render lucide icons inline. Imports GraduationCap, Calendar, MapPin, Leaf, Sprout, BookOpen, FlaskConical from lucide-react and EducationDegrees.css.

As a frontend developer, implement the EducationCoursework section for the Education page. This section defines a `courseworkCategories` array of 6 objects each with `icon` (emoji), `title`, and `courses` string array, covering: Sustainability Systems (♻), Corporate Governance & ESG (🏛), Environmental Management (🌍), Gap Analysis & Strategy (🔍), Design Thinking (🎨), and Data & Analytics (📈). A `CategoryCard` sub-component uses `useRef` and Framer Motion `useInView` (once:true, margin:'-60px'). Each card uses `containerVariants` with `hidden: {opacity:0, y:32}` → `visible` with `duration:0.55`, `delay: index*0.08`, `staggerChildren:0.05`, `delayChildren:0.1`. Individual course items use `badgeVariants` with `hidden: {opacity:0, scale:0.85, y:10}` → `visible: {scale:1}`. Cards render `.ecw-cat-header` with icon and title, followed by staggered course badge list. Imports EducationCoursework.css and framer-motion.

As a frontend developer, implement the EducationCertifications section for the Education page. This section renders 5 certifications from a `CERTIFICATIONS` array: CSRD Fundamentals Level 1 (active), EcoVadis Assessor (active), GHG Protocol Corporate Standard (completed), GRI Standards Certified Training (completed), ISO 14001:2015 Internal Auditor (in-progress). Each cert has `id`, `name`, `issuer`, `date`, `status`, `description`, and `skills` chip array. Uses `useState<Set>(revealedIds)` and `useRef(cardRefs)` array. An IntersectionObserver reads `entry.target.dataset.certId` and appends to `revealedIds` set on intersection, enabling per-card staggered reveal. Framer Motion animates card entrance. Status badges visually differentiate active/completed/in-progress states. Skills rendered as inline chips. Imports EducationCertifications.css and framer-motion.

As a frontend developer, implement the ContactHero section for the Contact page. Build the `ContactHero` functional component using the `.ch-root` section wrapper with a `.ch-wrapper` inner container. Render a `.ch-accent-line` decorative element, an `<h1 className="ch-headline">` with a `<span className="ch-headline-accent">` wrapping the word 'sustainable' for accent styling, and a `.ch-subheadline` paragraph listing target roles (Sustainability Coordinator, Junior ESG Analyst, CSRD Reporting Analyst, Supplier Sustainability Analyst). Include a `.ch-divider` horizontal rule, a `.ch-intro` paragraph describing EcoVadis experience and Master's in Sustainability Studies, and a `.ch-badge` availability badge with a `.ch-badge-dot` animated indicator showing 'Available for full-time roles in Gothenburg'. Render a `.ch-location-row` with three `.ch-location-tag` spans each embedding inline SVG icons (map pin, monitor, and clock SVGs) for 'Gothenburg, Sweden', 'On-site / Hybrid', and 'Immediate start'. Import `ContactHero.css` for all BEM-style class styling. Note: Navbar component may already exist from a previous page.

As a frontend developer, implement the ContactForm section for the Contact page. Build the `ContactForm` functional component using `useState` hooks for `form` (initialForm: name, email, subject, message), `touched` (initialTouched per field), and `submitState` ('idle' | 'loading' | 'success' | 'error'). Define `fieldDefs` array with three field configs (name, email, subject) including label, type, placeholder, required, and autoComplete. Implement `validateField(name, value)` with per-field validation rules: required check, email regex `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`, name min 2 chars, subject min 3 chars, message 10–2000 chars. Implement `handleChange`, `handleBlur` (marks field touched), and `handleSubmit` (marks all touched, validates, sets loading state, simulates async API call with 1500ms timeout, then sets success/error state and resets form). Render fields with dynamic class via `getFieldClass(name)` returning `cf-field--error` or `cf-field--valid` based on touched/errors state. Use `framer-motion` for animated form entry and submit button states. Wrap with `ContactForm.css` BEM classes. The submit button should be disabled while loading or when errors exist after all fields are touched.

As a frontend developer, implement the ContactInfo section for the Contact page. Build the `ContactInfo` functional component using `framer-motion`. Define a `contactItems` array with three entries: email (href: `mailto:hinza.iman@email.com`, iconClass `ci-item-icon--email`), phone (href: `tel:+46701234567`, iconClass `ci-item-icon--phone`), and location (href: null, iconClass `ci-item-icon--location`), each with an inline SVG icon. Define `cardVariants` (hidden: opacity 0, y 30; visible: opacity 1, y 0, duration 0.6), `itemVariants` (hidden: opacity 0, x -12; visible with staggered delay `0.2 + i * 0.1`), and `badgeVariants` (hidden: opacity 0, scale 0.85; visible with delay `0.5 + i * 0.1`). Render a `<section className="ci-root">` with `.ci-inner` container. Animate `.ci-label` 'Get In Touch' with `whileInView` opacity/y entrance (viewport once, margin -60px). Animate `.ci-card` using `cardVariants` with `whileInView`. Inside the card render a `.ci-card-header` with `.ci-header-icon` SVG. Map `contactItems` using `motion.div` with `itemVariants` custom index prop, rendering icon, label, and value (as `<a>` if href exists, otherwise `<span>`). Apply `.ci-item-icon--*` modifier classes per item. Import `ContactInfo.css`.

As a frontend developer, implement the SocialLinks section for the Contact page. Build the `SocialLinks` functional component rendering a `links` array of four social/contact entries: LinkedIn (`https://linkedin.com/in/hinza-iman`, wrapClass `sl-icon-wrap--linkedin`, filled SVG path), Portfolio Website (`https://hinzaiman.com`, wrapClass `sl-icon-wrap--portfolio`, stroke SVG globe), GitHub (`https://github.com/hinza-iman`, wrapClass `sl-icon-wrap--github`, filled SVG path), and Email (`mailto:hinza.iman@email.com`, wrapClass `sl-icon-wrap--email`, stroke SVG envelope). Each link entry has `id`, `label`, `desc`, `href`, `icon` (inline SVG at 22×22), and `wrapClass`. Map entries to anchor tags (`<a href={link.href} target="_blank" rel="noopener noreferrer">`) containing an icon wrapper `<span className={\`sl-icon-wrap ${link.wrapClass}\`}>` and a text block with label and desc. Apply `SocialLinks.css` BEM classes for card layout, icon wrap color variants per platform, and hover/focus interaction states.

As a frontend developer, implement the EducationAcademicHighlights section for the Education page. This is the most complex section, importing d3 from 'd3' for a data visualization element alongside Framer Motion. It renders three data structures: (1) `pullQuotes` array of 2 quotes with `text` and `source` fields (thesis supervisor, academic advisor testimonials); (2) `achievements` array of 4 items each with an inline SVG icon, `title`, and `desc` covering Gap Analysis, Thesis on Circular Design, Sustainability Benchmarking Research, and Evidence Mapping; (3) `statCards` array of 4 stat counters: '2×' Master's Degrees, '15+' ESG Case Studies, '4' Research Publications, '3.8' GPA. Uses `useState`, `useEffect`, `useRef`, `useCallback` from React. `fadeUp` Framer Motion variant uses `custom(i)` with `delay: i*0.1` and easing `[0.4,0,0.2,1]`. D3 is used for a supplementary chart/visualization within the section. Imports EducationAcademicHighlights.css, framer-motion, and d3.

As a Tech Lead, verify the end-to-end integration between the Contact page frontend implementation (ContactForm, ContactInfo, SocialLinks, ContactHero) and the Contact Form Submission API (POST /api/contact). Ensure the ContactForm component correctly calls the backend API on submit, handles loading/success/error states from the API response, displays appropriate user feedback, and that form validation aligns between frontend (client-side) and backend (Pydantic). Verify CORS headers allow frontend origin. Confirm submitted data appears in the contact_submissions database table. Note: ContactForm task (09af34f4) should depend on temp_backend_contact_api.

As a Tech Lead, verify the end-to-end integration between the Education page frontend sections (EducationHero, EducationDegrees, EducationCoursework, EducationCertifications, EducationAcademicHighlights) and the GET /api/profile/education backend endpoint. Ensure degree details (MSc Sustainability Studies UoG 2024, BA Interior Design HDK-Valand 2021), certifications (5 items with correct statuses), and coursework categories match seeded backend data. Confirm D3 visualization in EducationAcademicHighlights correctly renders data from API. Note: Education frontend tasks (c9cf845a, e0fdc1fe, f32d34e4, 203b42d9, 824c4093) should depend on temp_backend_profile_api.