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 0000000..db3c9b6 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/favicon-32.png b/favicon-32.png new file mode 100644 index 0000000..a7ac7a4 Binary files /dev/null and b/favicon-32.png differ 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 {