feat: slight animation changes

assets/main.css

@@ -53,8 +53,7 @@ a {
 }
 
 a:hover,
-a:active,
-a:focus {
+a:active {
     color: var(--subtext0)
 }
 
@@ -83,8 +82,7 @@ a:focus {
 }
 
 .navbar-theme:hover,
-.navbar-theme:active,
-.navbar-theme:focus {
+.navbar-theme:active {
     cursor: pointer;
 }
 

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

@@ -1,44 +1,15 @@
-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 crate::router::Route;
 
 use dioxus::prelude::*;
-use dioxus_material_icons::{MaterialIcon, MaterialIconStylesheet};
-use dioxus_motion::prelude::*;
+use dioxus_material_icons::MaterialIconStylesheet;
 
+mod components;
 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 {},
-}
+mod router;
 
 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);
 }
@@ -52,27 +23,3 @@ fn App() -> Element {
         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/mod.rs

@@ -3,4 +3,5 @@ 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/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> {}
+    }
+}