This portfolio
A redesign of dev.maber.io into the Engineer's Desk — terminal-forward, dark-only, cyan-accented. The GhDashboard replaces the usual static "stats strip" with live GitHub data fetched server-side, eliminating client-side rate limits and keeping the token off the page. Self-hosted variable fonts, A+ security headers target.
architecture
flowchart LR Visitor["Browser"] Vercel["Vercel Edge<br/>1h cache"] SK["SvelteKit load<br/>+page.server.ts"] GH["GitHub GraphQL"] GHE["GitHub Events REST"] Visitor --> Vercel Vercel -->|miss| SK SK --> GH SK --> GHE GH --> SK GHE --> SK SK --> Vercel Vercel --> Visitor
A request for the homepage hits Vercel's edge first; on hit the cached HTML returns immediately. Cache miss runs `+page.server.ts`, which issues one GraphQL query for user/repo/contribution data and one REST call for the public events feed in parallel. The PAT lives in Vercel env vars and never reaches the client. Edge cache holds the response for an hour so traffic is decoupled from GitHub's rate limit.
decisions worth reading
Three reasons: client-side hits the unauthenticated 60-req/hour limit fast, the third-party `jogruber.de` heatmap service was a supply-chain risk for a defense-sector audience, and a token in client code is a token leaked. Server-side keeps the token in Vercel env, the response is edge-cached, and the visible markup is fully indexable.
Engineer's Desk is built around the cyan accent on near-black, which loses contrast in light mode. A two-mode build was twice the work for a brand that wouldn't be as strong. PCPC made the same call. Light mode stays parked in spec §11 — revisit only if there's a real reason.
Matches PCPC. Tokens in `tokens.css` are explicit; component styling lives next to the markup that uses it. Tailwind handles structural utilities (flex, grid, spacing) so the visual tokens stay in one place rather than spreading across magic class names.
code highlights
Discriminated GitHub fetch result
Page must always render. `fetchGithubData()` returns `{ ok: true, data }` or `{ ok: false, error }` — never throws. Components fall back to the existing skeleton render path on `null` data.
export type GhFetchResult =
| { ok: true; data: GhDashboardData }
| { ok: false; error: string };
export async function fetchGithubData(): Promise<GhFetchResult> {
const token = env.GITHUB_PAT;
if (!token) return { ok: false, error: 'GITHUB_PAT not set' };
try {
const [graphqlRes, eventsRes] = await Promise.all([
fetchGraphql(token),
fetchEvents(token)
]);
if (!graphqlRes.ok) {
return { ok: false, error: `HTTP ${graphqlRes.status}` };
}
return { ok: true, data: shapeData(graphqlRes.body, eventsRes.body) };
} catch (err) {
return { ok: false, error: String(err) };
}
}