185 lines
4.2 KiB
Plaintext
185 lines
4.2 KiB
Plaintext
---
|
|
import { site } from "../data/site";
|
|
import { experience, education } from "../data/experience";
|
|
import { cvAvailable } from "../lib/assets";
|
|
|
|
// M1 shows the most recent roles; the full history lives in experience.ts (and the CV).
|
|
const recent = experience.slice(0, 3);
|
|
const olderCount = experience.length - recent.length;
|
|
---
|
|
|
|
<div class="about">
|
|
<div class="about__bio" data-reveal>
|
|
<p class="lead">{site.bio}</p>
|
|
|
|
<dl class="about__facts">
|
|
<div>
|
|
<dt class="mono">Based</dt>
|
|
<dd>{site.location}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="mono">Focus</dt>
|
|
<dd>Edge Kubernetes · GPU/AI · IaC & GitOps</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<h3 class="about__sub mono"><span class="about__hash">#</span> education</h3>
|
|
<ul class="about__education">
|
|
{education.map((e) => <li>{e}</li>)}
|
|
</ul>
|
|
|
|
{cvAvailable && (
|
|
<p class="about__cv">
|
|
<a class="btn" href="/cv.pdf" download>Download full CV (PDF)</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<ol class="about__timeline">
|
|
{
|
|
recent.map((role) => (
|
|
<li class="about__role" data-reveal>
|
|
<div class="about__role-head">
|
|
<h3 class="about__role-title">{role.title}</h3>
|
|
<span class="mono about__role-period">{role.period}</span>
|
|
</div>
|
|
<p class="mono about__role-org">{role.org}</p>
|
|
<p class="about__role-summary">{role.summary}</p>
|
|
{role.highlights.length > 0 && (
|
|
<ul class="about__highlights">
|
|
{role.highlights.map((h) => (
|
|
<li>{h}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
))
|
|
}
|
|
</ol>
|
|
{olderCount > 0 && (
|
|
<p class="about__more mono">
|
|
+ {olderCount} earlier roles (ELGAS, Darktime){cvAvailable ? " - see the CV" : ""}.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.about {
|
|
display: grid;
|
|
gap: var(--space-7);
|
|
}
|
|
@media (min-width: 880px) {
|
|
.about {
|
|
grid-template-columns: 1fr 1.1fr;
|
|
gap: var(--space-8);
|
|
align-items: start;
|
|
}
|
|
}
|
|
.about__facts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-6);
|
|
margin: var(--space-5) 0 0;
|
|
}
|
|
.about__facts dt {
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--text-faint);
|
|
}
|
|
.about__facts dd {
|
|
margin: 0.2rem 0 0;
|
|
color: var(--text);
|
|
font-size: var(--step--1);
|
|
}
|
|
.about__sub {
|
|
margin-top: var(--space-6);
|
|
color: var(--text-dim);
|
|
font-size: var(--step--1);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.about__hash {
|
|
color: var(--accent);
|
|
}
|
|
.about__education {
|
|
margin: var(--space-3) 0 0;
|
|
padding-left: 1.1rem;
|
|
color: var(--text-dim);
|
|
font-size: var(--step--1);
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
}
|
|
.about__education li::marker {
|
|
color: var(--accent);
|
|
}
|
|
.about__cv {
|
|
margin-top: var(--space-6);
|
|
}
|
|
.about__timeline {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
gap: var(--space-5);
|
|
}
|
|
.about__role {
|
|
position: relative;
|
|
padding-left: var(--space-5);
|
|
border-left: 1px solid var(--border-strong);
|
|
}
|
|
.about__role::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: -5px;
|
|
top: 0.4rem;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 4px var(--accent-dim);
|
|
}
|
|
.about__role-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
.about__role-title {
|
|
font-size: var(--step-1);
|
|
}
|
|
.about__role-period {
|
|
font-size: 0.72rem;
|
|
color: var(--text-faint);
|
|
}
|
|
.about__role-org {
|
|
color: var(--accent);
|
|
font-size: var(--step--1);
|
|
margin-top: 0.15rem;
|
|
}
|
|
.about__role-summary {
|
|
color: var(--text-dim);
|
|
margin-top: var(--space-2);
|
|
font-size: var(--step-0);
|
|
}
|
|
.about__highlights {
|
|
margin: var(--space-3) 0 0;
|
|
padding-left: 1.1rem;
|
|
color: var(--text-dim);
|
|
font-size: var(--step--1);
|
|
display: grid;
|
|
gap: 0.3rem;
|
|
}
|
|
.about__highlights li::marker {
|
|
color: var(--accent);
|
|
}
|
|
.about__more {
|
|
margin-top: var(--space-5);
|
|
padding-left: var(--space-5);
|
|
font-size: 0.72rem;
|
|
color: var(--text-faint);
|
|
}
|
|
</style>
|