feat(dioxus): added all links to navbar, intro finished, and new pages set up. TODO: final img sizing and projects assignment

assets/styling/contact.css

@@ -88,7 +88,7 @@
 	filter: invert() hue-rotate(180deg);
 }
 
-@media only screen and (max-width: 430px) {
+@media only screen and (max-width: 500px) {
 	#contact ul li img {
 		display: none;
 	}

assets/styling/home.css

@@ -1,3 +1,27 @@
+#home-intro {
+	display: flex;
+	flex-direction: column;
+	width: 90%;
+	margin-top: 2svh;
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+}
+
+#home-intro h1 {
+	border-bottom: var(--underlineTitle);
+	border-radius: var(--underlineTitleBorderRadius);
+	display: flex;
+	margin: 2svh 2svw;
+	padding: 0svh 2svw;
+	padding-bottom: 1svh;
+}
+
+#home-intro p {
+	margin: 1svh 4svw;
+	padding: 0svh 2svw;
+	padding-bottom: 1svh;
+}
+
 .technologies {
 	display: flex;
 	flex-direction: column;

assets/styling/notFound.css

@@ -0,0 +1,27 @@
+#not-found {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 80svh;
+}
+
+#not-found h1 {
+	border-bottom: var(--underlineTitle);
+	border-radius: var(--underlineTitleBorderRadius);
+}
+
+#not-found button {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border: none;
+	color: #ffffff;
+	font-size: xx-large;
+	padding: 1rem;
+}
+
+#not-found a {
+	text-decoration: none;
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+}

src/lib.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
 // use components::Hero;
-use views::{Blog, Blogs, Home, Navbar, NewHome};
+use views::{Blog, Blogs, Contact, Home, Navbar, NewHome, Projects};
 
 /// Define a components module that contains all shared components for our app.
 mod components;
@@ -36,8 +36,11 @@ pub enum Route {
         #[route("/blogs/:blog_title")]
         Blog {blog_title: String},
 
-        #[route("/test")]
-        Hello {},
+        #[route("/projects")]
+        Projects {},
+
+        #[route("/contact")]
+        Contact {},
 
         #[route("/new_home")]
         NewHome {},
@@ -46,19 +49,18 @@ pub enum Route {
         PageNotFound { route: Vec<String> },
 }
 
-#[component]
-fn Hello() -> Element {
-    rsx!(
-        div {
-            h1 { "hello" }
-        }
-    )
-}
+const NOT_FOUND_CSS: Asset = asset!("/assets/styling/notFound.css");
 
 #[component]
 fn PageNotFound(route: Vec<String>) -> Element {
     rsx! {
+        document::Link { rel: "stylesheet", href: NOT_FOUND_CSS }
+        div { id: "not-found",
             h1 { "Page not found" }
             p { "We are terribly sorry, but the page you requested doesn't exist." }
+            dioxus::prelude::Link { to: Route::Home {},
+                button { "Return Home Here" }
+            }
+        }
     }
 }

src/views/home.rs

@@ -1,5 +1,6 @@
 use crate::components::{Experience, TechCat};
 use crate::views::{Contact, Projects};
+use crate::Route;
 use dioxus::prelude::*;
 
 const HOME_CSS: Asset = asset!("/assets/styling/home.css");
@@ -33,7 +34,30 @@ pub fn Home() -> Element {
     rsx!(
         document::Link { rel: "stylesheet", href: HOME_CSS }
         div {
+            div { id: "home-intro",
                 h1 { "Hi I'm Brock" }
+                p {
+                    "a fourth year Software Engineering Student specializing in full-stack development with a strong focus on backend technologies.
+                    I am developing the language of how to design, develop, and create programs that are to industry standards and reasonably efficent. 
+                    I bring the lessons learned from each project I have completed, 
+                    learning from the mistakes I have made and bringing improved versions forward into the next project."
+                }
+                p {
+                    "As of writing this I intend to bring the knowledge learned from my time at university in Software Engineering onto a Baja SAE car,
+                 where we can collect data remotely and graph data for instantaneous and future analysis, 
+                 during vechile operation."
+                }
+                p {
+                    "I grew up in a small ski town where, I started learning about programming, from of course Minecraft,
+                where I thought the application of this was so futuristic and downright cool that I knew I wanted to persure it further. 
+                While living there I spend a majority of my time outside of school swimming competitively, where I ranked top 10 in BC. 
+                Along with swimming I spend a lot of time volunteering with fundraising events and coaching the local Special Olympics swim team."
+                }
+                p {
+                    "I advore problem solving and building cool stuff, I'm happy to jump in and get started! "
+                    Link { to: Route::Contact {}, "Let's create something great together!" }
+                }
+            }
             div { class: "technologies",
 
                 h2 { "Technology" }

src/views/navbar.rs

@@ -17,8 +17,10 @@ pub fn Navbar() -> Element {
         document::Link { rel: "stylesheet", href: STD_COLOUR_AND_FONTS_CSS }
 
         div { id: "navbar",
-            Link { to: Route::NewHome {}, "Home" }
+            Link { to: Route::Home {}, "Home" }
+            Link { to: Route::Projects {}, "Projects" }
             Link { to: Route::Blogs { id: 0 }, "Blogs" }
+            Link { to: Route::Contact {}, "Contact" }
         }
 
         // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either