mirror of
https://github.com/pepaskopec-blip/skopec.dev.git
synced 2026-10-27 07:04:33 +00:00
Initial commit
This commit is contained in:
parent
d74e3f6e14
commit
aa4b87399c
15 changed files with 1726 additions and 0 deletions
10
.idea/.gitignore
generated
vendored
Normal file
10
.idea/.gitignore
generated
vendored
Normal 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
8
.idea/modules.xml
generated
Normal 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
8
.idea/skopec.dev-reimagined.iml
generated
Normal 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
6
.idea/vcs.xml
generated
Normal 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
62
404.html
Normal 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
129
hardware.html
Normal 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 & 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
324
index.html
Normal 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 & home lab · skopec.dev</title>
|
||||||
|
<link rel="canonical" href="https://skopec.dev/">
|
||||||
|
<meta property="og:title" content="Josef — portfolio & home lab">
|
||||||
|
<meta property="og:description" content="Student designer & 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 & home lab">
|
||||||
|
<meta name="twitter:description" content="Student designer & 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 & 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&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
17
llms.txt
Normal 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
BIN
og-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
81
privacy.html
Normal file
81
privacy.html
Normal 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
105
projects.html
Normal 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 & 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
4
robots.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: https://skopec.dev/sitemap.xml
|
||||||
51
script.js
Normal file
51
script.js
Normal 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
23
sitemap.xml
Normal 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
898
style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue