fix: small text breaking

fix: changed lazy load into fastfetch
feat: added more optimization and sw
2026-02-04 05:26:11 +01:00 · 2025-07-27 14:19:54 +02:00 · 2025-07-27 14:05:00 +02:00 · 2025-07-27 13:55:46 +02:00 · 2025-07-26 14:55:06 +02:00 · 2025-07-26 14:06:48 +02:00
22 changed files with 590 additions and 258 deletions
--- a/.firebaserc
+++ b/.firebaserc
@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "michal-czyz-portfolio"
-  }
-}
--- a/README.md
+++ b/README.md
@@ -1,10 +1,14 @@
-# Mike's official /new/ minimalistic website
+# Mike's Personal Website

-There's so much bloat that I'm just too lazy to update it all the time and migrate old code.
+A minimalistic, modern personal website.

-This time I focused on simplicity.
+## Mike around the web

-Deploy commands cuz I keep forgetting all the time:
-`sudo npm install -g firebase-tools`
-`firebase login`
-`firebase deploy --only hosting:mike-czyz-website`
+- **Email**: [mike@c2yz.com](mailto:mike@c2yz.com)
+- **GitHub**: [@eRgo35](https://github.com/eRgo35)
+- **LinkedIn**: [mike-czyz](https://www.linkedin.com/in/mike-czyz)
+- **YouTube**: [@eRgo35](https://www.youtube.com/@eRgo35)
+
+---
+
+Built with ❤️ by Michał Czyż
--- a/assets/Michał_Czyż_CV.pdf
+++ b/assets/Michał_Czyż_CV.pdf
--- a/public/assets/card.png
+++ b/public/assets/card.png
--- a/assets/favicon.ico
+++ b/assets/favicon.ico
--- a/assets/fonts/Coiny-Regular-subset.ttf
+++ b/assets/fonts/Coiny-Regular-subset.ttf
--- a/assets/fonts/Coiny-Regular.ttf
+++ b/assets/fonts/Coiny-Regular.ttf
--- a/public/assets/logo192.png
+++ b/public/assets/logo192.png
--- a/public/assets/logo512.png
+++ b/public/assets/logo512.png
--- a/public/assets/mike-czyz-public.gpg
+++ b/public/assets/mike-czyz-public.gpg
--- a/assets/mike-czyz.webp
+++ b/assets/mike-czyz.webp
--- a/firebase.json
+++ b/firebase.json
@@ -1,17 +0,0 @@
-{
-  "hosting": {
-    "public": "public",
-    "site": "mike-czyz-website",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
-    ]
-  }
-}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,348 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#8aadf4" />
+    <meta
+      name="description"
+      content="Welcome to the official website of Michał Czyż, a student and a software developer. Explore projects, skills, and contact details."
+    />
+    <meta name="author" content="Michał Czyż" />
+    <meta name="copyright" content="Michał Czyż, 2025 All Rights Reserved" />
+    <meta
+      name="keywords"
+      lang="en"
+      content="Michał Czyż, Michael Czyż, Mike Czyż, ai, llm, python, developer, crypto, web, angular, react, javascript"
+    />
+    <meta name="language" content="en" />
+    <meta name="robots" content="index, follow" />
+    <meta name="date" content="2025-07-26" />
+    <meta
+      name="page-topic"
+      content="Personal Website, Software Developer, Michał Czyż, Mike Czyż"
+    />
+
+    <!--Facebook Open Graph-->
+    <meta property="og:url" content="https://c2yz.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Michał Czyż - Software Developer" />
+    <meta property="og:site_name" content="Michał Czyż" />
+    <meta property="og:locale" content="en_US" />
+    <meta
+      property="og:description"
+      content="Michał Czyż is a student and software developer. Explore projects, skills, and contact details."
+    />
+    <meta property="og:image" content="/assets/card.png" />
+
+    <!--Twitter card metadata-->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@Mike_Czyz_" />
+    <meta name="twitter:creator" content="@Mike_Czyz_" />
+    <meta name="twitter:title" content="Michał Czyż - Software Developer" />
+    <meta
+      name="twitter:description"
+      content="Michał Czyż is a student and software developer. Explore projects, skills, and contact details."
+    />
+    <meta name="twitter:image" content="/assets/card.png" />
+
+    <link
+      rel="apple-touch-icon"
+      href="/assets/logo192.png"
+      media="print"
+      onload="this.media='all'"
+    />
+    <link rel="manifest" href="/manifest.json" />
+
+    <script>
+      (function () {
+        try {
+          var ls = localStorage.getItem("preferredTheme");
+          var theme =
+            ls === "dark" ||
+            (!ls && window.matchMedia("(prefers-color-scheme: dark)").matches)
+              ? "dark"
+              : "light";
+          if (theme === "dark") document.documentElement.classList.add("dark");
+        } catch (e) {}
+      })();
+    </script>
+
+    <style>
+      :root {
+        --base: #faf4ed;
+        --surface: #fffaf3;
+        --text: #575279;
+        --foam: #56949f;
+      }
+      .dark {
+        --base: #191724;
+        --surface: #1f1d2e;
+        --text: #e0def4;
+        --foam: #9ccfd8;
+      }
+      body,
+      html {
+        margin: 0;
+        width: 100%;
+        min-height: 100vh;
+        font-family: system-ui, sans-serif;
+        background-color: var(--base);
+        color: var(--text);
+        display: grid;
+        place-items: center;
+        overflow: auto;
+        overflow-anchor: none;
+      }
+      .page {
+        box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px 0,
+          rgba(0, 0, 0, 0.23) 0 6px 6px 0;
+        box-sizing: border-box;
+        width: 8.5in;
+        height: 9in;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        background-color: var(--surface);
+        padding: 0.5in;
+        position: relative;
+        animation: 0.5s ease-out 0s 1 fadein;
+        display: grid;
+        grid-template-columns: 1fr 2.5in;
+        grid-template-rows: 1.1in 0.2fr 0.4fr auto;
+        gap: 0 0;
+        grid-template-areas: "header header" "bio aside" "world aside" "footer footer";
+        overflow: hidden;
+      }
+
+      .avatar {
+        width: 2.5in;
+        height: 2.5in;
+      }
+
+      a {
+        color: var(--foam);
+        transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .header {
+        grid-area: header;
+      }
+
+      .bio {
+        grid-area: bio;
+      }
+
+      .world {
+        grid-area: world;
+      }
+
+      .aside {
+        grid-area: aside;
+      }
+
+      .footer {
+        grid-area: footer;
+      }
+
+      @media only screen and (min-width: 2000px) {
+        .page {
+          height: 11in;
+        }
+      }
+
+      @media only screen and (min-width: 768px) and (max-width: 900px) {
+        html,
+        body {
+          overflow: auto;
+        }
+
+        .page {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0.25in;
+          box-shadow: none;
+          animation: none;
+          overflow: auto;
+        }
+
+        .footer {
+          margin-top: 0.25in;
+          grid-template-rows: none;
+          grid-template-columns: auto;
+        }
+      }
+
+      @media only screen and (max-width: 767px) {
+        html,
+        body {
+          overflow: auto;
+        }
+
+        .page {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0.25in;
+          box-shadow: none;
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: 0.1fr 0.2fr 0.4fr auto;
+          gap: 0px 0px;
+          grid-template-areas:
+            "header"
+            "aside"
+            "bio"
+            "world"
+            "footer";
+          animation: none;
+          overflow: auto;
+        }
+      }
+    </style>
+
+    <link
+      rel="preload"
+      href="/assets/fonts/Coiny-Regular-subset.ttf"
+      as="font"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="/styles.css"
+      media="print"
+      onload="this.media='all'"
+    />
+
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        "name": "Michał Czyż",
+        "alternateName": "Mike",
+        "url": "https://c2yz.com/",
+        "jobTitle": "Software Developer, Student",
+        "alumniOf": {
+          "@type": "CollegeOrUniversity",
+          "name": "Silesian University of Technology"
+        },
+        "sameAs": [
+          "https://github.com/eRgo35",
+          "https://www.linkedin.com/in/mike-czyz",
+          "https://www.youtube.com/@eRgo35"
+        ]
+      }
+    </script>
+
+    <title>Michał Czyż - Student, Software Developer | Official Website</title>
+  </head>
+
+  <body>
+    <script src="/main.js" defer></script>
+    <div class="page">
+      <h1 class="header coiny-regular">Hi, I'm Mike 👋🏻</h1>
+
+      <div class="bio">
+        <p class="small-text">
+          I'm currently working on new fascinating<br />
+          projects, so be sure to follow me!
+        </p>
+
+        <h2 class="coiny-regular">Student / Software Developer</h2>
+
+        <p>
+          I am currently pursuing a degree in Computer Science at the Silesian
+          University of Technology in Gliwice. Programming is my passion. I have
+          experience working with a variety of languages. Recently, I have been
+          focusing my attention on Rust and JavaScript.
+        </p>
+        <p>
+          I am also interested in artificial intelligence and machine learning.
+          In addition, I actively create and develop many projects to further
+          enhance my skills.
+        </p>
+
+        <h2 class="coiny-regular">My Projects</h2>
+
+        <a class="button" href="https://github.com/eRgo35?tab=repositories"
+          >Go to <i>Projects</i></a
+        >
+
+        <h2 class="coiny-regular">Mike around the web</h2>
+        <ul>
+          <li>
+            🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a>
+          </li>
+          <li>
+            💼 find me on
+            <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a>
+          </li>
+          <li>
+            📹 visit my <a href="https://www.youtube.com/@eRgo35">YouTube</a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="world">
+        <span>[📎 <a href="/assets/Michał_Czyż_CV.pdf">cv</a>]</span>
+        <span>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</span>
+      </div>
+
+      <div class="aside">
+        <div class="avatar-wrapper">
+          <img
+            src="/assets/mike-czyz.webp"
+            class="avatar"
+            alt="Michał Czyż"
+            class="avatar"
+            width="2.5in"
+            height="2.5in"
+            fetchpriority="high"
+          />
+          <div
+            class="theme"
+            aria-label="Toggle dark/light mode"
+            role="button"
+            tabindex="0"
+          >
+            <i class="material-icons">🌙</i>
+            <span class="theme-text">Dark Mode</span>
+          </div>
+          <script>
+            const themeButton = document.querySelector(".theme");
+            function toggleTheme() {
+              const current = document.documentElement.classList.contains(
+                "dark"
+              )
+                ? "dark"
+                : "light";
+              const newMode = current === "dark" ? "light" : "dark";
+              updateTheme(newMode);
+            }
+            themeButton.addEventListener("click", toggleTheme);
+          </script>
+        </div>
+      </div>
+
+      <div class="footer">
+        <div class="copyright">&copy; <span id="year">2025</span></div>
+        <script>
+          document.querySelector("#year").innerHTML = new Date().getFullYear();
+        </script>
+        <div class="gpg">
+          <a
+            href="/assets/mike-czyz-public.gpg"
+            target="_blank"
+            class="gpg-key"
+          >
+            🔑
+            <span>GPG</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,39 @@
+const root = document.documentElement;
+const themeText = document.querySelector(".theme-text");
+const themeIcon = document.querySelector(".material-icons");
+
+const THEMES = {
+  light: { class: "", text: "Light Mode", icon: "☀️" },
+  dark: { class: "dark", text: "Dark Mode", icon: "🌙" },
+};
+
+function updateTheme(mode) {
+  root.classList.toggle("dark", mode === "dark");
+  themeText.textContent = THEMES[mode].text;
+  themeIcon.textContent = THEMES[mode].icon;
+  localStorage.setItem("preferredTheme", mode);
+}
+
+function getPreferredTheme() {
+  const stored = localStorage.getItem("preferredTheme");
+  if (stored === "dark" || stored === "light") {
+    return stored;
+  }
+
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js");
+  });
+}
+
+navigator.serviceWorker.addEventListener("controllerchange", () => {
+  console.log("New version available, reloading...");
+  window.location.reload();
+});
+
+updateTheme(getPreferredTheme());
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,7 @@
 {
  "short_name": "Mike Czyż",
  "name": "Michał Czyż's Website",
+  "description": "Michał Czyż - software developer, student, and creator.",
  "icons": [
    {
      "src": "assets/favicon.ico",
--- a/public/assets/favicon.ico
+++ b/public/assets/favicon.ico
--- a/public/assets/mike-czyz.webp
+++ b/public/assets/mike-czyz.webp
--- a/public/index.html
+++ b/public/index.html
@@ -1,107 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="./assets/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#8aadf4" />
-    <meta name="description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta name="author" content="Michał Czyż" />
-    <meta name="copyright" content="Michał Czyż, 2024 All Rights Reserved" />
-    <meta name="keywords" lang="en"
-        content="Michał Czyż, Michael Czyż, Mike Czyż, tsi, developer, crypto, web, angular, react, javascript" />
-    <meta name="date" content="" />
-    <meta name="page-topic" content="" />
-
-    <!--Facebook Open Graph-->
-    <meta property="og:url" content="https://c2yz.com" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Michał Czyż" />
-    <meta property="og:site_name" content="Michał Czyż" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta property="og:image" content="./assets/card.png" />
-
-    <!--Twitter card metadata-->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@Mike_Czyz_" />
-    <meta name="twitter:creator" content="@Mike_Czyz_" />
-    <meta name="twitter:title" content="Michał Czyż" />
-    <meta name="twitter:description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta name="twitter:image" content="./assets/card.png">
-
-    <link rel="apple-touch-icon" href="./assets/logo192.png" />
-
-    <link rel="manifest" href="manifest.json" />
-    <link rel="stylesheet" href="styles.css" />
-
-    <script src="main.js" defer></script>
-
-    <title>Michał Czyż</title>
-</head>
-
-<body>
-    <div class="page">
-        <h1 class="header">
-            Hi, I'm Mike 👋🏻
-        </h1>
-
-        <div class="bio">
-            <h4>A Student and a Software Developer</h4>
-
-            <p>I'm currently working on new fascinating projects,
-                so be sure to follow me!</p>
-
-            <h4>About Mike</h4>
-            <ul>
-                <li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.cpp</code> <code>.md</code></li>
-                <li>🏗️ Developed: <a href="https://github.com/eRgo35/lyra">lyra</a>, <a href="https://github.com/eRgo35/ah">ah</a>, <a href="https://github.com/eRgo35/ti">ti</a>, <a href="https://github.com/eRgo35/ascii">ascii</a>, etc...</li>
-                <li>🍚 Check out my: <a href="https://github.com/eRgo35/dots">dotfiles</a>, <a href="https://github.com/eRgo35/nix-config">nix flake</a></li>
-            </ul>
-
-            <h4>Mike around the web</h4>
-            <ul>
-                <li>🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a></li>
-                <li>💼 find me on <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a></li>
-                <li>📹 visit my <a href="https://www.youtube.com/@eRgo35">YouTube</a></li>
-            </ul>
-        </div>
-
-        <div class="world">
-            <!-- <p>Also, checkout <a href="https://scientia.c2yz.com">this site</a>. You might find it interesting. 👀</p> -->
-
-            <!-- <p>[📎 <a href="assets/resume.pdf"">resume</a>] [📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p> -->
-            <p>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</p>
-
-            <span class="separator">. . .</span>
-        </div>
-
-        <div class="aside">
-            <div class="avatar-wrapper">
-                <img src="assets/mike-czyz.webp" class="avatar" width="2.5in" height="2.5in" />
-                <div class="theme">
-                    <i class="material-icons">&#xe51c</i>
-                    <span class="theme-text">Dark Mode</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="footer">
-            <div class="copyright">
-                &copy; <span id="year">2024</span>
-            </div>
-            <div class="gpg">
-                <a href="assets/mike-czyz-public.gpg" target="_blank" class="gpg-key">
-                    🔑
-                    <span>GPG</span>
-                </a>
-            </div>
-        </div>
-    </div>
-</body>
-
-</html>
--- a/public/main.js
+++ b/public/main.js
@@ -1,50 +0,0 @@
-const root = document.documentElement;
-const themeText = document.querySelector('.theme-text');
-const themeIcon = document.querySelector('.material-icons');
-
-const isDarkMode = () => root.classList.contains('dark');
-
-const setDarkMode = () => {
-  root.classList.add('dark');
-  themeText.textContent = 'Dark Mode';
-  themeIcon.innerHTML = '&#xe51c';
-};
-
-const setLightMode = () => {
-  root.classList.remove('dark');
-  themeText.textContent = 'Light Mode';
-  themeIcon.innerHTML = '&#xe518';
-};
-
-const toggleTheme = () => {
-  if (isDarkMode()) {
-    setLightMode();
-    localStorage.setItem('preferredTheme', 'light');
-  } else {
-    setDarkMode();
-    localStorage.setItem('preferredTheme', 'dark');
-  }
-};
-
-const checkPreferredTheme = () => {
-  const preferredTheme = localStorage.getItem('preferredTheme');
-  if (preferredTheme === 'dark') {
-    setDarkMode();
-  } else if (preferredTheme === 'light') {
-    setLightMode();
-  } else {
-    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    if (prefersDarkScheme) {
-      setDarkMode();
-    } else {
-      setLightMode();
-    }
-  }
-};
-
-document.querySelector("#year").innerHTML = new Date().getFullYear();
-
-checkPreferredTheme();
-
-const themeButton = document.querySelector('.theme');
-themeButton.addEventListener('click', toggleTheme);
--- a/public/robots.txt
+++ b/public/robots.txt
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,70 +1,62 @@
-@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
-@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+/* Coiny Regular */
+@font-face {
+  font-family: 'Coiny';
+  src: url('/assets/fonts/Coiny-Regular-subset.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+

 * {
    transition: background-color 0.15s ease-in-out;
 }

-html {
-    --rosewater: #dc8a78;
-    --flamingo: #dd7878;
-    --pink: #ea76cb;
-    --mauve: #8839ef;
-    --red: #d20f39;
-    --maroon: #e64553;
-    --peach: #fe640b;
-    --yellow: #df8e1d;
-    --green: #40a02b;
-    --teal: #179299;
-    --sky: #04a5e5;
-    --sapphire: #209fb5;
-    --blue: #1e66f5;
-    --lavender: #7287fd;
-    --text: #434f69;
-    --subtext1: #5c5f77;
-    --subtext0: #6c6f85;
-    --overlay2: #7c7f93;
-    --overlay1: #8c8fa1;
-    --overlay0: #9ca0b0;
-    --surface2: #acb0be;
-    --surface1: #bcc0cc;
-    --surface0: #ccd0da;
-    --base: #eff1f5;
-    --mantle: #e6e9ef;
-    --crust: #dce0e8;
+:root {
+    --base: #faf4ed;
+    --surface: #fffaf3;
+    --overlay: #f2e9e1;
+    --muted: #9893a5;
+    --subtle: #797593;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+    --highlight-low: #f4ede8;
+    --highlight-med: #dfdad9;
+    --highlight-high: #cecacd;
 }

 .dark {
-    --rosewater: #f4dbd6;
-    --flamingo: #f0c6c6;
-    --pink: #f5bde6;
-    --mauve: #c6a0f6;
-    --red: #ed8796;
-    --maroon: #ee99a0;
-    --peach: #f5a97f;
-    --yellow: #eed49f;
-    --green: #a6da95;
-    --teal: #8bd5ca;
-    --sky: #91d7e3;
-    --sapphire: #7dc4e4;
-    --blue: #8aadf4;
-    --lavender: #b7bdf8;
-    --text: #cad3f5;
-    --subtext1: #b8c0e0;
-    --subtext0: #a5adcb;
-    --overlay2: #939ab7;
-    --overlay1: #8087a2;
-    --overlay0: #6e738d;
-    --surface2: #5b6078;
-    --surface1: #494d64;
-    --surface0: #363a4f;
-    --base: #24273a;
-    --mantle: #1e2030;
-    --crust: #181926;
+    --base: #191724;
+    --surface: #1f1d2e;
+    --overlay: #26233a;
+    --muted: #6e6a86;
+    --subtle: #908caa;
+    --text: #e0def4;
+    --love: #eb6f92;
+    --gold: #f6c177;
+    --rose: #ebbcba;
+    --pine: #31748f;
+    --foam: #9ccfd8;
+    --iris: #c4a7e7;
+    --highlight-low: #21202e;
+    --highlight-med: #403d52;
+    --highlight-high: #524f67;
 }

+.coiny-regular {
+  font-family: "Coiny", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+
+
 ::selection {
-    background-color: var(--overlay0);
+    background-color: var(--overlay);
 }

@keyframes fadein {
@@ -89,11 +81,11 @@ body {
    width: 100%;
    min-height: 100vh;
    /* height: 100vh; */
-    background-color: var(--crust);
+    font-family: system-ui, sans-serif;
+    background-color: var(--base);
    color: var(--text);
    display: grid;
    place-items: center;
-    font-family: "Schibsted Grotesk", sans-serif;
    overflow: auto;
    overflow-anchor: none;
 }
@@ -105,16 +97,16 @@ body {
    box-sizing: border-box;
    width: 8.5in;
    /* height: 11in; */
-    height: 8in;
+    height: 9in;
    margin-top: 5px;
    margin-bottom: 5px;
-    background-color: var(--base);
+    background-color: var(--surface);
    padding: 0.5in;
    position: relative;
    animation: 0.5s ease-out 0s 1 fadein;
    display: grid;
    grid-template-columns: 1fr 2.5in;
-    grid-template-rows: 0.85in 0.2fr 0.4fr auto;
+    grid-template-rows: 1.1in 0.2fr 0.4fr auto;
    gap: 0px 0px;
    grid-template-areas:
        "header header"
@@ -126,35 +118,45 @@ body {
 }

 a {
-    color: var(--sapphire);
+    color: var(--foam);
    transition:
        0.1s color ease-in-out,
        0.1s text-decoration ease-in-out;
    text-decoration: none;
+    font-weight: 500;
 }

 a:hover,
 a:active,
 a:focus {
-    color: var(--blue);
+    color: var(--iris);
    text-decoration: underline;
 }

 .header {
    grid-area: header;
+    font-size: 3em;
 }

 .bio {
    grid-area: bio;
    padding: 0 0.5in 0 0;
    text-align: justify;
+    overflow-wrap: break-word;
+    hyphens: auto;
+}
+
+.small-text {
+    font-style: italic;
+    font-size: 0.8em;
+    padding: 0;
+    margin: 0;
 }

 .world {
    grid-area: world;
-}
-
-.separator {
+    display: flex;
+    gap: 0.5em;
 }

 .aside {
@@ -171,6 +173,7 @@ a:focus {
    grid-template-columns: 0.3fr 0.7fr;
    column-gap: 0.5in;
    align-self: end;
+    margin-top: 1.5em;
 }

 .copyright {
@@ -192,13 +195,64 @@ a:focus {
    position: relative;
 }

+.button {
+    display: block;
+    padding: 1em 2em;
+    color: var(--text);
+    z-index: 0;
+    position: relative;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.button:hover, .button:active, .button:focus {
+    text-decoration: unset;
+}
+
+.button:before {
+    content: '';
+    background: linear-gradient(45deg, var(--love), var(--gold), var(--rose), var(--pine), var(--foam), var(--iris), var(--love));
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    background-size: 200%;
+    z-index: -1;
+    filter: blur(4px);
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    animation: glowing 30s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+    opacity: 1;
+}
+
+.button:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--base);
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+    transition: background 0.1s ease-in-out;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}
+
 .theme {
    position: absolute;
    bottom: 0.125in;
    right: 0.125in;
-    background-color: var(--mantle);
-    color: var(--yellow);
-    border: 1px solid var(--overlay0);
+    background-color: var(--base);
+    color: var(--gold);
+    border: 1px solid var(--overlay);
    border-radius: 10in;
    margin: 0.125in 0 0;
    padding: 0.125in;
@@ -216,7 +270,8 @@ a:focus {
 }

 .material-icons {
-    font-family: "Material Icons";
+    font-size: 1.25em;
+    font-style: normal;
 }

 .theme-text {
@@ -307,7 +362,7 @@ a:focus {
        box-shadow: none;
        display: grid;
        grid-template-columns: 1fr;
-        grid-template-rows: 0.85in 0.2fr 0.4fr auto;
+        grid-template-rows: 0.1fr 0.2fr 0.4fr auto;
        gap: 0px 0px;
        grid-template-areas:
            "header"
@@ -319,6 +374,10 @@ a:focus {
        overflow: auto;
    }

+    .header {
+        font-size: 2em;
+    }
+
    .theme:focus,
    .theme:active,
    .theme:hover {
@@ -332,7 +391,8 @@ a:focus {
    .bio {
        grid-template-columns: none;
        grid-template-rows: 2.5in 1fr;
-        place-items: center;
+        justify-content: center;
+        align-items: center;
        padding: 0;
    }

@@ -340,6 +400,11 @@ a:focus {
        grid-row: 1;
    }

+    .small-text {
+        text-align: center;
+        margin: 0.5em 0;
+    }
+
    .footer {
        margin-top: 0.25in;
        position: static;
--- a/sw.js
+++ b/sw.js
@@ -0,0 +1,54 @@
+const CACHE_VERSION = "v1-202507271"; // update this on every deploy!
+const CACHE_NAME = `c2yz-cache-${CACHE_VERSION}`;
+
+const ASSETS_TO_CACHE = [
+  "/",
+  "/index.html",
+  "/styles.css",
+  "/main.js",
+  "/assets/fonts/Coiny-Regular-subset.ttf",
+  "/assets/card.png",
+  "/assets/mike-czyz.webp",
+  "/manifest.json",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS_TO_CACHE))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
+        )
+      )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request, { ignoreSearch: true }).then(
+      (cached) =>
+        cached ||
+        fetch(event.request)
+          .then((response) => {
+            return response;
+          })
+          .catch(() => {
+            // Optional: fallback response when offline and not cached
+            // return caches.match('/offline.html');
+          })
+    )
+  );
+});
+
+self.addEventListener("message", (event) => {
+  if (event.data === "skipWaiting") self.skipWaiting();
+});
Author	SHA1	Message	Date
Michał Czyż	bfa650ac17	fix: small text breaking	2025-07-27 14:19:54 +02:00
Michał Czyż	4843c42147	fix: changed lazy load into fastfetch	2025-07-27 14:05:00 +02:00
Michał Czyż	b961e4e151	feat: added more optimization and sw	2025-07-27 13:55:46 +02:00
Michał Czyż	6a864ef8ec	feat: big page performance optimizations	2025-07-26 14:55:06 +02:00
Michał Czyż	1f265df89c	fix: invalid path still	2025-07-26 14:06:48 +02:00
Michał Czyż	13b5516e72	fix: tags path fix	2025-07-26 14:04:24 +02:00
Michał Czyż	82f70bdc43	fix: minor title and meta changes	2025-07-26 13:58:50 +02:00
Michał Czyż	1cad16ee38	feat: SEO	2025-07-26 13:45:45 +02:00
Michał Czyż	5cb6da9109	feat: minor site improvements	2025-07-10 17:54:04 +02:00
Michał Czyż	1afc00ce7a	fix: typo fixed in cv	2025-07-10 17:31:31 +02:00
Michał Czyż	31cab15560	chore: updated README text	2025-07-06 00:04:44 +02:00
Michał Czyż	e02f1c4bc0	feat: new colors, updated bio, and mode..	2025-07-06 00:03:07 +02:00
Michał Czyż	eb66cb1a8b	fix: changed file extension	2025-07-06 00:02:00 +02:00
Michał Czyż	51c7899253	chore: added new CV	2025-07-05 23:52:30 +02:00
Michał Czyż	6acd12773d	chore: new README	2025-07-05 23:51:51 +02:00
Michał Czyż	2e51e707c2	chore: updated repo structure	2025-07-05 21:20:52 +02:00