284 lines
19 KiB
HTML
284 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Agent Park - AI History Timeline Pinboard</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,container-queries"></script>
|
|
<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=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#FFDE03",
|
|
secondary: "#FF90E8",
|
|
"background-light": "#F9F7F2",
|
|
"background-dark": "#121212",
|
|
"surface-light": "#FFFFFF",
|
|
"surface-dark": "#1E1E1E",
|
|
},
|
|
fontFamily: {
|
|
display: ["'Syne'", "sans-serif"],
|
|
mono: ["'Space Mono'", "monospace"],
|
|
},
|
|
boxShadow: {
|
|
'hard': '4px 4px 0px 0px #000000',
|
|
'hard-hover': '8px 8px 0px 0px #000000',
|
|
'hard-dark': '4px 4px 0px 0px #FFFFFF',
|
|
'card-stack': '2px 2px 0px 0px #000, 4px 4px 0px 0px #000, 6px 6px 0px 0px #000',
|
|
},
|
|
backgroundImage: {
|
|
'grid-pattern': "linear-gradient(to right, #e5e5e5 1px, transparent 1px), linear-gradient(to bottom, #e5e5e5 1px, transparent 1px)",
|
|
'grid-pattern-dark': "linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px)",
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #F9F7F2;
|
|
border-left: 2px solid black;
|
|
}
|
|
.dark ::-webkit-scrollbar-track {
|
|
background: #121212;
|
|
border-left: 2px solid white;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #FFDE03;
|
|
border: 2px solid black;
|
|
}
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #FFDE03;
|
|
border: 2px solid white;
|
|
}
|
|
.tape {
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
backdrop-filter: blur(2px);
|
|
border: 1px solid rgba(255,255,255,0.6);
|
|
}.stack-card {
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}.stack-card:hover {
|
|
z-index: 50 !important;
|
|
transform: translateY(-20px) scale(1.05) rotate(0deg) !important;
|
|
margin-right: 20px !important;
|
|
margin-left: 20px !important;
|
|
}.timeline-path {
|
|
stroke-dasharray: 20 10;
|
|
animation: dash 60s linear infinite;
|
|
}
|
|
@keyframes dash {
|
|
to {
|
|
stroke-dashoffset: -1000;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-black dark:text-gray-100 font-mono overflow-x-hidden selection:bg-secondary selection:text-black">
|
|
<div class="fixed top-0 left-0 w-full z-50 border-b-2 border-black dark:border-white">
|
|
<div class="bg-primary py-2 px-4 text-center border-b-2 border-black">
|
|
<p class="text-xs font-bold tracking-widest uppercase flex items-center justify-center gap-2">
|
|
<span class="material-icons-round text-sm">auto_awesome</span>
|
|
Welcome to Agent Park: The Evolution of Intelligence
|
|
<span class="material-icons-round text-sm">arrow_forward</span>
|
|
</p>
|
|
</div>
|
|
<nav class="bg-background-light dark:bg-background-dark px-6 py-4 flex justify-between items-center transition-colors duration-300">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-black dark:bg-white text-white dark:text-black flex items-center justify-center border-2 border-transparent">
|
|
<span class="material-icons-round text-2xl">smart_toy</span>
|
|
</div>
|
|
<span class="font-display font-black text-2xl tracking-tighter uppercase">Agent Park</span>
|
|
</div>
|
|
<div class="hidden md:flex gap-8 text-sm font-bold">
|
|
<a class="hover:text-primary transition-colors uppercase decoration-2 underline-offset-4 hover:underline" href="#">Timeline</a>
|
|
<a class="hover:text-primary transition-colors uppercase decoration-2 underline-offset-4 hover:underline" href="#">Agents</a>
|
|
<a class="hover:text-primary transition-colors uppercase decoration-2 underline-offset-4 hover:underline" href="#">About</a>
|
|
</div>
|
|
<button class="w-10 h-10 border-2 border-black dark:border-white flex items-center justify-center hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black transition-all shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,1)] active:translate-y-[2px] active:shadow-none" onclick="document.documentElement.classList.toggle('dark')">
|
|
<span class="material-icons-round text-lg">light_mode</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<div class="fixed inset-0 pointer-events-none z-0 opacity-10 dark:opacity-20 overflow-hidden">
|
|
<div class="absolute inset-0 bg-[size:40px_40px] bg-grid-pattern dark:bg-grid-pattern-dark"></div>
|
|
</div>
|
|
<div class="relative z-10 pt-32 pb-20 px-4 max-w-[1600px] mx-auto">
|
|
<header class="text-center mb-20 relative">
|
|
<div class="inline-block relative">
|
|
<svg class="absolute -top-6 -left-8 w-[120%] h-[150%] text-primary opacity-80 -z-10 animate-pulse" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M44.7,-51.2C57.1,-41.5,66.1,-27.6,68.9,-12.8C71.7,2,68.3,17.7,60.4,30.9C52.5,44.1,40.1,54.8,26.4,60.1C12.7,65.4,-2.3,65.3,-17.1,61.1C-31.9,56.9,-46.5,48.6,-56.3,36.4C-66.1,24.2,-71.1,8.1,-67.3,-5.7C-63.5,-19.5,-50.9,-31,-38.7,-40.8C-26.5,-50.6,-14.7,-58.7,0.1,-58.8C14.9,-59,29.8,-51.2,32.3,-60.9" fill="currentColor" transform="translate(100 100)"></path>
|
|
</svg>
|
|
<h1 class="font-display font-black text-6xl md:text-8xl tracking-tight leading-none text-black dark:text-white drop-shadow-sm">
|
|
THE STORY <br/> OF A.I.
|
|
</h1>
|
|
</div>
|
|
<p class="mt-6 text-lg md:text-xl font-mono max-w-2xl mx-auto bg-white dark:bg-black border border-black dark:border-white p-2 rotate-1 inline-block shadow-[4px_4px_0px_0px_#000] dark:shadow-[4px_4px_0px_0px_#fff]">
|
|
Pinned. Stacked. Zigzagged.
|
|
</p>
|
|
</header>
|
|
<main class="relative px-4 md:px-12">
|
|
<div class="relative w-full">
|
|
<div class="absolute inset-0 pointer-events-none hidden md:block -z-10" style="top: 15rem; bottom: 15rem;">
|
|
<div class="absolute top-0 left-0 right-[4rem] h-4 bg-black dark:bg-white"></div>
|
|
<div class="absolute top-0 right-[4rem] bottom-0 w-4 bg-black dark:bg-white"></div>
|
|
<div class="absolute bottom-0 right-[4rem] left-0 h-4 bg-black dark:bg-white"></div>
|
|
</div>
|
|
<div class="relative min-h-[500px] mb-32 flex flex-col md:flex-row items-center md:items-start md:justify-start pt-20">
|
|
<div class="absolute left-0 -top-8 z-20">
|
|
<div class="bg-primary border-4 border-black px-6 py-2 -rotate-2 shadow-hard">
|
|
<span class="font-display font-black text-3xl md:text-5xl">2024 — 2017</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full pl-0 md:pl-8 pr-0 md:pr-32 flex flex-nowrap overflow-x-visible items-center justify-start py-10 perspective-1000">
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-surface-light dark:bg-surface-dark border-4 border-black dark:border-white p-4 shadow-hard -mr-48 md:-mr-56 z-30 rotate-[-2deg]">
|
|
<div class="tape absolute -top-3 left-1/2 -translate-x-1/2 w-20 h-6 rotate-1"></div>
|
|
<div class="h-40 bg-primary border-2 border-black dark:border-white mb-4 flex items-center justify-center overflow-hidden">
|
|
<span class="material-icons-round text-6xl opacity-50">smart_toy</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">The Agent Era</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">Autonomous agents begin to populate the web. They plan, execute, and iterate. It's no longer just chat; it's action.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 1.2</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-secondary border-4 border-black dark:border-white p-4 shadow-hard -mr-48 md:-mr-56 z-20 rotate-[3deg]">
|
|
<div class="tape absolute -top-4 right-8 w-24 h-8 rotate-3"></div>
|
|
<div class="h-40 bg-white dark:bg-black border-2 border-black dark:border-white mb-4 flex items-center justify-center">
|
|
<div class="grid grid-cols-2 gap-2 p-2 w-full h-full opacity-60">
|
|
<div class="bg-black/10 dark:bg-white/10 rounded-full"></div>
|
|
<div class="bg-black/10 dark:bg-white/10"></div>
|
|
<div class="bg-black/10 dark:bg-white/10"></div>
|
|
<div class="bg-black/10 dark:bg-white/10 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">Multimodal</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">Vision, audio, and text merge into single unified models. AI now perceives the world as humans do.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 1.1</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-4 shadow-hard -mr-48 md:-mr-56 z-10 rotate-[-1deg]">
|
|
<div class="tape absolute -top-4 left-4 w-24 h-8 -rotate-2 bg-yellow-200/50"></div>
|
|
<div class="relative border-2 border-black dark:border-white bg-gray-100 h-40 mb-4 overflow-hidden group">
|
|
<img alt="Abstract AI Art" class="w-full h-full object-cover grayscale mix-blend-multiply group-hover:scale-110 transition-transform duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBd0bidYXReahZeHaO8_otbsOwtu_ky-BZEt5qAwkvMWUZayFj_lhA0WO4mW5rAg-BkCOnkGlBQMl_Vmce-cXrqLih3nxlly6yB7NHzSWgS_TiujzG79dYtRIdbhizZCFbTGu8fLVCwSrBmjr7ockX90-T8EA5xYet5tJf5Ip0xucPUUyusI0GmF6d99lc6csGj3Puqk2P8QSRwZEDgOvskQ2I_60FS9ZXGIK9tlhTzajIdPup4Kaz9d04o7-4MQpDMSOjbFR-rkUw"/>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">Generative Explosion</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">ChatGPT launches. The world changes overnight. LLMs become household utilities.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 1.0</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-primary border-4 border-black dark:border-white p-4 shadow-hard -mr-48 md:-mr-56 z-0 rotate-[2deg]">
|
|
<div class="tape absolute -top-3 right-1/2 translate-x-1/2 w-16 h-8 rotate-0"></div>
|
|
<div class="h-40 bg-surface-light dark:bg-surface-dark border-2 border-black dark:border-white mb-4 flex items-center justify-center">
|
|
<span class="font-mono text-4xl font-black tracking-tighter">T</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">The Transformer</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">"Attention Is All You Need". The paper that killed RNNs and birthed the GPT architecture.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 0.9</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative min-h-[500px] flex flex-col md:flex-row-reverse items-center md:items-start md:justify-start pt-20">
|
|
<div class="absolute right-0 -top-8 z-20">
|
|
<div class="bg-secondary border-4 border-black px-6 py-2 rotate-2 shadow-hard">
|
|
<span class="font-display font-black text-3xl md:text-5xl">2016 — 1950</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full pl-0 md:pl-32 pr-0 md:pr-8 flex flex-nowrap flex-row-reverse overflow-x-visible items-center justify-start py-10 perspective-1000">
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-surface-light dark:bg-surface-dark border-4 border-black dark:border-white p-4 shadow-hard -ml-48 md:-ml-56 z-30 rotate-[2deg]">
|
|
<div class="tape absolute -top-4 right-4 w-16 h-8 rotate-12 bg-red-400/30"></div>
|
|
<div class="relative border-2 border-black dark:border-white h-40 mb-4 overflow-hidden">
|
|
<img alt="Go Board Game" class="w-full h-full object-cover grayscale contrast-125" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-xRSKl7qyBPowfXI_vdiJvvkVuLPFBQNsKpb0-4D_hlXpGHzNYv08vInYTw3Gt56PR_iHA6_ZbDL6a_veUQk4UZpwMa3_LnVJKVujkxpgKUVQCpfXmSImXaWqJuPHbmXGQF5yPiA00cYl3tHGrjOHekWDBGFJo7HboDYGfhne8CKhvcJhzfoAqqydkxOrvE6Jv_sfIVeI9rB_StLXI_4BmkAPGBgo4Dj4-x3Kignm-pBGEORawu_taKEhLLftAQ1ospTyZb3ouN4"/>
|
|
<div class="absolute inset-0 bg-primary mix-blend-multiply opacity-30"></div>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">Move 37</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">AlphaGo defeats Lee Sedol. A move of "inhuman" intuition that shocked the world.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 0.8</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-black border-4 border-black dark:border-white p-4 shadow-hard -ml-48 md:-ml-56 z-20 rotate-[-3deg]">
|
|
<div class="tape absolute -top-4 left-8 w-20 h-6 -rotate-3 bg-white/20"></div>
|
|
<div class="h-40 bg-blue-800 border-2 border-white mb-4 flex items-center justify-center">
|
|
<span class="material-icons-round text-white text-6xl">grid_on</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl text-white leading-none mb-2 uppercase">Deep Blue</h3>
|
|
<p class="text-xs leading-snug text-gray-300 line-clamp-4">IBM's machine defeats Kasparov. Brute force calculation triumphs over human strategy.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-white text-black px-2">FIG 0.5</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-gray-200 dark:bg-gray-800 border-4 border-black dark:border-white p-4 shadow-hard -ml-48 md:-ml-56 z-10 rotate-[1deg]">
|
|
<div class="tape absolute -top-3 right-1/2 translate-x-1/2 w-24 h-8 rotate-2 bg-blue-200/40"></div>
|
|
<div class="h-40 border-2 border-black dark:border-white border-dashed mb-4 flex items-center justify-center opacity-50">
|
|
<span class="material-icons-round text-5xl">ac_unit</span>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">The Winter</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">Funding dries up. The promises of early AI fail to materialize. Research goes underground.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 0.2</div>
|
|
</div>
|
|
<div class="stack-card relative w-72 h-96 flex-shrink-0 bg-secondary border-4 border-black dark:border-white p-4 shadow-hard -ml-48 md:-ml-56 z-0 rotate-[-2deg]">
|
|
<div class="tape absolute -top-4 right-4 w-20 h-6 -rotate-6"></div>
|
|
<div class="relative border-2 border-dashed border-black dark:border-white mb-4 h-40 bg-white dark:bg-black flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-black dark:text-white" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24">
|
|
<rect height="10" rx="2" width="18" x="3" y="11"></rect>
|
|
<circle cx="12" cy="5" r="2"></circle>
|
|
<path d="M12 7v4"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-display font-bold text-xl leading-none mb-2 uppercase">Imitation Game</h3>
|
|
<p class="text-xs leading-snug opacity-80 line-clamp-4">Turing's question: "Can machines think?" The philosophical start of it all.</p>
|
|
<div class="absolute bottom-4 right-4 text-[10px] font-bold bg-black text-white px-2">FIG 0.1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="mt-40 max-w-3xl mx-auto px-4">
|
|
<div class="bg-primary border-4 border-black p-8 relative shadow-[12px_12px_0px_0px_#000] dark:shadow-[12px_12px_0px_0px_#fff]">
|
|
<div class="absolute -top-10 -right-6 w-20 h-20 bg-white dark:bg-gray-800 border-4 border-black flex items-center justify-center rounded-full animate-bounce">
|
|
<span class="material-icons-round text-4xl text-black dark:text-white">mail</span>
|
|
</div>
|
|
<h2 class="font-display font-black text-3xl md:text-5xl mb-4 text-black uppercase tracking-tight">Join the Park</h2>
|
|
<p class="font-mono text-black mb-8 text-base font-bold">
|
|
Subscribe to the Agent Park weekly zine. No spam, just ducks and data.
|
|
</p>
|
|
<form class="flex flex-col md:flex-row gap-4">
|
|
<input class="flex-1 bg-white border-4 border-black px-6 py-4 font-mono focus:ring-0 focus:border-black focus:shadow-[4px_4px_0px_0px_#000] transition-all placeholder:text-gray-500 text-black text-lg" placeholder="Your email here..." type="email"/>
|
|
<button class="bg-black text-white px-10 py-4 font-black border-4 border-transparent hover:bg-white hover:text-black hover:border-black transition-all hover:shadow-[6px_6px_0px_0px_#000] uppercase text-lg" type="button">
|
|
SUBSCRIBE
|
|
</button>
|
|
</form>
|
|
<div class="mt-6 flex items-center gap-3">
|
|
<input class="w-6 h-6 border-4 border-black text-black focus:ring-0 rounded-none bg-white checked:bg-black" id="check" type="checkbox"/>
|
|
<label class="text-sm font-black text-black uppercase" for="check">I agree to be cool.</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fixed bottom-6 right-6 z-50">
|
|
<div class="bg-white dark:bg-black border-4 border-black dark:border-white p-3 shadow-hard dark:shadow-hard-dark cursor-pointer hover:-translate-y-2 transition-transform">
|
|
<span class="material-icons-round text-3xl text-black dark:text-white">arrow_upward</span>
|
|
</div>
|
|
</div>
|
|
<footer class="bg-black dark:bg-white text-white dark:text-black py-16 mt-20 border-t-8 border-primary">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-12">
|
|
<div class="text-center md:text-left">
|
|
<h4 class="font-display font-black text-4xl uppercase tracking-tighter">Agent Park</h4>
|
|
<p class="font-mono text-sm opacity-60 mt-3">© 2025 Synthetic History Project — Zigzagged and Zined.</p>
|
|
</div>
|
|
<div class="flex gap-10">
|
|
<a class="font-black text-xl hover:text-primary dark:hover:text-primary transition-colors underline decoration-4 underline-offset-8" href="#">Twitter</a>
|
|
<a class="font-black text-xl hover:text-primary dark:hover:text-primary transition-colors underline decoration-4 underline-offset-8" href="#">GitHub</a>
|
|
<a class="font-black text-xl hover:text-primary dark:hover:text-primary transition-colors underline decoration-4 underline-offset-8" href="#">Discord</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</body></html> |