diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..8b16bb7 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,11 @@ +{ + "permissions": { + "allow": [ + "Bash(powershell -Command \"$lines = Get-Content ''4-vitals-monitor.html''; $before = $lines[0..1757]; $after = $lines[2028..\\($lines.Length-1\\)]; \\($before + $after\\) | Set-Content ''4-vitals-monitor.html'' -Encoding UTF8\")", + "Bash(powershell -Command \"$lines = Get-Content ''4-vitals-monitor.html''; $before = $lines[0..1757]; $after = $lines[2028..\\($lines.Length-1\\)]; $result = $before + $after; $result | Set-Content ''4-vitals-monitor.html'' -Encoding UTF8\")", + "Bash(powershell -ExecutionPolicy Bypass -File:*)", + "Bash(del \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\cv-4-vitals-monitor\\\\remove-lines.ps1\")", + "Bash(start \"\" \"C:\\\\Users\\\\Andy\\\\Ralph Local\\\\Tasks\\\\cv-4-vitals-monitor\\\\4-vitals-monitor.html\")" + ] + } +} diff --git a/.ralph/ralph-history.json b/.ralph/ralph-history.json new file mode 100644 index 0000000..ce42d3c --- /dev/null +++ b/.ralph/ralph-history.json @@ -0,0 +1,25 @@ +{ + "iterations": [ + { + "iteration": 1, + "startedAt": "2026-02-10T15:15:40.340Z", + "endedAt": "2026-02-10T15:15:41.803Z", + "durationMs": 1054, + "toolsUsed": {}, + "filesModified": [], + "exitCode": 0, + "completionDetected": false, + "errors": [ + "ProviderModelNotFoundError: ProviderModelNotFoundError" + ] + } + ], + "totalDurationMs": 1054, + "struggleIndicators": { + "repeatedErrors": { + "ProviderModelNotFoundError: ProviderModelNotFoundError": 1 + }, + "noProgressIterations": 1, + "shortIterations": 1 + } +} \ No newline at end of file diff --git a/.ralph/ralph-loop.state.json b/.ralph/ralph-loop.state.json new file mode 100644 index 0000000..bacea26 --- /dev/null +++ b/.ralph/ralph-loop.state.json @@ -0,0 +1,13 @@ +{ + "active": true, + "iteration": 1, + "minIterations": 1, + "maxIterations": 0, + "completionPromise": "COMPLETE", + "tasksMode": false, + "taskPromise": "READY_FOR_NEXT_TASK", + "prompt": "# Ralph Wiggum Loop - Iteration Prompt\n\nYou are operating inside an automated loop. Each iteration you receive fresh context - you have NO memory of previous iterations. Your only persistence is the filesystem.\n\nYou are converting the completed `concept.html` (ECG Heartbeat CV Website) into a modern React application with TypeScript, Vite, and Tailwind CSS. The goal is a portfolio-grade React implementation that preserves all animations, interactions, and design details from the HTML concept.\n\n## Your Task This Iteration\n\n1. **Use the /frontend-design skill** (REQUIRED for visual components): Before writing ANY code for components that involve visual design, styling, animations, or UI elements, you MUST invoke the `/frontend-design` skill. This includes: BootSequence, ECGAnimation, FloatingNav, Hero, Skills, Experience, Education, Projects, Contact, Footer, and any component with CSS/styling. This skill gives you access to specialized frontend design capabilities for higher quality, polished output.\n\n2. **Read the plan**: Open `IMPLEMENTATION_PLAN.md` and find the highest-priority unchecked item (`- [ ]`). Items are listed in priority order - pick the first unchecked one.\n\n3. **Read accumulated learnings**: Open `progress.txt` and read the \"Codebase Patterns\" section. This contains learnings from previous iterations.\n\n4. **Read guardrails**: Open `guardrails.md` and read ALL guardrails. These are hard rules you MUST follow. Violating a guardrail is a quality check failure.\n\n5. **Implement the item**: Complete the single task you selected. Keep changes focused - one task per iteration. Write production-quality React/TypeScript code that is artistic, creative, and visually polished. This is a design showcase - the output should make someone say \"wow, that's slick.\"\n\n6. **Run quality checks**: Execute the quality check commands listed in `IMPLEMENTATION_PLAN.md` under \"Quality Checks\". Fix any issues before proceeding.\n\n7. **Commit your changes**: Stage and commit all changes with a descriptive message referencing the task you completed.\n\n8. **Mark the item complete**: In `IMPLEMENTATION_PLAN.md`, change the item from `- [ ]` to `- [x]`.\n\n9. **Update progress.txt**: Append to the \"Iteration Log\" section with:\n - Which task you completed\n - Any learnings or codebase patterns discovered (add to \"Codebase Patterns\" section)\n - Any issues encountered\n - Design decisions made (if visual component)\n\n10. **Commit the progress update**: Stage and commit the updated `IMPLEMENTATION_PLAN.md` and `progress.txt`.\n\n11. **Check for completion**: If ALL items in the task checklist are now checked (`- [x]`), output the following completion signal on its own line:\n\n```\nCOMPLETE\n```\n\n## Critical Rules\n\n- **ALWAYS invoke /frontend-design skill before writing visual component code** — this is mandatory for BootSequence, ECGAnimation, FloatingNav, Hero, Skills, Experience, Education, Projects, Contact, Footer, and any styled component\n- **Only work on ONE task per iteration**\n- **Always read progress.txt AND guardrails.md before starting** — previous iterations may have left important context\n- **If a task is blocked or unclear**, document why in progress.txt and move to the next unchecked item\n- **Keep commits atomic and well-described**\n- **If quality checks fail, fix the issues before committing**\n- **The visual quality bar is HIGH** — this is a design portfolio piece\n- **Preserve all animations exactly** — timing, easing, and visual effects must match concept.html\n- **Use TypeScript strictly** — no `any` types, proper interfaces for all data structures\n- **Follow the established project structure** — components in `src/components/`, hooks in `src/hooks/`, etc.\n\n## Reference Files\n\n- `References/concept.html` — The complete working HTML implementation (your source of truth for animations, styling, timing)\n- `References/CV_v4.md` — CV content to populate sections\n- `References/ECGVideo/` — Remotion video project with ECG animation patterns\n", + "startedAt": "2026-02-10T15:15:39.896Z", + "model": "openrouter/pony-alpha", + "agent": "opencode" +} \ No newline at end of file diff --git a/.ralph/ralph-opencode.config.json b/.ralph/ralph-opencode.config.json new file mode 100644 index 0000000..f23c3f9 --- /dev/null +++ b/.ralph/ralph-opencode.config.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://opencode.ai/config.json", + "permission": { + "read": "allow", + "edit": "allow", + "glob": "allow", + "grep": "allow", + "list": "allow", + "bash": "allow", + "task": "allow", + "webfetch": "allow", + "websearch": "allow", + "codesearch": "allow", + "todowrite": "allow", + "todoread": "allow", + "question": "allow", + "lsp": "allow", + "external_directory": "allow" + } +} \ No newline at end of file diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md deleted file mode 100644 index c38987b..0000000 --- a/IMPLEMENTATION_PLAN.md +++ /dev/null @@ -1,294 +0,0 @@ -# Implementation Plan - -## Project Overview - -**ECG Heartbeat Traces Page Into Existence** - A single self-contained HTML file implementing an animated CV website for Andy Charlwood, MPharm. The page opens on a pure black screen with a blinking green terminal cursor. A boot sequence types out system diagnostic lines over ~4 seconds. After boot text fades, a green ECG flatline draws across the center of the screen. Three heartbeat pulses travel along the line with escalating amplitude. On the third and largest pulse, the ECG line "overflows" - branch lines shoot outward from the peak, tracing the outlines of page containers, card borders, and navigation into existence. The line color shifts from green to teal as the background rapidly transitions from black to white. SVG trace lines fade out and the final page content fades in. The final design is a modern medical device UI inspired by Apple Health and Withings, using Plus Jakarta Sans + Inter Tight fonts, white background, teal primary (#00897B), coral secondary (#FF6B6B), floating pill navigation bar, circular SVG skill gauges, and clean rounded cards. - -## Quality Checks - -- Open the HTML file in a browser and verify: boot sequence plays correctly, ECG flatline draws across screen, three heartbeats animate with increasing amplitude, branching lines trace outward on third beat, background transitions to white, final design renders all sections with medical device aesthetic, responsive at 768px and 480px, no console errors -- Verify all Google Fonts load correctly (Plus Jakarta Sans, Inter Tight, Fira Code) -- Verify all scroll animations trigger on scroll (sections fade in, skill gauges animate) -- Verify navigation links scroll to correct sections and floating pill nav tracks active section -- Verify SVG skill progress circles animate their stroke-dashoffset on scroll-reveal -- Verify decorative ECG waveforms render in section headers and footer - -## Tasks - -- [x] **Task 1: Build the boot screen foundation** - - Create a single `index.html` file with all HTML, CSS, and JavaScript inline. The page starts as a pure black background (`#000`) filling the full viewport. Load Fira Code from Google Fonts (`https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap`). Create a boot screen container (`#boot-screen`) that is `position: fixed; inset: 0; background: #000; z-index: 1000; display: flex; flex-direction: column; justify-content: center; padding: 40px; font-family: 'Fira Code', monospace; font-size: 14px; overflow: hidden;`. - - Display a blinking green cursor (a `span` with `display: inline-block; width: 8px; height: 16px; background: #00ff41; animation: blink 1s step-end infinite;`). The `@keyframes blink` toggles `opacity` between 1 and 0 at 50%. - - Type out the following boot lines one by one with a ~300ms delay between lines. Each line element starts at `opacity: 0; transform: translateY(8px);` and animates to `opacity: 1; transform: translateY(0);` over 400ms ease-out. The cursor moves to the end of each new line as it appears. - - Boot text lines (use `` elements for color coding): - 1. `> BIOS v3.1.4 ... loading` (dim grey `#666`) - 2. `[OK] Kernel initialized` (`[OK]` in green `#00ff41`, rest in dim grey `#666`) - 3. `[OK] Memory check: 8192MB` (`[OK]` in green, rest in dim grey) - 4. `Loading modules...` (dim grey) - 5. ` > pharmacist_core.sys` (cyan `#00bcd4`) - 6. ` > nhs_interface.dll` (cyan) - 7. ` > population_health.mod` (cyan) - 8. ` > data_analytics.eng` (cyan) - 9. `[OK] All systems operational` (`[OK]` in green, rest in dim grey) - 10. `Initializing CV render pipeline...` (green `#00ff41`, bold) - 11. `> READY` (bright green `#00ff41`, bold) - - After the final line appears, wait 400ms, then remove the blinking cursor. The entire boot sequence should take approximately 4 seconds total. The boot screen sits on top of the final CV content (which is already in the DOM but hidden behind the boot screen). - -- [x] **Task 2: Build the ECG flatline and first heartbeat** - - After the boot sequence completes, fade the boot text to `opacity: 0` over `800ms`. Once faded, the black background remains. Create a full-viewport `` element overlaying the boot screen (`position: fixed; inset: 0; z-index: 1001;`). - - **Flatline:** Draw a horizontal `` at the vertical center of the viewport (`cy = window.innerHeight / 2`). The path is a straight line from `x=0` to `x=window.innerWidth`, `stroke: #00ff41; stroke-width: 2; fill: none;`. Add a green glow: `filter: drop-shadow(0 0 4px rgba(0, 255, 65, 0.6));`. Animate the flatline drawing left-to-right using `stroke-dasharray` set to the total path length and `stroke-dashoffset` transitioning from the total length to `0` over `1000ms` with linear timing. - - **First heartbeat (PQRST complex):** After the flatline finishes drawing, a PQRST waveform travels across the center of the screen. Build this as a separate SVG `` that traces a standard ECG waveform shape. The waveform shape relative to baseline (y = center): - - P wave: gentle upward bump, ~8px above baseline, ~30px wide - - Flat segment: ~10px - - Q dip: sharp dip ~10px below baseline, ~8px wide - - R spike: sharp peak ~40px above baseline (this is the first beat's amplitude), ~12px wide - - S dip: sharp dip ~15px below baseline, ~8px wide - - Flat segment: ~10px - - T wave: gentle upward bump, ~12px above baseline, ~35px wide - - Return to baseline - - Position this waveform at the horizontal center of the screen. Animate it using `stroke-dasharray`/`stroke-dashoffset` to "draw" from left to right over ~600ms. The line color is `#00ff41` (green). The flatline behind the waveform remains visible. After this first beat, hold for 300ms. - -- [x] **Task 3: Build second and third heartbeats with overflow branching** - - **Second heartbeat:** Same PQRST shape but with larger amplitude: R peak at ~60px above baseline. Position it after a short flatline segment following the first beat. During this second beat, begin color-shifting the ECG line from green (`#00ff41`) toward teal (`#00897B`) by interpolating the stroke color. The page background begins lightening from `#000` toward `#0A0A0A`. Animate drawing over ~600ms. Hold 300ms. - - **Third heartbeat:** Largest amplitude: R peak at ~100px above baseline. Full teal color (`#00897B`). Animated over ~600ms. Background lightens further. - - **Overflow branching:** At the moment the third R peak reaches its apex, the ECG line "overflows." From the peak point, multiple SVG `` branch lines shoot outward in different directions. Each branch traces the outline of a UI element on the final page: - - - Branch 1: shoots upward and traces the outline of the floating pill nav bar (a rounded rectangle path at the top center of the viewport) - - Branch 2: shoots left and right, tracing the hero section container borders - - Branch 3-6: trace card borders, section containers, and other UI outlines - - Each branch is a separate SVG `` with its own `stroke-dasharray`/`stroke-dashoffset` animation. Branches are staggered by `50-100ms` each. All branches use teal stroke `#00897B`, `stroke-width: 1.5`, with glow `filter: drop-shadow(0 0 3px rgba(0, 137, 123, 0.5));`. - - **Background transition:** During the branching (over ~800ms), the background rapidly transitions from near-black to white `#FFFFFF` using a CSS transition on the boot screen overlay's background-color. - - **Fade out and reveal:** After all branches have finished drawing (~1.5s total branching time), fade all SVG lines to `opacity: 0` over `500ms`. Simultaneously fade in the final page content from `opacity: 0` to `opacity: 1`. Remove the SVG overlay and boot screen from the DOM. - -- [x] **Task 4: Build final design skeleton - CSS variables, floating pill nav, typography** - - Below the boot screen in the HTML, build the full CV page structure. Load Google Fonts: `Plus Jakarta Sans` (400, 500, 600, 700) and `Inter Tight` (400, 500, 600) alongside Fira Code. URL: `https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&display=swap`. - - Define CSS custom properties on `:root`: - ``` - --bg: #FFFFFF; - --text: #334155; - --heading: #0F172A; - --teal: #00897B; - --teal-light: rgba(0, 137, 123, 0.08); - --teal-medium: rgba(0, 137, 123, 0.15); - --coral: #FF6B6B; - --coral-light: rgba(255, 107, 107, 0.08); - --muted: #94A3B8; - --border: #E2E8F0; - --card-bg: #FFFFFF; - --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); - --shadow-md: 0 4px 12px rgba(0,0,0,0.08); - --shadow-lg: 0 8px 24px rgba(0,0,0,0.1); - --radius: 16px; - --font-primary: 'Plus Jakarta Sans', system-ui, sans-serif; - --font-secondary: 'Inter Tight', system-ui, sans-serif; - ``` - - Set `body` to `background: var(--bg); color: var(--text); font-family: var(--font-primary); font-size: 15px; line-height: 1.7; margin: 0; -webkit-font-smoothing: antialiased;`. - - **Floating pill navigation bar:** A `

