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>
This commit is contained in:
2026-02-13 17:34:26 +00:00
parent 905b3d957a
commit 4be1b10137
2 changed files with 67 additions and 0 deletions
+64
View File
@@ -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 · 20092011',
},
]
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>
)
}