117 lines
3.4 KiB
Plaintext
117 lines
3.4 KiB
Plaintext
---
|
||
import Layout from "../layouts/Layout.astro";
|
||
import Hero from "../components/Hero.astro";
|
||
import CircuitDivider from "../components/CircuitDivider.astro";
|
||
import Section from "../components/Section.astro";
|
||
import About from "../components/About.astro";
|
||
import SkillGroup from "../components/SkillGroup.astro";
|
||
import ProjectCard from "../components/ProjectCard.astro";
|
||
import PostList from "../components/PostList.astro";
|
||
import Contact from "../components/Contact.astro";
|
||
import { skills } from "../data/skills";
|
||
import { getPosts, allTags } from "../lib/blog";
|
||
import { getCollection } from "astro:content";
|
||
|
||
const featuredProjects = (await getCollection("projects", (p) => p.data.featured)).sort(
|
||
(a, b) => a.data.order - b.data.order,
|
||
);
|
||
const allPosts = await getPosts();
|
||
const recentPosts = allPosts.slice(0, 3);
|
||
const postTags = allTags(allPosts);
|
||
---
|
||
|
||
<Layout path="/">
|
||
<Hero />
|
||
|
||
<CircuitDivider />
|
||
|
||
<Section id="about" eyebrow="About" index="01" title="Reliability you can reason about.">
|
||
<About />
|
||
</Section>
|
||
|
||
<Section id="skills" eyebrow="Capabilities" index="02" title="What I work with, grouped by what it's for.">
|
||
<div class="grid grid--skills">
|
||
{skills.map((group) => <SkillGroup group={group} />)}
|
||
</div>
|
||
</Section>
|
||
|
||
<Section id="projects" eyebrow="Selected work" index="03" title="Platforms built to keep working unattended.">
|
||
<div class="grid grid--projects">
|
||
{featuredProjects.map((entry, i) => <ProjectCard entry={entry} index={i + 1} />)}
|
||
</div>
|
||
<p class="projects__more" data-reveal>
|
||
<a class="btn" href="/projects/">All projects →</a>
|
||
</p>
|
||
</Section>
|
||
|
||
<Section id="writing" eyebrow="Writing" index="04" title="Notes from the build.">
|
||
<p class="writing__intro" data-reveal>
|
||
Lessons from edge Kubernetes, GPUs, and running infrastructure like it matters -
|
||
written up as I go.
|
||
</p>
|
||
{postTags.length > 0 && (
|
||
<nav class="writing__tags" aria-label="Browse the blog by tag" data-reveal>
|
||
<span class="mono writing__tags-label">tags:</span>
|
||
{postTags.map((t) => (
|
||
<a class="tag" href={`/blog/tags/${t}/`}>{t}</a>
|
||
))}
|
||
</nav>
|
||
)}
|
||
<PostList posts={recentPosts} />
|
||
<p class="projects__more" data-reveal>
|
||
<a class="btn" href="/blog/">Read the blog →</a>
|
||
</p>
|
||
</Section>
|
||
|
||
<Section id="contact" eyebrow="Get in touch" index="05" title="Let's talk infrastructure.">
|
||
<Contact />
|
||
</Section>
|
||
</Layout>
|
||
|
||
<style>
|
||
.grid {
|
||
display: grid;
|
||
gap: var(--space-5);
|
||
}
|
||
/* capabilities bento: 4 columns, hero tile spans 2×2, min row height per the spec */
|
||
.grid--skills {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
grid-auto-rows: minmax(190px, auto);
|
||
gap: 16px;
|
||
}
|
||
@media (max-width: 1000px) {
|
||
.grid--skills {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
@media (max-width: 720px) {
|
||
.grid--skills {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
.grid--projects {
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
|
||
gap: 20px;
|
||
}
|
||
.projects__more {
|
||
margin-top: var(--space-6);
|
||
text-align: center;
|
||
}
|
||
.writing__intro {
|
||
max-width: 52ch;
|
||
margin-bottom: var(--space-4);
|
||
color: var(--text-dim);
|
||
}
|
||
.writing__tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
.writing__tags-label {
|
||
font-size: var(--step--1);
|
||
color: var(--text-faint);
|
||
}
|
||
</style>
|