mirror of
https://github.com/pepaskopec-blip/skopec.dev.git
synced 2026-10-27 07:04:33 +00:00
373 lines
18 KiB
HTML
373 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Josef’s projects — skopec.dev, Proxmox homelab, Snake in Pygame, BatchGym, Graduately, and more.">
|
||
<title>Projects — websites & games · Josef</title>
|
||
<link rel="canonical" href="https://skopec.dev/projects.html">
|
||
<meta property="og:title" content="Projects — Josef">
|
||
<meta property="og:description" content="Projects, websites, homelab, games, and school experiments.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://skopec.dev/projects.html">
|
||
<meta property="og:image" content="https://skopec.dev/og-image.jpg">
|
||
<meta property="og:image:alt" content="Josef. — skopec.dev">
|
||
<meta property="og:site_name" content="skopec.dev">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Projects — Josef">
|
||
<meta name="twitter:description" content="Websites, homelab, games, and school experiments.">
|
||
<meta name="twitter:image" content="https://skopec.dev/og-image.jpg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
||
<link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
|
||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||
<meta name="theme-color" content="#07090d">
|
||
<script>
|
||
(function () {
|
||
try {
|
||
document.documentElement.dataset.theme =
|
||
localStorage.getItem("theme") === "light" ? "light" : "dark";
|
||
} catch (error) {
|
||
document.documentElement.dataset.theme = "dark";
|
||
}
|
||
})();
|
||
</script>
|
||
<link rel="stylesheet" href="style.css?v=20261023">
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://skopec.dev/"},
|
||
{"@type": "ListItem", "position": 2, "name": "Projects", "item": "https://skopec.dev/projects.html"}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
|
||
<header class="site-header">
|
||
<div class="nav-inner">
|
||
<a class="brand" href="index.html">Josef<span>.</span></a>
|
||
<ul class="nav-links" id="site-nav">
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><a href="projects.html" aria-current="page">Projects</a></li>
|
||
<li><a href="hardware.html">Hardware</a></li>
|
||
</ul>
|
||
<div class="nav-actions">
|
||
<button class="theme-toggle" type="button" aria-label="Switch to light mode" aria-pressed="false" title="Toggle theme">
|
||
<svg class="icon-sun" viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle cx="12" cy="12" r="4.2"></circle>
|
||
<path d="M12 2.6v2.2M12 19.2v2.2M4.2 12H2M22 12h-2.2M6.3 6.3 4.8 4.8M19.2 19.2l-1.5-1.5M17.7 6.3l1.5-1.5M4.8 19.2l1.5-1.5"></path>
|
||
</svg>
|
||
<svg class="icon-moon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M20.5 14.3A8.6 8.6 0 0 1 9.7 3.5a8.6 8.6 0 1 0 10.8 10.8Z"></path>
|
||
</svg>
|
||
</button>
|
||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main" class="page">
|
||
<header class="page-hero wrap reveal">
|
||
<nav class="breadcrumbs" aria-label="Breadcrumb">
|
||
<ol>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><span aria-current="page">Projects</span></li>
|
||
</ol>
|
||
</nav>
|
||
<div class="projects-hero-top">
|
||
<div>
|
||
<h1>Projects</h1>
|
||
<p>Websites, the homelab, games, and school projects.</p>
|
||
</div>
|
||
<div class="project-filters" role="toolbar" aria-label="Filter projects">
|
||
<button class="filter-chip is-active" type="button" data-filter="all">All <span>6</span></button>
|
||
<button class="filter-chip" type="button" data-filter="apps">Apps & Web</button>
|
||
<button class="filter-chip" type="button" data-filter="infra">Homelab & Program</button>
|
||
<button class="filter-chip" type="button" data-filter="games">Games</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="section projects-section" aria-labelledby="projects-list-title">
|
||
<div class="wrap reveal">
|
||
<p class="section-label">Selected</p>
|
||
<h2 id="projects-list-title">Work</h2>
|
||
<p class="section-lead">Things I’ve built or run — open a project for more.</p>
|
||
|
||
<ul class="project-grid">
|
||
<!-- Graduately (Featured full-width card) -->
|
||
<li class="project-card project-card-featured" data-category="apps">
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">Swift, Kotlin</span>
|
||
<span class="project-badge">Featured project</span>
|
||
</div>
|
||
<h3>
|
||
<a href="https://github.com/pepaskopec-blip/Graduately" target="_blank" rel="noopener noreferrer">Graduately</a>
|
||
</h3>
|
||
<p>My biggest project yet. It is an educational SwiftUI/ Kotlin app for maturita/graduation preparation — The app is crossplatform and it is available on Mac, iPhone, Android, iPad, Windows and Linux. I am really proud of it.</p>
|
||
<ul class="project-pills" aria-label="Platforms and technologies">
|
||
<li>SwiftUI</li>
|
||
<li>Kotlin + Compose</li>
|
||
<li>macOS & iOS</li>
|
||
<li>Android</li>
|
||
<li>Windows & Linux</li>
|
||
<li>13 subjects</li>
|
||
</ul>
|
||
<div class="project-card-actions">
|
||
<a class="btn btn-primary" href="https://github.com/pepaskopec-blip/Graduately" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
|
||
<a class="btn btn-ghost" href="https://github.com/pepaskopec-blip/Graduately#install" target="_blank" rel="noopener noreferrer">Install guide</a>
|
||
</div>
|
||
</div>
|
||
<a class="project-preview project-preview-graduately" href="https://github.com/pepaskopec-blip/Graduately" target="_blank" rel="noopener noreferrer" aria-label="Open Graduately on GitHub">
|
||
<img class="preview-graduately-shot" src="graduately-home.webp" width="1600" height="1199" loading="lazy" decoding="async" alt="Graduately app dashboard screenshot">
|
||
<img class="preview-graduately-icon" src="graduately-icon.webp" width="256" height="256" loading="lazy" decoding="async" alt="">
|
||
</a>
|
||
</li>
|
||
|
||
<!-- Homelab -->
|
||
<li class="project-card" data-category="infra">
|
||
<a class="project-preview project-preview-homelab" href="index.html#services" aria-hidden="true" tabindex="-1">
|
||
<div class="mock-rack">
|
||
<div class="mock-rack-header">
|
||
<span class="mock-status-dot"></span>
|
||
<span class="mock-rack-title">pve-node · 10.0.0.200</span>
|
||
<span class="mock-rack-uptime">10+ LXC / VMs</span>
|
||
</div>
|
||
<div class="mock-rack-bars">
|
||
<div class="mock-bar-row">
|
||
<span>CPU · Xeon 10C/20T</span>
|
||
<div class="mock-bar"><i style="width: 34%"></i></div>
|
||
</div>
|
||
<div class="mock-bar-row">
|
||
<span>RAM · 40 GB ECC</span>
|
||
<div class="mock-bar"><i style="width: 62%"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-service-chips">
|
||
<span>Jellyfin</span>
|
||
<span>Ollama</span>
|
||
<span>Navidrome</span>
|
||
<span>Immich</span>
|
||
<span>Pi-hole</span>
|
||
<span>SearXNG</span>
|
||
<span>Joplin</span>
|
||
<span>NAS</span>
|
||
<span>Tailscale</span>
|
||
<span>Cloudflared</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">Proxmox</span>
|
||
<span class="project-status">Self-hosted · 24/7</span>
|
||
</div>
|
||
<h3>
|
||
<a href="index.html#services">Homelab</a>
|
||
</h3>
|
||
<p>I just wanted a NAS server, but now I host almost everything. It uses Proxmox as the operating system and virtualization. I have more than ten LXC containers and VMs for my services. I also set up automatic restarts for maximum safety and updates.</p>
|
||
<ul class="project-pills" aria-label="Technologies">
|
||
<li>Proxmox VE</li>
|
||
<li>LXC & QEMU</li>
|
||
<li>Tailscale</li>
|
||
<li>Cloudflare Tunnels</li>
|
||
</ul>
|
||
<a class="project-link" href="index.html#services">See services →</a>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- skopec.dev -->
|
||
<li class="project-card" data-category="apps">
|
||
<a class="project-preview project-preview-site" href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer" aria-hidden="true" tabindex="-1">
|
||
<div class="mock-browser">
|
||
<div class="mock-browser-bar">
|
||
<span class="mock-dots"><i></i><i></i><i></i></span>
|
||
<span class="mock-url">https://skopec.dev</span>
|
||
<span class="mock-cache-tag">CF HIT</span>
|
||
</div>
|
||
<div class="mock-browser-canvas">
|
||
<div class="mock-site-hero">
|
||
<div class="mock-site-lines">
|
||
<span class="mock-line-title">Josef<i>.</i></span>
|
||
<span class="mock-line-sub"></span>
|
||
<span class="mock-line-sub short"></span>
|
||
</div>
|
||
<div class="mock-site-orb"></div>
|
||
</div>
|
||
<div class="mock-pipeline">
|
||
<span>Proxmox Origin</span>
|
||
<span class="mock-arrow">→</span>
|
||
<span>Cloudflared</span>
|
||
<span class="mock-arrow">→</span>
|
||
<span class="mock-edge">Edge Cache</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">HTML</span>
|
||
<span class="project-status">Live · Cached</span>
|
||
</div>
|
||
<h3>
|
||
<a href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer">skopec.dev</a>
|
||
</h3>
|
||
<p>This site, written in html, hosted on my Homelab/Proxmox server. It has caching enabled on Cloudflared so it does not have to load everything from the origin server.</p>
|
||
<ul class="project-pills" aria-label="Technologies">
|
||
<li>HTML5 & CSS3</li>
|
||
<li>Vanilla JS</li>
|
||
<li>Cloudflared</li>
|
||
<li>Zero dependencies</li>
|
||
</ul>
|
||
<a class="project-link" href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- Snake-Pygame- -->
|
||
<li class="project-card" data-category="games">
|
||
<div class="project-preview project-preview-snake">
|
||
<div class="mock-arcade">
|
||
<div class="mock-arcade-hud">
|
||
<span>SNAKE.PY</span>
|
||
<span data-snake-score>SCORE 0140</span>
|
||
</div>
|
||
<canvas class="snake-canvas" data-snake-canvas width="280" height="126" aria-label="Animated Snake game preview"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">Python</span>
|
||
<span class="project-status">Arcade game</span>
|
||
</div>
|
||
<h3>
|
||
<a href="https://github.com/pepaskopec-blip/Snake-Pygame-" target="_blank" rel="noopener noreferrer">Snake-Pygame-</a>
|
||
</h3>
|
||
<p>My first game in python, it is like 90% ai code, when I made it for the first time, I thought that it looks good, but now it looks like ai slop. Still it is very solid game packed with a lot of features, so it is pretty fun to play or try :D</p>
|
||
<ul class="project-pills" aria-label="Technologies">
|
||
<li>Python</li>
|
||
<li>Pygame</li>
|
||
<li>Power-ups</li>
|
||
<li>Arcade modes</li>
|
||
</ul>
|
||
<a class="project-link" href="https://github.com/pepaskopec-blip/Snake-Pygame-" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- BatchGym -->
|
||
<li class="project-card" data-category="games">
|
||
<a class="project-preview project-preview-batch" href="https://github.com/pepaskopec-blip/BatchGym" target="_blank" rel="noopener noreferrer" aria-hidden="true" tabindex="-1">
|
||
<div class="mock-terminal">
|
||
<div class="mock-terminal-bar">
|
||
<span>C:\WINDOWS\system32\cmd.exe — BatchGym.bat</span>
|
||
<span>×</span>
|
||
</div>
|
||
<div class="mock-terminal-body">
|
||
<div class="term-header">[ BATCH GYM RPG · DAY 12 · CASH: $85 ]</div>
|
||
<div class="term-stats">
|
||
<span>STR ████████░░ 80%</span>
|
||
<span>NRG ███████░░░ 70%</span>
|
||
</div>
|
||
<div class="term-log">> Stack: Creatine + Whey Isolate</div>
|
||
<div class="term-prompt">> [1] Bench Press [2] Shop [3] Rest<i class="term-cursor"></i></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">Batchfile</span>
|
||
<span class="project-status">Console RPG</span>
|
||
</div>
|
||
<h3>
|
||
<a href="https://github.com/pepaskopec-blip/BatchGym" target="_blank" rel="noopener noreferrer">BatchGym</a>
|
||
</h3>
|
||
<p>First game ever — a freshman school project for console application, written in bash, it can natively run only on Windows. Text-based RPG that simulates a gym visit: manage money, buy supplements, and complete sets.</p>
|
||
<ul class="project-pills" aria-label="Technologies">
|
||
<li>Windows Batch</li>
|
||
<li>CLI RPG</li>
|
||
<li>School project</li>
|
||
</ul>
|
||
<a class="project-link" href="https://github.com/pepaskopec-blip/BatchGym" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- Terra -->
|
||
<li class="project-card" data-category="infra">
|
||
<a class="project-preview project-preview-terra" href="https://terra.hackclub.com/" target="_blank" rel="noopener noreferrer" aria-hidden="true" tabindex="-1">
|
||
<div class="mock-terra">
|
||
<div class="mock-terra-top">
|
||
<span class="mock-terra-badge">HACK CLUB · YSWS</span>
|
||
<span class="mock-terra-duration">3 MONTHS</span>
|
||
</div>
|
||
<div class="mock-terra- tracks">
|
||
<div class="mock-terra-track">
|
||
<div class="mock-terra-label">
|
||
<span>Human coding</span>
|
||
<strong>10h / week</strong>
|
||
</div>
|
||
<div class="mock-bar"><i style="width: 78%"></i></div>
|
||
</div>
|
||
<div class="mock-terra-track">
|
||
<div class="mock-terra-label">
|
||
<span>AI coding</span>
|
||
<strong>30h / week</strong>
|
||
</div>
|
||
<div class="mock-bar"><i style="width: 65%"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="mock-terra-reward">
|
||
<span>Final reward</span>
|
||
<strong>Framework Laptop / iPad</strong>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<div class="project-card-body">
|
||
<div class="project-card-meta">
|
||
<span class="tag">Terra</span>
|
||
<span class="project-status">Hack Club · Active</span>
|
||
</div>
|
||
<h3>
|
||
<a href="https://terra.hackclub.com" target="_blank" rel="noopener noreferrer">Terra</a>
|
||
</h3>
|
||
<p>Terra is You Ship, We Ship program rub by Hack Club. It combines gamified farming mechanics with real-world software developement, where coding translates into in-game resources to earn a free modular laptop or tablet.</p>
|
||
<ul class="project-pills" aria-label="Program details">
|
||
<li>Hack Club</li>
|
||
<li>10h / 30h weekly</li>
|
||
<li>Framework / iPad</li>
|
||
</ul>
|
||
<a class="project-link" href="https://terra.hackclub.com/" target="_blank" rel="noopener noreferrer">View their site →</a>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- Ollama -->
|
||
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="footer-inner">
|
||
<span>© <span data-year></span> Josef · skopec.dev</span>
|
||
<nav class="footer-links" aria-label="Footer">
|
||
<a href="index.html">Home</a>
|
||
<a href="hardware.html">Hardware</a>
|
||
<a href="index.html#connect">Get in touch</a>
|
||
<a href="privacy.html">Privacy</a>
|
||
</nav>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js?v=20261022" defer></script>
|
||
</body>
|
||
</html>
|