fix: small text breaking

.gitignore

@@ -1,7 +1,66 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+firebase-debug.*.log*
 
-# These are backup files generated by rustfmt
-**/*.rs.bk
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

Cargo.toml

@@ -1,34 +0,0 @@
-[package]
-name = "website"
-version = "0.1.0"
-authors = ["Michał Czyż <mike@c2yz.com>"]
-edition = "2021"
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[dependencies]
-dioxus = { version = "0.6.0", features = ["router", "fullstack"] }
-dioxus-material-icons = "3.0.0"
-dioxus-motion = { version = "0.3.1", optional = true, default-features = false }
-
-[features]
-default = ["web"]
-web = ["dioxus/web", "dioxus-motion/web", "dioxus-motion/transitions"]
-desktop = [
-    "dioxus/desktop",
-    "dioxus-motion/desktop",
-    "dioxus-motion/transitions",
-]
-mobile = ["dioxus/mobile", "dioxus-motion/desktop", "dioxus-motion/transitions"]
-
-[profile]
-
-[profile.wasm-dev]
-inherits = "dev"
-opt-level = 1
-
-[profile.server-dev]
-inherits = "dev"
-
-[profile.android-dev]
-inherits = "dev"

Dioxus.toml

@@ -1,21 +0,0 @@
-[application]
-
-[web.app]
-
-# HTML title tag content
-title = "website"
-
-# include `assets` in web platform
-[web.resource]
-
-# Additional CSS style files
-style = []
-
-# Additional JavaScript files
-script = []
-
-[web.resource.dev]
-
-# Javascript code file
-# serve: [dev-server] only
-script = []

README.md

@@ -1,37 +1,14 @@
-# Mike's new website
+# Mike's Personal Website
 
-## Development
+A minimalistic, modern personal website.
 
-Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
+## Mike around the web
 
-```bash
-project/
-├─ assets/ # Any assets that are used by the app should be placed here
-├─ src/
-│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
-├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
-```
+- **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)
 
-### Tailwind
+---
 
-1. Install npm: <https://docs.npmjs.com/downloading-and-installing-node-js-and-npm>
-2. Install the Tailwind CSS CLI: <https://tailwindcss.com/docs/installation>
-3. Run the following command in the root of the project to start the Tailwind CSS compiler:
-
-```bash
-npx tailwindcss -i ./tailwind.css -o ./assets/tailwind.css --watch
-```
-
-### Serving Your App
-
-Run the following command in the root of your project to start developing with the default platform:
-
-```bash
-dx serve --platform web
-```
-
-To run for a different platform, use the `--platform platform` flag. E.g.
-
-```bash
-dx serve --platform desktop
-```
+Built with ❤️ by Michał Czyż

assets/main.css

@@ -1,103 +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");
-
-:root {
-    --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;
-}
-
-::selection {
-    background-color: var(--overlay0);
-}
-
-html,
-body {
-    margin: 0;
-    width: 100%;
-    background-color: var(--base);
-    color: var(--text);
-    font-family: "Schibsted Grotesk", sans-serif;
-    overflow: auto;
-    overflow-anchor: none;
-}
-
-a {
-    color: var(--text);
-    transition:
-        0.1s color ease-in-out;
-    text-decoration: none;
-}
-
-a:hover,
-a:active,
-a:focus {
-    color: var(--subtext0)
-}
-
-#navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin: 1em 3em;
-}
-
-.navbar-main {
-    text-decoration: none;
-    font-size: 1.6em;
-}
-
-.navbar-theme {
-    width: 2em;
-    height: 2em;
-    font-size: 1em;
-    border: 1px solid var(--overlay0);
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--yellow)
-}
-
-.navbar-theme:hover,
-.navbar-theme:active,
-.navbar-theme:focus {
-    cursor: pointer;
-}
-
-.navbar-end {
-    display: flex;
-    align-items: center;
-    gap: 1em;
-}
-
-.content-wrapper {
-    margin: 2em 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-}

clippy.toml

@@ -1,8 +0,0 @@
-await-holding-invalid-types = [
-  "generational_box::GenerationalRef",
-  { path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
-  "generational_box::GenerationalRefMut",
-  { path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
-  "dioxus_signals::Write",
-  { path = "dioxus_signals::Write", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
-]

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

robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/main.rs

@@ -1,78 +0,0 @@
-use crate::pages::about::About;
-use crate::pages::certifications::Certifications;
-use crate::pages::contact::Contact;
-use crate::pages::education::Education;
-use crate::pages::home::Home;
-use crate::pages::projects::Projects;
-
-use dioxus::prelude::*;
-use dioxus_material_icons::{MaterialIcon, MaterialIconStylesheet};
-use dioxus_motion::prelude::*;
-
-mod pages;
-
-#[derive(Debug, Clone, Routable, PartialEq, MotionTransitions)]
-#[rustfmt::skip]
-enum Route {
-    #[layout(Navbar)]
-        #[route("/")]
-        #[transition(Fade)]
-        Home {},
-        #[route("/about")]
-        About {},
-        #[route("/projects")]
-        Projects {},
-        #[route("/education")]
-        Education {},
-        #[route("/certifications")]
-        Certifications {},
-        #[route("/contact")]
-        Contact {},
-}
-
-const FAVICON: Asset = asset!("/assets/favicon.ico");
-const MAIN_CSS: Asset = asset!("/assets/main.css");
-
-fn PageNotFound(_route: Vec<String>) -> Element {
-    rsx! {
-        div { "404 Not Found" }
-    }
-}
-
-fn main() {
-    dioxus::launch(App);
-}
-
-#[component]
-fn App() -> Element {
-    rsx! {
-        document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: MAIN_CSS }
-        MaterialIconStylesheet {}
-        Router::<Route> {}
-    }
-}
-
-/// Shared navbar component.
-#[component]
-fn Navbar() -> Element {
-    rsx! {
-        div { id: "navbar",
-            div { class: "navbar-start",
-                Link { class: "navbar-main", to: Route::Home {}, "Michał Czyż" }
-            }
-            div { class: "navbar-end",
-                Link { to: Route::Home {}, "Home" }
-                Link { to: Route::About {}, "About" }
-                Link { to: Route::Projects {}, "Projects" }
-                Link { to: Route::Education {}, "Education" }
-                Link { to: Route::Certifications {}, "Certifications" }
-                Link { to: Route::Contact {}, "Contact" }
-                button { class: "navbar-theme",
-                    MaterialIcon { size: 24, name: "light_mode" }
-                }
-            }
-        }
-        div { class: "content-wrapper", AnimatedOutlet::<Route> {} }
-    }
-}

src/pages/about.rs

@@ -1,9 +0,0 @@
-use dioxus::prelude::*;
-
-/// About page
-#[component]
-pub fn About() -> Element {
-    rsx! {
-        div { "About" }
-    }
-}

src/pages/certifications.rs

@@ -1,9 +0,0 @@
-use dioxus::prelude::*;
-
-/// Certifications page
-#[component]
-pub fn Certifications() -> Element {
-    rsx! {
-        div { "Certifications" }
-    }
-}

src/pages/contact.rs

@@ -1,9 +0,0 @@
-use dioxus::prelude::*;
-
-/// Contact page
-#[component]
-pub fn Contact() -> Element {
-    rsx! {
-        div { "Contact" }
-    }
-}

src/pages/education.rs

@@ -1,9 +0,0 @@
-use dioxus::prelude::*;
-
-/// Education page
-#[component]
-pub fn Education() -> Element {
-    rsx! {
-        div { "Education" }
-    }
-}

src/pages/home.rs

@@ -1,26 +0,0 @@
-use dioxus::prelude::*;
-
-/// Home page
-#[component]
-pub fn Home() -> Element {
-    rsx! {
-        div { class: "home-card",
-            div { class: "home-card-image", "Image" }
-            div { class: "home-card-content",
-                div { class: "home-card-hi", "Hi, I'm ..." }
-                div { class: "home-card-name", "Michał Czyż" }
-                div { class: "home-card-bio", "Information about me..." }
-                div { class: "home-card-buttons",
-                    button { "Download CV" }
-                    button { "Contact" }
-                }
-                div { class: "home-card-social",
-                    button { "LinkedIn" }
-                    button { "GitHub" }
-                    button { "YouTube" }
-                    button { "Email me!" }
-                }
-            }
-        }
-    }
-}

src/pages/mod.rs

@@ -1,6 +0,0 @@
-pub mod about;
-pub mod certifications;
-pub mod contact;
-pub mod education;
-pub mod home;
-pub mod projects;

src/pages/projects.rs

@@ -1,9 +0,0 @@
-use dioxus::prelude::*;
-
-/// Projects page
-#[component]
-pub fn Projects() -> Element {
-    rsx! {
-        div { "Projects" }
-    }
-}

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