fix: small text breaking

fix: changed lazy load into fastfetch
feat: added more optimization and sw
2026-02-04 13:36:10 +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
4 changed files with 389 additions and 133 deletions
--- a/index.html
+++ b/index.html
@@ -1,21 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <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="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="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ż" />
+    <meta
+      name="page-topic"
+      content="Personal Website, Software Developer, Michał Czyż, Mike Czyż"
+    />

    <!--Facebook Open Graph-->
    <meta property="og:url" content="https://c2yz.com" />
@@ -23,8 +30,10 @@
    <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: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-->
@@ -32,15 +41,181 @@
    <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">
+    <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" />
+    <link
+      rel="apple-touch-icon"
+      href="/assets/logo192.png"
+      media="print"
+      onload="this.media='all'"
+    />
    <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/styles.css" />

-    <script src="/main.js" defer></script>
+    <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">
      {
@@ -63,76 +238,111 @@
    </script>

    <title>Michał Czyż - Student, Software Developer | Official Website</title>
-</head>
+  </head>

-<body>
+  <body>
+    <script src="/main.js" defer></script>
    <div class="page">
-        <h1 class="header coiny-regular">
-            Hi, I'm Mike 👋🏻
-        </h1>
+      <h1 class="header coiny-regular">Hi, I'm Mike 👋🏻</h1>

      <div class="bio">
-            <p class="small-text">I'm currently working on new fascinating projects, so be sure to follow me!</p>
+        <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. 
+          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.
+          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>
-
-            <!--        
-            <ul>
-                <li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.tex</code> <code>.md</code></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> -->
+        <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>
+          <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> -->
-
-            <span>[📎 <a href="/assets/Michał_Czyż_CV.pdf"">cv</a>]</span>
+        <span>[📎 <a href="/assets/Michał_Czyż_CV.pdf">cv</a>]</span>
        <span>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</span>
-            <!-- <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" alt="Michał Czyż" class="avatar" width="2.5in" height="2.5in" />
-                <div class="theme" aria-label="Toggle dark/light mode" role="button" tabindex="0">
+          <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>
+        <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">
+          <a
+            href="/assets/mike-czyz-public.gpg"
+            target="_blank"
+            class="gpg-key"
+          >
            🔑
            <span>GPG</span>
          </a>
        </div>
      </div>
    </div>
-</body>
-
+  </body>
 </html>
--- a/main.js
+++ b/main.js
@@ -2,51 +2,38 @@ 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 = "🌙";
+const THEMES = {
+  light: { class: "", text: "Light Mode", icon: "☀️" },
+  dark: { class: "dark", text: "Dark Mode", icon: "🌙" },
 };

-const setLightMode = () => {
-  root.classList.remove("dark");
-  themeText.textContent = "Light Mode";
-  themeIcon.innerHTML = "☀️";
-};
+function updateTheme(mode) {
+  root.classList.toggle("dark", mode === "dark");
+  themeText.textContent = THEMES[mode].text;
+  themeIcon.textContent = THEMES[mode].icon;
+  localStorage.setItem("preferredTheme", mode);
+}

-const toggleTheme = () => {
-  if (isDarkMode()) {
-    setLightMode();
-    localStorage.setItem("preferredTheme", "light");
-  } else {
-    setDarkMode();
-    localStorage.setItem("preferredTheme", "dark");
+function getPreferredTheme() {
+  const stored = localStorage.getItem("preferredTheme");
+  if (stored === "dark" || stored === "light") {
+    return stored;
  }
-};

-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();
-    }
-  }
-};
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}

-document.querySelector("#year").innerHTML = new Date().getFullYear();
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker.register("/sw.js");
+  });
+}

-checkPreferredTheme();
+navigator.serviceWorker.addEventListener("controllerchange", () => {
+  console.log("New version available, reloading...");
+  window.location.reload();
+});

-const themeButton = document.querySelector(".theme");
-themeButton.addEventListener("click", toggleTheme);
+updateTheme(getPreferredTheme());
--- a/styles.css
+++ b/styles.css
@@ -400,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