chore: bootstrap repo with PRD, tasks, design samples, and Mosaic scaffolding
Personal professional website for jasonwoltje.com, built on Payload CMS 3 + Next.js 16 and deployed to w-docker0 (Docker Swarm) behind the existing MosaicStack edge Traefik. Establishes the delivery contract before any scaffold work begins: - docs/PRD.md — stack, content model, routing, design system, CI, infra, acceptance criteria, assumptions, and escalation log - docs/TASKS.md — milestone breakdown 0.0.1 → 0.1.0 MVP - README.md, LICENSE (All Rights Reserved), .gitignore - design-samples/ — stitch "Technical Editorial" mockups + DESIGN.md tokens - images/ — source headshots (to be imported into Payload media on seed) - .mosaic/ — orchestrator scaffolding (quality rails, repo hooks) Scaffold (Next.js + Payload init) ships on feat/scaffold in a follow-up PR. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,326 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#81ecff",
|
||||
"secondary-container": "#9900ce",
|
||||
"on-surface": "#f7f5fc",
|
||||
"on-secondary": "#39004f",
|
||||
"inverse-primary": "#006976",
|
||||
"surface": "#0d0e12",
|
||||
"on-secondary-container": "#fff5fc",
|
||||
"error-dim": "#d7383b",
|
||||
"inverse-surface": "#faf8ff",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"surface-container-lowest": "#000000",
|
||||
"on-error": "#490006",
|
||||
"surface-variant": "#24252c",
|
||||
"tertiary-dim": "#2be800",
|
||||
"surface-container-high": "#1e1f25",
|
||||
"on-primary-fixed": "#003840",
|
||||
"error-container": "#9f0519",
|
||||
"background": "#0d0e12",
|
||||
"primary-fixed-dim": "#00d4ec",
|
||||
"tertiary-fixed": "#2ff801",
|
||||
"on-background": "#f7f5fc",
|
||||
"primary-dim": "#00d4ec",
|
||||
"inverse-on-surface": "#54555a",
|
||||
"primary-container": "#00e3fd",
|
||||
"surface-dim": "#0d0e12",
|
||||
"outline-variant": "#47484d",
|
||||
"tertiary-fixed-dim": "#2be800",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"on-tertiary-fixed": "#064200",
|
||||
"on-secondary-fixed-variant": "#8400b2",
|
||||
"surface-container-highest": "#24252c",
|
||||
"on-tertiary-fixed-variant": "#0d6200",
|
||||
"secondary": "#d873ff",
|
||||
"on-tertiary": "#0d6100",
|
||||
"surface-container": "#18191e",
|
||||
"secondary-fixed": "#f1c1ff",
|
||||
"outline": "#75757a",
|
||||
"on-primary-container": "#004d57",
|
||||
"on-tertiary-container": "#0b5800",
|
||||
"tertiary": "#8eff71",
|
||||
"primary-fixed": "#00e3fd",
|
||||
"error": "#ff716c",
|
||||
"on-surface-variant": "#abaab0",
|
||||
"on-primary-fixed-variant": "#005762",
|
||||
"on-primary": "#005762",
|
||||
"surface-tint": "#81ecff",
|
||||
"secondary-dim": "#bc00fb",
|
||||
"surface-bright": "#2a2c32",
|
||||
"surface-container-low": "#121318",
|
||||
"on-secondary-fixed": "#580078",
|
||||
"tertiary-container": "#2ff801"
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Space Grotesk"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.grid-pattern {
|
||||
background-image: radial-gradient(rgba(129, 236, 255, 0.15) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.glass-panel {
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary">
|
||||
<!-- TopNavBar -->
|
||||
<nav class="bg-[#0d0e12]/80 backdrop-blur-xl docked full-width top-0 sticky z-50 bg-gradient-to-b from-[#0d0e12] to-transparent">
|
||||
<div class="flex justify-between items-center max-w-7xl mx-auto px-6 py-4">
|
||||
<span class="text-xl font-bold tracking-widest text-[#81ecff] font-['Space_Grotesk'] uppercase tracking-tighter">JASON WOLTJE</span>
|
||||
<div class="hidden md:flex items-center space-gap-8 gap-8 font-['Space_Grotesk'] uppercase tracking-tighter text-sm">
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform" href="#">Home</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform" href="#">Projects</a>
|
||||
<a class="text-[#81ecff] border-b-2 border-[#81ecff] pb-1 hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform" href="#">About</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform" href="#">Contact</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-[#81ecff] hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform">dark_mode</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="max-w-7xl mx-auto px-6 space-y-32 py-20">
|
||||
<!-- Status Terminal Indicator -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-2 w-2 bg-tertiary rounded-full animate-pulse"></div>
|
||||
<span class="font-label text-xs text-tertiary tracking-[0.2em] uppercase">SYSTEM STATUS: OPERATIONAL // LOC: 42.3601° N, 71.0589° W</span>
|
||||
</div>
|
||||
<!-- Hero: The Narrative Bio -->
|
||||
<section class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
<div class="lg:col-span-7 space-y-8">
|
||||
<div class="space-y-4">
|
||||
<span class="font-label text-xs text-primary uppercase tracking-widest">01 // THE ARCHITECT</span>
|
||||
<h1 class="text-6xl md:text-8xl font-headline font-bold leading-tight tracking-tighter">
|
||||
ENGINEERING <br/>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">LEADERSHIP.</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="space-y-6 text-lg text-on-surface-variant max-w-2xl leading-relaxed">
|
||||
<p>
|
||||
I bridge the gap between high-level executive strategy and the gritty reality of technical implementation. My career has been defined by a refusal to let "good enough" stand in the way of architectural excellence.
|
||||
</p>
|
||||
<p>
|
||||
From scaling distributed systems to mentoring the next generation of staff engineers, I approach leadership as an engineering problem: optimize for flow, minimize friction, and ensure the foundation is robust enough to support infinite growth.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 pt-4">
|
||||
<div class="px-4 py-2 bg-surface-container-highest border border-outline-variant/20 rounded-lg">
|
||||
<span class="font-label text-[10px] text-secondary uppercase block mb-1">Expertise</span>
|
||||
<span class="text-sm font-medium">System Design</span>
|
||||
</div>
|
||||
<div class="px-4 py-2 bg-surface-container-highest border border-outline-variant/20 rounded-lg">
|
||||
<span class="font-label text-[10px] text-tertiary uppercase block mb-1">Philosophy</span>
|
||||
<span class="text-sm font-medium">Radical Candor</span>
|
||||
</div>
|
||||
<div class="px-4 py-2 bg-surface-container-highest border border-outline-variant/20 rounded-lg">
|
||||
<span class="font-label text-[10px] text-primary uppercase block mb-1">Focus</span>
|
||||
<span class="text-sm font-medium">Platform Scaling</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-5 relative group">
|
||||
<div class="absolute inset-0 bg-primary/20 blur-[80px] -z-10 opacity-30 group-hover:opacity-50 transition-opacity"></div>
|
||||
<div class="aspect-square bg-surface-container border border-outline-variant/15 overflow-hidden rounded-xl relative">
|
||||
<div class="absolute inset-0 grid-pattern opacity-40"></div>
|
||||
<img alt="Jason Woltje" class="w-full h-full object-cover mix-blend-luminosity hover:mix-blend-normal transition-all duration-500" data-alt="Close up professional portrait of a tech leader with a thoughtful expression, warm studio lighting, modern minimalist background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVEfC8hu53QsJGRrPNtChmaW12cFhhoV3w6ZGY5wNTNfTVLGXHvFfKpY16sItN9d9Zq_x7K0I0gzO6_w1qgGHJqYNeolpGT2NJLTdydyU9NFYIfkhxSydvdhylre06gNvEjvqpA4hg2tXQwOw7g97uhqnKU6LK_ytvuLJVdcuD33zGgJB6ZUTVKjxiJ0d_Urz4EOkSV26eJFvj2LTUlx7e5rly0o451mdjAgGfCbvaXhrVonp6rIqB61xdhIy_bRQocPr7iXhQlGs"/>
|
||||
<div class="absolute bottom-4 right-4 bg-surface/80 backdrop-blur-md p-3 border border-outline-variant/20 rounded-lg">
|
||||
<span class="font-label text-[10px] text-on-surface-variant block">TIMESTAMP</span>
|
||||
<span class="font-headline font-bold text-primary">MARCH 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Technical Deep-Dive: The Geek Side -->
|
||||
<section class="space-y-12">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div class="space-y-4">
|
||||
<span class="font-label text-xs text-secondary uppercase tracking-widest">02 // THE GEEK SIDE</span>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-bold">HOME LAB & TECH STACK.</h2>
|
||||
</div>
|
||||
<p class="text-on-surface-variant max-w-sm font-label text-sm uppercase leading-relaxed">
|
||||
Analyzing the infrastructure that powers my personal experimentation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Stack Card -->
|
||||
<div class="md:col-span-2 bg-surface-container-low rounded-xl p-8 border border-outline-variant/10 relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[120px]">terminal</span>
|
||||
</div>
|
||||
<div class="relative z-10 space-y-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="h-px w-12 bg-primary"></span>
|
||||
<h3 class="font-headline font-bold text-xl uppercase tracking-wider">Primary Stack</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
<div class="space-y-2">
|
||||
<span class="font-label text-[10px] text-primary/60">LANGUAGE</span>
|
||||
<p class="font-medium">TypeScript / Go</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<span class="font-label text-[10px] text-secondary/60">FRONTEND</span>
|
||||
<p class="font-medium">Next.js / Tailwind</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<span class="font-label text-[10px] text-tertiary/60">DATABASE</span>
|
||||
<p class="font-medium">PostgreSQL / Redis</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<span class="font-label text-[10px] text-on-surface-variant">INFRA</span>
|
||||
<p class="font-medium">K8s / Terraform</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-6 border-t border-outline-variant/10">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<span class="material-symbols-outlined text-sm text-tertiary">memory</span>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-tighter">Current Build: Homelab V3.4</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-highest p-4 rounded-lg flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-primary">dns</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium">Proxmox Cluster</p>
|
||||
<p class="text-[10px] font-label text-on-surface-variant uppercase">3x Micro Nodes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-highest p-4 rounded-lg flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-secondary">storage</span>
|
||||
<div>
|
||||
<p class="text-sm font-medium">TrueNAS Scale</p>
|
||||
<p class="text-[10px] font-label text-on-surface-variant uppercase">48TB ZFS Pool</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Maker Logic Card -->
|
||||
<div class="bg-surface-container-highest rounded-xl p-8 border border-primary/20 relative overflow-hidden flex flex-col justify-between">
|
||||
<div class="absolute inset-0 grid-pattern opacity-10"></div>
|
||||
<div class="relative z-10 space-y-6">
|
||||
<span class="material-symbols-outlined text-3xl text-primary">construction</span>
|
||||
<h3 class="font-headline font-bold text-2xl">THE MAKER <br/>MINDSET.</h3>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">
|
||||
Beyond code, I build mechanical keyboards, restore vintage audio gear, and obsess over home automation logic. If it has a circuit board, I've likely tried to optimize it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative z-10 pt-8">
|
||||
<button class="w-full py-3 bg-primary text-on-primary font-label text-xs uppercase tracking-[0.2em] rounded-lg hover:bg-primary/90 transition-colors">
|
||||
View Workbench
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Soundtrack: The Audio Interface -->
|
||||
<section class="space-y-12">
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div class="space-y-4">
|
||||
<span class="font-label text-xs text-tertiary uppercase tracking-widest">03 // SOUNDTRACK</span>
|
||||
<h2 class="text-4xl md:text-5xl font-headline font-bold">AUDIO SIGNAL PATH.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<!-- Music Player Mock -->
|
||||
<div class="lg:col-span-3 bg-surface-container rounded-xl overflow-hidden border border-outline-variant/10 flex flex-col md:flex-row">
|
||||
<div class="md:w-1/3 aspect-square relative overflow-hidden">
|
||||
<img alt="Album Art" class="w-full h-full object-cover" data-alt="Cinematic moody abstract art with deep purples and blues, reminiscent of a modern synth-wave or techno album cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBQuxLpB2MoIFqVbz9hhflkisIf05QTFsF5tyVrPKXuQOPjhgZdUQsaAC-mY9IntYA7nnVeTQ4wSRPc4PxVHf1eIAHJzk9w9xg3CZINS2y_RK2ESfj53GJdjfEPfVidpT86id4N0HvhR4R8QHImR8OEfOVKAsRqHe9spBuLuB-a39keaKc7tdcnxZEXZObcbq0NYdpYcelWlLTesIxn1nqzS1OdNGb_1LfnCiuiDQiWPaQOAw4O6QXjq0fWJsMibshOKQqVfYxC-Gg"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
||||
<div class="absolute bottom-4 left-4">
|
||||
<p class="text-xs font-label text-secondary uppercase">Now Playing</p>
|
||||
<p class="font-headline font-bold text-xl">The Midnight Shift</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-8 flex flex-col justify-between space-y-8">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-label text-[10px] text-on-surface-variant uppercase">ANALOG MASTER // 96KHZ 24BIT</span>
|
||||
<span class="material-symbols-outlined text-tertiary">high_quality</span>
|
||||
</div>
|
||||
<div class="h-1 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||||
<div class="h-full w-2/3 bg-primary"></div>
|
||||
</div>
|
||||
<div class="flex justify-between font-label text-[10px] text-on-surface-variant">
|
||||
<span>02:44</span>
|
||||
<span>04:12</span>
|
||||
</div>
|
||||
<div class="flex justify-center items-center gap-10">
|
||||
<span class="material-symbols-outlined text-2xl text-on-surface-variant hover:text-primary transition-colors cursor-pointer">skip_previous</span>
|
||||
<div class="h-14 w-14 bg-primary rounded-full flex items-center justify-center text-on-primary hover:scale-105 transition-transform cursor-pointer">
|
||||
<span class="material-symbols-outlined text-3xl" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-2xl text-on-surface-variant hover:text-primary transition-colors cursor-pointer">skip_next</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 pt-4">
|
||||
<span class="px-3 py-1 bg-surface-container-highest text-[10px] font-label text-secondary uppercase rounded">Progressive Metal</span>
|
||||
<span class="px-3 py-1 bg-surface-container-highest text-[10px] font-label text-tertiary uppercase rounded">Post-Rock</span>
|
||||
<span class="px-3 py-1 bg-surface-container-highest text-[10px] font-label text-primary uppercase rounded">IDM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Gear List -->
|
||||
<div class="space-y-4">
|
||||
<div class="p-6 bg-surface-container-low border-l-2 border-primary rounded-r-xl">
|
||||
<span class="font-label text-[10px] text-primary uppercase">Daily Drivers</span>
|
||||
<p class="text-sm font-medium mt-1">Sennheiser HD800S</p>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container-low border-l-2 border-secondary rounded-r-xl">
|
||||
<span class="font-label text-[10px] text-secondary uppercase">Interface</span>
|
||||
<p class="text-sm font-medium mt-1">Universal Audio Apollo Solo</p>
|
||||
</div>
|
||||
<div class="p-6 bg-surface-container-low border-l-2 border-tertiary rounded-r-xl">
|
||||
<span class="font-label text-[10px] text-tertiary uppercase">Monitor</span>
|
||||
<p class="text-sm font-medium mt-1">Adam Audio T5V</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#0d0e12] border-t border-[#81ecff]/10 py-12">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center max-w-7xl mx-auto px-6 gap-8">
|
||||
<div class="text-slate-500 font-['Space_Grotesk'] text-[10px] uppercase tracking-widest">
|
||||
© 2024 JASON WOLTJE // REV: 2.0.4
|
||||
</div>
|
||||
<div class="flex items-center gap-12 font-['Space_Grotesk'] text-[10px] uppercase tracking-widest">
|
||||
<a class="text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">LinkedIn</a>
|
||||
<a class="text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">GitHub</a>
|
||||
<a class="text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">Twitter</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-tertiary"></span>
|
||||
<span class="font-label text-[10px] text-slate-500 uppercase">SERVER STATUS: STABLE</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 405 KiB |
Reference in New Issue
Block a user