Initial commit

This commit is contained in:
pepaskopec-blip 2026-09-01 14:16:54 +02:00
commit aa4b87399c
15 changed files with 1726 additions and 0 deletions

10
.idea/.gitignore generated vendored Normal file
View file

@ -0,0 +1,10 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Ignored default folder with query files
/queries/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/modules.xml generated Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/skopec.dev-reimagined.iml" filepath="$PROJECT_DIR$/.idea/skopec.dev-reimagined.iml" />
</modules>
</component>
</project>

8
.idea/skopec.dev-reimagined.iml generated Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml generated Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

62
404.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page not found — the link may be broken or the page was moved.">
<meta name="robots" content="noindex">
<title>404 — Page not found · Josef</title>
<meta property="og:title" content="404 — Page not found · Josef">
<meta property="og:description" content="Page not found on skopec.dev.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://skopec.dev/404.html">
<meta property="og: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="stylesheet" href="style.css">
</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>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="site-nav">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="hardware.html">Hardware</a></li>
</ul>
</div>
</header>
<main id="main" class="page">
<header class="page-hero wrap reveal">
<p class="section-label">Error</p>
<h1>404</h1>
<p>This page doesn’t exist — maybe the link is old, or something moved.</p>
<div class="hero-actions" style="margin-top: 1.5rem;">
<a class="btn btn-primary" href="index.html">Back home</a>
<a class="btn btn-ghost" href="projects.html">Projects</a>
</div>
</header>
</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="projects.html">Projects</a>
<a href="hardware.html">Hardware</a>
<a href="privacy.html">Privacy</a>
</nav>
</div>
</footer>
<script src="script.js" defer></script>
</body>
</html>

129
hardware.html Normal file
View file

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Josef’s hardware — Ryzen desktop, MacBook Air M5, Proxmox Xeon server, and Redmi Note 11 Pro 5G with full component specs.">
<title>Hardware — desktop, laptop, server &amp; phone · Josef</title>
<link rel="canonical" href="https://skopec.dev/hardware.html">
<meta property="og:title" content="Hardware — Josef">
<meta property="og:description" content="Full specs for desktop, MacBook Air M5, Proxmox server, and phone.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://skopec.dev/hardware.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="Hardware — Josef">
<meta name="twitter:description" content="Full specs for desktop, MacBook Air M5, Proxmox server, and phone.">
<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="stylesheet" href="style.css">
</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>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="site-nav">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="hardware.html" aria-current="page">Hardware</a></li>
</ul>
</div>
</header>
<main id="main" class="page">
<header class="page-hero wrap reveal">
<h1>Hardware</h1>
<p>The machines I use every day — desktop build, daily driver laptop, Proxmox server, and phone.</p>
</header>
<section class="section" aria-labelledby="machines-title">
<div class="wrap reveal">
<p class="section-label">Gear</p>
<h2 id="machines-title">My machines</h2>
<p class="section-lead">Full component breakdown with key specs from each part.</p>
<ul class="stack-list">
<li class="stack-item">
<span class="tag">Desktop</span>
<h3>Custom build · 2022</h3>
<p>Main PC running Artix Linux with SwayFX wm — assembled in 2022.</p>
<dl class="spec-list">
<div><dt>CPU</dt><dd>AMD Ryzen 5 5600 — Zen 3 / Vermeer, 6C/12T, 3.5–4.4 GHz, 32 MB L3, 65 W TDP, AM4, unlocked</dd></div>
<div><dt>GPU</dt><dd>XFX Speedster SWFT 309 RX 6700 — RDNA 2, 2304 SP, 10 GB GDDR6 @ 16 Gbps (160-bit, 320 GB/s), boost up to ~2425 MHz, triple-fan, HDMI + 3× DP</dd></div>
<div><dt>RAM</dt><dd>Kingston FURY Beast RGB — 16 GB DDR4-3200 · CL16 (16-18-18) · ~1.35 V · Intel XMP 2.0</dd></div>
<div><dt>Storage</dt><dd>WD Blue SN570 1 TB — M.2 2280 NVMe, PCIe 3.0 ×4, up to ~3500/3000 MB/s read/write, TLC, ~600 TBW, 5-year warranty</dd></div>
<div><dt>Board</dt><dd>ASUS TUF Gaming B550-Plus — AM4 ATX, B550, 8+2 DrMOS VRM, 4× DDR4 (max 128 GB), PCIe 4.0 ×16, dual M.2, 2.5 GbE, USB 3.2 Gen 2</dd></div>
<div><dt>PSU</dt><dd>SilentiumPC Vero M3 Bronze 600 W — ATX, 80 PLUS Bronze (~90% @ 50% load), semi-modular, single +12 V rail up to ~588 W</dd></div>
<div><dt>Cooler</dt><dd>SilentiumPC Fera 5 — tower air cooler, 4× heatpipes, Fluctus 120 PWM (300–1800 RPM), rated ~220 W TDP</dd></div>
<div><dt>Case</dt><dd>SilentiumPC Signum SG1V EVO TG ARGB — ATX mid-tower (~447×216×413 mm), tempered glass, 4× Stella HP ARGB 120 mm included, GPU clearance ~325 mm</dd></div>
</dl>
</li>
<li class="stack-item">
<span class="tag">Laptop</span>
<h3>MacBook Air 13″ · M5 · base</h3>
<p>Portable machine for school and on-the-go work.</p>
<dl class="spec-list">
<div><dt>Chip</dt><dd>Apple M5 — 10-core CPU (4 performance + 6 efficiency), 8-core GPU, 16-core Neural Engine, ~153 GB/s memory bandwidth</dd></div>
<div><dt>Memory</dt><dd>16 GB unified memory (base)</dd></div>
<div><dt>Storage</dt><dd>512 GB SSD (base; Apple claims ~2× faster vs previous Air gen)</dd></div>
<div><dt>Display</dt><dd>13.6″ Liquid Retina IPS — 2560×1664 @ 224 ppi, 500 nits, 60 Hz, P3</dd></div>
<div><dt>Battery</dt><dd>Up to ~18 h video streaming / ~15 h wireless web (Apple rating)</dd></div>
<div><dt>I/O</dt><dd>2× Thunderbolt 4 · MagSafe · 3.5 mm · Wi-Fi 7 (N1) · Bluetooth 6 · ~1.24 kg</dd></div>
</dl>
</li>
<li class="stack-item">
<span class="tag">Server</span>
<h3>Proxmox server</h3>
<p>Home lab box for VMs and containers — usually runs headless.</p>
<dl class="spec-list">
<div><dt>CPU</dt><dd>Intel Xeon E5-2630L v4 — Broadwell-EP, 14 nm, 10C/20T, 1.8–2.9 GHz, 25 MB L3, 55 W TDP, LGA 2011-3, DDR4 ECC</dd></div>
<div><dt>GPU</dt><dd>NVIDIA GeForce GT 440 — Fermi GF108-class entry GPU (~96 CUDA, ~65 W); used only for BIOS, then headless</dd></div>
<div><dt>RAM</dt><dd>40 GB ECC registered DDR4 (RDIMM) — dual-channel on this board, CPU supports DDR4-1600/1866/2133</dd></div>
<div><dt>Storage</dt><dd>Samsung 970 EVO OEM 256 GB NVMe (PCIe 3.0 ×4, Phoenix controller, ~3400/1500 MB/s class) · WD 2.5″ 512 GB HDD · WD 3.5″ 320 GB HDD</dd></div>
<div><dt>Board</dt><dd>Huananzhi X99-P4F — mATX (215×185 mm), LGA 2011-3, 4× DDR4 (max 128 GB), 2× M.2 NVMe PCIe 3.0 ×4, 4× SATA 3 Gb/s, 1× PCIe 3.0 ×16, Realtek GbE, 6-phase VRM</dd></div>
<div><dt>PSU</dt><dd>Corsair CX450 — 450 W ATX, 80 PLUS Bronze, non-modular, ~100k h MTBF rating</dd></div>
<div><dt>Cooler</dt><dd>Endorfy Fera 5 — same Synergy Cooling design as SilentiumPC Fera 5; 4× heatpipes, 120 mm PWM, ~220 W TDP class</dd></div>
<div><dt>Case</dt><dd>mATX case reused from an old office PC</dd></div>
</dl>
</li>
<li class="stack-item">
<span class="tag">Mobile</span>
<h3>Xiaomi Redmi Note 11 Pro 5G · 6/128</h3>
<p>Daily driver phone.</p>
<dl class="spec-list">
<div><dt>Chipset</dt><dd>Qualcomm Snapdragon 695 5G (SM6375, 6 nm) — 2× Kryo 660 @ up to 2.2 GHz + 6× @ 1.7 GHz · Adreno 619</dd></div>
<div><dt>Display</dt><dd>6.67″ Super AMOLED DotDisplay — 1080×2400, 120 Hz, ~395 ppi, DCI-P3, HBM ~700 nits / peak ~1200 nits, Gorilla Glass 5</dd></div>
<div><dt>Memory</dt><dd>6 GB LPDDR4X + 128 GB UFS 2.2 · microSD expandable (shared SIM slot)</dd></div>
<div><dt>Camera</dt><dd>108 MP f/1.9 wide (1/1.52″) + 8 MP ultrawide 118° + 2 MP macro · 16 MP front</dd></div>
<div><dt>Battery</dt><dd>5000 mAh · 67 W wired turbo charge (USB-C)</dd></div>
<div><dt>Body</dt><dd>~164.2 × 76.1 × 8.1 mm · ~202 g · dual speakers · 3.5 mm jack · side fingerprint · Bluetooth 5.1 / Wi-Fi 5</dd></div>
</dl>
</li>
</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="projects.html">Projects</a>
<a href="index.html#connect">Get in touch</a>
<a href="privacy.html">Privacy</a>
</nav>
</div>
</footer>
<script src="script.js" defer></script>
</body>
</html>

