feat: slight animation changes

feat: extracted main into components and pages
feat: homepage initialization, components, css, motion
2026-02-04 13:36:10 +01:00 · 2025-05-23 23:42:36 +02:00 · 2025-05-23 21:25:12 +02:00 · 2025-05-23 17:15:32 +02:00 · 2025-05-23 14:14:53 +02:00 · 2025-05-23 13:48:59 +02:00
30 changed files with 5902 additions and 943 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,66 +1,7 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-firebase-debug.log*
-firebase-debug.*.log*
+# Generated by Cargo
+# will have compiled files and executables
+/target
+.DS_Store

-# 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
+# These are backup files generated by rustfmt
+**/*.rs.bk
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -0,0 +1,34 @@
+[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"
--- a/Dioxus.toml
+++ b/Dioxus.toml
@@ -0,0 +1,21 @@
+[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 = []
--- a/README.md
+++ b/README.md
@@ -1,14 +1,37 @@
-# Mike's Personal Website
+# Mike's new website

-A minimalistic, modern personal website.
+## Development

-## Mike around the web
+Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.

- **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)
+```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
+```

---
+### Tailwind

-Built with ❤️ by Michał Czyż
+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
+```
--- 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/main.css
+++ b/assets/main.css
@@ -0,0 +1,101 @@
+@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 {
+    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 {
+    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%;
+}
--- a/assets/manifest.json
+++ b/assets/manifest.json
@@ -1,7 +1,6 @@
 {
  "short_name": "Mike Czyż",
  "name": "Michał Czyż's Website",
-  "description": "Michał Czyż - software developer, student, and creator.",
  "icons": [
    {
      "src": "assets/favicon.ico",
--- a/assets/mike-czyz.webp
+++ b/assets/mike-czyz.webp
--- a/clippy.toml
+++ b/clippy.toml
@@ -0,0 +1,8 @@
+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." },
+]
--- a/index.html
+++ b/index.html
@@ -1,348 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/assets/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#8aadf4" />
-    <meta
-      name="description"
-      content="Welcome to the official website of Michał Czyż, a student and a software developer. Explore projects, skills, and contact details."
-    />
-    <meta name="author" content="Michał Czyż" />
-    <meta name="copyright" content="Michał Czyż, 2025 All Rights Reserved" />
-    <meta
-      name="keywords"
-      lang="en"
-      content="Michał Czyż, Michael Czyż, Mike Czyż, ai, llm, python, developer, crypto, web, angular, react, javascript"
-    />
-    <meta name="language" content="en" />
-    <meta name="robots" content="index, follow" />
-    <meta name="date" content="2025-07-26" />
-    <meta
-      name="page-topic"
-      content="Personal Website, Software Developer, Michał Czyż, Mike Czyż"
-    />
-
-    <!--Facebook Open Graph-->
-    <meta property="og:url" content="https://c2yz.com" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Michał Czyż - Software Developer" />
-    <meta property="og:site_name" content="Michał Czyż" />
-    <meta property="og:locale" content="en_US" />
-    <meta
-      property="og:description"
-      content="Michał Czyż is a student and software developer. Explore projects, skills, and contact details."
-    />
-    <meta property="og:image" content="/assets/card.png" />
-
-    <!--Twitter card metadata-->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@Mike_Czyz_" />
-    <meta name="twitter:creator" content="@Mike_Czyz_" />
-    <meta name="twitter:title" content="Michał Czyż - Software Developer" />
-    <meta
-      name="twitter:description"
-      content="Michał Czyż is a student and software developer. Explore projects, skills, and contact details."
-    />
-    <meta name="twitter:image" content="/assets/card.png" />
-
-    <link
-      rel="apple-touch-icon"
-      href="/assets/logo192.png"
-      media="print"
-      onload="this.media='all'"
-    />
-    <link rel="manifest" href="/manifest.json" />
-
-    <script>
-      (function () {
-        try {
-          var ls = localStorage.getItem("preferredTheme");
-          var theme =
-            ls === "dark" ||
-            (!ls && window.matchMedia("(prefers-color-scheme: dark)").matches)
-              ? "dark"
-              : "light";
-          if (theme === "dark") document.documentElement.classList.add("dark");
-        } catch (e) {}
-      })();
-    </script>
-
-    <style>
-      :root {
-        --base: #faf4ed;
-        --surface: #fffaf3;
-        --text: #575279;
-        --foam: #56949f;
-      }
-      .dark {
-        --base: #191724;
-        --surface: #1f1d2e;
-        --text: #e0def4;
-        --foam: #9ccfd8;
-      }
-      body,
-      html {
-        margin: 0;
-        width: 100%;
-        min-height: 100vh;
-        font-family: system-ui, sans-serif;
-        background-color: var(--base);
-        color: var(--text);
-        display: grid;
-        place-items: center;
-        overflow: auto;
-        overflow-anchor: none;
-      }
-      .page {
-        box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px 0,
-          rgba(0, 0, 0, 0.23) 0 6px 6px 0;
-        box-sizing: border-box;
-        width: 8.5in;
-        height: 9in;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        background-color: var(--surface);
-        padding: 0.5in;
-        position: relative;
-        animation: 0.5s ease-out 0s 1 fadein;
-        display: grid;
-        grid-template-columns: 1fr 2.5in;
-        grid-template-rows: 1.1in 0.2fr 0.4fr auto;
-        gap: 0 0;
-        grid-template-areas: "header header" "bio aside" "world aside" "footer footer";
-        overflow: hidden;
-      }
-
-      .avatar {
-        width: 2.5in;
-        height: 2.5in;
-      }
-
-      a {
-        color: var(--foam);
-        transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out;
-        text-decoration: none;
-        font-weight: 500;
-      }
-
-      .header {
-        grid-area: header;
-      }
-
-      .bio {
-        grid-area: bio;
-      }
-
-      .world {
-        grid-area: world;
-      }
-
-      .aside {
-        grid-area: aside;
-      }
-
-      .footer {
-        grid-area: footer;
-      }
-
-      @media only screen and (min-width: 2000px) {
-        .page {
-          height: 11in;
-        }
-      }
-
-      @media only screen and (min-width: 768px) and (max-width: 900px) {
-        html,
-        body {
-          overflow: auto;
-        }
-
-        .page {
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          padding: 0.25in;
-          box-shadow: none;
-          animation: none;
-          overflow: auto;
-        }
-
-        .footer {
-          margin-top: 0.25in;
-          grid-template-rows: none;
-          grid-template-columns: auto;
-        }
-      }
-
-      @media only screen and (max-width: 767px) {
-        html,
-        body {
-          overflow: auto;
-        }
-
-        .page {
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          padding: 0.25in;
-          box-shadow: none;
-          display: grid;
-          grid-template-columns: 1fr;
-          grid-template-rows: 0.1fr 0.2fr 0.4fr auto;
-          gap: 0px 0px;
-          grid-template-areas:
-            "header"
-            "aside"
-            "bio"
-            "world"
-            "footer";
-          animation: none;
-          overflow: auto;
-        }
-      }
-    </style>
-
-    <link
-      rel="preload"
-      href="/assets/fonts/Coiny-Regular-subset.ttf"
-      as="font"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="stylesheet"
-      href="/styles.css"
-      media="print"
-      onload="this.media='all'"
-    />
-
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "Person",
-        "name": "Michał Czyż",
-        "alternateName": "Mike",
-        "url": "https://c2yz.com/",
-        "jobTitle": "Software Developer, Student",
-        "alumniOf": {
-          "@type": "CollegeOrUniversity",
-          "name": "Silesian University of Technology"
-        },
-        "sameAs": [
-          "https://github.com/eRgo35",
-          "https://www.linkedin.com/in/mike-czyz",
-          "https://www.youtube.com/@eRgo35"
-        ]
-      }
-    </script>
-
-    <title>Michał Czyż - Student, Software Developer | Official Website</title>
-  </head>
-
-  <body>
-    <script src="/main.js" defer></script>
-    <div class="page">
-      <h1 class="header coiny-regular">Hi, I'm Mike 👋🏻</h1>
-
-      <div class="bio">
-        <p class="small-text">
-          I'm currently working on new fascinating<br />
-          projects, so be sure to follow me!
-        </p>
-
-        <h2 class="coiny-regular">Student / Software Developer</h2>
-
-        <p>
-          I am currently pursuing a degree in Computer Science at the Silesian
-          University of Technology in Gliwice. Programming is my passion. I have
-          experience working with a variety of languages. Recently, I have been
-          focusing my attention on Rust and JavaScript.
-        </p>
-        <p>
-          I am also interested in artificial intelligence and machine learning.
-          In addition, I actively create and develop many projects to further
-          enhance my skills.
-        </p>
-
-        <h2 class="coiny-regular">My Projects</h2>
-
-        <a class="button" href="https://github.com/eRgo35?tab=repositories"
-          >Go to <i>Projects</i></a
-        >
-
-        <h2 class="coiny-regular">Mike around the web</h2>
-        <ul>
-          <li>
-            🐙 take a look at my <a href="https://github.com/eRgo35">GitHub</a>
-          </li>
-          <li>
-            💼 find me on
-            <a href="https://www.linkedin.com/in/mike-czyz">LinkedIn</a>
-          </li>
-          <li>
-            📹 visit my <a href="https://www.youtube.com/@eRgo35">YouTube</a>
-          </li>
-        </ul>
-      </div>
-
-      <div class="world">
-        <span>[📎 <a href="/assets/Michał_Czyż_CV.pdf">cv</a>]</span>
-        <span>[📧 <a href=" mailto:mike@c2yz.com?subject=Hi">contact</a>]</span>
-      </div>
-
-      <div class="aside">
-        <div class="avatar-wrapper">
-          <img
-            src="/assets/mike-czyz.webp"
-            class="avatar"
-            alt="Michał Czyż"
-            class="avatar"
-            width="2.5in"
-            height="2.5in"
-            fetchpriority="high"
-          />
-          <div
-            class="theme"
-            aria-label="Toggle dark/light mode"
-            role="button"
-            tabindex="0"
-          >
-            <i class="material-icons">🌙</i>
-            <span class="theme-text">Dark Mode</span>
-          </div>
-          <script>
-            const themeButton = document.querySelector(".theme");
-            function toggleTheme() {
-              const current = document.documentElement.classList.contains(
-                "dark"
-              )
-                ? "dark"
-                : "light";
-              const newMode = current === "dark" ? "light" : "dark";
-              updateTheme(newMode);
-            }
-            themeButton.addEventListener("click", toggleTheme);
-          </script>
-        </div>
-      </div>
-
-      <div class="footer">
-        <div class="copyright">&copy; <span id="year">2025</span></div>
-        <script>
-          document.querySelector("#year").innerHTML = new Date().getFullYear();
-        </script>
-        <div class="gpg">
-          <a
-            href="/assets/mike-czyz-public.gpg"
-            target="_blank"
-            class="gpg-key"
-          >
-            🔑
-            <span>GPG</span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
--- a/main.js
+++ b/main.js
@@ -1,39 +0,0 @@
-const root = document.documentElement;
-const themeText = document.querySelector(".theme-text");
-const themeIcon = document.querySelector(".material-icons");
-
-const THEMES = {
-  light: { class: "", text: "Light Mode", icon: "☀️" },
-  dark: { class: "dark", text: "Dark Mode", icon: "🌙" },
-};
-
-function updateTheme(mode) {
-  root.classList.toggle("dark", mode === "dark");
-  themeText.textContent = THEMES[mode].text;
-  themeIcon.textContent = THEMES[mode].icon;
-  localStorage.setItem("preferredTheme", mode);
-}
-
-function getPreferredTheme() {
-  const stored = localStorage.getItem("preferredTheme");
-  if (stored === "dark" || stored === "light") {
-    return stored;
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light";
-}
-
-if ("serviceWorker" in navigator) {
-  window.addEventListener("load", () => {
-    navigator.serviceWorker.register("/sw.js");
-  });
-}
-
-navigator.serviceWorker.addEventListener("controllerchange", () => {
-  console.log("New version available, reloading...");
-  window.location.reload();
-});
-
-updateTheme(getPreferredTheme());
--- a/robots.txt
+++ b/robots.txt
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -0,0 +1 @@
+pub mod navbar;
--- a/src/components/navbar.rs
+++ b/src/components/navbar.rs
@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+use dioxus_material_icons::MaterialIcon;
+use dioxus_motion::prelude::*;
+
+use crate::router::Route;
+
+/// Shared navbar component.
+#[component]
+pub 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", {} }
+    }
+}
--- a/src/main.rs
+++ b/src/main.rs
@@ -0,0 +1,25 @@
+use crate::router::Route;
+
+use dioxus::prelude::*;
+use dioxus_material_icons::MaterialIconStylesheet;
+
+mod components;
+mod pages;
+mod router;
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+
+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> {}
+    }
+}
--- a/src/pages/about.rs
+++ b/src/pages/about.rs
@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+/// About page
+#[component]
+pub fn About() -> Element {
+    rsx! {
+        div { "About" }
+    }
+}
--- a/src/pages/certifications.rs
+++ b/src/pages/certifications.rs
@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+/// Certifications page
+#[component]
+pub fn Certifications() -> Element {
+    rsx! {
+        div { "Certifications" }
+    }
+}
--- a/src/pages/contact.rs
+++ b/src/pages/contact.rs
@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+/// Contact page
+#[component]
+pub fn Contact() -> Element {
+    rsx! {
+        div { "Contact" }
+    }
+}
--- a/src/pages/education.rs
+++ b/src/pages/education.rs
@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+/// Education page
+#[component]
+pub fn Education() -> Element {
+    rsx! {
+        div { "Education" }
+    }
+}
--- a/src/pages/home.rs
+++ b/src/pages/home.rs
@@ -0,0 +1,26 @@
+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!" }
+                }
+            }
+        }
+    }
+}
--- a/src/pages/mod.rs
+++ b/src/pages/mod.rs
@@ -0,0 +1,7 @@
+pub mod about;
+pub mod certifications;
+pub mod contact;
+pub mod education;
+pub mod home;
+pub mod notfound;
+pub mod projects;
--- a/src/pages/notfound.rs
+++ b/src/pages/notfound.rs
@@ -0,0 +1,12 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn PageNotFound(route: Vec<String>) -> Element {
+    rsx! {
+        div {
+            h1 { "Page not found" }
+            p { "We are terribly sorry, but the page you requested doesn't exist." }
+            pre { "log:\nattempted to navigate to: {route:?}" }
+        }
+    }
+}
--- a/src/pages/projects.rs
+++ b/src/pages/projects.rs
@@ -0,0 +1,9 @@
+use dioxus::prelude::*;
+
+/// Projects page
+#[component]
+pub fn Projects() -> Element {
+    rsx! {
+        div { "Projects" }
+    }
+}
--- a/src/router.rs
+++ b/src/router.rs
@@ -0,0 +1,49 @@
+use crate::pages::certifications::Certifications;
+use crate::pages::contact::Contact;
+use crate::pages::education::Education;
+use crate::pages::home::Home;
+use crate::pages::notfound::PageNotFound;
+use crate::pages::projects::Projects;
+use crate::{components::navbar::Navbar, pages::about::About};
+
+use dioxus::prelude::*;
+use dioxus_motion::prelude::*;
+
+#[derive(Debug, Clone, Routable, PartialEq, MotionTransitions)]
+#[rustfmt::skip]
+pub enum Route {
+    #[layout(MotionTransitionBuilder)]
+        #[route("/")]
+        #[transition(Fade)]
+        Home {},
+
+        #[route("/about")]
+        #[transition(Fade)]
+        About {},
+        
+        #[route("/projects")]
+        #[transition(Fade)]
+        Projects {},
+        
+        #[route("/education")]
+        #[transition(Fade)]
+        Education {},
+        
+        #[route("/certifications")]
+        #[transition(Fade)]
+        Certifications {},
+        
+        #[route("/contact")]
+        #[transition(Fade)]
+        Contact {},
+    #[end_layout]
+    #[route("/:..route")]
+    PageNotFound { route: Vec<String> },
+}
+
+#[component]
+pub fn MotionTransitionBuilder() -> Element {
+    rsx! {
+        AnimatedOutlet::<Route> {}
+    }
+}
--- a/styles.css
+++ b/styles.css
@@ -1,424 +0,0 @@
-/* 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;
-    }
-}
--- a/sw.js
+++ b/sw.js
@@ -1,54 +0,0 @@
-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ż	2b54d325c5	feat: slight animation changes	2025-05-23 23:42:36 +02:00
Michał Czyż	f1c345af4f	feat: extracted main into components and pages	2025-05-23 21:25:12 +02:00
Michał Czyż	6afec1f452	feat: homepage initialization, components, css, motion	2025-05-23 17:15:32 +02:00
Michał Czyż	0587099cf7	feat: initial dioxus setup	2025-05-23 14:14:53 +02:00
Michał Czyż	1a4e7c6ad9	BREAKING-CHANGE: website redesign	2025-05-23 13:48:59 +02:00