feat(home): homepage finished

assets/styling/blog.css

@@ -1,8 +1,36 @@
 #blog {
-  margin-top: 50px;
+	margin-top: 50px;
 }
 
 #blog a {
-  color: #ffffff;
+	color: #ffffff;
-  margin-top: 50px;
+	margin-top: 50px;
-}
+}
+
+#blogs {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 80svh;
+}
+
+#blogs h1 {
+	border-bottom: var(--underlineTitle);
+	border-radius: var(--underlineTitleBorderRadius);
+}
+
+#blogs button {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border: none;
+	color: #ffffff;
+	font-size: xx-large;
+	padding: 1rem;
+}
+
+#blogs a {
+	text-decoration: none;
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+}

assets/styling/experience.css

@@ -0,0 +1,86 @@
+.experience-comp {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+
+	/* flex-basis: 50%; */
+}
+
+.experience-comp h3 {
+	display: flex;
+	/* width: 90%; */
+	border-bottom: var(--underlineTitle);
+	border-radius: var(--underlineTitleBorderRadius);
+	margin: 2svh 2svw;
+	padding: 0svh 2svw;
+	padding-bottom: 1svh;
+}
+
+.experience-comp table {
+	border-collapse: separate;
+	border-spacing: 0svh 0px;
+}
+
+.experience-comp td {
+	position: relative;
+	margin: 0px;
+	padding: 0.25svh 2svw;
+}
+.experience-comp tr:nth-child(even) td {
+	padding-bottom: 2svh;
+}
+
+.postion {
+	text-wrap: nowrap;
+}
+.date-location {
+	text-wrap: nowrap;
+}
+.symbol {
+	position: relative;
+	width: 30px;
+	text-align: center;
+}
+
+.symbol[rowspan]::before {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 50%;
+	width: 2px;
+	background-color: rgb(120, 120, 120);
+	transform: translateX(-50%);
+	z-index: 0;
+}
+.symbol::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 18px;
+	height: 18px;
+	z-index: 1;
+}
+
+.dot {
+	display: inline-block;
+	background-color: rgb(120, 120, 120);
+	border-radius: 100%;
+	width: 16px;
+	height: 16px;
+	line-height: 16px;
+	font-size: 12px;
+	font-weight: bold;
+	position: relative;
+	z-index: 2;
+}
+
+tr:nth-child(1) > .symbol::before {
+	top: 50%;
+}
+
+tr:nth-last-child(2) > .symbol::before {
+	bottom: 50%;
+}

assets/styling/home.css

@@ -3,14 +3,6 @@
 	flex-direction: column;
 }
 
-/* .technologies p {
-	width: 90%;
-	margin: 2svh 0px;
-	margin-left: 2svw;
-	padding-left: 2svw;
-	padding-bottom: 1svh;
-} */
-
 .technologies-cat {
 	display: flex;
 	flex-flow: row wrap;
@@ -18,3 +10,20 @@
 	column-gap: 1svw;
 	row-gap: 1svh;
 }
+
+#experience {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 4svh;
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+}
+
+#experience div {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-evenly;
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	margin: 4svh 0px;
+}

assets/styling/main.css

