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
10 changed files with 428 additions and 132 deletions
--- a/assets/Michał_Czyż_CV.pdf
+++ b/assets/Michał_Czyż_CV.pdf
--- 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/assets/mike-czyz.webp
+++ b/assets/mike-czyz.webp
--- a/index.html
+++ b/index.html
@@ -1,110 +1,343 @@
 <!DOCTYPE html>
 <html lang="en">
-
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="./assets/favicon.ico" />
+    <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="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ż, 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="" />
+    <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ż" />
+    <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 a software developer." />
-    <meta property="og:image" content="./assets/card.png" />
+    <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ż" />
-    <meta name="twitter:description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta name="twitter:image" content="./assets/card.png">
+    <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" />
+    <link
+      rel="apple-touch-icon"
+      href="/assets/logo192.png"
+      media="print"
+      onload="this.media='all'"
+    />
+    <link rel="manifest" href="/manifest.json" />

-    <link rel="manifest" href="manifest.json" />
-    <link rel="stylesheet" href="styles.css" />
+    <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>

-    <script src="main.js" defer></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;
+      }

-    <title>Michał Czyż</title>
+      .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>
+      <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> -->
-
-            <p>[📎 <a href="assets/Michał_Czyż_CV.pdf"">cv</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> -->
+        <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" width="2.5in" height="2.5in" />
-                <div class="theme">
-                    <i class="material-icons">&#xe51c</i>
+          <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">2024</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>
@@ -112,5 +345,4 @@
      </div>
    </div>
  </body>
-
 </html>
--- a/main.js
+++ b/main.js
@@ -1,50 +1,39 @@
 const root = document.documentElement;
-const themeText = document.querySelector('.theme-text');
-const themeIcon = document.querySelector('.material-icons');
+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 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 = '&#xe518';
-};
-
-const toggleTheme = () => {
-  if (isDarkMode()) {
-    setLightMode();
-    localStorage.setItem('preferredTheme', 'light');
-  } else {
-    setDarkMode();
-    localStorage.setItem('preferredTheme', 'dark');
+function updateTheme(mode) {
+  root.classList.toggle("dark", mode === "dark");
+  themeText.textContent = THEMES[mode].text;
+  themeIcon.textContent = THEMES[mode].icon;
+  localStorage.setItem("preferredTheme", mode);
 }
-};

-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();
+function getPreferredTheme() {
+  const stored = localStorage.getItem("preferredTheme");
+  if (stored === "dark" || stored === "light") {
+    return stored;
  }
+
+  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/manifest.json
+++ b/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/styles.css
+++ b/styles.css
@@ -1,6 +1,12 @@
-@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");
-@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
+/* 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;
@@ -75,11 +81,11 @@ body {
    width: 100%;
    min-height: 100vh;
    /* height: 100vh; */
+    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;
 }
@@ -91,7 +97,7 @@ body {
    box-sizing: border-box;
    width: 8.5in;
    /* height: 11in; */
-    height: 8in;
+    height: 9in;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--surface);
@@ -112,7 +118,7 @@ body {
 }

 a {
-    color: var(--pine);
+    color: var(--foam);
    transition:
        0.1s color ease-in-out,
        0.1s text-decoration ease-in-out;
@@ -149,6 +155,8 @@ a:focus {

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

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

 .copyright {
@@ -261,7 +270,8 @@ a:focus {
 }

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

 .theme-text {
@@ -352,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"
@@ -364,6 +374,10 @@ a:focus {
        overflow: auto;
    }

+    .header {
+        font-size: 2em;
+    }
+
    .theme:focus,
    .theme:active,
    .theme:hover {
@@ -377,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;
    }

@@ -385,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