Update site for skopec.dev

2026-10-27 15:14:33 +00:00 · 2026-09-01 14:46:33 +02:00 · 2026-09-01 14:46:33 +02:00 · 3a4d4c8b7a
commit 3a4d4c8b7a
parent aa4b87399c
10 changed files with 201 additions and 72 deletions
--- a/404.html
+++ b/404.html
@ -14,6 +14,10 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#07090d">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
--- a/README.md
+++ b/README.md
@ -1,2 +1,38 @@
-# skopec.dev-reimagined
-New 2.0 version for my skopec.dev web made from scratch.
+# skopec.dev
+
+The source code for my own website. This repository contains the HTML, CSS, and JS files for my portfolio at [skopec.dev](https://skopec.dev).
+
+## About
+
+This repo holds the main source files of the site — the core HTML pages, stylesheet, and script. Besides that, you’ll also find:
+
+- `sitemap.xml` — sitemap for search engines  
+- `robots.txt` — crawler rules  
+- `llms.txt` — short summary for AI crawlers  
+- `favicon.svg` / `favicon-32.png` / `apple-touch-icon.png` — icons  
+- `og-image.jpg` — social share image  
+- `.idea/` — IDE config files  
+
+## Structure
+
+```text
+├── index.html          # home (about, services, friends, FAQ, contact)
+├── projects.html       # projects page
+├── hardware.html       # hardware page
+├── privacy.html        # privacy note
+├── 404.html            # custom not-found page
+├── style.css           # styles
+├── script.js           # scripts
+├── favicon.svg         # icon
+├── favicon-32.png
+├── apple-touch-icon.png
+├── og-image.jpg        # Open Graph / Twitter image
+├── sitemap.xml         # sitemap for search engines
+├── robots.txt          # crawler rules
+├── llms.txt
+└── .idea/              # IDE config
+```
+
+## License
+
+This project is for personal use. Feel free to look around for inspiration, but please don’t copy the content as your own.
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
--- a/favicon-32.png
+++ b/favicon-32.png
--- a/favicon.svg
+++ b/favicon.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Josef.">
+  <rect width="32" height="32" fill="#07090d"/>
+  <rect x="1" y="1" width="30" height="30" fill="none" stroke="#121820" stroke-width="1"/>
+  <text x="16" y="23" text-anchor="middle" font-family="Syne, Instrument Sans, Arial Black, sans-serif" font-size="18" font-weight="800" fill="#ff4a1c">J.</text>
+</svg>
--- a/hardware.html
+++ b/hardware.html
@ -20,7 +20,21 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#07090d">
  <link rel="stylesheet" href="style.css">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://skopec.dev/"},
+      {"@type": "ListItem", "position": 2, "name": "Hardware", "item": "https://skopec.dev/hardware.html"}
+    ]
+  }
+  </script>
 </head>
 <body>
  <a class="skip-link" href="#main">Skip to content</a>
@ -41,6 +55,12 @@

  <main id="main" class="page">
    <header class="page-hero wrap reveal">
+      <nav class="breadcrumbs" aria-label="Breadcrumb">
+        <ol>
+          <li><a href="index.html">Home</a></li>
+          <li><span aria-current="page">Hardware</span></li>
+        </ol>
+      </nav>
      <h1>Hardware</h1>
      <p>The machines I use every day — desktop build, daily driver laptop, Proxmox server, and phone.</p>
    </header>
--- a/index.html
+++ b/index.html
@ -20,6 +20,10 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#07090d">
  <link rel="stylesheet" href="style.css">
  <script type="application/ld+json">
  {
@ -75,7 +79,7 @@
        "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."
+          "text": "On GitHub: pepaskopec-blip/skopec.dev."
        }
      },
      {
@ -97,6 +101,21 @@
    ]
  }
  </script>
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "skopec.dev",
+    "url": "https://skopec.dev/",
+    "description": "Josef Skopec — student portfolio: graphic design, web development, and a Proxmox home lab.",
+    "inLanguage": "en",
+    "author": {
+      "@type": "Person",
+      "name": "Josef Skopec",
+      "url": "https://skopec.dev/"
+    }
+  }
+  </script>
 </head>
 <body>
  <a class="skip-link" href="#main">Skip to content</a>
@ -116,35 +135,28 @@
  </header>

  <main id="main" class="page">
-    <section class="hero wrap">
+    <section class="hero wrap" id="about" aria-labelledby="about-title">
      <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>
+        <h1 id="about-title" class="hero-about-title">Hey, I’m Josef.</h1>
        <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,
+          I’m a home lab enthusiast and developer — I run Linux on my desktop and 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.
+          Outside of screens I train five times a week on a UL / PPL split, and I play airsoft.
        </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>Focus</strong> Developement, Tinkering &amp; web</span>
+          <span><strong>OS</strong> Linux</span>
+          <span><strong>Home Lab</strong> Proxmox</span>
          <span><strong>Gym</strong> 5× / week · UL/PPL</span>
+          <span><strong>Hobby</strong> Airsoft, Gym</span>
+        </div>
+        <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>
@ -203,8 +215,8 @@

    <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-label">Friends</p>
+        <h2 id="friends-title">Websites</h2>
        <p class="section-lead">A few sites worth visiting.</p>
        <ul class="friend-list">
          <li>
