Pawper Dev Astro Vc

Pawper.dev

<h1 dir="auto">pawper.dev</h1>
<p dir="auto">My personal portfolio site — the one you're reading this on. Built from scratch as a learning project and employer-facing showcase, with a sci-fi LCARS UI inspired by Star Trek's computer interfaces.</p>
<h2 dir="auto">What it is</h2>
<p dir="auto">A full-featured portfolio platform built with <strong>Astro 6</strong>, <strong>React 18</strong>, and <strong>TypeScript</strong>. Projects are pulled live from GitHub at build time. Writing lives in Markdown content collections. Everything is statically generated and deployed to Netlify.</p>
<p dir="auto">The UI system ("Codex") is built around LCARS design language: angular bars, monospace readouts, section color theming, and a modal-stack navigation model that keeps the page URL in sync with whatever you're viewing.</p>
<h2 dir="auto">Features</h2>
<ul dir="auto">
<li><strong>Projects</strong> — fetched from GitHub at build time via Octokit. Repos tagged <code class="notranslate">portfolio-project</code> are included automatically. Each project gets a Puppeteer screenshot, full commit history (for the activity heatmap), and language color theming derived from the codebase itself.</li>
<li><strong>Logs</strong> — a blog-style writing section backed by Astro Content Collections. Supports series, kicker categories, tags, and inline cross-references that embed live project/log cards directly in prose.</li>
<li><strong>Skills</strong> — a custom taxonomy with distribution charts, coverage stats, and per-skill filtering across projects and logs. Skills link to endorsements.</li>
<li><strong>Services</strong> — six service types (employment, contracting, consulting, coaching, speaking, mentoring) with status indicators and endorsements pulled from Airtable at build time.</li>
<li><strong>Search</strong> — client-side full-text search across projects and logs, with debounce and query persistence.</li>
<li><strong>Activity</strong> — an all-portfolio commit heatmap with year filtering, showing real activity density per day across every project.</li>
<li><strong>RSS</strong> — five feed types: all projects, all logs, featured projects, plus per-category feeds auto-generated at build.</li>
<li><strong>Dev.to</strong> — logs are cross-posted to Dev.to via their API. Canonical URL points back to pawper.dev, so search engines attribute the content here.</li>
<li><strong>Resume</strong> — a <code class="notranslate">/resume</code> page with Puppeteer-generated PDF export baked into the build pipeline.</li>
</ul>
<h2 dir="auto">How it was built</h2>
<p dir="auto">This site was built collaboratively with AI — specifically Claude — over an extended session (about a week full-time) that produced the full UI system, data pipelines, and component library. The design direction, content, and product decisions are mine; the implementation was a genuine back-and-forth between what I wanted and what the AI helped me build. There were some challenging moments with context and memory, as well as Claude just being completely off base so I had to get into things myself, but we got through it!</p>
<h2 dir="auto">What's next</h2>
<p dir="auto">Since this was more or less vibe-coded and extremely iterative, my next goal is to orchestrate agents to create a multi-factored procedural memory system built from the current code base / memory, identify flaws, then generate a full hierarchical spec including the tricky design elements based on best practices, and see if Claude Code can plan and reproduce the website from spec without code blocks (a.k.a. SDD - spec-driven development) and also have tests against the spec.</p>
<h2 dir="auto">Stack</h2>
<markdown-accessiblity-table><table role="table">
<thead>
<tr>
<th>Layer</th>
<th>Choice</th>
</tr>
</thead>
<tbody>
<tr>
<td>Framework</td>
<td>Astro 6</td>
</tr>
<tr>
<td>Components</td>
<td>React 18 (islands)</td>
</tr>
<tr>
<td>Language</td>
<td>TypeScript (strict)</td>
</tr>
<tr>
<td>Styling</td>
<td>CSS custom properties + LCARS design system</td>
</tr>
<tr>
<td>Data</td>
<td>GitHub API (Octokit), Airtable, Astro Content Collections</td>
</tr>
<tr>
<td>Screenshots</td>
<td>Puppeteer → Cloudinary</td>
</tr>
<tr>
<td>Deployment</td>
<td>Netlify</td>
</tr>
</tbody>
</table></markdown-accessiblity-table>