feat: homepage initialization, components, css, motion

Cargo.lock

@@ -1098,6 +1098,15 @@ dependencies = [
  "tracing-wasm",
 ]
 
+[[package]]
+name = "dioxus-material-icons"
+version = "3.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf38d89d3100bb3dbe38c7c08eef9d87fb81fcec49a4e33ead63fdcf4e67f01"
+dependencies = [
+ "dioxus",
+]
+
 [[package]]
 name = "dioxus-mobile"
 version = "0.6.2"
@@ -1112,6 +1121,34 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "dioxus-motion"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b22f47699c0f8cdba183906f4ff9dd633d0bc36ddd57db370000e79d123917"
+dependencies = [
+ "dioxus",
+ "dioxus-motion-transitions-macro",
+ "easer",
+ "futures-channel",
+ "futures-util",
+ "instant",
+ "tokio",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "dioxus-motion-transitions-macro"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5db137c096960ce1d6465f2ee88bc4eb953f79b16e76d426751cc22025e1a215"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.101",
+]
+
 [[package]]
 name = "dioxus-router"
 version = "0.6.3"
@@ -1311,6 +1348,15 @@ version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "92773504d58c093f6de2459af4af33faa518c13451eb8f2b5698ed3d36e7c813"
 
+[[package]]
+name = "easer"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fba524f8b83c9c5bde02c2bb1627de9d1f81980489a6d54168cdfd08c258f917"
+dependencies = [
+ "num-traits",
+]
+
 [[package]]
 name = "endi"
 version = "1.1.0"
@@ -2259,6 +2305,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e0242819d153cba4b4b05a5a8f2a7e9bbf97b6055b2a002b395c96b5ff3c0222"
 dependencies = [
  "cfg-if",
+ "js-sys",
+ "wasm-bindgen",
+ "web-sys",
 ]
 
 [[package]]
@@ -4703,6 +4752,8 @@ name = "website"
 version = "0.1.0"
 dependencies = [
  "dioxus",
+ "dioxus-material-icons",
+ "dioxus-motion",
 ]
 
 [[package]]

Cargo.toml

@@ -8,12 +8,18 @@ edition = "2021"
 
 [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"]
+web = ["dioxus/web", "dioxus-motion/web", "dioxus-motion/transitions"]
-desktop = ["dioxus/desktop"]
+desktop = [
-mobile = ["dioxus/mobile"]
+    "dioxus/desktop",
+    "dioxus-motion/desktop",
+    "dioxus-motion/transitions",
+]
+mobile = ["dioxus/mobile", "dioxus-motion/desktop", "dioxus-motion/transitions"]
 
 [profile]
 

README.md

@@ -4,7 +4,7 @@
 
 Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
 
-```
+```bash
 project/
 ├─ assets/ # Any assets that are used by the app should be placed here
 ├─ src/
@@ -13,8 +13,9 @@ 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
+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
@@ -30,7 +31,7 @@ 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

@@ -1,107 +1,103 @@
-/* App-wide styling */
+@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 {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
     margin: 0;
-    display: flex;
+    width: 100%;
-    flex-direction: column;
+    background-color: var(--base);
-    justify-content: center;
+    color: var(--text);
-    align-items: center;
+    font-family: "Schibsted Grotesk", sans-serif;
+    overflow: auto;
+    overflow-anchor: none;
 }
 
-#links {
+a {
-    width: 400px;
+    color: var(--text);
-    text-align: left;
+    transition:
-    font-size: x-large;
+        0.1s color ease-in-out;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
     text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
 }
 
-#links a:hover {
+a:hover,
-    background-color: #1f1f1f;
+a:active,
-    cursor: pointer;
+a:focus {
+    color: var(--subtext0)
 }
 
-#header {
-    max-width: 1200px;
-}
-
-/* Navbar */
 #navbar {
     display: flex;
-    flex-direction: row;
+    justify-content: space-between;
-  }
+    align-items: center;
+    margin: 1em 3em;
+}
 
-#navbar a {
+.navbar-main {
-    color: #ffffff;
-    margin-right: 20px;
     text-decoration: none;
-    transition: color 0.2s ease;
+    font-size: 1.6em;
 }
 
-#navbar a:hover {
+.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;
-    color: #91a4d2;
 }
 
-/* Blog page */
+.navbar-end {
-#blog {
+    display: flex;
-    margin-top: 50px;
+    align-items: center;
-  }
+    gap: 1em;
-  
-#blog a {
-    color: #ffffff;
-    margin-top: 50px;
 }
 
