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

feat(home): started on home layout, may need to use display:grid

Browse Source
This commit is contained in:
darkicewolf50 2025-04-23 19:56:45 -06:00
parent c5fa636b39
commit 33c933d455
7 changed files with 210 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/styling/home.css Normal file
View File

@ -0,0 +1,20 @@
.technologies {
display: flex;
flex-direction: column;
}
/* .technologies p {
width: 90%;
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
} */
.technologies-cat {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
column-gap: 2svw;
row-gap: 1svh;
}

10
assets/styling/main.css
View File

@ -5,13 +5,21 @@ body {
margin: 20px;
}
h2 {
width: 80%;
width: 90%;
border-bottom: var(--underlineTitle);
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
}
/*
p {
width: 90%;
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
padding-bottom: 1svh;
} */
#hero {
margin: 0;

54
assets/styling/techs.css
View File

@ -4,43 +4,58 @@
.tech-cat {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding-left: 4svw;
flex-flow: column wrap;
padding: 0px 2svw;
padding-bottom: 2svh;
margin-bottom: 3svh;
column-gap: var(--tech-gap);
flex: 1 1 30%;
min-width: clamp(250px, 33%, 100%);
/* flex: 0 1 calc((100% - 2 * 2svw) / 3); */
}
.tech-cat h3 {
display: flex;
width: 80%;
/* flex: 0 1 100%; */
border-bottom: var(--underlineTitle);
margin: 2svh 0px;
margin-left: 4svw;
margin: 2svh 1svw;
padding-left: 2svw;
padding-bottom: 1svh;
}
.tech-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--tech-gap);
flex-flow: row wrap;
column-gap: 2svw;
row-gap: 4svh;
justify-content: space-between;
align-items: stretch;
}
.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;
align-items: center;
padding-bottom: 1svh;
flex: 0 1 calc((100% - 2 * var(--tech-gap)) / 4);
text-decoration: none;
color: inherit;
padding: 0px 1svw;
padding-top: 2svh;
}
.tech-card img {
/* height: 40px; */
padding-top: 2svh;
height: 100px;
width: calc(100%- 2svw);
max-height: 40svh;
min-height: 50px;
min-width: 50px;
aspect-ratio: 1;
object-fit: contain;
}
.tech-card progress {
@ -49,6 +64,13 @@
overflow: hidden;
appearance: none;
border-radius: 999px;
justify-self: flex-end;
align-self: center;
}
.tech-card h4 {
margin: 2svh 0px;
font-weight: normal;
}
/* for chromium browsers */
@ -62,3 +84,5 @@
background-color: steelblue;
/* border-radius: 999px; */
}
/* 48.19 , 68.58*/

8
src/components/techs.rs
View File

