From 3a4d4c8b7ae78dd29a22948b68e96aa9517b2bec Mon Sep 17 00:00:00 2001 From: pepaskopec-blip Date: Tue, 1 Sep 2026 14:46:33 +0200 Subject: [PATCH] Update site for skopec.dev --- 404.html | 4 ++ README.md | 40 +++++++++++++++++- apple-touch-icon.png | Bin 0 -> 6757 bytes favicon-32.png | Bin 0 -> 1291 bytes favicon.svg | 5 +++ hardware.html | 20 +++++++++ index.html | 58 +++++++++++++++----------- privacy.html | 21 ++++++++++ projects.html | 30 ++++++++++---- style.css | 95 ++++++++++++++++++++++++++----------------- 10 files changed, 201 insertions(+), 72 deletions(-) create mode 100644 apple-touch-icon.png create mode 100644 favicon-32.png create mode 100644 favicon.svg diff --git a/404.html b/404.html index fd93843..3956e97 100644 --- a/404.html +++ b/404.html @@ -14,6 +14,10 @@ + + + + diff --git a/README.md b/README.md index 6bbf04a..1dd8716 100644 --- 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. diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..db3c9b66a4a651dcf8e97df711cb2ce54a891643 GIT binary patch literal 6757 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 WbEm9ZOx{?7@`b0XpUXO@geCwJR~sS# literal 0 HcmV?d00001 diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..0fec0ae --- /dev/null +++ b/favicon.svg @@ -0,0 +1,5 @@ + + + + J. + diff --git a/hardware.html b/hardware.html index 097d9e6..151ac5a 100644 --- a/hardware.html +++ b/hardware.html @@ -20,7 +20,21 @@ + + + + + @@ -41,6 +55,12 @@
+

Hardware

The machines I use every day — desktop build, daily driver laptop, Proxmox server, and phone.

diff --git a/index.html b/index.html index 180495b..71a1ce4 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,10 @@ + + + + + @@ -116,35 +135,28 @@
-
+
-

Josef.

-

Design, the web, and a rack that never sleeps.

-

Sixteen, based in the Czech Republic — building interfaces by day and running a Proxmox lab by night.

-
- My services - See projects -
-
-
- -
-
-

About

-

Hey, I’m Josef.

+

Hey, I’m Josef.

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.

- 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.

School SSŠVT - Focus Graphic design & web - Lab Proxmox @ home + Focus Developement, Tinkering & web + OS Linux + Home Lab Proxmox Gym 5× / week · UL/PPL + Hobby Airsoft, Gym +
+
+ My services + See projects
@@ -203,8 +215,8 @@
-

People

-

Friends

+

Friends

+

Websites

A few sites worth visiting.

  • @@ -245,7 +257,7 @@
    Where’s the source for this site? -

    On GitHub: skopec.dev-reimagined. Older version lives in skopec.dev.

    +

    On GitHub: skopec.dev.

    What hardware do you run? diff --git a/privacy.html b/privacy.html index 3d8d52f..b2ed80b 100644 --- a/privacy.html +++ b/privacy.html @@ -5,6 +5,7 @@ Privacy — Josef + @@ -18,7 +19,21 @@ + + + + + @@ -39,6 +54,12 @@
    +

    Privacy

    Short and plain — how this personal site handles information.

    diff --git a/projects.html b/projects.html index 459f983..b5cadea 100644 --- a/projects.html +++ b/projects.html @@ -20,7 +20,21 @@ + + + + + @@ -41,6 +55,12 @@
    +

    Projects

    Public repositories from GitHub — websites, games, and school projects.

    @@ -51,20 +71,12 @@

    Repositories

    Open any project on GitHub for the full source.

      -
    • - HTML -

      - skopec.dev-reimagined -

      -

      New 2.0 version of skopec.dev — rebuilt from scratch. This site.

      - View on GitHub → -
    • HTML

      skopec.dev

      -

      Code for the original website at skopec.dev.

      +

      This site — personal portfolio.

      View on GitHub →
    • diff --git a/style.css b/style.css index b7771db..0336502 100644 --- 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 {