feat: slight animation changes

.firebaserc

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

.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

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"

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 = []

README.md

@@ -1,10 +1,37 @@
-# Mike's official /new/ minimalistic website
+# Mike's new website
 
-There's so much bloat that I'm just too lazy to update it all the time and migrate old code.
+## Development
 
-This time I focused on simplicity.
+Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
 
-Deploy commands cuz I keep forgetting all the time:
-`sudo npm install -g firebase-tools`
-`firebase login`
-`firebase deploy --only hosting:mike-czyz-website`
+```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
+
+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
+```

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%;
+}

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." },
+]

firebase.json

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

public/index.html

@@ -1,107 +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="Michał Czyż is a student and a software developer." />
-    <meta name="author" content="Michał Czyż" />
-    <meta name="copyright" content="Michał Czyż, 2024 All Rights Reserved" />
-    <meta name="keywords" lang="en"
-        content="Michał Czyż, Michael Czyż, Mike Czyż, tsi, developer, crypto, web, angular, react, javascript" />
-    <meta name="date" content="" />
-    <meta name="page-topic" content="" />
-
-    <!--Facebook Open Graph-->
-    <meta property="og:url" content="https://c2yz.com" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Michał Czyż" />
-    <meta property="og:site_name" content="Michał Czyż" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta property="og:image" content="./assets/card.png" />
-
-    <!--Twitter card metadata-->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@Mike_Czyz_" />
-    <meta name="twitter:creator" content="@Mike_Czyz_" />
-    <meta name="twitter:title" content="Michał Czyż" />
-    <meta name="twitter:description"
-        content="Michał Czyż is a student and a software developer." />
-    <meta name="twitter:image" content="./assets/card.png">
-
-    <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>Michał Czyż</title>
-</head>
-
-<body>
-    <div class="page">
-        <h1 class="header">
-            Hi, I'm Mike 👋🏻
-        </h1>
-
-        <div class="bio">
-            <h4>A Student and a Software Developer</h4>
-
-            <p>I'm currently working on new fascinating projects,
-                so be sure to follow me!</p>
-
-            <h4>About Mike</h4>
-            <ul>
-                <li>⚙️ I use daily: <code>.rs</code>, <code>.js</code> <code>.py</code> <code>.sh</code> <code>.cpp</code> <code>.md</code></li>
-                <li>🏗️ Developed: <a href="https://github.com/eRgo35/lyra">lyra</a>, <a href="https://github.com/eRgo35/ah">ah</a>, <a href="https://github.com/eRgo35/ti">ti</a>, <a href="https://github.com/eRgo35/ascii">ascii</a>, etc...</li>
-                <li>🍚 Check out my: <a href="https://github.com/eRgo35/dots">dotfiles</a>, <a href="https://github.com/eRgo35/nix-config">nix flake</a></li>
-            </ul>
-
-            <h4>Mike around the web</h4>
-            <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">
-            <!-- <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>
-
-            <span class="separator">. . .</span>
-        </div>
-
-        <div class="aside">
-            <div class="avatar-wrapper">
-                <img src="assets/mike-czyz.webp" class="avatar" width="2.5in" height="2.5in" />
-                <div class="theme">
-                    <i class="material-icons">&#xe51c</i>
-                    <span class="theme-text">Dark Mode</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="footer">
-            <div class="copyright">
-                &copy; <span id="year">2024</span>
-            </div>
-            <div class="gpg">
-                <a href="assets/mike-czyz-public.gpg" target="_blank" class="gpg-key">
-                    🔑
-                    <span>GPG</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/robots.txt

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

public/styles.css

@@ -1,359 +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.15s 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(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; */
-    background-color: var(--crust);
-    color: var(--text);
-    display: grid;
-    place-items: center;
-    font-family: "Schibsted Grotesk", sans-serif;
-    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: 8in;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    background-color: var(--base);
-    padding: 0.5in;
-    position: relative;
-    animation: 0.5s 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";
-    /* clip-path: polygon(1in 0%, 100% 0, 100% 100%, 0 100%, 0 1in); */
-    overflow: hidden;
-}
-
-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;
-}
-
-.separator {
-}
-
-.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;
-}
-
-.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(--mantle);
-    color: var(--yellow);
-    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;
-}
-
-.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.85in 0.2fr 0.4fr auto;
-        gap: 0px 0px;
-        grid-template-areas:
-            "header"
-            "aside"
-            "bio"
-            "world"
-            "footer";
-        animation: none;
-        overflow: auto;
-    }
-
-    .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;
-    }
-}

src/components/mod.rs

@@ -0,0 +1 @@
+pub mod navbar;

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", {} }
+    }
+}

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> {}
+    }
+}

src/pages/about.rs

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

src/pages/certifications.rs

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

src/pages/contact.rs

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

src/pages/education.rs

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

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!" }
+                }
+            }
+        }
+    }
+}

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;

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:?}" }
+        }
+    }
+}

src/pages/projects.rs

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

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> {}
+    }
+}