diff --git a/index.html b/index.html
index de7244d..cbbb960 100644
--- a/index.html
+++ b/index.html
@@ -4,142 +4,61 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portfolio</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Courier New', monospace;
-            line-height: 1.6;
-            padding: 2rem;
-            max-width: 800px;
-            margin: 0 auto;
-            background: #0a0a0a;
-            color: #e0e0e0;
-        }
-
-        .stack {
-            margin: 2rem 0 3rem 0;
-            font-size: 0.95rem;
-        }
-
-        .status {
-            margin: 3rem 0;
-        }
-
-        .service {
-            margin: 0.5rem 0;
-            font-size: 0.9rem;
-        }
-
-        .indicator {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            margin-right: 8px;
-            border-radius: 50%;
-        }
-
-        .running {
-            background: #4a9e5f;
-        }
-
-        .failed {
-            background: #c75450;
-        }
-
-        .checking {
-            background: #666;
-            animation: blink 1s infinite;
-        }
-
-        @keyframes blink {
-            0%, 50% { opacity: 1; }
-            51%, 100% { opacity: 0.3; }
-        }
-
-        .cost {
-            margin-top: 3rem;
-            font-size: 0.85rem;
-            color: #888;
-        }
-
-        footer {
-            margin-top: 5rem;
-            padding-top: 2rem;
-            border-top: 1px solid #222;
-            font-size: 0.85rem;
-            color: #666;
-        }
-    </style>
+    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <h1>Mountain-Built Tools for Real Problems</h1>
+
+    <div class="intro">
+        Linux Developer crafting resilient, self-hosted solutions from the Austrian Alps.
+    </div>
+
+    <div class="project">
+        <div class="project-name">AlpenQueue</div>
+        <p>A lightweight task queue-scrapes, processes, calls back-runs on a five-euro Hetzner box. Used it this morning to pull competitor prices.</p>
+        <p>The CLI? One command, drops jobs in. Built with Go, Docker-ready, open-source.</p>
+        <p>Want it? Just ask.</p>
+    </div>
+
+    <div class="demo">
+        <!-- Add your screenshot here: <img src="screenshot.png" alt="Live scraper demo"> -->
+        <div class="demo-placeholder">
+            Screenshot placeholder - add screenshot.png to project
+        </div>
+        <div class="demo-caption">Live demo: monitoring 42 jobs a minute</div>
+    </div>
+
+    <div class="jobs">
+        Processing <span class="jobs-count" id="job-count">42</span> jobs/minute
+    </div>
+
     <div class="stack">
         Go for the backend, net/http for the API, SQLite for data, goquery for scraping, Docker to package it, self-hosted on Hetzner.
     </div>
 
-    <div class="status">
-        <div class="service">
-            <span class="indicator checking" id="api-indicator"></span>
-            <span id="api-status">API</span>
-        </div>
-        <div class="service">
-            <span class="indicator checking" id="scraper-indicator"></span>
-            <span id="scraper-status">Scraper</span>
-        </div>
-        <div class="service">
-            <span class="indicator checking" id="db-indicator"></span>
-            <span id="db-status">Database</span>
-        </div>
+    <div class="link">
+        <a href="https://github.com/yourusername/alpenqueue">Get the code</a>
     </div>
 
-    <div class="cost">
-        All code on this page runs on five euros a month.
-    </div>
-
-    <footer>
-        Alps 2,034m above complaints.
-    </footer>
-
     <script>
-        // Simulated status checks - replace with actual endpoints
-        const services = [
-            { id: 'api', name: 'API', endpoint: '/health' },
-            { id: 'scraper', name: 'Scraper', endpoint: '/scraper/status' },
-            { id: 'db', name: 'Database', endpoint: '/db/ping' }
-        ];
-
-        async function checkService(service) {
-            const indicator = document.getElementById(`${service.id}-indicator`);
-            const status = document.getElementById(`${service.id}-status`);
-
+        async function updateJobCount() {
             try {
-                // Replace this with actual fetch to your endpoints
-                // const response = await fetch(service.endpoint);
-                // const isRunning = response.ok;
+                // Replace with your actual endpoint
+                // const response = await fetch('/api/jobs/rate');
+                // const data = await response.json();
+                // document.getElementById('job-count').innerHTML = data.jobsPerMinute;
 
-                // Simulated check - shows running after 1 second
-                await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
-                const isRunning = Math.random() > 0.1; // 90% uptime simulation
-
-                indicator.className = `indicator ${isRunning ? 'running' : 'failed'}`;
-                status.textContent = `${service.name} ${isRunning ? 'running' : 'failed'}`;
+                // Simulated job count - random between 38-46
+                const count = Math.floor(Math.random() * 9) + 38;
+                document.getElementById('job-count').innerHTML = count;
             } catch (error) {
-                indicator.className = 'indicator failed';
-                status.textContent = `${service.name} failed`;
+                console.error('Failed to fetch job count:', error);
             }
         }
 
-        function checkAll() {
-            services.forEach(checkService);
-        }
-
-        // Check on load and every 30 seconds
-        checkAll();
-        setInterval(checkAll, 30000);
+        // Update on load and every 10 seconds
+        updateJobCount();
+        setInterval(updateJobCount, 10000);
     </script>
 </body>
 </html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..2425e2b
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,99 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Courier New', monospace;
+    line-height: 1.6;
+    padding: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+    background: #0a0a0a;
+    color: #e0e0e0;
+}
+
+h1 {
+    font-size: 1.1rem;
+    font-weight: normal;
+    margin-bottom: 1.5rem;
+    color: #4a9e5f;
+}
+
+.intro {
+    margin-bottom: 2rem;
+    font-size: 0.95rem;
+    line-height: 1.7;
+}
+
+.project {
+    margin: 2rem 0;
+    padding: 1.5rem;
+    border-left: 2px solid #333;
+    background: #111;
+}
+
+.project-name {
+    color: #4a9e5f;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.project p {
+    margin-top: 0.5rem;
+}
+
+.stack {
+    margin: 2rem 0;
+    font-size: 0.95rem;
+}
+
+.demo {
+    margin-bottom: 3rem;
+}
+
+.demo img {
+    width: 100%;
+    border: 1px solid #333;
+    margin-bottom: 0.5rem;
+}
+
+.demo-caption {
+    font-size: 0.9rem;
+    color: #888;
+}
+
+.demo-placeholder {
+    background: #111;
+    border: 1px solid #333;
+    padding: 3rem 2rem;
+    text-align: center;
+    color: #666;
+}
+
+.jobs {
+    margin: 2rem 0;
+    font-size: 1.1rem;
+}
+
+.jobs-count {
+    color: #4a9e5f;
+    font-weight: bold;
+}
+
+.link {
+    margin-top: 1.5rem;
+    font-size: 0.95rem;
+}
+
+.link a {
+    color: #4a9e5f;
+    text-decoration: none;
+    border-bottom: 1px solid #4a9e5f;
+}
+
+.link a:hover {
+    color: #5fb070;
+    border-bottom-color: #5fb070;
+}