@ -9,7 +9,7 @@ pub fn TechCard(tech_props: &'static str) -> Element {
rsx! {
a { class: "tech-card", href: "{props_tech.project_site}",
img { src: "{props_tech.lang_logo}", alt: "{tech_props}'s logo" }
img { src: "{props_tech.tech_logo}", alt: "{tech_props}'s logo" }
h4 { "{tech_props}" }
progress { value: props_tech.skill_level, max: 100 }
}
@ -17,13 +17,11 @@ pub fn TechCard(tech_props: &'static str) -> Element {
}
#[component]
pub fn TechCat(cat: String, tech_vec: Vec<&'static str>) -> Element {
pub fn TechCat(cat: &'static str, tech_vec: Vec<&'static str>) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: TECHS_CSS }
div { class: "tech-cat",
div {
h3 { "{cat}" }
}
h3 { "{cat}" }
div { class: "tech-row",
for tech in tech_vec {
TechCard { tech_props: tech }

125
src/helper_fun.rs
View File

@ -5,13 +5,13 @@ use std::collections::HashMap;
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" }
img { src: "{raw_data.tech_logo}", alt: "{used_tech}'s logo/icon" }
}
}
#[derive(PartialEq, Props, Clone, Copy)]
pub struct TechDes {
pub lang_logo: &'static str,
pub tech_logo: &'static str,
pub project_site: &'static str,
pub skill_level: u8,
}
@ -30,7 +30,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Rust",
TechDes {
lang_logo: "https://www.rust-lang.org/static/images/rust-logo-blk.svg",
tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
project_site: "https://www.rust-lang.org",
skill_level: 40,
},
@ -38,7 +38,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Python",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452091/python.svg",
tech_logo: "https://www.svgrepo.com/show/452091/python.svg",
project_site: "https://www.python.org",
skill_level: 50,
},
@ -46,7 +46,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"JavaScript",
TechDes {
lang_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
project_site: "https://www.python.org",
skill_level: 60,
},
@ -54,7 +54,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"YAML",
TechDes {
lang_logo: "https://yaml.org/favicon.svg",
tech_logo: "https://yaml.org/favicon.svg",
project_site: "https://yaml.org",
skill_level: 95,
},
@ -62,7 +62,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"C",
TechDes {
lang_logo: "https://www.c-language.org/logo.svg",
tech_logo: "https://www.c-language.org/logo.svg",
project_site: "https://www.c-language.org",
skill_level: 30,
},
@ -70,7 +70,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"C++",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
tech_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
project_site: "https://cplusplus.com",
skill_level: 30,
},
@ -78,7 +78,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Github",
TechDes {
lang_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
project_site: "https://github.com/darkicewolf50",
skill_level: 80,
},
@ -86,7 +86,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Email",
TechDes {
lang_logo: "https://www.svgrepo.com/show/491226/email.svg",
tech_logo: "https://www.svgrepo.com/show/491226/email.svg",
project_site: "mailto:darkicewolf50@gmail.com",
skill_level: 100,
},
@ -94,7 +94,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"LinkedIn",
TechDes {
lang_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
project_site: "https://www.linkedin.com/in/brock-tomlinson/",
skill_level: 40,
},
@ -102,7 +102,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Twitch",
TechDes {
lang_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
project_site: "https://www.twitch.tv/darkicewolf50",
skill_level: 60,
},
@ -110,7 +110,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Youtube",
TechDes {
lang_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
project_site: "https://www.youtube.com/@darkicewolf50",
skill_level: 40,
},
@ -118,7 +118,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Internet",
TechDes {
lang_logo: "https://www.svgrepo.com/show/490809/internet.svg",
tech_logo: "https://www.svgrepo.com/show/490809/internet.svg",
project_site: "https://google.com",
skill_level: 99,
},
@ -126,7 +126,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"React",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452092/react.svg",
tech_logo: "https://www.svgrepo.com/show/452092/react.svg",
project_site: "https://react.dev",
skill_level: 60,
},
@ -134,7 +134,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Docker",
TechDes {
lang_logo: "https://www.svgrepo.com/show/448221/docker.svg",
tech_logo: "https://www.svgrepo.com/show/448221/docker.svg",
project_site: "https://www.docker.com",
skill_level: 70,
},
@ -142,7 +142,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"FastAPI",
TechDes {
lang_logo: "https://fastapi.tiangolo.com/img/favicon.png",
tech_logo: "https://fastapi.tiangolo.com/img/favicon.png",
project_site: "https://fastapi.tiangolo.com",
skill_level: 80,
},
@ -150,7 +150,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Actix",
TechDes {
lang_logo: "https://actix.rs/img/logo.png",
tech_logo: "https://actix.rs/img/logo.png",
project_site: "https://actix.rs",
skill_level: 20,
},
@ -158,7 +158,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"HTML5",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
project_site: "https://google.com",
skill_level: 90,
},
@ -166,7 +166,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"CSS",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
project_site: "https://google.com",
skill_level: 40,
},
@ -174,7 +174,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Git",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452210/git.svg",
tech_logo: "https://www.svgrepo.com/show/452210/git.svg",
project_site: "https://git-scm.com",
skill_level: 50,
},
@ -182,7 +182,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Github Actions",
TechDes {
lang_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
project_site: "https://github.com/",
skill_level: 40,
},
@ -190,7 +190,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Vs Code",
TechDes {
lang_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
project_site: "https://code.visualstudio.com",
skill_level: 60,
},
@ -198,7 +198,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Gitea",
TechDes {
lang_logo: "https://www.svgrepo.com/show/349372/gitea.svg",
tech_logo: "https://about.gitea.com/gitea.png",
project_site: "https://about.gitea.com",
skill_level: 85,
},
@ -206,7 +206,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"AWS",
TechDes {
lang_logo: "https://www.svgrepo.com/show/448266/aws.svg",
tech_logo: "https://www.svgrepo.com/show/448266/aws.svg",
project_site: "https://aws.amazon.com",
skill_level: 30,
},
@ -214,7 +214,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Firefox",
TechDes {
lang_logo:
tech_logo:
"https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
project_site: "https://www.mozilla.org/en-CA/firefox/developer/",
skill_level: 80,
@ -223,7 +223,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Markdown",
TechDes {
lang_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
project_site: "https://www.markdownguide.org",
skill_level: 90,
},
@ -231,7 +231,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Prettier",
TechDes {
lang_logo: "https://prettier.io/icon.png
tech_logo: "https://prettier.io/icon.png
",
project_site: "https://prettier.io",
skill_level: 90,
@ -240,7 +240,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"DynamoDB",
TechDes {
lang_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
project_site: "https://aws.amazon.com/dynamodb/",
skill_level: 20,
},
@ -248,7 +248,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Cloudflare",
TechDes {
lang_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png",
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png",
project_site: "https://www.cloudflare.com/en-ca/",
skill_level: 35,
},
@ -256,7 +256,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Netlify",
TechDes {
lang_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
project_site: "https://www.netlify.com",
skill_level: 34,
},
@ -264,7 +264,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Vercel",
TechDes {
lang_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
project_site: "https://vercel.com/home",
skill_level: 30
},
@ -272,7 +272,7 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Dioxus",
TechDes {
lang_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
project_site: "https://dioxuslabs.com",
skill_level: 40,
},
@ -280,11 +280,68 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
(
"Vue",
TechDes {
lang_logo: "https://vuejs.org/logo.svg",
tech_logo: "https://vuejs.org/logo.svg",
project_site: "https://vuejs.org",
skill_level: 1,
},
),
(
"Mongodb",
TechDes {
tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg",
project_site: "https://www.mongodb.com",
skill_level: 10,
},
),
(
"Sqlite",
TechDes {
tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg",
project_site: "https://www.sqlite.org",
skill_level: 10,
},
),
(
"PostgreSQL",
TechDes {
tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
project_site: "https://www.postgresql.org",
skill_level: 10,
},
),
(
"Diesel",
TechDes {
tech_logo: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
project_site: "https://diesel.rs",
skill_level: 10,
},
),
(
"Kubernetes",
TechDes {
tech_logo: "
https://kubernetes.io/images/kubernetes.png",
project_site: "https://kubernetes.io",
skill_level: 5,
},
),
(
"Terraform",
TechDes {
tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg",
project_site: "https://www.terraform.io",
skill_level: 10,
},
),
(
"Traefik",
TechDes {
tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
project_site: "https://traefik.io/traefik/",
skill_level: 40,
},
),
]);
techs_tools_frameworks_lookup[to_lookup]

