seedproject-web/app/src/pages/resume.astro
Carlos Arias 43ae1e2015 Baseline: full site build (brand, pages, DB, agent-editable)
Establishes the deploy baseline on main so the admin agent's publish/rollback
has a clean starting point. Everything built to date: sumi-e brand system,
homepage, projects (DB-driven case studies), resume, about, services +
website-design detail, contact form + DB, changelog, favicon + share card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DoFYZY9gkGPNDqZ7NuEa9a
2026-07-23 20:21:28 +00:00

228 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>