admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task 8: Build education, projects, contact, and footer sections

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
A Charlwood
2026-02-09 13:21:11 +00:00
parent e6f416410a
commit c0dac8fe0c
1 changed files with 304 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
4-vitals-monitor.html
+304 -5
View File
@@ -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);
}
}
</style>
</head>
@@ -975,21 +1215,80 @@
</section>
<section id="education">
<!-- Task 8: Education section -->
<h2 class="section-heading">Education</h2>
<div class="education-grid">
<div class="education-card">
<h3 class="education-degree">MPharm (Hons) Pharmacy</h3>
<p class="education-institution">University of East Anglia</p>
<p class="education-period">2011 &mdash; 2015</p>
<p class="education-detail">Upper Second-Class Honours (2:1)</p>
</div>
<div class="education-card">
<h3 class="education-degree">Mary Seacole Leadership Programme</h3>
<p class="education-institution">NHS Leadership Academy</p>
<p class="education-period">2018</p>
<p class="education-detail">National healthcare leadership development programme.</p>
</div>
</div>
<p class="education-alevels">A-Levels: Mathematics (A*), Chemistry (B), Politics (C)</p>
</section>
<section id="projects">
<!-- Task 8: Projects section -->
<h2 class="section-heading">Projects</h2>
<div class="projects-grid">
<div class="project-card">
<h3 class="project-title">PharMetrics</h3>
<p class="project-desc">Real-time medicines expenditure dashboard providing actionable analytics for NHS decision-makers.</p>
<a href="https://medicines.charlwood.xyz/" class="project-link" target="_blank" rel="noopener noreferrer">Visit Project</a>
</div>
<div class="project-card">
<h3 class="project-title">Patient Pathway Analysis</h3>
<p class="project-desc">Data-driven analysis of patient pathways to identify optimisation opportunities and improve clinical outcomes.</p>
</div>
<div class="project-card">
<h3 class="project-title">Blueteq Generator</h3>
<p class="project-desc">Automation tool reducing high-cost drug approval processing time by 70%, saving 200+ hours annually.</p>
</div>
<div class="project-card">
<h3 class="project-title">NMS Video</h3>
<p class="project-desc">Educational video resource supporting New Medicine Service consultations, improving patient engagement.</p>
</div>
</div>
</section>
<section id="contact">
<!-- Task 8: Contact section -->
<h2 class="section-heading">Contact</h2>
<div class="contact-grid">
<div class="contact-item">
<div class="contact-icon">&#9742;</div>
<div class="contact-value">07795553088</div>
<div class="contact-label">Phone</div>
</div>
<div class="contact-item">
<div class="contact-icon">&#9993;</div>
<div class="contact-value"><a href="mailto:andy@charlwood.xyz">andy@charlwood.xyz</a></div>
<div class="contact-label">Email</div>
</div>
<div class="contact-item">
<div class="contact-icon">&#8599;</div>
<div class="contact-value"><a href="https://linkedin.com/in/andrewcharlwood" target="_blank" rel="noopener noreferrer">linkedin.com/in/andrewcharlwood</a></div>
<div class="contact-label">LinkedIn</div>
</div>
<div class="contact-item">
<div class="contact-icon">&#9675;</div>
<div class="contact-value">Norwich, UK</div>
<div class="contact-label">Location</div>
</div>
</div>
</section>
</main>
<footer id="cv-footer">
<!-- Task 8: Footer with ECG decoration -->
<footer class="cv-footer">
<svg class="footer-ecg" width="120" height="20" viewBox="0 0 120 20" fill="none">
<path d="M 0 10 L 35 10 L 40 10 C 42 10 43 7 45 7 C 47 7 48 10 50 10 L 54 10 L 56 13 L 60 2 L 64 15 L 66 10 L 70 10 C 72 10 73 7 75 7 C 77 7 78 10 80 10 L 120 10" stroke="var(--teal)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.3" fill="none"/>
</svg>
<p class="footer-text">Andy Charlwood &mdash; MPharm, GPhC Registered Pharmacist</p>
</footer>
</div>