2
src/views/footer.rs
View File

@ -23,7 +23,7 @@ pub fn Ender() -> Element {
for (footer_name , footer_item) in footer_info {
a { href: "{footer_item.project_site}",
img {
src: "{footer_item.lang_logo}",
src: "{footer_item.tech_logo}",
alt: "{footer_name}'s logo/icon",
}
p { "{footer_name}" }

52
src/views/home.rs
View File

@ -2,14 +2,56 @@ use crate::components::TechCat;
use crate::views::{Contact, Projects};
use dioxus::prelude::*;
const HOME_CSS: Asset = asset!("/assets/styling/home.css");
#[component]
pub fn Home() -> Element {
let languages: Vec<&'static str> = vec!["Rust", "Python", "JavaScript", "YAML", "C", "C++"];
let languages = vec![
"Rust",
"Python",
"YAML",
"C",
"C++",
"HTML5",
"CSS",
"JavaScript",
"Markdown",
];
let backend = vec!["Actix", "FastAPI", "Dioxus", "Diesel"];
let frontend = vec!["React", "Dioxus", "Vue"];
let databases = vec!["Sqlite", "PostgreSQL", "Mongodb", "DynamoDB"];
let tools = vec![
"Vs Code",
"Git",
"Prettier",
"Firefox",
"Github Actions",
"Traefik",
"Docker",
"Kubernetes",
"Terraform",
];
let platforms = vec!["AWS", "Cloudflare", "Vercel", "Netlify", "Gitea", "Github"];
rsx!(
h1 { "Hi I'm Brock" }
TechCat { cat: "Languages".to_string(), tech_vec: languages }
Contact {}
Projects {}
document::Link { rel: "stylesheet", href: HOME_CSS }
div {
h1 { "Hi I'm Brock" }
div { class: "technologies",
h2 { "Technology" }
p { "Here is what I prefer to use." }
div { class: "technologies-cat",
TechCat { cat: "Languages", tech_vec: languages }
TechCat { cat: "Backend", tech_vec: backend }
TechCat { cat: "Frontend", tech_vec: frontend }
TechCat { cat: "Databases", tech_vec: databases }
TechCat { cat: "Tools", tech_vec: tools }
TechCat { cat: "Platfroms", tech_vec: platforms }
}
}
Contact {}
Projects {}
}
)
}