From c286ebaa5f486c46a2d39a42084244a6fb5beaf2 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 23 Apr 2025 10:58:22 -0600 Subject: [PATCH] feat(dioxus): refactored to use more table lookups, ready to start on doubling up everythning --- assets/styling/projectCards.css | 15 ++-- src/components/mod.rs | 2 +- src/components/techs.rs | 65 +---------------- src/helper_fun.rs | 121 ++++++++++++++++++++++++++++++++ src/lib.rs | 3 + src/views/footer.rs | 51 +++++--------- src/views/projects.rs | 57 ++++++++------- 7 files changed, 181 insertions(+), 133 deletions(-) create mode 100644 src/helper_fun.rs diff --git a/assets/styling/projectCards.css b/assets/styling/projectCards.css index cb579e5..a5a9e95 100644 --- a/assets/styling/projectCards.css +++ b/assets/styling/projectCards.css @@ -2,7 +2,7 @@ display: flex; flex-direction: column; flex-wrap: wrap; - background-color: aqua; + /* background-color: aqua; */ } .project-card img { @@ -57,13 +57,16 @@ align-items: center; align-self: center; width: 90%; - justify-content: space-between; - /* gap: 1svw; */ + justify-content: flex-start; + column-gap: calc((100% - (60px * 5)) / 4); + row-gap: 1svw; + + padding-bottom: 1svh; } .project-tech-logos img { - width: 60px; - height: 60px; - padding: 1svh 0px; + aspect-ratio: 1; + max-width: 60px; + max-height: 60px; flex: 0 1 19%; } diff --git a/src/components/mod.rs b/src/components/mod.rs index e35ccd6..633dd46 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -6,4 +6,4 @@ mod hero; pub use hero::Hero; mod techs; -pub use techs::{TechCat, TechDes}; +pub use techs::TechCat; diff --git a/src/components/techs.rs b/src/components/techs.rs index 9a601e8..df458e8 100644 --- a/src/components/techs.rs +++ b/src/components/techs.rs @@ -1,5 +1,5 @@ +use crate::helper_fun::tech_table_lookup; use dioxus::prelude::*; -use std::collections::HashMap; const TECHS_CSS: Asset = asset!("/assets/styling/techs.css"); @@ -32,66 +32,3 @@ pub fn TechCat(cat: String, tech_vec: Vec<&'static str>) -> Element { } } } - -#[derive(PartialEq, Props, Clone, Copy)] -pub struct TechDes { - // 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] -} diff --git a/src/helper_fun.rs b/src/helper_fun.rs new file mode 100644 index 0000000..b014269 --- /dev/null +++ b/src/helper_fun.rs @@ -0,0 +1,121 @@ +use dioxus::prelude::*; +use std::collections::HashMap; + +#[component] +pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element { + let raw_data: TechDes = tech_table_lookup(used_tech); + rsx! { + img { src: "{raw_data.lang_logo}", alt: "{used_tech}'s logo/icon" } + } +} + +#[derive(PartialEq, Props, Clone, Copy)] +pub struct TechDes { + // 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, + }, + ), + ( + "Github", + TechDes { + lang_logo: "https://www.svgrepo.com/show/512317/github-142.svg", + project_site: "https://github.com/darkicewolf50", + skill_level: 80, + }, + ), + ( + "Email", + TechDes { + lang_logo: "https://www.svgrepo.com/show/491226/email.svg", + project_site: "mailto:darkicewolf50@gmail.com", + skill_level: 100, + }, + ), + ( + "LinkedIn", + TechDes { + lang_logo: "https://www.svgrepo.com/show/521725/linkedin.svg", + project_site: "https://www.linkedin.com/in/brock-tomlinson/", + skill_level: 40, + }, + ), + ( + "Twitch", + TechDes { + lang_logo: "https://www.svgrepo.com/show/519925/twitch.svg", + project_site: "https://www.twitch.tv/darkicewolf50", + skill_level: 60, + }, + ), + ( + "Youtube", + TechDes { + lang_logo: "https://www.svgrepo.com/show/521936/youtube.svg", + project_site: "https://www.youtube.com/@darkicewolf50", + skill_level: 40, + }, + ), + ( + "Internet", + TechDes { + lang_logo: "https://www.svgrepo.com/show/490809/internet.svg", + project_site: "https://google.com", + skill_level: 99, + }, + ), + ]); + + techs_tools_frameworks_lookup[to_lookup] +} diff --git a/src/lib.rs b/src/lib.rs index 19cc12b..a2a55fd 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -8,6 +8,9 @@ mod components; /// Define a views module that contains the UI for all Layouts and Routes for our app. mod views; +/// Defines where to place all helper functions +mod helper_fun; + /// The Route enum is used to define the structure of internal routes in our app. All route enums need to derive /// the [`Routable`] trait, which provides the necessary methods for the router to work. /// diff --git a/src/views/footer.rs b/src/views/footer.rs index cef3a36..2f66f17 100644 --- a/src/views/footer.rs +++ b/src/views/footer.rs @@ -1,48 +1,33 @@ +use std::collections::HashMap; + +use crate::helper_fun::{tech_table_lookup, TechDes}; use dioxus::prelude::*; const ENDER_CSS: Asset = asset!("/assets/styling/ender.css"); #[component] pub fn Ender() -> Element { + // gets list of items to get + let footer_info_to_get = vec!["Github", "Email", "LinkedIn", "Twitch", "Youtube"]; + + // used so that I dont need to copy paste the same link/info everywhere + let mut footer_info: HashMap<&str, TechDes> = HashMap::new(); + for used_tech_item in footer_info_to_get { + footer_info.insert(used_tech_item, tech_table_lookup(used_tech_item)); + } 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", + for (footer_name , footer_item) in footer_info { + a { href: "{footer_item.project_site}", + img { + src: "{footer_item.lang_logo}", + alt: "{footer_name}'s logo/icon", + } + p { "{footer_name}" } } - 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" } } } } diff --git a/src/views/projects.rs b/src/views/projects.rs index 0f55b8d..3537e6a 100644 --- a/src/views/projects.rs +++ b/src/views/projects.rs @@ -1,3 +1,4 @@ +use crate::helper_fun::get_tech_logos_from_str; use dioxus::prelude::*; #[component] @@ -7,17 +8,28 @@ pub fn Projects() -> Element { h2 { "Projects" } p { "Top Featured and Recent Projects" } } - div { ProjectCards {} } + div { + ProjectCards { + project_name: "Project Name", + website_prop: "https://google.com", + github_prop: "https://google.com", + techs_used: vec!["Rust", "Rust", "Rust", "Rust", "Rust", "Rust", "Rust"], + project_des: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet risus tristique nisi euismod elementum. Duis et est sed neque pulvinar sodales sit amet non purus. Nam ut ultrices enim. Vestibulum blandit sapien dui. Aliquam sit amet ex quis lectus consectetur tempor at non arcu. Curabitur placerat justo sed nulla lobortis molestie. Sed eget justo sit amet justo lobortis tempus. Phasellus laoreet leo est, in lacinia ante aliquet ut. Etiam ultricies fermentum dolor id pretium. Sed dictum nisl id felis pulvinar varius.", + } + } } } const PROJECT_CARDS_CSS: Asset = asset!("/assets/styling/projectCards.css"); #[component] -pub fn ProjectCards() -> Element { - let website: Option<&'static str> = Some("https://google.com"); - let github: Option<&'static str> = Some("https://google.com"); - +pub fn ProjectCards( + website_prop: Option<&'static str>, + github_prop: Option<&'static str>, + project_name: &'static str, + techs_used: Vec<&'static str>, + project_des: &'static str, +) -> Element { rsx! { document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" } div { class: "project-card", @@ -26,17 +38,14 @@ pub fn ProjectCards() -> Element { alt: "dashboard of project or the logo of the project", } div { class: "project-title-info", - h3 { "Project Name" } + h3 { "{project_name}" } div { - if let Some(github_site) = github { + if let Some(github_site) = github_prop { a { href: "{github_site}", - img { - src: "https://www.svgrepo.com/show/512317/github-142.svg", - alt: "Github logo", - } + get_tech_logos_from_str { used_tech: "Github" } } } - if let Some(site) = website { + if let Some(site) = website_prop { a { href: "{site}", img { src: "https://www.svgrepo.com/show/490809/internet.svg", @@ -44,31 +53,21 @@ pub fn ProjectCards() -> Element { } } } - } - } div { - p { - "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet risus tristique nisi euismod elementum. Duis et est sed neque pulvinar sodales sit amet non purus. Nam ut ultrices enim. Vestibulum blandit sapien dui. Aliquam sit amet ex quis lectus consectetur tempor at non arcu. Curabitur placerat justo sed nulla lobortis molestie. Sed eget justo sit amet justo lobortis tempus. Phasellus laoreet leo est, in lacinia ante aliquet ut. Etiam ultricies fermentum dolor id pretium. Sed dictum nisl id felis pulvinar varius." - } - + p { "{project_des}" } } div { class: "project-tech-logos", - img { alt: "todo cards" } - img { alt: "todo cards" } - img { alt: "todo cards" } - img { alt: "todo cards" } - img { alt: "todo cards" } - img { alt: "todo cards" } + for tech in techs_used { + get_tech_logos_from_str { used_tech: tech } + } } - } } } -// if let Some(site) = website { -// a { href: "{site}", {img { -// src: "https://www.svgrepo.com/show/490809/internet.svg", -// alt: "Internet icon", +// img { +// src: "https://www.svgrepo.com/show/512317/github-142.svg", +// alt: "Github logo", // }