@@ -5,12 +5,11 @@ body {
 	margin: 20px;
 }
 h2 {
-	width: 90%;
 	border-bottom: var(--underlineTitle);
 	border-radius: var(--underlineTitleBorderRadius);
-	margin: 2svh 0px;
+	display: flex;
-	margin-left: 2svw;
+	margin: 2svh 2svw;
-	padding-left: 2svw;
+	padding: 0svh 2svw;
 	padding-bottom: 1svh;
 }
 /* 

assets/styling/techs.css

@@ -14,9 +14,9 @@
 .tech-cat h3 {
 	border-bottom: var(--underlineTitle);
 	border-radius: var(--underlineTitleBorderRadius);
-	margin: 2svh 1svw;
+	display: flex;
-
+	margin: 2svh 2svw;
-	padding-left: 2svw;
+	padding: 0svh 2svw;
 	padding-bottom: 1svh;
 }
 

src/components/experience.rs

@@ -0,0 +1,116 @@
+use dioxus::prelude::*;
+
+const EXPERIENCE_CSS: Asset = asset!("/assets/styling/experience.css");
+
+#[component]
+pub fn Experience(professional_jobs: bool) -> Element {
+    let experience: [ExpDes; 4] = match professional_jobs {
+        true => EXPERIENCE_JOBS,
+        false => EXPERIENCE_VOL,
+    };
+    rsx! {
+        div { class: "experience-comp",
+            document::Link { rel: "stylesheet", href: EXPERIENCE_CSS }
+            if professional_jobs {
+                h3 { "Professional" }
+            } else {
+                h3 { "Volunteering" }
+            }
+            table {
+                colgroup {
+                    col { class: "symbol" }
+                    col { class: "postion" }
+                    col { class: "date-location" }
+                }
+                tbody {
+                    for exp in experience {
+                        tr {
+                            td { class: "symbol", rowspan: 2,
+                                span { class: "dot", "" }
+                            }
+                            td { "{exp.postition}" }
+                            td { "{exp.start_month} - {exp.end_month}" }
+                        }
+                        tr {
+                            // td { "" }
+                            td { "{exp.company}" }
+                            td { "{exp.location}" }
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+}
+
+#[derive(PartialEq, Props, Clone)]
+struct ExpDes {
+    pub postition: &'static str,
+    pub company: &'static str,
+    pub location: &'static str,
+    pub start_month: &'static str,
+    pub end_month: &'static str,
+}
+
+const EXPERIENCE_JOBS: [ExpDes; 4] = [
+    ExpDes {
+        postition: "Project Coordinator",
+        company: "Rally Engineering",
+        location: "Ab",
+        start_month: "Jan 2025",
+        end_month: "May 2025",
+    },
+    ExpDes {
+        postition: "Project Controller Student",
+        company: "Rally Engineering",
+        location: "Ab",
+        start_month: "May 2024",
+        end_month: "Jan 2025",
+    },
+    ExpDes {
+        postition: "Staff",
+        company: "Red Deer Farmer's Market",
+        location: "Ab",
+        start_month: "Mar 2013",
+        end_month: "Present",
+    },
+    ExpDes {
+        postition: "Staff",
+        company: "Ghostrider Storage",
+        location: "BC",
+        start_month: "Mar 2020",
+        end_month: "Present",
+    },
+];
+
+const EXPERIENCE_VOL: [ExpDes; 4] = [
+    ExpDes {
+        postition: "Software Subteam Lead",
+        company: "UCalgary Baja",
+        location: "Ab",
+        start_month: "Sept 2024",
+        end_month: "Present",
+    },
+    ExpDes {
+        postition: "Software, Logistics and Business Sub Team Lead",
+        company: "Schulich Off-Road",
+        location: "Ab",
+        start_month: "May 2023",
+        end_month: "Sept 2024",
+    },
+    ExpDes {
+        postition: "Chassis Junior Member",
+        company: "Schulich Off-Road",
+        location: "Ab",
+        start_month: "Sept 2022",
+        end_month: "May 2023",
+    },
+    ExpDes {
+        postition: "Coaching with Elk Valley Special Olympics",
+        company: "Elk Valley Dolphins",
+        location: "BC",
+        start_month: "May 2019",
+        end_month: "May 2019",
+    },
+];

src/components/footer.rs

@@ -1,6 +1,6 @@
 use std::collections::HashMap;
 
-use crate::helper_fun::{get_tech_logos_from_str, tech_table_lookup, TechDes};
+use crate::helper_fun::{tech_table_lookup, TechDes};
 use dioxus::prelude::*;
 
 const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");

src/components/mod.rs

@@ -7,3 +7,9 @@ pub use hero::Hero;
 
 mod techs;
 pub use techs::TechCat;
+
+mod footer;
+pub use footer::Ender;
+
+mod experience;
+pub use experience::Experience;

src/helper_fun.rs

@@ -11,6 +11,7 @@ pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element {
 
 #[derive(PartialEq, Props, Clone, Copy)]
 pub struct TechDes {
+    pub tech_name: &'static str,
     pub tech_logo: &'static str,
     pub project_site: &'static str,
     pub skill_level: u8,
@@ -26,326 +27,246 @@ pub struct ProjectDes {
 }
 
 pub fn tech_table_lookup(to_lookup: &str) -> Rc<TechDes> {
-    let techs_tools_frameworks_lookup: Rc<HashMap<&'static str, TechDes>> = HashMap::from([
+    let mut tech_to_return: TechDes = TechDes {
-        (
+                tech_name: "Not in table",
-            "Rust",
+                tech_logo: "",
+                project_site: "",
+                skill_level: 0,
+            }; 
+            
+    for tech in TECH_TABLE {
+        if tech.tech_name == to_lookup {
+            tech_to_return = tech.into();
+        }
+    }
+    tech_to_return.into()
+}
+
+const TECH_TABLE:[TechDes; 37] = [
             TechDes {
+                tech_name: "Rust",
                 tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
                 project_site: "https://www.rust-lang.org",
                 skill_level: 60,
             },
-        ),
-
-        (
-            "Python",
             TechDes {
+                tech_name: "Python",
                 tech_logo: "https://www.svgrepo.com/show/452091/python.svg",
                 project_site: "https://www.python.org",
                 skill_level: 50,
             },
-        ),
+            
-        (
-            "JavaScript",
             TechDes {
+                tech_name: "JavaScript",
                 tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
                 project_site: "https://www.python.org",
                 skill_level: 60,
             },
-        ),
+            
-        (
-            "YAML",
             TechDes {
+                tech_name: "YAML",
                 tech_logo: "https://yaml.org/favicon.svg",
                 project_site: "https://yaml.org",
                 skill_level: 95,
             },
-        ),
-        (
-            "C",
-            TechDes {
-                tech_logo: "https://www.c-language.org/logo.svg",
-                project_site: "https://www.c-language.org",
-                skill_level: 49,
-            },
-        ),
-        (
-            "C++",
-            TechDes {
-                tech_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
-                project_site: "https://cplusplus.com",
-                skill_level: 49,
-            },
-        ),
-        (
-            "Github",
             TechDes {
+                tech_name: "Github",
                 tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
                 project_site: "https://github.com/darkicewolf50",
                 skill_level: 80,
             },
-        ),
-        (
-            "Email",
             TechDes {
+                tech_name: "Email",
                 tech_logo: "https://www.svgrepo.com/show/491226/email.svg",
                 project_site: "mailto:darkicewolf50@gmail.com",
                 skill_level: 100,
             },
-        ),
+
-        (
-            "LinkedIn",
             TechDes {
+                tech_name: "LinkedIn",
                 tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
                 project_site: "https://www.linkedin.com/in/brock-tomlinson/",
                 skill_level: 40,
             },
-        ),
-        (
-            "Twitch",
             TechDes {
+                tech_name: "Twitch",
                 tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
                 project_site: "https://www.twitch.tv/darkicewolf50",
                 skill_level: 60,
             },
-        ),
-        (
-            "Youtube",
             TechDes {
+                tech_name: "Youtube",
                 tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
                 project_site: "https://www.youtube.com/@darkicewolf50",
                 skill_level: 40,
             },
-        ),
-        (
-            "Internet",
             TechDes {
+                tech_name: "Internet",
                 tech_logo: "https://www.svgrepo.com/show/490809/internet.svg",
                 project_site: "https://google.com",
                 skill_level: 99,
             },
-        ),
-        (
-            "React",
             TechDes {
+                tech_name: "React",
                 tech_logo: "https://www.svgrepo.com/show/452092/react.svg",
                 project_site: "https://react.dev",
                 skill_level: 70,
             },
-        ),
-        (
-            "Docker",
             TechDes {
+                tech_name: "Docker",
                 tech_logo: "https://www.svgrepo.com/show/448221/docker.svg",
                 project_site: "https://www.docker.com",
                 skill_level: 70,
             },
-        ),
-        (
-            "FastAPI",
             TechDes {
+                tech_name: "FastAPI",
                 tech_logo: "https://fastapi.tiangolo.com/img/favicon.png",
                 project_site: "https://fastapi.tiangolo.com",
                 skill_level: 80,
             },
-        ),
+            
-        (
-            "Actix",
             TechDes {
+                tech_name: "Actix",
                 tech_logo: "https://actix.rs/img/logo.png",
                 project_site: "https://actix.rs",
                 skill_level: 20,
             },
-        ),
-        (
-            "HTML5",
             TechDes {
+                tech_name: "HTML5",
                 tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
                 project_site: "https://google.com",
                 skill_level: 90,
             },
-        ),
-        (
-            "CSS",
             TechDes {
+                tech_name: "CSS",
                 tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
                 project_site: "https://google.com",
                 skill_level: 65,
             },
-        ),
-        (
-            "Git",
             TechDes {
+                tech_name: "Git",
                 tech_logo: "https://www.svgrepo.com/show/452210/git.svg",
                 project_site: "https://git-scm.com",
                 skill_level: 55,
             },
-        ),
-        (
-            "Github Actions",
             TechDes {
+                tech_name: "Github Actions",
                 tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
                 project_site: "https://github.com/",
                 skill_level: 50,
             },
-        ),
-        (
-            "Vs Code",
             TechDes {
+                tech_name: "Vs Code",
                 tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
                 project_site: "https://code.visualstudio.com",
                 skill_level: 60,
             },
-        ),
-        (
-            "Gitea",
             TechDes {
+                tech_name: "Gitea",
                 tech_logo: "https://about.gitea.com/gitea.png",
                 project_site: "https://about.gitea.com",
                 skill_level: 85,
             },
-        ),
-        (
-            "AWS",
             TechDes {
+                tech_name: "AWS",
                 tech_logo: "https://www.svgrepo.com/show/448266/aws.svg",
                 project_site: "https://aws.amazon.com",
                 skill_level: 30,
             },
-        ),
-        (
-            "Firefox",
             TechDes {
-                tech_logo:
+                tech_name: "Firefox",
-                    "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
+                tech_logo: "https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
                 project_site: "https://www.mozilla.org/en-CA/firefox/developer/",
                 skill_level: 80,
             },
-        ),
-        (
-            "Markdown",
             TechDes {
+                tech_name: "Markdown",
                 tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
                 project_site: "https://www.markdownguide.org",
                 skill_level: 90,
             },
-        ),
-        (
-            "Prettier",
             TechDes {
+                tech_name: "Prettier",
                 tech_logo: "https://prettier.io/icon.png",
                 project_site: "https://prettier.io",
                 skill_level: 90,
             },
-        ),
-        (
-            "DynamoDB",
-            TechDes {
-                tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
-                project_site: "https://aws.amazon.com/dynamodb/",
-                skill_level: 70,
-            },
-        ),
-        (
-            "Cloudflare", 
             TechDes {
+                tech_name: "Cloudflare",
                 tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png", 
                 project_site: "https://www.cloudflare.com/en-ca/", 
                 skill_level: 65,
             },
-        ),
-        (
-            "Netlify",
             TechDes {
+                tech_name: "Netlify",
                 tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
                 project_site: "https://www.netlify.com",
                 skill_level: 60,
             },
-        ),
-        (
-            "Vercel",
             TechDes {
+                tech_name: "Vercel",
                 tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
                 project_site: "https://vercel.com/home",
                 skill_level: 60,
             },
-        ),
-        (
-            "Dioxus",
             TechDes {
+                tech_name: "Dioxus",
                 tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
                 project_site: "https://dioxuslabs.com",
                 skill_level: 70,
             },
-        ),
-        (
-            "Vue",
             TechDes {
+                tech_name: "Vue",
                 tech_logo: "https://vuejs.org/logo.svg",
                 project_site: "https://vuejs.org",
                 skill_level: 1,
             },
-        ),
-        (
-            "Mongodb",
             TechDes {
+                tech_name: "Mongodb",
                 tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg",
                 project_site: "https://www.mongodb.com",
                 skill_level: 10,
             },
-        ),
-        (
-            "Sqlite",
             TechDes {
+                tech_name: "Sqlite",
                 tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg",
                 project_site: "https://www.sqlite.org",
                 skill_level: 10,
             },
-        ),
-        (
-            "PostgreSQL",
             TechDes {
+                tech_name: "PostgreSQL",
                 tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
                 project_site: "https://www.postgresql.org",
                 skill_level: 10,
             },
-        ),
-        (
-            "Diesel",
             TechDes {
+                tech_name: "DynamoDB",
+                tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
+                project_site: "https://aws.amazon.com/dynamodb/",
+                skill_level: 70,
+            }, 
+            TechDes {
+                tech_name: "Diesel",
                 tech_logo: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
                 project_site: "https://diesel.rs",
                 skill_level: 10,
             },
-        ),
-        (
-            "Kubernetes",
             TechDes {
+                tech_name: "Kubernetes",
                 tech_logo: "https://kubernetes.io/images/kubernetes.png",
                 project_site: "https://kubernetes.io",
                 skill_level: 5,
             },
-        ),
-        (
-            "Terraform",
             TechDes {
+                tech_name: "Terraform",
                 tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg",
                 project_site: "https://www.terraform.io",
                 skill_level: 15,
             },
-        ),
-        (
-            "Traefik",
             TechDes {
+                tech_name: "Traefik",
                 tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
                 project_site: "https://traefik.io/traefik/",
                 skill_level: 60,
             },
-        ),
+    ];
-    ]).into();
-    techs_tools_frameworks_lookup[to_lookup].into()
-}
-
-// pub fn techs_tools_frameworks_lookup_create() -> HashMap<&'static str, TechDes> {
-
-//     techs_tools_frameworks_lookup
-// }

src/lib.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 // use components::Hero;
-use views::{Blog, Home, Navbar, NewHome};
+use views::{Blog, Blogs, Home, Navbar, NewHome};
 
 /// Define a components module that contains all shared components for our app.
 mod components;
@@ -31,7 +31,10 @@ pub enum Route {
         #[route("/blogs/:id")]
         // Fields of the route variant will be passed to the component as props. In this case, the blog component must accept
         // an `id` prop of type `i32`.
-        Blog { id: i32 },
+        Blogs { id: i32 },
+
+        #[route("/blogs/:blog_title")]
+        Blog {blog_title: String},
 
         #[route("/test")]
         Hello {},

src/views/blog.rs

@@ -1,5 +1,5 @@
 use crate::Route;
-use dioxus::prelude::*;
+use dioxus::{document::Link, prelude::*};
 
 const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
 
@@ -8,31 +8,43 @@ const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
 /// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
 /// re-run and the rendered HTML will be updated.
 #[component]
-pub fn Blog(id: i32) -> Element {
+pub fn Blog(blog_title: String) -> Element {
     rsx! {
         document::Link { rel: "stylesheet", href: BLOG_CSS }
 
-        div {
+        div { id: "blog",
-            id: "blog",
 
             // Content
-            h1 { "This is blog #{id}!" }
+            h1 { "This is blog #{blog_title}!" }
-            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+            p {
-
+                "In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components."
-            // Navigation links
-            // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
-            // any number of child nodes.
-            Link {
-                // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
-                // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
-                // at compile time to make sure they are valid.
-                to: Route::Blog { id: id - 1 },
-                "Previous"
             }
-            span { " <---> " }
+
-            Link {
+        // // Navigation links
-                to: Route::Blog { id: id + 1 },
+        // // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
-                "Next"
+        // // any number of child nodes.
+        // Link {
+        //     // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
+        //     // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
+        //     // at compile time to make sure they are valid.
+        //     to: Route::Blog { id: id - 1 },
+        //     "Previous"
+        // }
+        // span { " <---> " }
+        // Link { to: Route::Blog { id: id + 1 }, "Next" }
+        }
+    }
+}
+
+#[component]
+pub fn Blogs(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS }
+        div { id: "blogs",
+            h1 { "Page Under Development" }
+            p { "Please Try Again Later" }
+            dioxus::prelude::Link { to: Route::Home {},
+                button { "Home" }
             }
         }
     }

src/views/home.rs

@@ -1,4 +1,4 @@
-use crate::components::TechCat;
+use crate::components::{Experience, TechCat};
 use crate::views::{Contact, Projects};
 use dioxus::prelude::*;
 
@@ -10,8 +10,6 @@ pub fn Home() -> Element {
         "Rust",
         "Python",
         "YAML",
-        "C",
-        "C++",
         "HTML5",
         "CSS",
         "JavaScript",
@@ -52,6 +50,13 @@ pub fn Home() -> Element {
             }
             Contact {}
             Projects {}
+            div { id: "experience",
+                h2 { "Experience" }
+                div {
+                    Experience { professional_jobs: true }
+                    Experience { professional_jobs: false }
+                }
+            }
         }
     )
 }

src/views/mod.rs

@@ -12,7 +12,7 @@ mod new_home;
 pub use new_home::NewHome;
 
 mod blog;
-pub use blog::Blog;
+pub use blog::{Blog, Blogs};
 
 mod navbar;
 pub use navbar::Navbar;
@@ -20,9 +20,6 @@ pub use navbar::Navbar;
 mod home;
 pub use home::Home;
 
-mod footer;
-pub use footer::Ender;
-
 mod contact;
 pub use contact::Contact;
 

src/views/navbar.rs

@@ -1,4 +1,4 @@
-use crate::views::Ender;
+use crate::components::Ender;
 use crate::Route;
 use dioxus::prelude::*;
 
@@ -18,7 +18,7 @@ pub fn Navbar() -> Element {
 
         div { id: "navbar",
             Link { to: Route::NewHome {}, "Home" }
-            Link { to: Route::Blog { id: 0 }, "Blogs" }
+            Link { to: Route::Blogs { id: 0 }, "Blogs" }
         }
 
         // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either