324
index.html Normal file
View file

@ -0,0 +1,324 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Josef Skopec — 16-year-old student from the Czech Republic. Graphic design, web development, and a Proxmox home lab.">
<title>Josef — portfolio &amp; home lab · skopec.dev</title>
<link rel="canonical" href="https://skopec.dev/">
<meta property="og:title" content="Josef — portfolio &amp; home lab">
<meta property="og:description" content="Student designer &amp; developer from the Czech Republic. Projects, hardware, and self-hosted services.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://skopec.dev/">
<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="Josef — portfolio &amp; home lab">
<meta name="twitter:description" content="Student designer &amp; developer from the Czech Republic. Projects, hardware, and self-hosted services.">
<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="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Josef Skopec",
"url": "https://skopec.dev/",
"email": "mailto:josef@skopec.dev",
"jobTitle": "Student — graphic design & web development",
"affiliation": {
"@type": "EducationalOrganization",
"name": "SSŠVT"
},
"address": {
"@type": "PostalAddress",
"addressCountry": "CZ"
},
"sameAs": [
"https://github.com/pepaskopec-blip",
"https://www.linkedin.com/in/josef-skopec-69380234b/",
"https://x.com/ishoot4fun11",
"https://www.instagram.com/skopcaak1",
"https://www.tiktok.com/@skopcaak_1",
"https://www.threads.com/@skopcaak1",
"https://itch.io/profile/skopcaak",
"https://quipee.me/u/skopcaak_1"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Who are you?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Josef — a 16-year-old student at SSŠVT in the Czech Republic, into graphic design, web development, and home labbing."
}
},
{
"@type": "Question",
"name": "Can I get access to your services?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Most *.skopec.dev services are private. If you know me, ask — otherwise they are not open to the public."
}
},
{
"@type": "Question",
"name": "Where is the source for this site?",
"acceptedAnswer": {
"@type": "Answer",
"text": "On GitHub: pepaskopec-blip/skopec.dev-reimagined. Older version: pepaskopec-blip/skopec.dev."
}
},
{
"@type": "Question",
"name": "What hardware do you run?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Desktop, MacBook Air M5, a Proxmox Xeon box, and a Redmi Note 11 Pro 5G — full specs on the Hardware page."
}
},
{
"@type": "Question",
"name": "How do I contact you?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Email josef@skopec.dev, or use Discord (ishootn4fun) and the other links in Get in touch."
}
}
]
}
</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>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="site-nav">
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="hardware.html">Hardware</a></li>
</ul>
</div>
</header>
<main id="main" class="page">
<section class="hero wrap">
<div class="hero-content">
<p class="hero-brand" aria-label="Josef">Josef<em>.</em></p>
<h1>Design, the web, and a rack that never sleeps.</h1>
<p>Sixteen, based in the Czech Republic — building interfaces by day and running a Proxmox lab by night.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#services">My services</a>
<a class="btn btn-ghost" href="projects.html">See projects</a>
</div>
</div>
</section>
<section class="section" id="about" aria-labelledby="about-title">
<div class="wrap reveal">
<p class="section-label">About</p>
<h2 id="about-title">Hey, I’m Josef.</h2>
<p class="about-text">
I’m a 16-year-old student from the Czech Republic specializing in graphic design and web development at SSŠVT.
I’m a home lab enthusiast and developer — I run my own Proxmox server where I host things like Jellyfin for movies and TV shows,
Navidrome for music, Ollama for local AI, SearXNG as a search engine, and more.
</p>
<p class="about-text">
Outside of screens I train five times a week on a UL / PPL split.
</p>
<div class="meta-row">
<span><strong>School</strong> SSŠVT</span>
<span><strong>Focus</strong> Graphic design &amp; web</span>
<span><strong>Lab</strong> Proxmox @ home</span>
<span><strong>Gym</strong> 5× / week · UL/PPL</span>
</div>
</div>
</section>
<section class="section" id="services" aria-labelledby="services-title">
<div class="wrap reveal">
<p class="section-label">Self-hosted</p>
<h2 id="services-title">Services</h2>
<p class="section-lead">Things I run on my lab — open a service if you have access.</p>
<ul class="service-list">
<li>
<a href="https://proxmox.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">Proxmox</span>
<span class="service-host">proxmox.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
<li>
<a href="https://jelly.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">Jellyfin</span>
<span class="service-host">jelly.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
<li>
<a href="https://navi.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">Navidrome</span>
<span class="service-host">navi.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
<li>
<a href="https://ai.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">Ollama</span>
<span class="service-host">ai.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
<li>
<a href="https://search.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">SearXNG</span>
<span class="service-host">search.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
<li>
<a href="https://convert.skopec.dev" target="_blank" rel="noopener noreferrer">
<span class="service-name">ConvertX</span>
<span class="service-host">convert.skopec.dev</span>
<span class="service-arrow" aria-hidden="true">→</span>
</a>
</li>
</ul>
</div>
</section>
<section class="section" id="friends" aria-labelledby="friends-title">
<div class="wrap reveal">
<p class="section-label">People</p>
<h2 id="friends-title">Friends</h2>
<p class="section-lead">A few sites worth visiting.</p>
<ul class="friend-list">
<li>
<a href="https://dvorakmortonxd.dev" target="_blank" rel="noopener noreferrer">
<span class="friend-name">Martin Dvořák</span>
<span class="friend-url">dvorakmortonxd.dev</span>
</a>
</li>
<li>
<a href="https://bukovinafilip.com" target="_blank" rel="noopener noreferrer">
<span class="friend-name">Filip Bukovina</span>
<span class="friend-url">bukovinafilip.com</span>
</a>
</li>
<li>
<a href="https://vlcak.me" target="_blank" rel="noopener noreferrer">
<span class="friend-name">Tomáš Vlk</span>
<span class="friend-url">vlcak.me</span>
</a>
</li>
</ul>
</div>
</section>
<section class="section" id="faq" aria-labelledby="faq-title">
<div class="wrap reveal">
<p class="section-label">FAQ</p>
<h2 id="faq-title">Quick answers</h2>
<p class="section-lead">A few things people usually ask.</p>
<div class="faq-list">
<details class="faq-item">
<summary>Who are you?</summary>
<p>Josef — a 16-year-old student at SSŠVT in the Czech Republic, into graphic design, web development, and home labbing.</p>
</details>
<details class="faq-item">
<summary>Can I get access to your services?</summary>
<p>Most *.skopec.dev services are private. If you know me, ask — otherwise they’re not open to the public.</p>
</details>
<details class="faq-item">
<summary>Where’s the source for this site?</summary>
<p>On GitHub: <a href="https://github.com/pepaskopec-blip/skopec.dev-reimagined" target="_blank" rel="noopener noreferrer">skopec.dev-reimagined</a>. Older version lives in <a href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer">skopec.dev</a>.</p>
</details>
<details class="faq-item">
<summary>What hardware do you run?</summary>
<p>Desktop, MacBook Air M5, a Proxmox Xeon box, and a Redmi Note 11 Pro 5G — full specs on the <a href="hardware.html">Hardware</a> page.</p>
</details>
<details class="faq-item">
<summary>How do I contact you?</summary>
<p>Email <a href="mailto:josef@skopec.dev">josef@skopec.dev</a>, or use Discord (<strong>ishootn4fun</strong>) and the other links in <a href="#connect">Get in touch</a>.</p>
</details>
</div>
</div>
</section>
<section class="section" id="connect" aria-labelledby="connect-title">
<div class="wrap reveal">
<p class="section-label">Contact</p>
<h2 id="connect-title">Get in touch</h2>
<p class="section-lead">Find me across the web — or just send an email.</p>
<div class="social-row" aria-label="Social links">
<a class="social-link" href="https://github.com/pepaskopec-blip" target="_blank" rel="noopener noreferrer" aria-label="GitHub" title="GitHub">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.58 2 12.26c0 4.52 2.87 8.35 6.84 9.71.5.1.68-.22.68-.48 0-.24-.01-.87-.01-1.7-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .07 1.53 1.06 1.53 1.06.89 1.56 2.34 1.11 2.91.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.07 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.31.1-2.73 0 0 .84-.27 2.75 1.05A9.3 9.3 0 0 1 12 6.9c.85 0 1.71.12 2.51.35 1.9-1.32 2.74-1.05 2.74-1.05.55 1.42.2 2.47.1 2.73.64.72 1.03 1.63 1.03 2.75 0 3.94-2.34 4.8-4.57 5.06.36.32.68.95.68 1.92 0 1.38-.01 2.49-.01 2.83 0 .26.18.59.69.48A10.27 10.27 0 0 0 22 12.26C22 6.58 17.52 2 12 2z"/></svg>
</a>
<a class="social-link" href="https://git.dvorakmortonxd.dev/skopcak" target="_blank" rel="noopener noreferrer" aria-label="Forgejo" title="Forgejo">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.3 1.3c-.4 0-.8.1-1.1.3L3.4 6.2c-.7.4-1.1 1.1-1.1 1.9v7.8c0 .8.4 1.5 1.1 1.9l7.8 4.6c.7.4 1.5.4 2.2 0l7.8-4.6c.7-.4 1.1-1.1 1.1-1.9V8.1c0-.8-.4-1.5-1.1-1.9l-7.8-4.6c-.3-.2-.7-.3-1.1-.3zm0 2.1c.1 0 .2 0 .3.1l6.9 4.1c.2.1.3.3.3.5v6.8c0 .2-.1.4-.3.5l-6.9 4.1c-.2.1-.4.1-.6 0l-6.9-4.1c-.2-.1-.3-.3-.3-.5V8.1c0-.2.1-.4.3-.5l6.9-4.1c.1-.1.2-.1.3-.1zm-.1 3.2c-1.9 0-3.4 1.3-3.4 3.2 0 1.3.7 2.4 1.8 2.9v3.2h3.2v-3.2c1.1-.5 1.8-1.6 1.8-2.9 0-1.9-1.5-3.2-3.4-3.2zm0 1.7c.8 0 1.4.6 1.4 1.5S13 11 12.2 11s-1.4-.6-1.4-1.5.6-1.5 1.4-1.5z"/></svg>
</a>
<a class="social-link" href="https://www.linkedin.com/in/josef-skopec-69380234b/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" title="LinkedIn">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.73V1.73C24 .77 23.21 0 22.23 0z"/></svg>
</a>
<a class="social-link" href="https://x.com/ishoot4fun11" target="_blank" rel="noopener noreferrer" aria-label="X" title="X">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.24 2H21.5l-7.19 8.22L22.5 22h-6.57l-5.15-6.73L5.05 22H1.77l7.69-8.79L1.5 2h6.73l4.65 6.16L18.24 2zm-1.15 18h1.81L7.03 3.89H5.09L17.09 20z"/></svg>
</a>
<a class="social-link" href="https://www.instagram.com/skopcaak1" target="_blank" rel="noopener noreferrer" aria-label="Instagram" title="Instagram">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7.2A4.8 4.8 0 1 0 16.8 12 4.81 4.81 0 0 0 12 7.2zm0 7.92A3.12 3.12 0 1 1 15.12 12 3.12 3.12 0 0 1 12 15.12zM17.4 6.9a1.12 1.12 0 1 1-1.12-1.12A1.12 1.12 0 0 1 17.4 6.9zM21.6 12c0-1.58.01-2.82-.05-3.82a5.52 5.52 0 0 0-1.5-3.23 5.52 5.52 0 0 0-3.23-1.5C15.82 3.39 14.58 3.4 13 3.4h-2c-1.58 0-2.82-.01-3.82.05a5.52 5.52 0 0 0-3.23 1.5 5.52 5.52 0 0 0-1.5 3.23C2.39 8.18 2.4 9.42 2.4 11v2c0 1.58-.01 2.82.05 3.82a5.52 5.52 0 0 0 1.5 3.23 5.52 5.52 0 0 0 3.23 1.5c1 .06 2.24.05 3.82.05h2c1.58 0 2.82.01 3.82-.05a5.52 5.52 0 0 0 3.23-1.5 5.52 5.52 0 0 0 1.5-3.23c.06-1 .05-2.24.05-3.82zm-1.68 5.57a3.84 3.84 0 0 1-2.16 2.16c-.71.28-1.51.43-3.31.45-1.63.01-2.13.02-3.45.02s-1.82-.01-3.45-.02c-1.8-.02-2.6-.17-3.31-.45a3.84 3.84 0 0 1-2.16-2.16c-.28-.71-.43-1.51-.45-3.31-.01-1.63-.02-2.13-.02-3.45s.01-1.82.02-3.45c.02-1.8.17-2.6.45-3.31a3.84 3.84 0 0 1 2.16-2.16c.71-.28 1.51-.43 3.31-.45C9.18 4.41 9.68 4.4 11 4.4h2c1.32 0 1.82.01 3.45.02 1.8.02 2.6.17 3.31.45a3.84 3.84 0 0 1 2.16 2.16c.28.71.43 1.51.45 3.31.01 1.63.02 2.13.02 3.45s-.01 1.82-.02 3.45c-.02 1.8-.17 2.6-.45 3.31z"/></svg>
</a>
<a class="social-link" href="https://www.tiktok.com/@skopcaak_1" target="_blank" rel="noopener noreferrer" aria-label="TikTok" title="TikTok">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .56.04.82.12V9.01a6.33 6.33 0 0 0-.82-.05A6.34 6.34 0 0 0 3.15 15.3a6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.34-6.34V8.73a8.2 8.2 0 0 0 4.76 1.52V6.79a4.85 4.85 0 0 1-1-.1z"/></svg>
</a>
<a class="social-link" href="https://www.snapchat.com/add/skopcaak?share_id=xwTiIsZlpos&amp;locale=en-US" target="_blank" rel="noopener noreferrer" aria-label="Snapchat" title="Snapchat">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12.15 2c-3.2 0-5.5 2.35-5.5 5.68v.5c0 .18-.05 2.28-1.1 3.67-.45.6-.95 1.05-1.48 1.35-.2.12-.26.3-.2.48.1.3.45.45.9.55.5.12 1.05.18 1.35.55.2.25.2.58.35.9.18.4.55.7 1.3.7.35 0 .7-.05 1.1-.15.15-.04.3-.02.42.08.7.55 1.75.95 3.1.95s2.4-.4 3.1-.95c.12-.1.27-.12.42-.08.4.1.75.15 1.1.15.75 0 1.12-.3 1.3-.7.15-.32.15-.65.35-.9.3-.37.85-.43 1.35-.55.45-.1.8-.25.9-.55.06-.18 0-.36-.2-.48-.53-.3-1.03-.75-1.48-1.35-1.05-1.39-1.1-3.49-1.1-3.67v-.5C17.65 4.35 15.35 2 12.15 2z"/></svg>
</a>
<a class="social-link" href="https://www.threads.com/@skopcaak1" target="_blank" rel="noopener noreferrer" aria-label="Threads" title="Threads">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 10.1c-.1-2.3-1.4-3.8-3.8-3.9-1.4 0-2.6.6-3.2 1.6l1.4.95c.4-.65 1.1-1 1.9-1 1.3.05 2 1 2.05 2.55-.45-.2-.95-.3-1.5-.3-2.2 0-3.65 1.35-3.65 3.35 0 1.85 1.35 3.15 3.3 3.15 1.25 0 2.3-.55 2.85-1.55.4.9.95 1.35 1.9 1.4v-1.55c-.45 0-.7-.25-.85-.8v-4.05zm-3.15 5.05c-1.05 0-1.75-.65-1.75-1.65 0-1.15.8-1.85 2.1-1.85.45 0 .9.1 1.3.25v1.15c0 1.2-.7 2.1-1.65 2.1zM12.1 2C6.55 2 2.1 6.5 2.1 12s4.45 10 10 10 10-4.5 10-10-4.45-10-10-10zm0 18.2c-4.55 0-8.2-3.7-8.2-8.2s3.65-8.2 8.2-8.2 8.2 3.7 8.2 8.2-3.65 8.2-8.2 8.2z"/></svg>
</a>
<a class="social-link" href="https://itch.io/profile/skopcaak" target="_blank" rel="noopener noreferrer" aria-label="itch.io" title="itch.io">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.1 2.4 1.4 7.5c-.1.35.15.7.5.75l2.2.25v9.55c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V8.5l2.2-.25c.35-.05.6-.4.5-.75L21 2.4c-.1-.3-.4-.5-.7-.5H3.8c-.3 0-.6.2-.7.5zM7.5 9.2c.9 1.15 1.95 1.8 3.15 1.8s2.25-.65 3.15-1.8c.9 1.15 1.95 1.8 3.15 1.8.35 0 .7-.05 1.05-.15v7.35H6.45V10.85c.35.1.7.15 1.05.15 1.2 0 2.25-.65 3.15-1.8H7.5zM4.55 3.7h14.9l1.1 3.3-1.55.2c-.7.1-1.25-.5-1.15-1.15l.15-.8h-1.55l-.25 1.35c-.1.55-.65.95-1.2.85l-.85-.15-.15.85c-.1.55-.65.95-1.2.85l-.85-.15-.15.85c-.1.55-.65.95-1.2.85l-.85-.15-.15.85c-.1.55-.65.95-1.2.85l-.85-.15-.15.85c-.1.55-.65.95-1.2.85l-.85-.15-.25-1.35H5.6l.15.8c.1.65-.45 1.25-1.15 1.15L3.05 7l1.5-3.3z"/></svg>
</a>
<a class="social-link" href="https://discord.com/app" target="_blank" rel="noopener noreferrer" aria-label="Discord: ishootn4fun" title="Discord: ishootn4fun">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.36-.76-.54-1.09l-.07-.03c-1.5.26-2.93.71-4.27 1.33l-.03.02C2.92 9.04 2.2 12.64 2.56 16.2l.01.04a16.3 16.3 0 0 0 4.92 2.5l.05-.04c.38-.52.71-1.07 1-1.65l-.02-.01a10.7 10.7 0 0 1-1.62-.78l.04-.03c.13-.1.26-.2.38-.3a11.7 11.7 0 0 0 9.36 0c.13.11.26.21.39.31l.04.02c-.52.3-1.06.56-1.62.79l-.02.01c.29.58.62 1.13 1 1.65l.05.04a16.24 16.24 0 0 0 4.93-2.5l.01-.04c.42-4.12-.71-7.69-2.99-10.87l-.03-.01zM8.89 14.37c-.9 0-1.63-.83-1.63-1.84s.72-1.84 1.63-1.84 1.65.83 1.63 1.84c0 1.01-.72 1.84-1.63 1.84zm6.23 0c-.9 0-1.63-.83-1.63-1.84s.72-1.84 1.63-1.84 1.65.83 1.63 1.84c0 1.01-.73 1.84-1.63 1.84z"/></svg>
</a>
<a class="social-link" href="mailto:josef@skopec.dev" aria-label="Email josef@skopec.dev" title="josef@skopec.dev">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.2-8 5.05L4 8.2V6l8 5.05L20 6z"/></svg>
</a>
<a class="social-link" href="https://quipee.me/u/skopcaak_1" target="_blank" rel="noopener noreferrer" aria-label="Quipee" title="Quipee">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.5A9.5 9.5 0 1 0 18.2 18l2.1 2.1c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4L19.7 16.8A9.5 9.5 0 0 0 12 2.5zm0 2.2a7.3 7.3 0 1 1 0 14.6 7.3 7.3 0 0 1 0-14.6zm0 2.4a4.9 4.9 0 1 0 3.35 8.45l1.45 1.45a.75.75 0 0 0 1.06-1.06l-1.45-1.45A4.9 4.9 0 0 0 12 7.1zm0 1.7a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4z"/></svg>
</a>
</div>
</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="projects.html">Projects</a>
<a href="hardware.html">Hardware</a>
<a href="#faq">FAQ</a>
<a href="#connect">Get in touch</a>
<a href="privacy.html">Privacy</a>
</nav>
</div>
</footer>
<script src="script.js" defer></script>
</body>
</html>

