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,263 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>JASON WOLTJE // CONTACT</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<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;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(36, 37, 44, 0.6);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
.grid-pattern {
|
||||
background-image: radial-gradient(rgba(129, 236, 255, 0.1) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary/30 selection:text-primary">
|
||||
<!-- TopNavBar Component -->
|
||||
<header 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">
|
||||
<div class="text-xl font-bold tracking-widest text-[#81ecff] font-['Space_Grotesk'] uppercase tracking-tighter">
|
||||
JASON WOLTJE
|
||||
</div>
|
||||
<nav class="hidden md:flex gap-8 items-center">
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Home</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Projects</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">About</a>
|
||||
<a class="font-['Space_Grotesk'] uppercase tracking-tighter text-[#81ecff] border-b-2 border-[#81ecff] pb-1 hover:opacity-80 transition-all duration-300" href="#">Contact</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-[#81ecff] scale-95 active:scale-90 transition-transform">dark_mode</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="min-h-screen relative">
|
||||
<!-- Status Terminal Signature Component -->
|
||||
<div class="fixed top-24 left-6 z-10 hidden xl:flex flex-col gap-1 items-start">
|
||||
<div class="font-label text-[10px] text-tertiary uppercase tracking-[0.2em] bg-surface-container-high px-3 py-1 border-l-2 border-tertiary">
|
||||
LOC: CONTACT_CORE
|
||||
</div>
|
||||
<div class="font-label text-[10px] text-slate-500 uppercase tracking-[0.2em] px-3">
|
||||
STATUS: ENCRYPTED_HANDSHAKE
|
||||
</div>
|
||||
</div>
|
||||
<section class="max-w-7xl mx-auto px-6 pt-16 pb-24 grid-pattern">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
<!-- Left Content: Editorial Header -->
|
||||
<div class="lg:col-span-7 flex flex-col gap-6">
|
||||
<div class="font-label text-sm text-secondary uppercase tracking-[0.3em]">01 // DIRECT CHANNELS</div>
|
||||
<h1 class="font-headline text-6xl md:text-8xl font-bold tracking-tighter leading-none text-on-surface">
|
||||
I'll find a <span class="text-primary">way to solve</span> your problem.
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-xl md:text-2xl max-w-2xl leading-relaxed mt-4">
|
||||
Whether it's an architectural challenge, a messy deployment, or just a concept that needs refining—reach out. I build systems that endure.
|
||||
</p>
|
||||
<!-- Technical Meta Block -->
|
||||
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-low p-6 border-l-2 border-outline-variant">
|
||||
<span class="font-label text-[10px] text-primary uppercase tracking-widest block mb-2">AVAILABILITY</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-2 h-2 rounded-full bg-tertiary shadow-[0_0_10px_rgba(142,255,113,0.5)]"></div>
|
||||
<span class="text-on-surface font-headline font-bold">ACCEPTING Q4 PROJECTS</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low p-6 border-l-2 border-outline-variant">
|
||||
<span class="font-label text-[10px] text-secondary uppercase tracking-widest block mb-2">LOCAL TIME</span>
|
||||
<span class="text-on-surface font-headline font-bold uppercase">14:42 UTC -05:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Content: Contact Form -->
|
||||
<div class="lg:col-span-5 relative">
|
||||
<div class="absolute -top-6 -right-6 w-32 h-32 bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div class="glass-card p-8 rounded-lg border border-outline-variant/15 relative z-10">
|
||||
<form class="flex flex-col gap-6">
|
||||
<div class="group">
|
||||
<label class="font-label text-[10px] text-on-surface-variant uppercase tracking-widest block mb-2">Full Name</label>
|
||||
<input class="w-full bg-surface-container-lowest border-0 border-b border-outline-variant/50 focus:border-primary focus:ring-0 text-on-surface placeholder:text-outline transition-all py-3 px-0 font-headline uppercase tracking-tighter" placeholder="WALTER O'BRIEN" type="text"/>
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="font-label text-[10px] text-on-surface-variant uppercase tracking-widest block mb-2">Email Address</label>
|
||||
<input class="w-full bg-surface-container-lowest border-0 border-b border-outline-variant/50 focus:border-primary focus:ring-0 text-on-surface placeholder:text-outline transition-all py-3 px-0 font-headline uppercase tracking-tighter" placeholder="W.OBRIEN@CENTRAL.COM" type="email"/>
|
||||
</div>
|
||||
<div class="group">
|
||||
<label class="font-label text-[10px] text-on-surface-variant uppercase tracking-widest block mb-2">Project Brief</label>
|
||||
<textarea class="w-full bg-surface-container-lowest border-0 border-b border-outline-variant/50 focus:border-primary focus:ring-0 text-on-surface placeholder:text-outline transition-all py-3 px-0 font-headline uppercase tracking-tighter resize-none" placeholder="DESCRIBE THE SYSTEM ARCHITECTURE OR PROBLEM SET..." rows="4"></textarea>
|
||||
</div>
|
||||
<button class="mt-4 bg-primary text-on-primary font-label font-bold uppercase tracking-widest py-4 px-8 flex items-center justify-between hover:bg-primary-container transition-colors active:scale-[0.98]">
|
||||
INITIALIZE HANDSHAKE
|
||||
<span class="material-symbols-outlined text-lg">arrow_forward</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Newsletter Section (Mautic Focused) -->
|
||||
<section class="bg-surface-container-low py-24 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 p-8">
|
||||
<span class="font-label text-[120px] text-on-surface/[0.02] font-black select-none pointer-events-none">NEWSLETTER</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row items-center gap-12">
|
||||
<div class="md:w-1/2">
|
||||
<div class="font-label text-sm text-tertiary uppercase tracking-[0.3em] mb-4">02 // DATA STREAM</div>
|
||||
<h2 class="font-headline text-4xl md:text-5xl font-bold tracking-tight text-on-surface mb-6">
|
||||
Technical <span class="text-secondary">Insights</span>
|
||||
</h2>
|
||||
<p class="text-on-surface-variant text-lg leading-relaxed mb-8 max-w-lg">
|
||||
Deep dives into Mautic automation, specialized infrastructure, and the occasional breakdown of a hobbyist synth engine. No spam, just technical value.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<span class="bg-surface-container-highest px-4 py-2 text-tertiary font-label text-[10px] tracking-widest uppercase border border-tertiary/20">System Architecture</span>
|
||||
<span class="bg-surface-container-highest px-4 py-2 text-primary font-label text-[10px] tracking-widest uppercase border border-primary/20">Mautic Ops</span>
|
||||
<span class="bg-surface-container-highest px-4 py-2 text-secondary font-label text-[10px] tracking-widest uppercase border border-secondary/20">Custom Fabric</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 w-full">
|
||||
<div class="p-1 bg-gradient-to-br from-primary via-secondary to-tertiary rounded-lg">
|
||||
<div class="bg-surface-container-lowest p-8 md:p-12 rounded-lg flex flex-col gap-6">
|
||||
<h3 class="font-headline text-2xl font-bold text-on-surface">Join the Jason's Updates</h3>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<input class="flex-grow bg-surface-container-high border border-outline-variant/30 px-6 py-4 text-on-surface font-label uppercase tracking-widest focus:ring-1 focus:ring-primary focus:border-primary" placeholder="SYSTEM_MAILBOX@HOST.COM" type="email"/>
|
||||
<button class="bg-white text-background px-8 py-4 font-label font-bold uppercase tracking-widest hover:bg-primary transition-colors">
|
||||
SUBSCRIBE
|
||||
</button>
|
||||
</div>
|
||||
<p class="font-label text-[10px] text-outline text-center uppercase tracking-tighter">
|
||||
SECURE TLS ENCRYPTED ENDPOINT. UNSUBSCRIBE VIA ONE-CLICK HEADER.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social Grid (Asymmetric Bento) -->
|
||||
<section class="max-w-7xl mx-auto px-6 py-24">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 h-[400px]">
|
||||
<a class="col-span-2 row-span-2 group bg-surface-container hover:bg-surface-container-high transition-all flex flex-col justify-end p-8 border border-outline-variant/10 relative overflow-hidden" href="#">
|
||||
<div class="absolute top-8 right-8 material-symbols-outlined text-4xl text-primary/20 group-hover:text-primary transition-colors">code</div>
|
||||
<div class="relative z-10">
|
||||
<span class="font-label text-xs text-primary uppercase tracking-widest block mb-1">GitHub</span>
|
||||
<div class="font-headline text-3xl font-bold text-on-surface">PUBLIC REPOS</div>
|
||||
<p class="text-on-surface-variant font-label text-[10px] mt-2 uppercase tracking-widest">Explore technical source code</p>
|
||||
</div>
|
||||
</a>
|
||||
<a class="col-span-2 group bg-surface-container hover:bg-surface-container-high transition-all flex items-center justify-between px-8 border border-outline-variant/10" href="#">
|
||||
<div>
|
||||
<span class="font-label text-xs text-secondary uppercase tracking-widest block mb-1">LinkedIn</span>
|
||||
<div class="font-headline text-2xl font-bold text-on-surface">PROFESSIONAL GRAPH</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-3xl text-secondary">share</span>
|
||||
</a>
|
||||
<a class="group bg-surface-container hover:bg-surface-container-high transition-all flex flex-col justify-center items-center p-6 border border-outline-variant/10" href="#">
|
||||
<span class="material-symbols-outlined text-3xl text-tertiary mb-2">grid_view</span>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Twitter</span>
|
||||
</a>
|
||||
<a class="group bg-surface-container hover:bg-surface-container-high transition-all flex flex-col justify-center items-center p-6 border border-outline-variant/10" href="#">
|
||||
<span class="material-symbols-outlined text-3xl text-on-surface mb-2" data-icon="terminal">terminal</span>
|
||||
<span class="font-label text-xs text-on-surface-variant uppercase tracking-widest">Polywork</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer Component -->
|
||||
<footer class="bg-[#0d0e12] full-width py-12 border-t border-[#81ecff]/10">
|
||||
<div class="flex flex-col md:flex-row justify-between items-center max-w-7xl mx-auto px-6 gap-8">
|
||||
<div class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest text-slate-500">
|
||||
© 2024 JASON WOLTJE // REV: 2.0.4
|
||||
</div>
|
||||
<div class="flex gap-12">
|
||||
<a class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">LinkedIn</a>
|
||||
<a class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">GitHub</a>
|
||||
<a class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest text-slate-500 hover:text-[#d873ff] transition-colors opacity-100 hover:opacity-70" href="#">Twitter</a>
|
||||
</div>
|
||||
<div class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest text-[#81ecff]">
|
||||
LATENCY: 12ms // CORE: ONLINE
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Reference in New Issue
Block a user