Feat(dioxus): finished tech category, footer, contact, and started home and tech cards

assets/styling/contact.css

@@ -0,0 +1,74 @@
+#contact {
+	display: flex;
+	flex-direction: row;
+	gap: 2svw;
+	align-items: center;
+}
+
+#contact img {
+	flex: 1 1 50%;
+	border-radius: 100%;
+	max-width: 40%;
+	object-fit: cover;
+	display: block;
+}
+
+#contact div {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+#contact div ul {
+	display: flex;
+	flex-direction: column;
+}
+
+#contact div ul div {
+	display: flex;
+	flex-direction: row;
+}
+
+#contact a {
+	text-decoration: none;
+	color: inherit;
+}
+
+#contact h4 {
+	text-align: center;
+	margin-bottom: 0px;
+}
+
+#contact div ul {
+	list-style-type: none;
+	gap: 1svh;
+	padding: 0px;
+}
+
+#contact div ul li {
+	justify-content: flex-start;
+
+	border: 1px solid whitesmoke;
+}
+
+#contact div ul li a {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+#contact div ul li a div {
+	display: flex;
+	flex-direction: column;
+}
+
+#contact ul li p {
+	padding: 0px;
+	margin: 0px;
+}
+
+#contact ul li img {
+	height: 80px;
+	object-fit: contain;
+	border-radius: 0px;
+}

assets/styling/ender.css

@@ -0,0 +1,28 @@
+footer {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+
+	background-color: #d3d3d3;
+}
+
+footer div {
+	display: flex;
+	flex-direction: row;
+	flex: 1 1 2;
+	justify-content: space-between;
+}
+
+footer img {
+	height: 100px;
+}
+
+footer a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	border: 1px solid lightgray;
+	text-decoration: none;
+	color: inherit;
+}

assets/styling/main.css

@@ -1,42 +1,50 @@
 body {
-    background-color: #0f1116;
+	background-color: #0f1116;
-    color: #ffffff;
+	color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
+	margin: 20px;
+}
+h2 {
+	width: 80%;
+	border-bottom: var(--underlineTitle);
+	margin: 2svh 0px;
+	margin-left: 2svw;
+	padding-left: 2svw;
+	padding-bottom: 1svh;
 }
 
 #hero {
-    margin: 0;
+	margin: 0;
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
-    justify-content: center;
+	justify-content: center;
-    align-items: center;
+	align-items: center;
 }
 
 #links {
-    width: 400px;
+	width: 400px;
-    text-align: left;
+	text-align: left;
-    font-size: x-large;
+	font-size: x-large;
-    color: white;
+	color: white;
-    display: flex;
+	display: flex;
-    flex-direction: column;
+	flex-direction: column;
 }
 
 #links a {
-    color: white;
+	color: white;
-    text-decoration: none;
+	text-decoration: none;
-    margin-top: 20px;
+	margin-top: 20px;
-    margin: 10px 0px;
+	margin: 10px 0px;
-    border: white 1px solid;
+	border: white 1px solid;
-    border-radius: 5px;
+	border-radius: 5px;
-    padding: 10px;
+	padding: 10px;
 }
 
 #links a:hover {
-    background-color: #1f1f1f;
+	background-color: #1f1f1f;
-    cursor: pointer;
+	cursor: pointer;
 }
 
 #header {
-    max-width: 1200px;
+	max-width: 1200px;
-}
+}

assets/styling/standardColoursandFonts.css

@@ -0,0 +1,3 @@
+:root {
+	--underlineTitle: 4px solid purple;
+}

assets/styling/techs.css