` with `font-family: var(--font-primary); font-weight: 700; font-size: clamp(36px, 5vw, 52px); color: var(--heading); line-height: 1.2; margin: 0;`. Text: "Andy Charlwood". - - 2. **Title:** `

` with `font-size: 16px; color: var(--muted); margin: 8px 0;`. Text: "Deputy Head of Population Health & Data Analysis". - - 3. **Location pill:** `` with `display: inline-block; padding: 4px 16px; border: 1px solid var(--teal); border-radius: 999px; font-size: 12px; color: var(--teal); font-weight: 500;`. Text: "Norwich, UK". - - 4. **Summary:** `

` with `font-size: 15px; line-height: 1.8; max-width: 560px; color: var(--text); margin: 24px auto 0; text-align: center;`. Text: "GPhC Registered Pharmacist specialising in medicines optimisation, population health analytics, and NHS efficiency programmes. Bridging clinical pharmacy with data science to drive meaningful improvements in patient outcomes." - - 5. **Vital sign metric cards:** A row of 4 cards below the summary. Container: `display: flex; gap: 16px; margin-top: 40px; justify-content: center; flex-wrap: wrap;`. Each card: `background: var(--card-bg); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--teal); min-width: 160px; text-align: center;`. - - Card content (each card has a large metric value and a label below): - - Card 1: Value "10+" in `font-size: 28px; font-weight: 700; color: var(--heading);`. Label "Years Experience" in `font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 4px;`. - - Card 2: Value "Python/SQL/BI" (font-size 16px to fit). Label "Analytics Stack". - - Card 3: Value "Pop. Health" (font-size 18px). Label "Focus Area". - - Card 4: Value "NHS N&W" (font-size 18px). Label "System". - -- [x] **Task 6: Build skills section with circular SVG progress gauges** - - Skills section (`#skills`). Section heading "Skills & Expertise" in `font-size: 24px; font-weight: 700; color: var(--heading); margin-bottom: 32px; text-align: center;`. - - CSS grid layout: `display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px;`. - - Each skill item is a centered card: `display: flex; flex-direction: column; align-items: center; padding: 16px;`. - - **SVG circular progress gauge per skill:** Each gauge is an `` with `width: 80; height: 80; viewBox: 0 0 80 80;`. Contains: - 1. Background circle: ``. - 2. Progress circle: ``. The circumference is `2 * PI * 34 = ~213.6`. Set `stroke-dasharray: 213.6;` and `stroke-dashoffset: 213.6;` (fully hidden initially). On scroll-reveal, animate `stroke-dashoffset` to `213.6 * (1 - percentage/100)` over `1.2s ease-out`. Clinical skills use `stroke="var(--coral)"` instead of teal. - 3. Center text: `` showing the percentage value. - - Below the SVG: skill name in `font-size: 12px; font-weight: 600; color: var(--heading); margin-top: 8px;` and category in `font-size: 10px; color: var(--muted); text-transform: uppercase;`. - - Skills with approximate proficiency percentages (for visual gauge display): - - **Technical (teal):** Python (90%), SQL (88%), Power BI (92%), JavaScript/TypeScript (70%), Data Analysis (95%), Dashboard Dev (88%), Algorithm Design (82%), Data Pipelines (80%) - - **Clinical (coral):** Medicines Optimisation (95%), Pop. Health Analytics (90%), NICE TA (85%), Health Economics (80%), Clinical Pathways (82%), CD Assurance (88%) - - **Strategic (teal):** Budget Mgmt (90%), Stakeholder Engagement (88%), Pharma Negotiation (85%), Team Development (82%) - - **Scroll-triggered animation:** Use IntersectionObserver on the skills section. When it enters the viewport (threshold 0.15), animate each skill gauge's `stroke-dashoffset` to its target value. Stagger each gauge by `100ms` (first gauge starts immediately, second at 100ms, third at 200ms, etc.). - -- [x] **Task 7: Build experience section with timeline and ECG decoration** - - Experience section (`#experience`). Section heading "Experience" in `font-size: 24px; font-weight: 700; color: var(--heading);`. - - **Decorative ECG waveform:** Next to the section heading, include a small inline SVG (~200px wide, ~30px tall) showing a simplified PQRST waveform in `stroke: var(--teal); opacity: 0.3; stroke-width: 1.5; fill: none;`. This is purely decorative. - - **Timeline layout:** `position: relative;` container with a vertical line: `::before { content: ''; position: absolute; left: 20%; top: 0; bottom: 0; width: 2px; background: var(--teal); opacity: 0.2; }` (positioned at 20% from left). - - Each timeline entry: `position: relative; padding-left: calc(20% + 32px); margin-bottom: 32px;`. Each has a timeline dot: `position: absolute; left: 20%; top: 8px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--teal); background: var(--bg);`. Current role: `background: var(--teal);` (filled). - - Each entry is a card: `background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); border-left: 3px solid transparent; transition: all 0.3s ease;`. Hover: `box-shadow: var(--shadow-md); transform: scale(1.01); border-left-color: rgba(0, 137, 123, 0.3);`. - - Inside each card: - - Role: `font-size: 17px; font-weight: 600; color: var(--heading); margin: 0;` - - Org: `font-size: 14px; color: var(--teal); margin: 2px 0;` - - Date: displayed as a pill badge `display: inline-block; padding: 2px 10px; background: var(--teal-light); border-radius: 999px; font-size: 12px; color: var(--teal); font-weight: 500; margin: 6px 0 12px;` - - Bullet list: `list-style: none; padding: 0;`. Each `

  • ` has a teal dot: `::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin-right: 10px; vertical-align: middle; }`. Font: `font-size: 14px; line-height: 1.7; margin: 4px 0;`. - - **Role 1 (filled dot):** - - Title: "Interim Head of Population Health & Data Analysis" - - Org: "NHS Norfolk & Waveney ICB" - - Date: "May 2025 - Nov 2025" - - Bullets: - - "Led team through organisational transition, maintaining delivery of £14.6M efficiency programme" - - "Directed strategic priorities for population health analytics across Norfolk & Waveney (population ~1M)" - - "Managed stakeholder relationships with system leaders, provider trusts, and primary care networks" - - **Role 2 (filled dot):** - - Title: "Deputy Head of Population Health & Data Analysis" - - Org: "NHS Norfolk & Waveney ICB" - - Date: "Jul 2024 - Present" - - Bullets: - - "Deputised for Head of department across all operational and strategic functions" - - "Oversaw £220M medicines budget and led programme of cost improvement initiatives" - - "Developed Python-based switching algorithm processing 14,000 patients, delivering £2.6M savings" - - "Built Blueteq automation system reducing processing time by 70%, saving 200+ hours annually" - - "Created PharMetrics dashboard platform for real-time medicines expenditure tracking" - - **Role 3:** - - Title: "High-Cost Drugs & Interface Pharmacist" - - Org: "NHS Norfolk & Waveney ICB" - - Date: "May 2022 - Jul 2024" - - Bullets: - - "Managed high-cost drugs budget across acute and community settings" - - "Led NICE Technology Appraisal implementation and horizon scanning" - - "Developed health economic models for biosimilar switching programmes" - - "Built data pipelines for automated reporting of medicines expenditure" - - **Role 4:** - - Title: "Pharmacy Manager" - - Org: "Tesco Pharmacy" - - Date: "Nov 2017 - May 2022" - - Bullets: - - "Managed community pharmacy delivering 3,000+ items monthly" - - "Pioneered asthma screening service generating £1M+ national revenue" - - "Led team of 6 through COVID-19 pandemic service delivery" - - "Completed Mary Seacole NHS Leadership Programme (2018)" - - **Role 5:** - - Title: "Duty Pharmacy Manager" - - Org: "Tesco Pharmacy" - - Date: "Aug 2016 - Nov 2017" - - Bullets: - - "Supported pharmacy manager in daily operations and clinical services" - - "Delivered Medicines Use Reviews and New Medicine Service consultations" - - "Maintained controlled drug compliance and clinical governance standards" - -- [x] **Task 8: Build education, projects, contact, and footer sections** - - **Education section** (`#education`): - - Section heading "Education" in `font-size: 24px; font-weight: 700; color: var(--heading);`. 2-column CSS grid: `grid-template-columns: repeat(2, 1fr); gap: 20px;`. - - Each education card: `background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); border-top: 3px solid; border-image: linear-gradient(to right, var(--teal), var(--coral)) 1;`. Use a pseudo-element approach for the gradient top border with border-radius: apply `overflow: hidden;` on the card, and use a `::before` pseudo-element (`content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--teal), var(--coral));`). - - Card 1: Degree "MPharm (Hons) Pharmacy" in `font-size: 17px; font-weight: 600; color: var(--heading);`. Institution "University of East Anglia" in `14px; color: var(--teal);`. Period "2011 -- 2015" in `13px; color: var(--muted);`. Classification "Upper Second-Class Honours (2:1)" in `14px;`. - - Card 2: "Mary Seacole Leadership Programme" in 17px 600 heading. "NHS Leadership Academy" in teal. "2018" in muted. "National healthcare leadership development programme." - - A-Levels: Below cards, `font-size: 13px; color: var(--muted);` reading "A-Levels: Mathematics (A*), Chemistry (B), Politics (C)". - - **Projects section** (`#projects`): - - Section heading "Projects". 2x2 CSS grid: `grid-template-columns: repeat(2, 1fr); gap: 20px;`. Each card: `background: var(--card-bg); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: all 0.3s ease;`. Hover effect: gradient border using a pseudo-element trick - `::before { content: ''; position: absolute; inset: 0; border-radius: var(--radius); padding: 2px; background: linear-gradient(135deg, var(--teal), var(--coral)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s; }`. On hover: `::before { opacity: 1; }` and card gets `transform: translateY(-2px); box-shadow: var(--shadow-md);`. - - Project 1: Title "PharMetrics" in `16px; font-weight: 600; color: var(--heading);`. Description: "Real-time medicines expenditure dashboard providing actionable analytics for NHS decision-makers." Link button: `display: inline-block; padding: 6px 16px; background: var(--teal); color: white; border-radius: 999px; font-size: 12px; font-weight: 500; text-decoration: none; margin-top: 12px;`. URL: `https://medicines.charlwood.xyz/`. Label: "Visit Project". - - Project 2: "Patient Pathway Analysis". Description: "Data-driven analysis of patient pathways to identify optimisation opportunities and improve clinical outcomes." - - Project 3: "Blueteq Generator". Description: "Automation tool reducing high-cost drug approval processing time by 70%, saving 200+ hours annually." - - Project 4: "NMS Video". Description: "Educational video resource supporting New Medicine Service consultations, improving patient engagement." - - **Contact section** (`#contact`): - - Section heading "Contact". 4-column CSS grid: `grid-template-columns: repeat(4, 1fr); gap: 16px;`. Each item centered: `text-align: center;`. Icon circle: `width: 40px; height: 40px; border-radius: 50%; background: var(--teal-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: var(--teal); font-size: 18px;`. Use unicode symbols for icons. - - Items: - - Phone icon (unicode `\u260E`), value "07795553088" in `font-size: 13px; color: var(--heading);` - - Email icon (`\u2709`), value "andy@charlwood.xyz" as link in teal - - LinkedIn icon (`\u2197`), value "linkedin.com/in/andrewcharlwood" as link in teal - - Location icon (`\u25CB`), value "Norwich, UK" - - **Footer:** - - `