From 4be1b10137363dc9276853ef3ae31036d54d4360 Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 17:34:26 +0000
Subject: [PATCH] Task 14: Build EducationTile

- Created EducationTile.tsx with purple CardHeader
- Displays three education entries in vertical stack
- MPharm (Hons) from UEA, NHS Leadership Academy Mary Seacole, A-Levels
- White surface background with light border and 6px radius
- Simple display-only format (no expansion yet)
- Updated DashboardLayout to render EducationTile below CareerActivity

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/DashboardLayout.tsx     |  3 ++
 src/components/tiles/EducationTile.tsx | 64 ++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/components/tiles/EducationTile.tsx

diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index fc22c34..a708e1b 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -7,6 +7,7 @@ import { LatestResultsTile } from './tiles/LatestResultsTile'
 import { CoreSkillsTile } from './tiles/CoreSkillsTile'
 import { LastConsultationTile } from './tiles/LastConsultationTile'
 import { CareerActivityTile } from './tiles/CareerActivityTile'
+import { EducationTile } from './tiles/EducationTile'
 
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -113,6 +114,8 @@ export function DashboardLayout() {
             <CareerActivityTile />
 
             {/* EducationTile — full width */}
+            <EducationTile />
+
             {/* ProjectsTile — full width */}
           </div>
         </motion.main>
diff --git a/src/components/tiles/EducationTile.tsx b/src/components/tiles/EducationTile.tsx
new file mode 100644
index 0000000..2cecc56
--- /dev/null
+++ b/src/components/tiles/EducationTile.tsx
@@ -0,0 +1,64 @@
+import { Card, CardHeader } from '../Card'
+
+/**
+ * Education tile - displays academic qualifications
+ * Full-width card below Career Activity
+ */
+export function EducationTile() {
+  // Education entries from CV, presented in reverse chronological order
+  const educationEntries = [
+    {
+      degree: 'MPharm (Hons) — 2:1',
+      detail: 'University of East Anglia · 2015',
+    },
+    {
+      degree: 'NHS Leadership Academy — Mary Seacole Programme',
+      detail: '2018 · 78%',
+    },
+    {
+      degree: 'A-Levels: Mathematics (A*), Chemistry (B), Politics (C)',
+      detail: 'Highworth Grammar School · 2009–2011',
+    },
+  ]
+
+  return (
+    <Card full>
+      <CardHeader dotColor="purple" title="EDUCATION" />
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        {educationEntries.map((entry, index) => (
+          <div
+            key={index}
+            style={{
+              padding: '7px 10px',
+              background: 'var(--surface)',
+              border: '1px solid var(--border-light)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: '11.5px',
+              color: 'var(--text-primary)',
+            }}
+          >
+            <span
+              style={{
+                display: 'block',
+                fontWeight: 600,
+              }}
+            >
+              {entry.degree}
+            </span>
+            <span
+              style={{
+                color: 'var(--text-secondary)',
+                fontSize: '11px',
+                marginTop: '2px',
+                display: 'block',
+              }}
+            >
+              {entry.detail}
+            </span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}