229 lines
7.9 KiB
Text
229 lines
7.9 KiB
Text
|
---
|
||
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
||
|
|
import SectionHead from "../components/SectionHead.astro";
|
||
|
|
import ResumeIntro from "../components/ui/resume-intro";
|
||
|
|
import { SITE, authors } from "../lib/blog-data.js";
|
||
|
|
import resume from "../config/resume.json";
|
||
|
|
|
||
|
|
const author = authors[0];
|
||
|
|
|
||
|
|
const jsonLd = {
|
||
|
|
"@context": "https://schema.org",
|
||
|
|
"@type": "ProfilePage",
|
||
|
|
mainEntity: {
|
||
|
|
"@type": "Person",
|
||
|
|
name: SITE.name,
|
||
|
|
jobTitle: author.jobTitle,
|
||
|
|
email: `mailto:${resume.contact.email}`,
|
||
|
|
telephone: resume.contact.phone,
|
||
|
|
description: resume.summary,
|
||
|
|
knowsAbout: author.knowsAbout,
|
||
|
|
alumniOf: resume.education.map((e) => ({ "@type": "Organization", name: e.org })),
|
||
|
|
hasCredential: resume.certifications.map((c) => ({
|
||
|
|
"@type": "EducationalOccupationalCredential",
|
||
|
|
name: c.title,
|
||
|
|
})),
|
||
|
|
},
|
||
|
|
};
|
||
|
|
---
|
||
|
|
|
||
|
|
<BaseLayout
|
||
|
|
title={`Resume — ${SITE.name}`}
|
||
|
|
description={resume.summary}
|
||
|
|
canonical="/resume"
|
||
|
|
jsonLd={jsonLd}
|
||
|
|
>
|
||
|
|
{/* client:visible — the block is the first thing on the page but the motion
|
||
|
|
only matters once it is actually in view, and this keeps the JS off the
|
||
|
|
critical path. */}
|
||
|
|
<ResumeIntro
|
||
|
|
client:visible
|
||
|
|
name={SITE.name}
|
||
|
|
headline={resume.headline}
|
||
|
|
summary={resume.summary}
|
||
|
|
highlights={resume.highlights}
|
||
|
|
social={resume.social}
|
||
|
|
email={resume.contact.email}
|
||
|
|
resumeHref="/carlos-arias-resume.pdf"
|
||
|
|
photoSrc="/carlos-arias-light.jpg"
|
||
|
|
photoSrcDark="/carlos-arias-dark.jpg"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div class="mx-auto w-full max-w-6xl px-5">
|
||
|
|
<!-- ---------- experience ---------- -->
|
||
|
|
<section class="ca-band" id="experience">
|
||
|
|
<SectionHead title="Experience" meta="1999 — present" brush />
|
||
|
|
|
||
|
|
<div class="flex flex-col">
|
||
|
|
{
|
||
|
|
resume.experience.map((job, i) => (
|
||
|
|
<article
|
||
|
|
class:list={["ca-cv-row", i === 0 && "border-t border-border"]}
|
||
|
|
>
|
||
|
|
<div class="ca-cv-when">
|
||
|
|
<span class="font-mono text-xs tracking-wide text-[var(--ca-ink-4)] tabular-nums">
|
||
|
|
{job.period}
|
||
|
|
</span>
|
||
|
|
{job.current && (
|
||
|
|
<span class="ca-cv-now" aria-label="Current role">
|
||
|
|
Now
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ca-cv-what">
|
||
|
|
<h3 class="font-serif text-2xl leading-snug tracking-tight">{job.role}</h3>
|
||
|
|
<p class="mt-1 text-sm">
|
||
|
|
<span class="text-foreground">{job.org}</span>
|
||
|
|
<span class="text-[var(--ca-ink-4)]"> · {job.sector}</span>
|
||
|
|
</p>
|
||
|
|
<p class="mt-4 max-w-[64ch] text-sm leading-relaxed text-muted-foreground">
|
||
|
|
{job.summary}
|
||
|
|
</p>
|
||
|
|
<ul class="ca-cv-points">
|
||
|
|
{job.points.map((point) => (
|
||
|
|
<li>{point}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ---------- projects ---------- -->
|
||
|
|
<section class="ca-band" id="ventures">
|
||
|
|
<SectionHead title="Ventures" meta="Built and running" brush />
|
||
|
|
|
||
|
|
<div class="grid gap-x-14 md:grid-cols-2">
|
||
|
|
{
|
||
|
|
resume.projects.map((project) => (
|
||
|
|
<article class="border-t border-border py-7">
|
||
|
|
<div class="flex flex-wrap items-baseline gap-3">
|
||
|
|
<h3 class="font-serif text-2xl leading-snug tracking-tight">
|
||
|
|
{project.name}
|
||
|
|
</h3>
|
||
|
|
<span class="font-mono text-[0.7rem] tracking-[0.12em] text-[var(--ca-ink-4)] uppercase">
|
||
|
|
{project.kind}
|
||
|
|
</span>
|
||
|
|
<span class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
|
||
|
|
{project.period}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p class="mt-3 max-w-[56ch] text-sm leading-relaxed text-muted-foreground">
|
||
|
|
{project.summary}
|
||
|
|
</p>
|
||
|
|
<ul class="ca-cv-points">
|
||
|
|
{project.points.map((point) => (
|
||
|
|
<li>{point}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</article>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ---------- skills ---------- -->
|
||
|
|
<section class="ca-band" id="skills">
|
||
|
|
<SectionHead title="Skills" meta="Years in practice" />
|
||
|
|
|
||
|
|
<div class="grid gap-x-14 gap-y-10 md:grid-cols-2">
|
||
|
|
{
|
||
|
|
resume.skills.map((group) => (
|
||
|
|
<div>
|
||
|
|
<h3 class="mb-4 font-mono text-[0.7rem] tracking-[0.18em] text-[var(--ca-ink-4)] uppercase">
|
||
|
|
{group.group}
|
||
|
|
</h3>
|
||
|
|
<ul class="flex flex-col">
|
||
|
|
{group.items.map((item) => (
|
||
|
|
<li class="flex items-baseline gap-4 border-t border-border py-2.5 last:border-b">
|
||
|
|
<span class="text-sm">{item.name}</span>
|
||
|
|
{item.years && (
|
||
|
|
<span class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
|
||
|
|
{item.years} yr{item.years === 1 ? "" : "s"}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ---------- tools ---------- -->
|
||
|
|
<section class="ca-band">
|
||
|
|
<SectionHead title="Tooling" meta="Day to day" />
|
||
|
|
<ul class="flex max-w-5xl flex-wrap gap-2">
|
||
|
|
{
|
||
|
|
resume.tools.map((tool) => (
|
||
|
|
<li class="rounded-[var(--radius)] border border-border px-2.5 py-1 font-mono text-[0.7rem] tracking-wide text-muted-foreground">
|
||
|
|
{tool}
|
||
|
|
</li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ---------- education ---------- -->
|
||
|
|
<section class="ca-band" id="education">
|
||
|
|
<div class="grid gap-x-14 gap-y-10 md:grid-cols-2">
|
||
|
|
<div>
|
||
|
|
<h2 class="mb-6 font-serif text-[clamp(1.6rem,3.4vw,2.1rem)] leading-tight tracking-tight">
|
||
|
|
Education
|
||
|
|
</h2>
|
||
|
|
{
|
||
|
|
resume.education.map((item) => (
|
||
|
|
<div class="border-t border-border py-4 last:border-b">
|
||
|
|
<p class="font-serif text-lg leading-snug">{item.title}</p>
|
||
|
|
<p class="mt-1 text-sm text-muted-foreground">{item.org}</p>
|
||
|
|
<p class="mt-1 font-mono text-xs text-[var(--ca-ink-4)] tabular-nums">
|
||
|
|
{item.period}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h2 class="mb-6 font-serif text-[clamp(1.6rem,3.4vw,2.1rem)] leading-tight tracking-tight">
|
||
|
|
Certifications
|
||
|
|
</h2>
|
||
|
|
{
|
||
|
|
resume.certifications.map((item) => (
|
||
|
|
<div class="flex items-baseline gap-4 border-t border-border py-4 last:border-b">
|
||
|
|
<p class="text-sm">{item.title}</p>
|
||
|
|
<p class="ml-auto font-mono text-xs whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
|
||
|
|
{item.period}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- ---------- closing ---------- -->
|
||
|
|
<section class="ca-band">
|
||
|
|
<h2
|
||
|
|
class="max-w-[20ch] font-serif text-[clamp(1.8rem,4.5vw,3.1rem)] leading-tight tracking-tight text-balance"
|
||
|
|
>
|
||
|
|
The full version, <span class="ca-brushed">on paper.</span>
|
||
|
|
</h2>
|
||
|
|
<div class="mt-9 flex flex-wrap items-center gap-7">
|
||
|
|
<a
|
||
|
|
href="/carlos-arias-resume.pdf"
|
||
|
|
download
|
||
|
|
class="rounded-[var(--radius)] border border-primary bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-transparent hover:text-primary"
|
||
|
|
>
|
||
|
|
Download resume (PDF)
|
||
|
|
</a>
|
||
|
|
<a href="/contact" class="ca-quiet text-sm">Start a conversation</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</BaseLayout>
|