@@ -10,7 +10,7 @@
 .tech-cat h3 {
 	display: flex;
 	width: 80%;
-	border-bottom: 4px solid purple;
+	border-bottom: var(--underlineTitle);
 	margin: 2svh 0px;
 	margin-left: 4svw;
 	padding-left: 2svw;

src/components/techs.rs

@@ -1,42 +1,99 @@
+use std::collections::HashMap;
+use std::hash::{BuildHasherDefault, DefaultHasher};
+
 use dioxus::prelude::*;
 
-const NAVBAR_CSS: Asset = asset!("/assets/styling/techs.css");
+const TECHS_CSS: Asset = asset!("/assets/styling/techs.css");
 
 #[component]
-pub fn TechCard(props_tech: TechDes) -> Element {
+pub fn TechCard(tech_props: &'static str) -> Element {
+    let props_tech = tech_table_lookup(tech_props);
+
     rsx! {
         a { class: "tech-card", href: "{props_tech.project_site}",
-            img {
+            img { src: "{props_tech.lang_logo}", alt: "{tech_props}'s logo" }
-                src: "{props_tech.lang_logo}",
+            h4 { "{tech_props}" }
-                alt: "{props_tech.lang_name}'s logo",
-            }
-            h4 { "{props_tech.lang_name}" }
             progress { value: props_tech.skill_level, max: 100 }
         }
     }
 }
 
 #[component]
-pub fn TechCat(cat: String, tech_vec: Vec<TechDes>) -> Element {
+pub fn TechCat(cat: String, tech_vec: Vec<&'static str>) -> Element {
     rsx! {
-        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+        document::Link { rel: "stylesheet", href: TECHS_CSS }
         div { class: "tech-cat",
             div {
                 h3 { "{cat}" }
             }
             div { class: "tech-row",
                 for tech in tech_vec {
-                    TechCard { props_tech: tech }
+                    TechCard { tech_props: tech }
                 }
             }
         }
     }
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(PartialEq, Props, Clone, Copy)]
 pub struct TechDes {
-    pub lang_name: &'static str,
+    // to be removed soon
     pub lang_logo: &'static str,
     pub project_site: &'static str,
     pub skill_level: u8,
 }
+
+pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
+    let techs_tools_frameworks_lookup = HashMap::from([
+        (
+            "Rust",
+            TechDes {
+                lang_logo: "https://www.rust-lang.org/static/images/rust-logo-blk.svg",
+                project_site: "https://www.rust-lang.org",
+                skill_level: 40,
+            },
+        ),
+        (
+            "Python",
+            TechDes {
+                lang_logo: "https://www.svgrepo.com/show/452091/python.svg",
+                project_site: "https://www.python.org",
+                skill_level: 50,
+            },
+        ),
+        (
+            "JavaScript",
+            TechDes {
+                lang_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
+                project_site: "https://www.python.org",
+                skill_level: 60,
+            },
+        ),
+        (
+            "YAML",
+            TechDes {
+                lang_logo: "https://yaml.org/favicon.svg",
+                project_site: "https://yaml.org",
+                skill_level: 95,
+            },
+        ),
+        (
+            "C",
+            TechDes {
+                lang_logo: "https://www.c-language.org/logo.svg",
+                project_site: "https://www.c-language.org",
+                skill_level: 30,
+            },
+        ),
+        (
+            "C++",
+            TechDes {
+                lang_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
+                project_site: "https://cplusplus.com",
+                skill_level: 30,
+            },
+        ),
+    ]);
+
+    techs_tools_frameworks_lookup[to_lookup]
+}

src/views/contact.rs

@@ -0,0 +1,85 @@
+use dioxus::prelude::*;
+
+const PROFESSIONAL_PHOTO_JPG: Asset = asset!("assets/professional_photo_2023.jpg");
+const CONTACT_CSS: Asset = asset!("/assets/styling/contact.css");
+
+#[component]
+pub fn Contact() -> Element {
+    rsx! {
+        document::Link { href: CONTACT_CSS, rel: "stylesheet" }
+        h2 { "Contact" }
+        div { id: "contact",
+            img {
+                src: PROFESSIONAL_PHOTO_JPG,
+                alt: "Borck's professional photo",
+            }
+            div {
+                h4 { "Brock Tomlinson" }
+                ul {
+                    li { "FullStack Webdev and Student Software Engineer" }
+                    li {
+                        a { href: "mailto:darkicewolf50@gmail.com",
+                            img {
+                                src: "https://www.svgrepo.com/show/491226/email.svg",
+                                alt: "Email icon/logo",
+                            }
+                            div {
+                                p { "Email I check:" }
+                                p { "darkicewolf50@gmail.com" }
+                            }
+                        }
+                    }
+                    li {
+                        a { href: "mailto:brock@eatsleepski.com",
+                            img {
+                                src: "https://www.svgrepo.com/show/491226/email.svg",
+                                alt: "Email icon/logo",
+                            }
+                            div {
+                                p { "Professional Email:" }
+                                p { "brock@eatsleepski.com" }
+                            }
+                        }
+                    }
+                    li {
+                        a {
+                            img {
+                                src: "https://www.svgrepo.com/show/512317/github-142.svg",
+                                alt: "Github logo",
+                            }
+                            p { "darkicewolf50" }
+                        }
+                    }
+                    li {
+                        a {
+                            img {
+                                src: "https://www.svgrepo.com/show/521725/linkedin.svg",
+                                alt: "LinkedIn logo",
+                            }
+                            p { "Brock Tomlinson" }
+                        }
+                    }
+                    li {
+                        a {
+                            img {
+                                src: "https://www.svgrepo.com/show/519925/twitch.svg",
+                                alt: "Twitch logo",
+                            }
+                            p { "darkicewolf50" }
+                        }
+                    }
+                    li {
+                        a {
+                            img {
+                                src: "https://www.svgrepo.com/show/521936/youtube.svg",
+                                alt: "Youtube logo",
+                            }
+                            p { "@darkicewolf50" }
+                        }
+                    }
+                }
+            
+            }
+        }
+    }
+}

src/views/footer.rs

@@ -0,0 +1,50 @@
+use dioxus::prelude::*;
+
+const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");
+
+#[component]
+pub fn Ender() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: ENDER_CSS }
+        footer {
+            p { "Brock Tomlinson © 2025" }
+            div {
+                a { href: "https://github.com/darkicewolf50",
+                    img {
+                        src: "https://www.svgrepo.com/show/512317/github-142.svg",
+                        alt: "Github logo",
+                    }
+                    p { "Github" }
+                }
+                a { href: "mailto:darkicewolf50@gmail.com",
+                    img {
+                        src: "https://www.svgrepo.com/show/491226/email.svg",
+                        alt: "Email logo/icon",
+                    }
+                    p { "Email" }
+                }
+                a { href: "https://www.linkedin.com/in/brock-tomlinson/",
+                    img {
+                        src: "https://www.svgrepo.com/show/521725/linkedin.svg",
+                        alt: "LinkedIn logo",
+                    }
+                    p { "LinkedIn" }
+                }
+                a { href: "https://www.twitch.tv/darkicewolf50",
+                    img {
+                        src: "https://www.svgrepo.com/show/519925/twitch.svg",
+                        alt: "Twitch logo",
+                    }
+                    p { "Twitch" }
+                }
+                a { href: "https://www.youtube.com/@darkicewolf50",
+                    img {
+                        src: "https://www.svgrepo.com/show/521936/youtube.svg",
+                        alt: "Youtube logo",
+                    }
+                    p { "Youtube" }
+                }
+            }
+        }
+    }
+}

