diff --git a/assets/styling/home.css b/assets/styling/home.css new file mode 100644 index 0000000..9170c2e --- /dev/null +++ b/assets/styling/home.css @@ -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; +} diff --git a/assets/styling/main.css b/assets/styling/main.css index aa7990c..e21dfa4 100644 --- a/assets/styling/main.css +++ b/assets/styling/main.css @@ -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; diff --git a/assets/styling/techs.css b/assets/styling/techs.css index 499f94b..fae64c1 100644 --- a/assets/styling/techs.css +++ b/assets/styling/techs.css @@ -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*/ diff --git a/src/components/techs.rs b/src/components/techs.rs index df458e8..daca30f 100644 --- a/src/components/techs.rs +++ b/src/components/techs.rs @@ -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 } diff --git a/src/helper_fun.rs b/src/helper_fun.rs index 6cf09ad..023eadd 100644 --- a/src/helper_fun.rs +++ b/src/helper_fun.rs @@ -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] diff --git a/src/views/footer.rs b/src/views/footer.rs index 2f66f17..1c7781f 100644 --- a/src/views/footer.rs +++ b/src/views/footer.rs @@ -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}" } diff --git a/src/views/home.rs b/src/views/home.rs index e540ac2..2bf2ad9 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -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 {} + } ) }