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 charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Portfolio</title>
|
<title>Portfolio</title>
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css">
|
||||||
* {
|
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<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.
|
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>
|
||||||
|
|
||||||
<div class="status">
|
<div class="link">
|
||||||
<div class="service">
|
<a href="https://github.com/yourusername/alpenqueue">Get the code</a>
|
||||||
<span class="indicator checking" id="api-indicator"></span>
|
|
||||||
<span id="api-status">API</span>
|
|
||||||
</div>
|
</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>
|
<script>
|
||||||
// Simulated status checks - replace with actual endpoints
|
async function updateJobCount() {
|
||||||
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`);
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Replace this with actual fetch to your endpoints
|
// Replace with your actual endpoint
|
||||||
// const response = await fetch(service.endpoint);
|
// const response = await fetch('/api/jobs/rate');
|
||||||
// const isRunning = response.ok;
|
// const data = await response.json();
|
||||||
|
// document.getElementById('job-count').innerHTML = data.jobsPerMinute;
|
||||||
|
|
||||||
// Simulated check - shows running after 1 second
|
// Simulated job count - random between 38-46
|
||||||
await new Promise(resolve => setTimeout(resolve, 1000 + Math.random() * 1000));
|
const count = Math.floor(Math.random() * 9) + 38;
|
||||||
const isRunning = Math.random() > 0.1; // 90% uptime simulation
|
document.getElementById('job-count').innerHTML = count;
|
||||||
|
|
||||||
indicator.className = `indicator ${isRunning ? 'running' : 'failed'}`;
|
|
||||||
status.textContent = `${service.name} ${isRunning ? 'running' : 'failed'}`;
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
indicator.className = 'indicator failed';
|
console.error('Failed to fetch job count:', error);
|
||||||
status.textContent = `${service.name} failed`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkAll() {
|
// Update on load and every 10 seconds
|
||||||
services.forEach(checkService);
|
updateJobCount();
|
||||||
}
|
setInterval(updateJobCount, 10000);
|
||||||
|
|
||||||
// Check on load and every 30 seconds
|
|
||||||
checkAll();
|
|
||||||
setInterval(checkAll, 30000);
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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