src/views/home.rs

@@ -1,49 +1,14 @@
 use crate::components::{TechCat, TechDes};
+use crate::views::Contact;
 use dioxus::prelude::*;
 
 #[component]
 pub fn Home() -> Element {
-    let languages = vec![
+    let languages: Vec<&'static str> = vec!["Rust", "Python", "JavaScript", "YAML", "C", "C++"];
-        TechDes {
-            lang_name: "Rust",
-            lang_logo: "https://www.rust-lang.org/static/images/rust-logo-blk.svg",
-            project_site: "https://www.rust-lang.org",
-            skill_level: 40,
-        },
-        TechDes {
-            lang_name: "Python",
-            lang_logo: "https://www.svgrepo.com/show/452091/python.svg",
-            project_site: "https://www.python.org",
-            skill_level: 50,
-        },
-        TechDes {
-            lang_name: "JavaScript",
-            lang_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
-            project_site: "https://www.python.org",
-            skill_level: 60,
-        },
-        TechDes {
-            lang_name: "YAML",
-            lang_logo: "https://yaml.org/favicon.svg",
-            project_site: "https://yaml.org",
-            skill_level: 95,
-        },
-        TechDes {
-            lang_name: "C",
-            lang_logo: "https://www.c-language.org/logo.svg",
-            project_site: "https://www.c-language.org",
-            skill_level: 30,
-        },
-        TechDes {
-            lang_name: "C++",
-            lang_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
-            project_site: "https://cplusplus.com",
-            skill_level: 30,
-        },
-    ];
     rsx!(
         h1 { "Hi I'm Brock" }
         TechCat { cat: "Languages".to_string(), tech_vec: languages }
+        Contact {}
     )
 }
 

src/views/mod.rs

@@ -19,3 +19,11 @@ pub use navbar::Navbar;
 
 mod home;
 pub use home::Home;
+
+mod footer;
+pub use footer::Ender;
+
+mod contact;
+pub use contact::Contact;
+
+mod projects;

src/views/navbar.rs

@@ -1,7 +1,9 @@
+use crate::views::Ender;
 use crate::Route;
 use dioxus::prelude::*;
 
 const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+const STD_COLOUR_AND_FONTS_CSS: Asset = asset!("assets/styling/standardColoursandFonts.css");
 
 /// The Navbar component that will be rendered on all pages of our app since every page is under the layout.
 ///
@@ -12,6 +14,7 @@ const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
 pub fn Navbar() -> Element {
     rsx! {
         document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+        document::Link { rel: "stylesheet", href: STD_COLOUR_AND_FONTS_CSS }
 
         div { id: "navbar",
             Link { to: Route::NewHome {}, "Home" }
@@ -21,5 +24,7 @@ pub fn Navbar() -> Element {
         // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
         // the [`Home`] or [`Blog`] component depending on the current route.
         Outlet::<Route> {}
+
+        Ender {}
     }
 }

src/views/projects.rs

@@ -0,0 +1,7 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Projects() -> Element {
+    todo!();
+    rsx! {}
+}