-/* Echo */
+.content-wrapper {
-#echo {
+    margin: 2em 3em;
-    width: 360px;
+    display: flex;
-    margin-left: auto;
+    justify-content: center;
-    margin-right: auto;
+    align-items: center;
-    margin-top: 50px;
+    height: 100%;
-    background-color: #1e222d;
-    padding: 20px;
-    border-radius: 10px;
-}
-
-#echo>h4 {
-    margin: 0px 0px 15px 0px;
-}
-
-
-#echo>input {
-    border: none;
-    border-bottom: 1px white solid;
-    background-color: transparent;
-    color: #ffffff;
-    transition: border-bottom-color 0.2s ease;
-    outline: none;
-    display: block;
-    padding: 0px 0px 5px 0px;
-    width: 100%;
-}
-
-#echo>input:focus {
-    border-bottom-color: #6d85c6;
-}
-
-#echo>p {
-    margin: 20px 0px 0px auto;
 }

assets/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Mike Czyż",
+  "name": "Michał Czyż's Website",
+  "icons": [
+    {
+      "src": "assets/favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "assets/logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "assets/logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#363a4f",
+  "background_color": "#24273a"
+}

assets/mike-czyz-public.gpg

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

src/main.rs

@@ -1,19 +1,43 @@
-use dioxus::prelude::*;
+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;
 
-#[derive(Debug, Clone, Routable, PartialEq)]
+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("/blog/:id")]
+        #[route("/about")]
-    Blog { id: i32 },
+        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");
-const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
-const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
+fn PageNotFound(_route: Vec<String>) -> Element {
+    rsx! {
+        div { "404 Not Found" }
+    }
+}
 
 fn main() {
     dioxus::launch(App);
@@ -23,112 +47,32 @@ fn main() {
 fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+        MaterialIconStylesheet {}
         Router::<Route> {}
     }
 }
 
-#[component]
-pub fn Hero() -> Element {
-    rsx! {
-        div {
-            id: "hero",
-            img { src: HEADER_SVG, id: "header" }
-            div { id: "links",
-                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
-                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
-                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
-                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
-                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
-                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
-            }
-        }
-    }
-}
-
-/// Home page
-#[component]
-fn Home() -> Element {
-    rsx! {
-        Hero {}
-        Echo {}
-    }
-}
-
-/// Blog page
-#[component]
-pub fn Blog(id: i32) -> Element {
-    rsx! {
-        div {
-            id: "blog",
-
-            // Content
-            h1 { "This is blog #{id}!" }
-            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
-
-            // Navigation links
-            Link {
-                to: Route::Blog { id: id - 1 },
-                "Previous"
-            }
-            span { " <---> " }
-            Link {
-                to: Route::Blog { id: id + 1 },
-                "Next"
-            }
-        }
-    }
-}
-
 /// Shared navbar component.
 #[component]
 fn Navbar() -> Element {
     rsx! {
-        div {
+        div { id: "navbar",
-            id: "navbar",
+            div { class: "navbar-start",
-            Link {
+                Link { class: "navbar-main", to: Route::Home {}, "Michał Czyż" }
-                to: Route::Home {},
-                "Home"
             }
-            Link {
+            div { class: "navbar-end",
-                to: Route::Blog { id: 1 },
+                Link { to: Route::Home {}, "Home" }
-                "Blog"
+                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" }
                 }
             }
-
+        }
-        Outlet::<Route> {}
+        div { class: "content-wrapper", AnimatedOutlet::<Route> {} }
     }
 }
-
-/// Echo component that demonstrates fullstack server functions.
-#[component]
-fn Echo() -> Element {
-    let mut response = use_signal(|| String::new());
-
-    rsx! {
-        div {
-            id: "echo",
-            h4 { "ServerFn Echo" }
-            input {
-                placeholder: "Type here to echo...",
-                oninput:  move |event| async move {
-                    let data = echo_server(event.value()).await.unwrap();
-                    response.set(data);
-                },
-            }
-
-            if !response().is_empty() {
-                p {
-                    "Server echoed: "
-                    i { "{response}" }
-                }
-            }
-        }
-    }
-}
-
-/// Echo the user input on the server.
-#[server(EchoServer)]
-async fn echo_server(input: String) -> Result<String, ServerFnError> {
-    Ok(input)
-}

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,6 @@
+pub mod about;
+pub mod certifications;
+pub mod contact;
+pub mod education;
+pub mod home;
+pub mod projects;

src/pages/projects.rs

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

tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  mode: "all",
-  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;