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 |
@@ -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 |
@@ -0,0 +1,270 @@
|
||||
<!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" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Space+Grotesk:wght@300;500;700&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 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;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.technical-grid {
|
||||
background-image: radial-gradient(rgba(129, 236, 255, 0.15) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
.hero-gradient {
|
||||
background: radial-gradient(circle at top right, rgba(129, 236, 255, 0.08), transparent 40%),
|
||||
radial-gradient(circle at bottom left, rgba(216, 115, 255, 0.05), transparent 40%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary/30">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-[#0d0e12]/80 backdrop-blur-xl docked full-width top-0 sticky z-50 bg-gradient-to-b from-[#0d0e12] to-transparent">
|
||||
<nav 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>
|
||||
<div class="hidden md:flex items-center space-x-8 font-['Space_Grotesk'] uppercase tracking-tighter text-[14px]">
|
||||
<a class="text-[#81ecff] border-b-2 border-[#81ecff] pb-1 hover:opacity-80 transition-all duration-300" href="#">Home</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Projects</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">About</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Contact</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-[#81ecff] scale-95 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="dark_mode">dark_mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-[921px] flex flex-col justify-center overflow-hidden technical-grid hero-gradient px-6 border-b border-outline-variant/10">
|
||||
<!-- Status Terminal Component -->
|
||||
<div class="absolute top-8 left-6 md:left-12 flex items-center gap-3">
|
||||
<span class="flex h-2 w-2 rounded-full bg-tertiary shadow-[0_0_8px_#8eff71]"></span>
|
||||
<span class="font-label text-[10px] text-tertiary uppercase tracking-[0.2em]">LOC: 39.0997° N, 94.5786° W | STATUS: ONLINE | REV: 2.0.4</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto w-full pt-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
<div class="lg:col-span-8">
|
||||
<span class="font-label text-primary text-xs tracking-[0.4em] uppercase mb-6 block">01 // THE MANIFESTO</span>
|
||||
<h1 class="font-headline text-5xl md:text-8xl font-bold tracking-tighter text-on-surface leading-[0.9] mb-8">
|
||||
I WILL FIND <br/>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">A WAY,</span><br/>
|
||||
OR I WILL <br/>
|
||||
MAKE ONE.
|
||||
</h1>
|
||||
<p class="font-body text-xl md:text-2xl text-on-surface-variant max-w-2xl leading-relaxed">
|
||||
A multidisciplinary architect of digital ecosystems and agricultural infrastructures. Executing vision through precision.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Absolute positioned crosshair deco -->
|
||||
<div class="absolute right-12 bottom-12 hidden lg:block opacity-20">
|
||||
<div class="relative w-32 h-32 border border-primary/40 rounded-full flex items-center justify-center">
|
||||
<div class="w-full h-[1px] bg-primary absolute"></div>
|
||||
<div class="w-[1px] h-full bg-primary absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Intro/Bio Section -->
|
||||
<section class="py-24 px-6 bg-surface-container-low">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="flex flex-col lg:flex-row gap-16 items-start">
|
||||
<div class="lg:w-1/3">
|
||||
<div class="relative group">
|
||||
<div class="absolute -inset-1 bg-gradient-to-r from-primary to-secondary rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
|
||||
<div class="relative aspect-square overflow-hidden rounded-lg bg-surface-container-highest">
|
||||
<img alt="Jason Woltje" class="w-full h-full object-cover filter grayscale hover:grayscale-0 transition-all duration-700" data-alt="Professional portrait of a visionary leader with sharp features, dramatic lighting, modern tech studio background with blue accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzgaQlTkGK3JJtR7UxOmrZUhYrM-h2nWgxdGmXRyWDuPn_rkIc46M-Cp5o3R2Kn9_OvFmgF4jnk0cqhrFejntIj41FGxxm9XHSKjGgAj8VCeorf-QTgxCcEGtCT5JexeyFOtQRM5PBqwYUXMeHJXRkJJeBEreL7LJvynfDhOsNh6796oK1uUVhdTQ8B6o2Fp2O6we2zQapyVPk7tX0T7G0rSIMpB2xMAIPn87eZuX7BvWEtO9rXdUIKfg52cYSVC_-aQny1FqJJwM"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/3">
|
||||
<div class="space-y-8">
|
||||
<div class="inline-flex items-center px-3 py-1 rounded-full border border-primary/20 bg-primary/5 text-primary text-[10px] font-label uppercase tracking-widest">
|
||||
Profile Summary
|
||||
</div>
|
||||
<h2 class="font-headline text-4xl md:text-5xl font-bold tracking-tight text-on-surface">
|
||||
Engineering growth through technological mastery and strategic leadership.
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 font-body text-on-surface-variant leading-relaxed">
|
||||
<p>
|
||||
As a <span class="text-primary font-semibold">CEO</span>, I build brands that resonate with clarity and purpose. My leadership is rooted in the philosophy that every challenge is an opportunity for architectural innovation.
|
||||
</p>
|
||||
<p>
|
||||
As an <span class="text-secondary font-semibold">IT Manager & Consultant</span>, I bridge the gap between traditional industry and high-velocity digital transformation, ensuring robust, scalable infrastructures.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Navigation Bento Grid (Core Areas) -->
|
||||
<section class="py-24 px-6 relative">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="mb-16">
|
||||
<span class="font-label text-tertiary text-xs tracking-[0.4em] uppercase mb-4 block">02 // CORE OPERATIONS</span>
|
||||
<h2 class="font-headline text-3xl font-bold tracking-tight">STRATEGIC VERTICALS</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 h-auto md:h-[600px]">
|
||||
<!-- DYOR Pro -->
|
||||
<a class="md:col-span-8 group relative overflow-hidden rounded-xl bg-surface-container-highest border border-outline-variant/10 hover:border-primary/50 transition-all duration-500" href="#">
|
||||
<div class="absolute inset-0 opacity-40 transition-transform duration-700 group-hover:scale-110">
|
||||
<img alt="DYOR Pro" class="w-full h-full object-cover" data-alt="Abstract glowing blockchain visualization with nodes and network connections in vibrant cyan and purple neon colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBt1gm_f0Nx6wJbjkLjJGbd4-LOuv5GQqstDFwR9KxF8Hy9Zdy--1o8BBco8bbw6OeYY9rlXaQzduO4mdNJUujPrrQYf_A_3tf6wKM0n2QjM1225tbbZ10q5wOwLJ6lh6wvtqWNQFjsT15NN9eegvt6ZGXNrrolU9GBwP4Re9OfpU7I8C4Uqe7YzGKAF5B_YM3Nzf1McZiXlKQTtESXycsMmMM73h_QVNqkjRJqKzTx2tTL53g6L8R3Ic3aJhrYab9Ne_op7uqy4aA"/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent"></div>
|
||||
<div class="relative h-full flex flex-col justify-end p-8 md:p-12">
|
||||
<div class="mb-4 text-primary">
|
||||
<span class="material-symbols-outlined text-4xl" data-icon="monitoring">monitoring</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-3xl md:text-5xl font-bold mb-4">DYOR PRO</h3>
|
||||
<p class="font-body text-on-surface-variant max-w-md text-lg">Leading the vanguard of technical intelligence and decentralized insight. CEO & Visionary lead.</p>
|
||||
<div class="mt-8 flex items-center gap-2 text-primary font-label text-sm tracking-widest uppercase opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Access Platform <span class="material-symbols-outlined" data-icon="north_east">north_east</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- DDKansas -->
|
||||
<a class="md:col-span-4 group relative overflow-hidden rounded-xl bg-surface-container-highest border border-outline-variant/10 hover:border-secondary/50 transition-all duration-500" href="#">
|
||||
<div class="absolute inset-0 opacity-30 transition-transform duration-700 group-hover:scale-110">
|
||||
<img alt="DDKansas" class="w-full h-full object-cover" data-alt="Clean minimal data dashboard reflected in a glass surface with soft purple glowing accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAzyZRMOGp6Vmrs9RH551LpEku0C3uqV-3OwzcIlg3m8jLsFhtuhlrKa8uyKp_fEfoh_NZTeZSawLH8tcdVIhVxPXn0weoUoBQuEKDP8erOMY2522XDaWGbHzVXvK4hhZvm-OFrQhpCMJPvtEJWhK9tLYewJ-Axy4r-bJ8LGlOyVjQS3wvkB6WNigBpSw-t4H3RHJKpcT-vA4fycQ5N5ylv2-doi5HLYR-jQ47Fc3olAJ1eVV_IzFfN5Ae4Y37vRWd5uZ27LiXFh2I"/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
|
||||
<div class="relative h-full flex flex-col justify-end p-8">
|
||||
<div class="mb-4 text-secondary">
|
||||
<span class="material-symbols-outlined text-4xl" data-icon="query_stats">query_stats</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-2xl font-bold mb-2">DDKANSAS</h3>
|
||||
<p class="font-body text-on-surface-variant text-sm">Strategic consulting for high-performance enterprise data systems.</p>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Agricultural IT -->
|
||||
<a class="md:col-span-12 group relative overflow-hidden rounded-xl bg-surface-container-highest border border-outline-variant/10 hover:border-tertiary/50 transition-all duration-500 min-h-[250px]" href="#">
|
||||
<div class="absolute inset-0 opacity-20 transition-transform duration-700 group-hover:scale-105">
|
||||
<img alt="Agricultural IT" class="w-full h-full object-cover" data-alt="Wide shot of a high-tech smart farm at dusk with glowing sensors and digital overlay elements on crop rows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyV0cex39hqTefS4BcNe3O2jyop7w_xSF2yEGMMNGxHMrcpuhPZ7cP06so6Sdzz8XihlJjNvrKKYJYOj6SSRh8He7JMs398AsJ6XsMSCbbeLOYPrGxZqCOUil2erftsE9Q6r9t2h00fhjE3gtsxrP7SPrt6fJy1OJPFLkXPwl9nK078kyfsJsEDz2tavlsxHDertV7SUmvGDbsAWnWR0U3uIudtWHHA5-ZeY9xjxR6x2IMnU6up_SsI55lqxNzSpo4wb9Z7fsbbPc"/>
|
||||
</div>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-background via-background/60 to-transparent"></div>
|
||||
<div class="relative h-full flex flex-col justify-center p-8 md:p-12 max-w-2xl">
|
||||
<div class="mb-4 text-tertiary">
|
||||
<span class="material-symbols-outlined text-4xl" data-icon="precision_manufacturing">precision_manufacturing</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-3xl font-bold mb-2 uppercase tracking-tighter">AGRICULTURAL IT</h3>
|
||||
<p class="font-body text-on-surface-variant text-lg">Infrastructure management for the modern landscape. Precision meeting the soil.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quote/Makers spirit -->
|
||||
<section class="py-32 px-6 overflow-hidden">
|
||||
<div class="max-w-4xl mx-auto text-center relative">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[100px]"></div>
|
||||
<span class="material-symbols-outlined text-outline-variant/30 text-8xl mb-8" data-icon="format_quote">format_quote</span>
|
||||
<p class="font-headline text-3xl md:text-5xl italic font-light tracking-tight text-on-surface leading-tight relative z-10">
|
||||
"Precision is not just about measuring twice; it's about building the system that makes measurement obsolete."
|
||||
</p>
|
||||
<div class="mt-12 font-label text-primary tracking-[0.3em] uppercase text-sm">Jason Woltje // Principal Architect</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<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-[#81ecff]">
|
||||
© 2024 JASON WOLTJE // REV: 2.0.4
|
||||
</div>
|
||||
<div class="flex items-center gap-10 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="text-slate-600 font-label text-[8px] tracking-[0.5em] uppercase">
|
||||
ENGINEERED FOR EXCELLENCE
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 338 KiB |
@@ -0,0 +1,292 @@
|
||||
<!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&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 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(circle, #47484d 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body selection:bg-primary/30 selection:text-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 flat no shadows">
|
||||
<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>
|
||||
<div class="hidden md:flex items-center gap-8 font-['Space_Grotesk'] uppercase tracking-tighter">
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Home</a>
|
||||
<a class="text-[#81ecff] border-b-2 border-[#81ecff] pb-1 hover:opacity-80 transition-all duration-300" href="#">Projects</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">About</a>
|
||||
<a class="text-slate-400 hover:text-[#81ecff] transition-colors hover:opacity-80 transition-all duration-300" href="#">Contact</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-[#81ecff] hover:opacity-80 transition-all duration-300 scale-95 active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined">dark_mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="relative min-h-screen">
|
||||
<!-- Status Terminal Component -->
|
||||
<div class="fixed top-24 right-6 z-40 hidden lg:block">
|
||||
<div class="bg-surface-container-high/60 backdrop-blur-md px-4 py-2 border-l-2 border-tertiary shadow-xl">
|
||||
<p class="font-label text-[10px] uppercase tracking-[0.2em] text-tertiary">
|
||||
LOC: 1,244 | STATUS: ONLINE | REV: 2.0.4
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hero Section -->
|
||||
<header class="relative pt-16 pb-24 overflow-hidden">
|
||||
<div class="absolute inset-0 grid-pattern pointer-events-none"></div>
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="max-w-2xl">
|
||||
<div class="inline-flex items-center gap-2 mb-6">
|
||||
<span class="w-12 h-[1px] bg-primary"></span>
|
||||
<span class="font-label text-xs uppercase tracking-widest text-primary">02 // PORTFOLIO</span>
|
||||
</div>
|
||||
<h1 class="font-headline text-5xl md:text-7xl font-bold tracking-tighter mb-8 leading-[0.9]">
|
||||
TECHNICAL <br/>
|
||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">ARCHITECTURES.</span>
|
||||
</h1>
|
||||
<p class="text-on-surface-variant text-lg max-w-lg leading-relaxed">
|
||||
A curated selection of industrial infrastructure, research platforms, and independent consultancy projects engineered for high-performance environments.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Projects Technical Grid -->
|
||||
<section class="max-w-7xl mx-auto px-6 pb-32">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Project 1: DYOR Pro (Large Feature) -->
|
||||
<article class="lg:col-span-8 group relative flex flex-col bg-surface-container-low overflow-hidden rounded-lg">
|
||||
<div class="aspect-video overflow-hidden relative">
|
||||
<img alt="DYOR Pro Platform" class="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700 scale-105 group-hover:scale-100" data-alt="Abstract visualization of high-tech digital crypto data streams and analytical dashboard interfaces with neon blue accents in a dark void" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5z7FntnlEkUGFUR9HuXDxazWa19fH6BJXhJoB9zgSiVwZ-AbXMvjfciKI2nGA45py9l_MWn4k38_c2v6QNYzYxSM-KNNU8HDLff5XKjIXYREea6aKwlt1iLHt1knaoHhxAJaT4fGmqUT6X6Myn0RHoEoXDLqR2BI4Y2dr_znul1aq5CCfUP503_z_luY519bZ1pjWyOLPMchtkI3KPh_PI60wrVZlixIRNRRa5wk5GxWwQZznFKJZzMoL6LSd2AqrdOXzCAR8_7U"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-low via-transparent to-transparent"></div>
|
||||
</div>
|
||||
<div class="p-8 lg:p-12 relative">
|
||||
<div class="flex flex-wrap items-center gap-4 mb-6">
|
||||
<span class="font-label text-[10px] uppercase tracking-widest px-3 py-1 bg-primary/10 text-primary border border-primary/20">FOUNDER</span>
|
||||
<span class="font-label text-[10px] uppercase tracking-widest px-3 py-1 bg-secondary/10 text-secondary border border-secondary/20">CRYPTO/RESEARCH</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-4xl font-bold tracking-tight mb-4 group-hover:text-primary transition-colors">DYOR Pro</h3>
|
||||
<p class="text-on-surface-variant mb-8 max-w-xl text-lg">
|
||||
An institutional-grade research platform delivering deep-on-chain analytics and automated due diligence for decentralized financial markets.
|
||||
</p>
|
||||
<div class="grid grid-cols-2 gap-8 mb-10 border-t border-outline-variant/15 pt-8">
|
||||
<div>
|
||||
<h4 class="font-label text-[10px] uppercase text-outline tracking-widest mb-2">Technical Stack</h4>
|
||||
<p class="font-label text-sm text-on-surface">Python, React, GraphQL, PostgreSQL</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-label text-[10px] uppercase text-outline tracking-widest mb-2">Primary Role</h4>
|
||||
<p class="font-label text-sm text-on-surface">CEO & Lead Architect</p>
|
||||
</div>
|
||||
</div>
|
||||
<a class="inline-flex items-center gap-3 px-8 py-4 bg-primary text-on-primary font-label font-bold text-xs uppercase tracking-widest rounded-md hover:shadow-[0_0_20px_rgba(129,236,255,0.4)] transition-all group-active:scale-95" href="#">
|
||||
Launch Project
|
||||
<span class="material-symbols-outlined text-sm">arrow_outward</span>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Project 2: Agricultural IT -->
|
||||
<article class="lg:col-span-4 group bg-surface-container flex flex-col rounded-lg">
|
||||
<div class="h-64 overflow-hidden relative">
|
||||
<img alt="Agricultural IT Infrastructure" class="w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-80 transition-all duration-700" data-alt="Top-down view of automated irrigation systems and precision farming sensors in a modern greenhouse with cool technical lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDUBjHVwE3rQxEq-bQ3XO4L1zCy16b3qz7VEaPsjsXaWAv6SGjbHfYVr75D6pR7vJZm10R_0s2RdadynYwS8k3TdzIgBdOoN2SexYGFPAYT8nVt1bsNVDqP0uLa4Ez7ohnfRtfpKiXkpCLpGFL_myxXzsSuEo_Y57ahJFuwlytYK7hlPMoS-c8Ad_VcACEA1ljmF2nOA2CFTaGrtlkX7ecqbYloSe5X8upGC7f-GJUob7rhqlmA4a-B4yfwUGu47pnaypGYw8nbkow"/>
|
||||
</div>
|
||||
<div class="p-8 flex flex-col flex-grow">
|
||||
<div class="mb-4">
|
||||
<span class="font-label text-[10px] uppercase tracking-widest px-3 py-1 bg-tertiary/10 text-tertiary border border-tertiary/20">INFRASTRUCTURE</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-2xl font-bold tracking-tight mb-4 group-hover:text-primary transition-colors">Agricultural IT</h3>
|
||||
<p class="text-on-surface-variant text-sm leading-relaxed mb-8">
|
||||
End-to-end IT management and infrastructure design for large-scale precision agriculture operations, focusing on IoT connectivity and field data telemetry.
|
||||
</p>
|
||||
<div class="mt-auto pt-6 border-t border-outline-variant/15">
|
||||
<div class="mb-6">
|
||||
<h4 class="font-label text-[10px] uppercase text-outline tracking-widest mb-1">Stack</h4>
|
||||
<p class="font-label text-xs text-on-surface">IoT Hub, Cisco, Linux Clusters</p>
|
||||
</div>
|
||||
<button class="w-full py-4 border border-outline-variant/30 text-on-surface font-label font-bold text-xs uppercase tracking-widest rounded-md hover:bg-surface-container-high transition-colors">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Project 3: DDKansas -->
|
||||
<article class="lg:col-span-5 group bg-surface-container flex flex-col rounded-lg">
|
||||
<div class="p-8 lg:p-12">
|
||||
<div class="mb-4">
|
||||
<span class="font-label text-[10px] uppercase tracking-widest px-3 py-1 bg-secondary/10 text-secondary border border-secondary/20">CONSULTANCY</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-3xl font-bold tracking-tight mb-4 group-hover:text-primary transition-colors">DDKansas</h3>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-8">
|
||||
Independent technology consultancy providing bespoke digital transformation strategies and high-level architectural oversight for Midwest enterprises.
|
||||
</p>
|
||||
<div class="space-y-4 mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-tertiary text-lg">check_circle</span>
|
||||
<span class="font-label text-xs text-on-surface uppercase tracking-wider">Cloud Migration Strategy</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-tertiary text-lg">check_circle</span>
|
||||
<span class="font-label text-xs text-on-surface uppercase tracking-wider">Legacy System Refactoring</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-tertiary text-lg">check_circle</span>
|
||||
<span class="font-label text-xs text-on-surface uppercase tracking-wider">Fractional CTO Services</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="inline-flex items-center gap-3 px-6 py-3 bg-surface-container-highest text-primary border border-primary/20 font-label font-bold text-xs uppercase tracking-widest rounded-md hover:bg-primary/5 transition-all">
|
||||
Review Case Study
|
||||
<span class="material-symbols-outlined text-sm">menu_book</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<!-- Technical Specs Bento Box -->
|
||||
<article class="lg:col-span-7 bg-surface-container-low rounded-lg p-8 lg:p-12 relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-8 opacity-10">
|
||||
<span class="material-symbols-outlined text-[120px]" style="font-variation-settings: 'FILL' 1;">architecture</span>
|
||||
</div>
|
||||
<h3 class="font-headline text-2xl font-bold tracking-tight mb-8">Core Methodologies</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-label text-[10px] uppercase text-primary tracking-[0.2em]">Scale</h4>
|
||||
<p class="text-on-surface font-light">Architecting systems capable of handling 100k+ concurrent telemetry streams without degradation.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-label text-[10px] uppercase text-secondary tracking-[0.2em]">Security</h4>
|
||||
<p class="text-on-surface font-light">Zero-trust architecture implementation for sensitive financial and agricultural data assets.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-label text-[10px] uppercase text-tertiary tracking-[0.2em]">Efficiency</h4>
|
||||
<p class="text-on-surface font-light">Optimizing CI/CD pipelines to reduce deployment overhead by an average of 40%.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<h4 class="font-label text-[10px] uppercase text-primary tracking-[0.2em]">Resilience</h4>
|
||||
<p class="text-on-surface font-light">Designing multi-region disaster recovery protocols for mission-critical infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="bg-surface-container-low py-24 relative">
|
||||
<div class="max-w-7xl mx-auto px-6 text-center">
|
||||
<h2 class="font-headline text-4xl md:text-5xl font-bold mb-8">HAVE A COMPLEX PROJECT?</h2>
|
||||
<p class="text-on-surface-variant max-w-2xl mx-auto mb-12 text-lg">
|
||||
I specialize in building bridges between legacy constraints and future-proofed technical excellence.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button class="px-10 py-5 bg-primary text-on-primary font-label font-bold text-sm uppercase tracking-widest rounded-md hover:shadow-[0_0_30px_rgba(129,236,255,0.3)] transition-all">
|
||||
Inquiry Portal
|
||||
</button>
|
||||
<button class="px-10 py-5 border border-outline-variant/30 text-on-surface font-label font-bold text-sm uppercase tracking-widest rounded-md hover:bg-surface-container-high transition-colors">
|
||||
View Resume
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<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 font-['Space_Grotesk'] text-[10px] uppercase tracking-widest">
|
||||
<div class="text-slate-500">
|
||||
© 2024 JASON WOLTJE // REV: 2.0.4
|
||||
</div>
|
||||
<div class="flex gap-12">
|
||||
<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 text-[#81ecff]">
|
||||
<span class="w-2 h-2 rounded-full bg-[#81ecff] animate-pulse"></span>
|
||||
SYSTEMS NOMINAL
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
100
design-samples/stitch_jasonwoltje.com/silicon_ethos/DESIGN.md
Normal file
100
design-samples/stitch_jasonwoltje.com/silicon_ethos/DESIGN.md
Normal file
@@ -0,0 +1,100 @@
|
||||
# Design System Document: Technical Editorial
|
||||
|
||||
## 1. Overview & Creative North Star
|
||||
|
||||
### Creative North Star: "The Master Architect"
|
||||
This design system is built for a persona that balances the precision of an engineer with the vision of an executive. It moves away from the "standard dashboard" aesthetic to embrace a **Technical Editorial** direction.
|
||||
|
||||
To break the "template" look, we utilize:
|
||||
* **Intentional Asymmetry:** Hero sections and content blocks should avoid perfect 50/50 splits. Use 60/40 ratios to create a sense of dynamic movement.
|
||||
* **The Overlap:** Technical elements (like grid patterns or terminal-style labels) should subtly overlap image containers or section breaks to suggest a "maker" spirit—building things that break out of the box.
|
||||
* **Aggressive Typography Scales:** High-contrast sizing between massive display headers and tiny, precise monospace labels creates an authoritative, modern hierarchy.
|
||||
|
||||
---
|
||||
|
||||
## 2. Colors
|
||||
|
||||
The palette is rooted in a deep midnight foundation, punctuated by high-energy technical accents.
|
||||
|
||||
### Palette Strategy
|
||||
* **Foundation:** `background` (#0d0e12) provides the "void" from which technical elements emerge.
|
||||
* **Primary Accent:** `primary` (#81ecff) is our electric blue, used for critical actions and brand markers.
|
||||
* **Technical Secondary:** `secondary` (#d873ff) and `tertiary` (#8eff71) provide depth. Use these for status indicators, code snippets, or to differentiate hobby-related content (Music/Making).
|
||||
|
||||
### The "No-Line" Rule
|
||||
**Explicit Instruction:** Do not use 1px solid borders to separate sections.
|
||||
Boundaries must be defined through:
|
||||
1. **Background Shifts:** Use `surface_container_low` sections sitting on a `background` floor.
|
||||
2. **Tonal Transitions:** Use a very subtle gradient transition between two surface tokens to imply a change in context.
|
||||
|
||||
### Surface Hierarchy & Nesting
|
||||
Treat the UI as a series of nested physical layers.
|
||||
* **Base:** `background`
|
||||
* **Section:** `surface_container`
|
||||
* **Card/Module:** `surface_container_highest` or `surface_container_lowest` (depending on whether you want it to recede or pop).
|
||||
|
||||
### The "Glass & Gradient" Rule
|
||||
For floating navigation or modals, use semi-transparent `surface_bright` with a **24px Backdrop Blur**. Apply a signature gradient from `primary` to `primary_container` on main CTAs to give them a "lit from within" neon glow.
|
||||
|
||||
---
|
||||
|
||||
## 3. Typography
|
||||
|
||||
The typography strategy pairs the brutalist precision of technical fonts with the readability of a premium sans-serif.
|
||||
|
||||
* **Display & Headlines (Space Grotesk):** This is our "Editorial" voice. It’s wide, technical, yet sophisticated. Use `display-lg` for hero statements to command attention.
|
||||
* **Body & Titles (Inter):** High-readability sans-serif. Use `body-lg` for long-form thought leadership to ensure an "Executive" feel.
|
||||
* **Labels (Space Grotesk - Monospace feel):** Use `label-md` in all-caps for technical metadata, tags, and small "geeky" details.
|
||||
|
||||
**Hierarchy Tip:** Pair a `display-md` headline with a tiny `label-sm` technical prefix (e.g., "01 // INTRODUCTION") to reinforce the maker/coder aesthetic.
|
||||
|
||||
---
|
||||
|
||||
## 4. Elevation & Depth
|
||||
|
||||
We avoid traditional drop shadows in favor of **Tonal Layering**.
|
||||
|
||||
* **The Layering Principle:** Place a `surface_container_highest` card inside a `surface_container_low` wrapper. The difference in hex value provides a sophisticated "lift" without the "dirty" look of grey shadows.
|
||||
* **Ambient Shadows:** If a floating element (like a dropdown) requires a shadow, use a 40px blur with 6% opacity. The shadow color should be a tinted version of `primary` or `on_surface`, never pure black.
|
||||
* **The "Ghost Border" Fallback:** If containment is needed for complex data, use the `outline_variant` token at **15% opacity**. This creates a "code-like" border that is felt rather than seen.
|
||||
* **Glassmorphism:** Use `surface_variant` at 60% opacity with a blur for a "frosted terminal" effect, allowing background grid patterns to bleed through subtly.
|
||||
|
||||
---
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Buttons
|
||||
* **Primary:** High-contrast `primary` background with `on_primary` text. **Radius:** `md` (0.375rem). No border.
|
||||
* **Secondary:** `surface_container_high` background with `primary` text.
|
||||
* **Ghost:** Transparent background with `outline_variant` (20% opacity) border. Use for low-priority technical actions.
|
||||
|
||||
### Technical Chips
|
||||
* Used for "Skills" or "Tools."
|
||||
* **Style:** `surface_container_highest` background, `secondary` or `tertiary` text. Use `label-sm` for the font.
|
||||
|
||||
### Inputs
|
||||
* **Style:** "Bottom-line only" or fully enclosed in `surface_container_low`.
|
||||
* **States:** On focus, the `outline` should glow with `primary` and a subtle 4px outer blur.
|
||||
|
||||
### Cards & Lists
|
||||
* **No Dividers:** Never use horizontal lines. Use `spacing-lg` (vertical white space) or alternate background tints between `surface_container` and `surface_container_low`.
|
||||
* **Grid Pattern:** For hero cards, overlay a subtle 20px dot grid or cross-hair pattern to emphasize the "Technical/Maker" spirit.
|
||||
|
||||
### Additional Signature Component: "The Status Terminal"
|
||||
A small, fixed-position component (or header element) that displays technical metadata about the current page (e.g., "LOC: 1,244 | STATUS: ONLINE | REV: 2.0.4"). Use `label-sm` in `tertiary` (terminal green).
|
||||
|
||||
---
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do:
|
||||
* **Do** use asymmetrical layouts. A photo of a "maker" project should be offset from the text grid.
|
||||
* **Do** use monospace-style labels for all metadata to satisfy the "geeky" requirement.
|
||||
* **Do** ensure high contrast in Light Mode; the `inverse_surface` must remain crisp and professional.
|
||||
* **Do** use `primary_container` for subtle hover states on large cards.
|
||||
|
||||
### Don't:
|
||||
* **Don't** use 1px solid borders at 100% opacity. They look like "out-of-the-box" templates.
|
||||
* **Don't** use standard "web safe" blue. Only use the provided `primary` (#81ecff).
|
||||
* **Don't** over-round corners. Stick to the `md` (0.375rem) or `sm` (0.125rem) scale to maintain a "sharp/technical" edge. `xl` is for specialized buttons only.
|
||||
* **Don't** use shadows on cards that are sitting on the background; let tonal shifts do the work.
|
||||
Reference in New Issue
Block a user