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>
292 lines
17 KiB
HTML
292 lines
17 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/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> |