17
llms.txt Normal file
View file

@ -0,0 +1,17 @@
# skopec.dev
> Personal portfolio of Josef — graphic design, web development, and home lab.
## Pages
- [Home](https://skopec.dev/): Intro, self-hosted services, friends, FAQ, contact
- [Projects](https://skopec.dev/projects.html): Selected work and lab experiments
- [Hardware](https://skopec.dev/hardware.html): Desktop, laptop, server, and phone specs
- [Privacy](https://skopec.dev/privacy.html): Short privacy note for this personal site
## Services
- Proxmox: https://proxmox.skopec.dev
- Jellyfin: https://jelly.skopec.dev
- Navidrome: https://navi.skopec.dev
- Ollama: https://ai.skopec.dev
- SearXNG: https://search.skopec.dev
- ConvertX: https://convert.skopec.dev

BIN
og-image.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

81
privacy.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Privacy policy for skopec.dev — what this personal site collects and how data is handled.">
<title>Privacy — Josef</title>
<meta property="og:title" content="Privacy — Josef">
<meta property="og:description" content="Privacy policy for skopec.dev.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://skopec.dev/privacy.html">
<meta property="og:image" content="https://skopec.dev/og-image.jpg">
<meta property="og:site_name" content="skopec.dev">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Privacy — Josef">
<meta name="twitter:description" content="Privacy policy for skopec.dev.">
<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="stylesheet" href="style.css">
</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>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="site-nav">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="hardware.html">Hardware</a></li>
</ul>
</div>
</header>
<main id="main" class="page">
<header class="page-hero wrap reveal">
<h1>Privacy</h1>
<p>Short and plain — how this personal site handles information.</p>
</header>
<section class="section">
<div class="wrap reveal prose">
<h2>What this site is</h2>
<p>skopec.dev is a personal portfolio. It is not a shop and does not run a contact form that stores messages on this domain.</p>
<h2>What I collect</h2>
<p>This static site does not use analytics cookies or trackers by default. Your browser may still send standard request data (IP address, user agent) to the host when pages load — that is normal for any website and is handled by the hosting provider’s logs.</p>
<h2>External links</h2>
<p>Links to social profiles, GitHub, friends’ sites, and self-hosted services leave skopec.dev. Those services have their own privacy policies.</p>
<h2>Email</h2>
<p>If you write to <a href="mailto:josef@skopec.dev">josef@skopec.dev</a>, I’ll use your message only to reply. I don’t sell or share contact details.</p>
<h2>Questions</h2>
<p>Reach me at <a href="mailto:josef@skopec.dev">josef@skopec.dev</a>.</p>
<p class="muted-note">Last updated: September 2026</p>
</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="projects.html">Projects</a>
<a href="hardware.html">Hardware</a>
<a href="index.html#connect">Get in touch</a>
</nav>
</div>
</footer>
<script src="script.js" defer></script>
</body>
</html>

105
projects.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Josef’s public GitHub projects — skopec.dev, Snake in Pygame, BatchGym, and more.">
<title>Projects — websites &amp; games · Josef</title>
<link rel="canonical" href="https://skopec.dev/projects.html">
<meta property="og:title" content="Projects — Josef">
<meta property="og:description" content="Public repositories — websites, 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="Public repositories — websites, 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="stylesheet" href="style.css">
</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>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<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>
</header>
<main id="main" class="page">
<header class="page-hero wrap reveal">
<h1>Projects</h1>
<p>Public repositories from GitHub — websites, games, and school projects.</p>
</header>
<section class="section" aria-labelledby="projects-list-title">
<div class="wrap reveal">
<p class="section-label">GitHub</p>
<h2 id="projects-list-title">Repositories</h2>
<p class="section-lead">Open any project on GitHub for the full source.</p>
<ul class="project-list">
<li class="project-item">
<span class="tag">HTML</span>
<h3>
<a href="https://github.com/pepaskopec-blip/skopec.dev-reimagined" target="_blank" rel="noopener noreferrer">skopec.dev-reimagined</a>
</h3>
<p>New 2.0 version of skopec.dev — rebuilt from scratch. This site.</p>
<a class="project-link" href="https://github.com/pepaskopec-blip/skopec.dev-reimagined" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
</li>
<li class="project-item">
<span class="tag">HTML</span>
<h3>
<a href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer">skopec.dev</a>
</h3>
<p>Code for the original website at skopec.dev.</p>
<a class="project-link" href="https://github.com/pepaskopec-blip/skopec.dev" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
</li>
<li class="project-item">
<span class="tag">Python</span>
<h3>
<a href="https://github.com/pepaskopec-blip/Snake-Pygame-" target="_blank" rel="noopener noreferrer">Snake-Pygame-</a>
</h3>
<p>A colorful, feature-rich Snake game built with Pygame.</p>
<a class="project-link" href="https://github.com/pepaskopec-blip/Snake-Pygame-" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
</li>
<li class="project-item">
<span class="tag">Batchfile</span>
<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. Text-based RPG that simulates a gym visit: manage money, buy supplements, and complete sets.</p>
<a class="project-link" href="https://github.com/pepaskopec-blip/BatchGym" target="_blank" rel="noopener noreferrer">View on GitHub →</a>
</li>
</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" defer></script>
</body>
</html>

4
robots.txt Normal file
View file

@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://skopec.dev/sitemap.xml

51
script.js Normal file
View file

@ -0,0 +1,51 @@
(() => {
const yearNodes = document.querySelectorAll("[data-year]");
const year = String(new Date().getFullYear());
yearNodes.forEach((node) => {
node.textContent = year;
});
const toggle = document.querySelector(".nav-toggle");
const nav = document.querySelector("#site-nav");
if (toggle && nav) {
const setOpen = (open) => {
nav.classList.toggle("is-open", open);
toggle.setAttribute("aria-expanded", open ? "true" : "false");
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
};
toggle.addEventListener("click", () => {
setOpen(!nav.classList.contains("is-open"));
});
nav.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", () => setOpen(false));
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") setOpen(false);
});
}
const revealItems = document.querySelectorAll(".reveal");
if (!revealItems.length) return;
if (!("IntersectionObserver" in window)) {
revealItems.forEach((el) => el.classList.add("is-visible"));
return;
}
const observer = new IntersectionObserver(
(entries, obs) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add("is-visible");
obs.unobserve(entry.target);
});
},
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
revealItems.forEach((el) => observer.observe(el));
})();

