Add portfolio content with AlpenQueue project and live job counter
- Add marketing copy and project description for AlpenQueue - Extract CSS to separate styles.css file - Add live job counter updating every 10 seconds - Include screenshot placeholder section - Add GitHub link for code access - Remove old service status indicators
This commit is contained in:
Soldier
parent
c335fabb88
commit
0cf817238e
161
index.html
161
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 class="link">
|
||||
<a href="https://github.com/yourusername/alpenqueue">Get the code</a>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
99
styles.css
Normal file
99
styles.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user