Jason Woltje
c800bef739
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>
270 lines
16 KiB
HTML
270 lines
16 KiB
HTML
<!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> |