23
sitemap.xml Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://skopec.dev/</loc>
<changefreq>monthly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://skopec.dev/projects.html</loc>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://skopec.dev/hardware.html</loc>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://skopec.dev/privacy.html</loc>
<changefreq>yearly</changefreq>
<priority>0.3</priority>
</url>
</urlset>

898
style.css Normal file
View file

@ -0,0 +1,898 @@
/* skopec.dev — cool workshop / signal aesthetic (dark) */
:root {
--bg: #07090d;
--bg-deep: #0c1018;
--ink: #eef2f6;
--ink-soft: #c5ced8;
--muted: #8492a3;
--line: rgba(238, 242, 246, 0.08);
--line-strong: rgba(238, 242, 246, 0.16);
--surface: rgba(255, 255, 255, 0.04);
--surface-solid: #121820;
--accent: #ff4a1c;
--accent-ink: #ff7a52;
--glow: rgba(255, 74, 28, 0.22);
--radius: 2px;
--nav-h: 4.25rem;
--font-display: "Syne", sans-serif;
--font-body: "Instrument Sans", sans-serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--max: 72rem;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
background-color: var(--bg);
background-image:
radial-gradient(ellipse 90% 55% at 8% -10%, var(--glow), transparent 55%),
radial-gradient(ellipse 70% 45% at 100% 0%, rgba(60, 100, 160, 0.12), transparent 50%),
linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
background-attachment: fixed;
color-scheme: dark;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.22;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 85%);
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--accent-ink);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.skip-link {
position: absolute;
left: 1rem;
top: -100%;
z-index: 100;
padding: 0.6rem 1rem;
background: var(--accent);
color: #fff;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
top: 1rem;
}
/* —— Nav —— */
.site-header {
position: sticky;
top: 0;
z-index: 50;
height: var(--nav-h);
display: flex;
align-items: center;
backdrop-filter: blur(14px) saturate(1.2);
background: rgba(7, 9, 13, 0.82);
border-bottom: 1px solid var(--line);
}
.nav-inner {
width: min(100% - 2.5rem, var(--max));
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.35rem;
letter-spacing: -0.03em;
text-decoration: none;
color: var(--ink);
line-height: 1;
}
.brand:hover {
color: var(--accent);
}
.brand span {
color: var(--accent);
}
.nav-links {
display: flex;
align-items: center;
gap: 0.35rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
font-size: 0.9rem;
font-weight: 560;
letter-spacing: 0.01em;
text-decoration: none;
color: var(--ink-soft);
border: 1px solid transparent;
border-radius: var(--radius);
transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:hover {
color: var(--ink);
background: var(--surface);
border-color: var(--line);
}
.nav-links a[aria-current="page"] {
color: var(--ink);
background: var(--surface-solid);
border-color: var(--line-strong);
}
.nav-toggle {
display: none;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface-solid);
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 1.1rem;
height: 2px;
margin: 5px auto;
background: var(--ink);
}
/* —— Layout —— */
.page {
position: relative;
z-index: 1;
}
.wrap {
width: min(100% - 2.5rem, var(--max));
margin-inline: auto;
}
.section {
padding: 4.5rem 0;
}
.section + .section {
border-top: 1px solid var(--line);
}
.section-label {
display: inline-block;
margin: 0 0 0.75rem;
font-size: 0.75rem;
font-weight: 650;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-ink);
}
.section h2 {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.35rem);
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.15;
}
.section-lead {
margin: 0 0 2rem;
max-width: 38rem;
color: var(--muted);
}
/* —— Hero —— */
.hero {
position: relative;
min-height: calc(100vh - var(--nav-h));
display: grid;
align-items: end;
padding: 3rem 0 4.5rem;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
right: -8%;
top: 8%;
width: min(52vw, 34rem);
height: min(52vw, 34rem);
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.06), transparent 55%),
conic-gradient(from 210deg at 50% 50%, transparent 0 55%, var(--glow) 70%, transparent 100%);
border: 1px solid var(--line);
opacity: 0.85;
animation: drift 18s var(--ease) infinite alternate;
pointer-events: none;
}
@keyframes drift {
from { transform: translate(0, 0) rotate(0deg); }
to { transform: translate(-4%, 6%) rotate(8deg); }
}
.hero-content {
position: relative;
z-index: 1;
max-width: 40rem;
}
.hero-brand {
margin: 0 0 1.25rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(4.5rem, 14vw, 8.5rem);
letter-spacing: -0.06em;
line-height: 0.9;
color: var(--ink);
}
.hero-brand em {
font-style: normal;
color: var(--accent);
}
.hero h1 {
margin: 0 0 0.9rem;
font-family: var(--font-display);
font-size: clamp(1.35rem, 2.6vw, 1.85rem);
font-weight: 650;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--ink-soft);
}
.hero p {
margin: 0 0 1.75rem;
max-width: 32rem;
color: var(--muted);
font-size: 1.05rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.7rem 1.15rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover {
transform: translateY(-1px);
color: inherit;
}
.btn-primary {
background: var(--ink);
color: var(--bg);
border-color: var(--ink);
}
.btn-primary:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn-ghost {
background: var(--surface);
border-color: var(--line-strong);
color: var(--ink);
}
.btn-ghost:hover {
background: var(--surface-solid);
border-color: var(--ink);
}
/* —— About —— */
.about-text {
max-width: 42rem;
margin: 0;
color: var(--ink-soft);
font-size: 1.1rem;
}
.about-text + .about-text {
margin-top: 1rem;
}
.meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.92rem;
}
.meta-row strong {
color: var(--ink);
font-weight: 650;
}
/* —— Services —— */
.service-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
border-top: 1px solid var(--line-strong);
}
.service-list a {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 1rem;
row-gap: 0.15rem;
padding: 1.1rem 0.15rem;
text-decoration: none;
border-bottom: 1px solid var(--line);
transition: padding-left 0.25s var(--ease), color 0.2s var(--ease);
}
.service-list a:hover {
padding-left: 0.65rem;
color: var(--accent-ink);
}
.service-name {
grid-column: 1;
grid-row: 1;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.02em;
}
.service-host {
grid-column: 1;
grid-row: 2;
font-size: 0.9rem;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.service-list a:hover .service-host {
color: var(--accent-ink);
}
.service-arrow {
grid-column: 2;
grid-row: 1 / span 2;
font-size: 1.25rem;
opacity: 0.35;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.service-list a:hover .service-arrow {
opacity: 1;
transform: translateX(3px);
color: var(--accent);
}
@media (min-width: 640px) {
.service-list a {
grid-template-columns: 11rem minmax(0, 1fr) auto;
grid-template-rows: auto;
}
.service-name {
grid-column: 1;
grid-row: 1;
}
.service-host {
grid-column: 2;
grid-row: 1;
}
.service-arrow {
grid-column: 3;
grid-row: 1;
}
}
/* —— Friends —— */
.friend-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.friend-list a {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.35rem 1.5rem;
padding: 0.95rem 1.1rem;
text-decoration: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.friend-list a:hover {
border-color: var(--ink);
background: var(--surface-solid);
transform: translateX(4px);
color: var(--ink);
}
.friend-name {
font-weight: 650;
}
.friend-url {
color: var(--muted);
font-size: 0.9rem;
}
/* —— Connect —— */
.social-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--surface-solid);
color: var(--ink-soft);
text-decoration: none;
transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-link:hover {
color: var(--bg);
background: var(--ink);
border-color: var(--ink);
transform: translateY(-2px);
}
.social-link svg {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
.social-link.is-placeholder {
opacity: 0.55;
cursor: default;
pointer-events: none;
}
.connect-note {
margin: 1rem 0 0;
font-size: 0.9rem;
color: var(--muted);
}
/* —— Inner pages —— */
.page-hero {
padding: 3.5rem 0 2.5rem;
}
.page-hero h1 {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 4rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.page-hero p {
margin: 0;
max-width: 36rem;
color: var(--muted);
}
.stack-list,
.project-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.5rem;
}
.stack-item,
.project-item {
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
}
.stack-item:last-child,
.project-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.stack-item h3,
.project-item h3 {
margin: 0 0 0.4rem;
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.project-item h3 a {
text-decoration: none;
}
.project-item h3 a:hover {
color: var(--accent-ink);
}
.stack-item p,
.project-item p {
margin: 0;
color: var(--muted);
max-width: 40rem;
}
.project-link {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.92rem;
font-weight: 600;
text-decoration: none;
color: var(--accent-ink);
}
.project-link:hover {
color: var(--accent);
}
.tag {
display: inline-block;
margin-bottom: 0.5rem;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-ink);
}
.spec-list {
display: grid;
gap: 0.55rem;
margin: 1.15rem 0 0;
padding: 0;
max-width: 36rem;
}
.spec-list > div {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: 0.75rem 1rem;
align-items: baseline;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
.spec-list > div {
grid-template-columns: 6.75rem minmax(0, 1fr);
}
}
.spec-list > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.spec-list dt {
margin: 0;
font-size: 0.78rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.spec-list dd {
margin: 0;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
/* —— Footer —— */
.site-footer {
position: relative;
z-index: 1;
margin-top: 2rem;
padding: 1.75rem 0 2.25rem;
border-top: 1px solid var(--line-strong);
color: var(--muted);
font-size: 0.88rem;
}
.footer-inner {
width: min(100% - 2.5rem, var(--max));
margin-inline: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem 1.5rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 0.65rem 1.1rem;
}
.footer-inner a {
text-decoration: none;
font-weight: 560;
}
.footer-inner a:hover {
color: var(--accent-ink);
}
/* —— FAQ —— */
.faq-list {
display: grid;
gap: 0.65rem;
max-width: 42rem;
}
.faq-item {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 0.15rem 1rem;
}
.faq-item summary {
cursor: pointer;
list-style: none;
padding: 0.9rem 0;
font-weight: 650;
font-family: var(--font-display);
letter-spacing: -0.02em;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
float: right;
color: var(--accent);
font-weight: 700;
}
.faq-item[open] summary::after {
content: "–";
}
.faq-item p {
margin: 0 0 1rem;
color: var(--muted);
}
.faq-item a {
color: var(--accent-ink);
}
/* —— Prose (privacy etc.) —— */
.prose {
max-width: 40rem;
}
.prose h2 {
margin: 2rem 0 0.65rem;
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.prose h2:first-child {
margin-top: 0;
}
.prose p {
margin: 0 0 0.85rem;
color: var(--ink-soft);
}
.prose a {
color: var(--accent-ink);
}
.muted-note {
margin-top: 2rem !important;
font-size: 0.88rem;
color: var(--muted) !important;
}
/* —— Motion / reveal —— */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.hero-content > * {
animation: rise 0.85s var(--ease) both;
}
.hero-brand { animation-delay: 0.05s; }
.hero h1 { animation-delay: 0.16s; }
.hero p { animation-delay: 0.28s; }
.hero-actions { animation-delay: 0.4s; }
@keyframes rise {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
.reveal {
opacity: 1;
transform: none;
}
body::before,
.hero::after {
display: none;
}
}
/* —— Responsive —— */
@media (max-width: 720px) {
.nav-toggle {
display: inline-block;
}
.nav-links {
position: absolute;
top: var(--nav-h);
left: 0;
right: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
padding: 0.75rem 1.25rem 1rem;
background: rgba(12, 16, 24, 0.97);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(12px);
}
.nav-links.is-open {
display: flex;
}
.nav-links a {
padding: 0.75rem 0.85rem;
}
.hero {
min-height: auto;
padding-top: 2.5rem;
padding-bottom: 3.25rem;
}
.hero::after {
width: 16rem;
height: 16rem;
top: 0;
right: -20%;
opacity: 0.55;
}
.section {
padding: 3.25rem 0;
}
}