From c0dac8fe0c2e5ec22f091e7f6fa0caafee9a4bd0 Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Mon, 9 Feb 2026 13:21:11 +0000 Subject: [PATCH] Task 8: Build education, projects, contact, and footer sections - Education section with 2-column grid: MPharm (Hons) UEA and Mary Seacole Programme - A-Levels displayed below education cards - Projects section with 2x2 grid and gradient hover border effect - PharMetrics project includes live link to medicines.charlwood.xyz - Contact section with 4-column grid: phone, email, LinkedIn, location - Footer with decorative ECG waveform SVG and attribution text - Responsive: projects 1fr at 768px, education 1fr and contact 2x2 at 480px Co-Authored-By: Claude Opus 4.6 --- 4-vitals-monitor.html | 309 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 304 insertions(+), 5 deletions(-) diff --git a/4-vitals-monitor.html b/4-vitals-monitor.html index 5c15bc7..19182e3 100644 --- a/4-vitals-monitor.html +++ b/4-vitals-monitor.html @@ -552,6 +552,230 @@ top: 10px; } + /* ========================================= + EDUCATION SECTION + ========================================= */ + + .education-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + .education-card { + position: relative; + background: var(--card-bg); + border-radius: var(--radius); + padding: 24px; + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow 0.3s ease, transform 0.3s ease; + } + + .education-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(to right, var(--teal), var(--coral)); + } + + .education-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); + } + + .education-degree { + font-family: var(--font-primary); + font-size: 17px; + font-weight: 600; + color: var(--heading); + margin: 0; + line-height: 1.3; + } + + .education-institution { + font-size: 14px; + color: var(--teal); + margin: 2px 0; + } + + .education-period { + font-size: 13px; + color: var(--muted); + margin: 2px 0; + } + + .education-detail { + font-size: 14px; + color: var(--text); + margin: 6px 0 0; + line-height: 1.6; + } + + .education-alevels { + font-size: 13px; + color: var(--muted); + margin-top: 20px; + text-align: center; + } + + /* ========================================= + PROJECTS SECTION + ========================================= */ + + .projects-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + } + + .project-card { + position: relative; + background: var(--card-bg); + border-radius: var(--radius); + padding: 24px; + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: box-shadow 0.3s ease, transform 0.3s ease; + } + + .project-card::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 ease; + pointer-events: none; + } + + .project-card:hover::before { + opacity: 1; + } + + .project-card:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + } + + .project-title { + font-family: var(--font-primary); + font-size: 16px; + font-weight: 600; + color: var(--heading); + margin: 0; + line-height: 1.3; + } + + .project-desc { + font-size: 14px; + color: var(--text); + line-height: 1.7; + margin: 8px 0 0; + } + + .project-link { + display: inline-block; + padding: 6px 16px; + background: var(--teal); + color: #fff; + border-radius: 999px; + font-family: var(--font-secondary); + font-size: 12px; + font-weight: 500; + text-decoration: none; + margin-top: 12px; + transition: background 0.3s ease, transform 0.2s ease; + } + + .project-link:hover { + background: #00796B; + transform: translateY(-1px); + } + + /* ========================================= + CONTACT SECTION + ========================================= */ + + .contact-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + } + + .contact-item { + text-align: center; + } + + .contact-icon { + 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; + line-height: 1; + } + + .contact-value { + font-family: var(--font-secondary); + font-size: 13px; + color: var(--heading); + word-break: break-word; + } + + .contact-value a { + color: var(--teal); + text-decoration: none; + transition: color 0.3s ease; + } + + .contact-value a:hover { + color: #00796B; + } + + .contact-label { + font-family: var(--font-secondary); + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--muted); + margin-top: 2px; + } + + /* ========================================= + FOOTER + ========================================= */ + + .cv-footer { + text-align: center; + padding: 48px 0 32px; + border-top: 1px solid var(--border); + } + + .footer-ecg { + display: block; + margin: 0 auto 12px; + } + + .footer-text { + font-family: var(--font-secondary); + font-size: 12px; + color: var(--muted); + } + /* ========================================= RESPONSIVE: 768px ========================================= */ @@ -594,6 +818,14 @@ .timeline-entry { padding-left: 0; } + + .projects-grid { + grid-template-columns: 1fr; + } + + .contact-grid { + grid-template-columns: repeat(2, 1fr); + } } /* ========================================= @@ -648,6 +880,14 @@ .ecg-decoration { width: 120px; } + + .education-grid { + grid-template-columns: 1fr; + } + + .contact-grid { + grid-template-columns: repeat(2, 1fr); + } } @@ -975,21 +1215,80 @@
- +

Education

+
+
+

MPharm (Hons) Pharmacy

+

University of East Anglia

+

2011 — 2015

+

Upper Second-Class Honours (2:1)

+
+
+

Mary Seacole Leadership Programme

+

NHS Leadership Academy

+

2018

+

National healthcare leadership development programme.

+
+
+

A-Levels: Mathematics (A*), Chemistry (B), Politics (C)

- +

Projects

+
+
+

PharMetrics

+

Real-time medicines expenditure dashboard providing actionable analytics for NHS decision-makers.

+ Visit Project +
+
+

Patient Pathway Analysis

+

Data-driven analysis of patient pathways to identify optimisation opportunities and improve clinical outcomes.

+
+
+

Blueteq Generator

+

Automation tool reducing high-cost drug approval processing time by 70%, saving 200+ hours annually.

+
+
+

NMS Video

+

Educational video resource supporting New Medicine Service consultations, improving patient engagement.

+
+
- +

Contact

+
+
+
☎
+
07795553088
+
Phone
+
+
+
✉
+
andy@charlwood.xyz
+
Email
+
+
+
↗
+
linkedin.com/in/andrewcharlwood
+
LinkedIn
+
+
+
○
+
Norwich, UK
+
Location
+
+
-