darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dioxus): refactored to use more table lookups, ready to start on doubling up everythning

Browse Source
This commit is contained in:
darkicewolf50 2025-04-23 10:58:22 -06:00
parent 25238dea05
commit c286ebaa5f
7 changed files with 181 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/styling/projectCards.css
View File

@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
background-color: aqua; /* background-color: aqua; */
} }
.project-card img { .project-card img {
@ -57,13 +57,16 @@
align-items: center; align-items: center;
align-self: center; align-self: center;
width: 90%; width: 90%;
justify-content: space-between; justify-content: flex-start;
/* gap: 1svw; */ column-gap: calc((100% - (60px * 5)) / 4);
row-gap: 1svw;
padding-bottom: 1svh;
} }
.project-tech-logos img { .project-tech-logos img {
width: 60px; aspect-ratio: 1;
height: 60px; max-width: 60px;
padding: 1svh 0px; max-height: 60px;
flex: 0 1 19%; flex: 0 1 19%;
} }

2
src/components/mod.rs
View File

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

65
src/components/techs.rs
View File

@ -1,5 +1,5 @@
use crate::helper_fun::tech_table_lookup;
use dioxus::prelude::*; use dioxus::prelude::*;
use std::collections::HashMap;
const TECHS_CSS: Asset = asset!("/assets/styling/techs.css"); 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]
}

121
src/helper_fun.rs Normal file
View File

@ -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]
}

3
src/lib.rs
View File

@ -8,6 +8,9 @@ mod components;
/// Define a views module that contains the UI for all Layouts and Routes for our app. /// Define a views module that contains the UI for all Layouts and Routes for our app.
mod views; 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 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. /// the [`Routable`] trait, which provides the necessary methods for the router to work.
/// ///

51
src/views/footer.rs
View File

@ -1,48 +1,33 @@
use std::collections::HashMap;
use crate::helper_fun::{tech_table_lookup, TechDes};
use dioxus::prelude::*; use dioxus::prelude::*;
const ENDER_CSS: Asset = asset!("/assets/styling/ender.css"); const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");
#[component] #[component]
pub fn Ender() -> Element { 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! { rsx! {
document::Link { rel: "stylesheet", href: ENDER_CSS } document::Link { rel: "stylesheet", href: ENDER_CSS }
footer { footer {
p { "Brock Tomlinson © 2025" } p { "Brock Tomlinson © 2025" }
div { div {
a { href: "https://github.com/darkicewolf50", for (footer_name , footer_item) in footer_info {
img { a { href: "{footer_item.project_site}",
src: "https://www.svgrepo.com/show/512317/github-142.svg", img {
alt: "Github logo", 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" }
} }
} }
} }

57
src/views/projects.rs
View File

@ -1,3 +1,4 @@
use crate::helper_fun::get_tech_logos_from_str;
use dioxus::prelude::*; use dioxus::prelude::*;
#[component] #[component]
@ -7,17 +8,28 @@ pub fn Projects() -> Element {
h2 { "Projects" } h2 { "Projects" }
p { "Top Featured and Recent 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"); const PROJECT_CARDS_CSS: Asset = asset!("/assets/styling/projectCards.css");
#[component] #[component]
pub fn ProjectCards() -> Element { pub fn ProjectCards(
let website: Option<&'static str> = Some("https://google.com"); website_prop: Option<&'static str>,
let github: Option<&'static str> = Some("https://google.com"); github_prop: Option<&'static str>,
project_name: &'static str,
techs_used: Vec<&'static str>,
project_des: &'static str,
) -> Element {
rsx! { rsx! {
document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" } document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" }
div { class: "project-card", div { class: "project-card",
@ -26,17 +38,14 @@ pub fn ProjectCards() -> Element {
alt: "dashboard of project or the logo of the project", alt: "dashboard of project or the logo of the project",
} }
div { class: "project-title-info", div { class: "project-title-info",
h3 { "Project Name" } h3 { "{project_name}" }
div { div {
if let Some(github_site) = github { if let Some(github_site) = github_prop {
a { href: "{github_site}", a { href: "{github_site}",
img { get_tech_logos_from_str { used_tech: "Github" }
src: "https://www.svgrepo.com/show/512317/github-142.svg",
alt: "Github logo",
}
} }
} }
if let Some(site) = website { if let Some(site) = website_prop {
a { href: "{site}", a { href: "{site}",
img { img {
src: "https://www.svgrepo.com/show/490809/internet.svg", src: "https://www.svgrepo.com/show/490809/internet.svg",
@ -44,31 +53,21 @@ pub fn ProjectCards() -> Element {
} }
} }
} }
} }
} }
div { div {
p { p { "{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."
}
} }
div { class: "project-tech-logos", div { class: "project-tech-logos",
img { alt: "todo cards" } for tech in techs_used {
img { alt: "todo cards" } get_tech_logos_from_str { used_tech: tech }
img { alt: "todo cards" } }
img { alt: "todo cards" }
img { alt: "todo cards" }
img { alt: "todo cards" }
} }
} }
} }
} }
// if let Some(site) = website { // img {
// a { href: "{site}", {img { // src: "https://www.svgrepo.com/show/512317/github-142.svg",
// src: "https://www.svgrepo.com/show/490809/internet.svg", // alt: "Github logo",
// alt: "Internet icon",
// } // }