feat(technology): finished technology cards and categories, todo improve using const and lookup table

assets/styling/techs.css

@@ -0,0 +1,64 @@
+:root {
+	--tech-gap: 4svw;
+}
+.tech-cat {
+	border: 1px solid salmon;
+	display: flex;
+	flex-direction: column;
+	padding-left: 4svw;
+}
+.tech-cat h3 {
+	display: flex;
+	width: 80%;
+	border-bottom: 4px solid purple;
+	margin: 2svh 0px;
+	margin-left: 4svw;
+	padding-left: 2svw;
+	padding-bottom: 1svh;
+}
+
+.tech-row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--tech-gap);
+}
+
+.tech-card {
+	border: 1px solid whitesmoke;
+	flex: 0 1 calc(33.3% - var(--tech-gap));
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	margin-bottom: 1svh;
+	text-decoration: none;
+	color: inherit;
+}
+
+.tech-card img {
+	/* height: 40px; */
+	padding-top: 2svh;
+
+	height: 100px;
+}
+
+.tech-card progress {
+	width: 90%;
+	margin-bottom: 0.5svh;
+	overflow: hidden;
+	appearance: none;
+	border-radius: 999px;
+}
+
+/* for chromium browsers */
+.tech-card progress::-webkit-progress-value {
+	background-color: steelblue;
+	/* border-radius: 999px; */
+}
+
+/* for firefox browsers */
+.tech-card progress::-moz-progress-bar {
+	background-color: steelblue;
+	/* border-radius: 999px; */
+}

src/components/mod.rs

@@ -4,3 +4,6 @@
 
 mod hero;
 pub use hero::Hero;
+
+mod techs;
+pub use techs::{TechCat, TechDes};

src/components/techs.rs

@@ -0,0 +1,42 @@
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/techs.css");
+
+#[component]
+pub fn TechCard(props_tech: TechDes) -> Element {
+    rsx! {
+        a { class: "tech-card", href: "{props_tech.project_site}",
+            img {
+                src: "{props_tech.lang_logo}",
+                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 {
+    rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+        div { class: "tech-cat",
+            div {
+                h3 { "{cat}" }
+            }
+            div { class: "tech-row",
+                for tech in tech_vec {
+                    TechCard { props_tech: tech }
+                }
+            }
+        }
+    }
+}
+
+#[derive(PartialEq, Props, Clone)]
+pub struct TechDes {
+    pub lang_name: &'static str,
+    pub lang_logo: &'static str,
+    pub project_site: &'static str,
+    pub skill_level: u8,
+}

src/views/home.rs

@@ -1,8 +1,50 @@
+use crate::components::{TechCat, TechDes};
 use dioxus::prelude::*;
 
 #[component]
 pub fn Home() -> Element {
+    let languages = vec![
+        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 }
     )
 }
+
+// https://yaml.org/favicon.svg