@ -245,7 +257,7 @@
          </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>
+            <p>On GitHub: <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>
--- a/privacy.html
+++ b/privacy.html
@ -5,6 +5,7 @@
  <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>
+  <link rel="canonical" href="https://skopec.dev/privacy.html">
  <meta property="og:title" content="Privacy — Josef">
  <meta property="og:description" content="Privacy policy for skopec.dev.">
  <meta property="og:type" content="website">
@ -18,7 +19,21 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#07090d">
  <link rel="stylesheet" href="style.css">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://skopec.dev/"},
+      {"@type": "ListItem", "position": 2, "name": "Privacy", "item": "https://skopec.dev/privacy.html"}
+    ]
+  }
+  </script>
 </head>
 <body>
  <a class="skip-link" href="#main">Skip to content</a>
@ -39,6 +54,12 @@

  <main id="main" class="page">
    <header class="page-hero wrap reveal">
+      <nav class="breadcrumbs" aria-label="Breadcrumb">
+        <ol>
+          <li><a href="index.html">Home</a></li>
+          <li><span aria-current="page">Privacy</span></li>
+        </ol>
+      </nav>
      <h1>Privacy</h1>
      <p>Short and plain — how this personal site handles information.</p>
    </header>
--- a/projects.html
+++ b/projects.html
@ -20,7 +20,21 @@
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Syne:wght@500..800&display=swap" rel="stylesheet">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="favicon-32.png" sizes="32x32" type="image/png">
+  <link rel="apple-touch-icon" href="apple-touch-icon.png">
+  <meta name="theme-color" content="#07090d">
  <link rel="stylesheet" href="style.css">
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {"@type": "ListItem", "position": 1, "name": "Home", "item": "https://skopec.dev/"},
+      {"@type": "ListItem", "position": 2, "name": "Projects", "item": "https://skopec.dev/projects.html"}
+    ]
+  }
+  </script>
 </head>
 <body>
  <a class="skip-link" href="#main">Skip to content</a>
@ -41,6 +55,12 @@

  <main id="main" class="page">
    <header class="page-hero wrap reveal">
+      <nav class="breadcrumbs" aria-label="Breadcrumb">
+        <ol>
+          <li><a href="index.html">Home</a></li>
+          <li><span aria-current="page">Projects</span></li>
+        </ol>
+      </nav>
      <h1>Projects</h1>
      <p>Public repositories from GitHub — websites, games, and school projects.</p>
    </header>
@ -51,20 +71,12 @@
        <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>
+            <p>This site — personal portfolio.</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">
--- a/style.css
+++ b/style.css
@ -237,10 +237,9 @@ a:hover {
 /* —— Hero —— */
 .hero {
  position: relative;
-  min-height: calc(100vh - var(--nav-h));
  display: grid;
-  align-items: end;
-  padding: 3rem 0 4.5rem;
+  align-items: start;
+  padding: 2.75rem 0 3.5rem;
  overflow: hidden;
 }

@ -269,39 +268,25 @@ a:hover {
 .hero-content {
  position: relative;
  z-index: 1;
-  max-width: 40rem;
+  max-width: 42rem;
 }

-.hero-brand {
-  margin: 0 0 1.25rem;
+.hero-about-title {
+  margin: 0 0 0.85rem;
  font-family: var(--font-display);
-  font-weight: 800;
-  font-size: clamp(4.5rem, 14vw, 8.5rem);
-  letter-spacing: -0.06em;
-  line-height: 0.9;
+  font-size: clamp(1.85rem, 4vw, 2.6rem);
+  font-weight: 750;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
  color: var(--ink);
 }

-.hero-brand em {
-  font-style: normal;
-  color: var(--accent);
+.hero .about-text {
+  margin: 0 0 0.85rem;
 }

-.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 .meta-row {
+  margin: 1.25rem 0 1.75rem;
 }

 .hero-actions {
@ -541,12 +526,6 @@ a:hover {
  fill: currentColor;
 }

-.social-link.is-placeholder {
-  opacity: 0.55;
-  cursor: default;
-  pointer-events: none;
-}
-
 .connect-note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
@ -558,6 +537,45 @@ a:hover {
  padding: 3.5rem 0 2.5rem;
 }

+.breadcrumbs {
+  margin: 0 0 1rem;
+}
+
+.breadcrumbs ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.5rem;
+  font-size: 0.88rem;
+  color: var(--muted);
+}
+
+.breadcrumbs li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+  content: "/";
+  color: var(--line-strong);
+}
+
+.breadcrumbs a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.breadcrumbs a:hover {
+  color: var(--accent-ink);
+}
+
+.breadcrumbs [aria-current="page"] {
+  color: var(--ink-soft);
+}
+
 .page-hero h1 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
@ -815,10 +833,11 @@ a:hover {
  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; }
+.hero-about-title { animation-delay: 0.05s; }
+.hero .about-text:nth-of-type(1) { animation-delay: 0.12s; }
+.hero .about-text:nth-of-type(2) { animation-delay: 0.18s; }
+.hero .meta-row { animation-delay: 0.24s; }
+.hero-actions { animation-delay: 0.3s; }

@keyframes rise {
  from {