fix: small text breaking

.firebaserc

@@ -1,5 +0,0 @@
-{
-  "projects": {
-    "default": "michal-czyz-portfolio"
-  }
-}

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:
+- **Email**: [mike@c2yz.com](mailto:mike@c2yz.com)
-`sudo npm install -g firebase-tools`
+- **GitHub**: [@eRgo35](https://github.com/eRgo35)
-`firebase login`
+- **LinkedIn**: [mike-czyz](https://www.linkedin.com/in/mike-czyz)
-`firebase deploy --only hosting:mike-czyz-website`
+- **YouTube**: [@eRgo35](https://www.youtube.com/@eRgo35)
+
+---
+
+Built with ❤️ by Michał Czyż

assets/mike-czyz-public.gpg

@@ -0,0 +1,109 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+aw==
+=ZqUc
+-----END PGP PUBLIC KEY BLOCK-----

firebase.json

@@ -1,17 +0,0 @@
-{
-  "hosting": {
-    "public": "public",
-    "site": "mike-czyz-website",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
-    ]
-  }
-}

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>

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());

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",

public/assets/mike-czyz-public.asc

@@ -1,65 +0,0 @@
------BEGIN PGP PUBLIC KEY BLOCK-----
-
-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
-Fw2jcFqXvtJYIovZkqbCRHUwTRaCTiVXpRcC
-=jrZb
------END PGP PUBLIC KEY BLOCK-----

public/index.html

@@ -1,109 +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="#000000" />
-  <meta name="description"
-    content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
-  <meta name="author" content="Michael Czyż" />
-  <meta name="copyright" content="Michael Czyż, 2023 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://mczyz.icu" />
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="Michael Czyż" />
-  <meta property="og:site_name" content="Michael Czyż" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:description"
-    content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
-  <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="Michael Czyż" />
-  <meta name="twitter:description"
-    content="Michael Czyż is a student and a frontend developer creating websites in many technologies and frameworks." />
-  <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>Michael Czyż</title>
-</head>
-
-<body>
-  <div class="page">
-    <h1 class="header">
-      Hi, I'm Mike 👋🏻 👨🏻‍💻
-    </h1>
-
-    <div class="bio">
-      <p>I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to
-        get closer to the metal 🔨 so I create software in C++, C#, Rust 🦀 and Python. Electron is terrifying me ⚛.</p>
-      <p>I'm currently working on some new fascinating projects, so be sure to follow me to not miss out on new stuff I'll be releasing soon.</p>
-      <p>I built a <a href="https://github.com/eRgo35/Project-TSI">Web App</a> using Angular Material framework, a
-        simple <a href="https://github.com/eRgo35/Server-Manager">Server Manager</a> program for Windows and much
-        more! I'm also a co-author of a Discord <a href="https://github.com/HiveMindStudios/MelvinJS">multipurpose
-          bot</a> written in JavaScript.</p>
-      <p>I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence
-        👁️.</p>
-    </div>
-
-    <div class="world">
-      <h2>Find 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> channel 📹</li>
-        <li>and follow me on <a href="https://twitter.com/Mike_Czyz_">X</a> 🐦</li>
-      </ul>
-
-      <p>Psst! You can also take a look at my <a href="https://github.com/eRgo35/dots">dotfiles</a><br /> to find my latest rice 🍚.</p>
-      
-      <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>
-    </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">
-        Copyright &copy; <span id="year">2023</span> All rights reserved
-      </div>
-      <div class="gpg">
-        🔑
-        <a href="assets/mike-czyz-public.asc" class="pgp-key">
-          <span>710D</span>
-          <span>3407</span>
-          <span>D37F</span>
-          <span>F123</span>
-        </a>
-      </div>
-    </div>
-  </div>
-</body>
-
-</html>

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);

public/styles.css

@@ -1,310 +0,0 @@
-@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");
-
-* {
-  transition: background-color 0.2s 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;
-}
-
-.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;
-}
-
-::selection {
-  background-color: var(--overlay0);
-}
-
-@keyframes fadein {
-  0% {
-    opacity: 0;
-    transform: scale(97.5%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(100%);
-  }
-}
-
-html,
-body {
-  margin: 0;
-  height: 100vh;
-  background-color: var(--surface0);
-  color: var(--text);
-  display: grid;
-  place-items: center;
-  font-family: "Schibsted Grotesk", sans-serif;
-}
-
-.page {
-  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px,
-    rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
-  box-sizing: border-box;
-  width: 8.5in;
-  height: 11in;
-  background-color: var(--base);
-  padding: 0.5in;
-  position: relative;
-  animation: 0.4s ease-out 0s 1 fadein;
-  display: grid;
-  grid-template-columns: 1fr 2.5in;
-  grid-template-rows: 0.85in 0.2fr 0.4fr auto;
-  gap: 0px 0px;
-  grid-template-areas:
-    "header header"
-    "bio aside"
-    "world aside"
-    "footer footer";
-}
-
-a {
-  color: var(--sapphire);
-  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
-  text-decoration: none;
-}
-
-a:hover,
-a:active,
-a:focus {
-  color: var(--blue);
-  text-decoration: underline;
-}
-
-.header {
-  grid-area: header;
-}
-
-.bio {
-  grid-area: bio;
-  padding: 0 0.5in 0 0;
-  text-align: justify;
-}
-
-.world {
-  grid-area: world;
-}
-
-.aside {
-  grid-area: aside;
-  display: flex;
-  flex-direction: column;
-  justify-content: top;
-  align-items: center;
-}
-
-.footer {
-  grid-area: footer;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 0.5in;
-  align-self: end;
-}
-
-.copyright {
-  text-align: left;
-}
-
-.gpg {
-  text-align: right;
-}
-
-.avatar {
-  width: 2.5in;
-  height: 2.5in;
-  border-radius: 100%;
-  pointer-events: none;
-}
-
-.avatar-wrapper {
-  position: relative;
-}
-
-.theme {
-  position: absolute;
-  bottom: 0.125in;
-  right: 0.125in;
-  background-color: var(--surface1);
-  border: 1px solid var(--overlay0);
-  border-radius: 10in;
-  margin: 0.125in 0 0;
-  padding: 0.125in;
-  max-width: 0.25in;
-  height: 0.25in;
-  cursor: pointer;
-  transition: max-width 0.5s ease;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-}
-
-.theme:hover {
-  max-width: 2.5in;
-}
-
-.material-icons {
-  font-family: "Material Icons";
-}
-
-.theme-text {
-  white-space: nowrap;
-  padding: 0 0.125in;
-  user-select: none;
-}
-.pgp-key:hover,
-.gpg-key:active,
-.gpg-key:focus {
-  text-decoration: none;
-  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
-}
-
-.pgp-key:hover span,
-.gpg-key:active span,
-.gpg-key:focus span {
-  text-decoration: underline;
-  transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
-}
-
-@media only screen and (min-width: 768px) and (max-width: 900px) {
-  /* tablets and desktop */
-  .page {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0.25in;
-    box-shadow: none;
-  }
-
-  .footer {
-    margin-top: 0.25in;
-    grid-template-rows: none;
-    grid-template-columns: auto;
-  }
-
-  .theme:focus, .theme:active, .theme:hover {
-    max-width: 0.25in;
-  }
-
-  .theme-text {
-    display: none;
-  }
-
-  .copyright {
-    text-align: center;
-  }
-
-  .gpg {
-    text-align: center;
-    grid-row: 1;
-  }
-}
-
-@media only screen and (max-width: 767px) {
-  /* phones */
-  .page {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0.25in;
-    box-shadow: none;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 0.85in 0.2fr 0.4fr auto;
-    gap: 0px 0px;
-    grid-template-areas:
-      "header"
-      "aside"
-      "bio"
-      "world"
-      "footer";
-  }
-
-  .theme:focus, .theme:active, .theme:hover {
-    max-width: 0.25in;
-  }
-
-  .theme-text {
-    display: none;
-  }
-
-  .bio {
-    grid-template-columns: none;
-    grid-template-rows: 2.5in 1fr;
-    place-items: center;
-    padding: 0;
-  }
-
-  .avatar {
-    grid-row: 1;
-  }
-
-  .footer {
-    margin-top: 0.25in;
-    position: static;
-    grid-template-rows: none;
-    grid-template-columns: auto;
-    width: 100%;
-  }
-
-  .copyright {
-    text-align: center;
-  }
-
-  .gpg {
-    text-align: center;
-    grid-row: 1;
-  }
-}

styles.css

@@ -0,0 +1,424 @@
+/* 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;
+}
+
+: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 {
+    --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(--overlay);
+}
+
+@keyframes fadein {
+    0% {
+        opacity: 0;
+        transform: scale(100.5%);
+        margin-top: 4in;
+        overflow: clip;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(100%);
+        margin-top: 5px;
+        overflow: auto;
+    }
+}
+
+html,
+body {
+    margin: 0;
+    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;
+    overflow: auto;
+    overflow-anchor: none;
+}
+
+.page {
+    box-shadow:
+        rgba(0, 0, 0, 0.19) 0px 10px 20px 0px,
+        rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
+    box-sizing: border-box;
+    width: 8.5in;
+    /* height: 11in; */
+    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: 0px 0px;
+    grid-template-areas:
+        "header header"
+        "bio aside"
+        "world aside"
+        "footer footer";
+    /* clip-path: polygon(1in 0%, 100% 0, 100% 100%, 0 100%, 0 1in); */
+    overflow: hidden;
+}
+
+a {
+    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(--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;
+    display: flex;
+    gap: 0.5em;
+}
+
+.aside {
+    grid-area: aside;
+    display: flex;
+    flex-direction: column;
+    justify-content: top;
+    align-items: center;
+}
+
+.footer {
+    grid-area: footer;
+    display: grid;
+    grid-template-columns: 0.3fr 0.7fr;
+    column-gap: 0.5in;
+    align-self: end;
+    margin-top: 1.5em;
+}
+
+.copyright {
+    text-align: left;
+}
+
+.gpg {
+    text-align: right;
+}
+
+.avatar {
+    width: 2.5in;
+    height: 2.5in;
+    border-radius: 100%;
+    pointer-events: none;
+}
+
+.avatar-wrapper {
+    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(--base);
+    color: var(--gold);
+    border: 1px solid var(--overlay);
+    border-radius: 10in;
+    margin: 0.125in 0 0;
+    padding: 0.125in;
+    max-width: 0.25in;
+    height: 0.25in;
+    cursor: pointer;
+    transition: max-width 0.5s ease;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+}
+
+.theme:hover {
+    max-width: 2.5in;
+}
+
+.material-icons {
+    font-size: 1.25em;
+    font-style: normal;
+}
+
+.theme-text {
+    white-space: nowrap;
+    padding: 0 0.125in;
+    user-select: none;
+}
+
+.gpg-key:hover,
+.gpg-key:active,
+.gpg-key:focus {
+    text-decoration: none;
+    transition:
+        0.1s color ease-in-out,
+        0.1s text-decoration ease-in-out;
+}
+
+.gpg-key:hover span,
+.gpg-key:active span,
+.gpg-key:focus span {
+    text-decoration: underline;
+    transition:
+        0.1s color ease-in-out,
+        0.1s text-decoration ease-in-out;
+}
+
+@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;
+    }
+
+    /* tablets and desktop */
+    .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;
+    }
+
+    .theme:focus,
+    .theme:active,
+    .theme:hover {
+        max-width: 0.25in;
+    }
+
+    .theme-text {
+        display: none;
+    }
+
+    .copyright {
+        text-align: center;
+    }
+
+    .gpg {
+        text-align: center;
+        grid-row: 1;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    html,
+    body {
+        overflow: auto;
+    }
+
+    /* phones */
+    .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;
+    }
+
+    .header {
+        font-size: 2em;
+    }
+
+    .theme:focus,
+    .theme:active,
+    .theme:hover {
+        max-width: 0.25in;
+    }
+
+    .theme-text {
+        display: none;
+    }
+
+    .bio {
+        grid-template-columns: none;
+        grid-template-rows: 2.5in 1fr;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+    }
+
+    .avatar {
+        grid-row: 1;
+    }
+
+    .small-text {
+        text-align: center;
+        margin: 0.5em 0;
+    }
+
+    .footer {
+        margin-top: 0.25in;
+        position: static;
+        grid-template-rows: none;
+        grid-template-columns: auto;
+        width: 100%;
+    }
+
+    .copyright {
+        text-align: center;
+    }
+
+    .gpg {
+        text-align: center;
+        grid-row: 1;
+    }
+}

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();
+});