revert(helper_fun): made web app unstabel

This commit is contained in:
darkicewolf50 2025-04-24 18:07:25 -06:00
parent 4d1e45359c
commit b79c109876
12 changed files with 388 additions and 119 deletions

View File

@ -84,6 +84,8 @@
width: var(--img-height);
object-fit: contain;
border-radius: 0px;
background-color: transparent;
filter: invert() hue-rotate(180deg);
}
@media only screen and (max-width: 430px) {

View File

@ -3,7 +3,10 @@ footer {
flex-direction: column;
text-align: center;
background-color: #d3d3d3;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* background-color: #d3d3d3; */
}
footer div {
@ -15,14 +18,13 @@ footer div {
footer img {
height: 60px;
filter: invert() hue-rotate(180deg);
}
footer a {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid lightgray;
text-decoration: none;
color: inherit;
}

View File

@ -54,7 +54,9 @@
.project-title-info img {
height: var(--img-width);
width: var(--img-height);
padding: 1svh 0px;
margin: 1svh 6px;
padding: 0px;
filter: invert() hue-rotate(180deg);
}
.project-title-info div {
@ -88,5 +90,6 @@
aspect-ratio: 1;
height: var(--img-width);
width: var(--img-height);
/* flex: 0 1 19%; */
}

View File

@ -39,7 +39,7 @@
flex: 0 1 70px;
text-decoration: none;
color: inherit;
padding: 0px 0svw;
padding: 0px 0.5svw;
padding-top: 2svh;
padding-bottom: 0.5svh;
background-color: var(--card-background-color);

View File

@ -4,8 +4,8 @@ use dioxus::prelude::*;
const TECHS_CSS: Asset = asset!("/assets/styling/techs.css");
#[component]
pub fn TechCard(tech_props: &'static str) -> Element {
let props_tech = tech_table_lookup(tech_props);
pub fn TechCard(tech_props: &'static str, high_skill: bool, low_skill: bool) -> Element {
let props_tech = tech_table_lookup(tech_props, high_skill, low_skill);
rsx! {
a { class: "tech-card", href: "{props_tech.project_site}",
@ -24,7 +24,11 @@ pub fn TechCat(cat: &'static str, tech_vec: Vec<&'static str>) -> Element {
h3 { "{cat}" }
div { class: "tech-row",
for tech in tech_vec {
TechCard { tech_props: tech }
TechCard {
tech_props: tech,
high_skill: true,
low_skill: false,
}
}
}
}

View File

@ -3,7 +3,7 @@ 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);
let raw_data: TechDes = tech_table_lookup(used_tech, false, false);
rsx! {
img { src: "{raw_data.tech_logo}", alt: "{used_tech}'s logo/icon" }
}
@ -25,193 +25,208 @@ pub struct ProjectDes {
project_des: &'static str,
}
pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
let techs_tools_frameworks_lookup = HashMap::from([
(
pub fn tech_table_lookup(to_lookup: &str, high_skill: bool, low_skill: bool) -> TechDes {
let techs_tools_frameworks_lookup = techs_tools_frameworks_lookup_create();
if !high_skill && !low_skill {
return techs_tools_frameworks_lookup[to_lookup];
} else {
return TechDes {
tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
project_site: "https://www.rust-lang.org",
skill_level: 60,
};
}
}
pub fn techs_tools_frameworks_lookup_create() -> HashMap<&'static str, TechDes> {
let mut techs_tools_frameworks_lookup = HashMap::new();
{
techs_tools_frameworks_lookup.insert(
"Rust",
TechDes {
tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
project_site: "https://www.rust-lang.org",
skill_level: 40,
skill_level: 60,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Python",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452091/python.svg",
project_site: "https://www.python.org",
skill_level: 50,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"JavaScript",
TechDes {
tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
project_site: "https://www.python.org",
skill_level: 60,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"YAML",
TechDes {
tech_logo: "https://yaml.org/favicon.svg",
project_site: "https://yaml.org",
skill_level: 95,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"C",
TechDes {
tech_logo: "https://www.c-language.org/logo.svg",
project_site: "https://www.c-language.org",
skill_level: 30,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"C++",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
project_site: "https://cplusplus.com",
skill_level: 30,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Github",
TechDes {
tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
project_site: "https://github.com/darkicewolf50",
skill_level: 80,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Email",
TechDes {
tech_logo: "https://www.svgrepo.com/show/491226/email.svg",
project_site: "mailto:darkicewolf50@gmail.com",
skill_level: 100,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"LinkedIn",
TechDes {
tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
project_site: "https://www.linkedin.com/in/brock-tomlinson/",
skill_level: 40,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Twitch",
TechDes {
tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
project_site: "https://www.twitch.tv/darkicewolf50",
skill_level: 60,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Youtube",
TechDes {
tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
project_site: "https://www.youtube.com/@darkicewolf50",
skill_level: 40,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Internet",
TechDes {
tech_logo: "https://www.svgrepo.com/show/490809/internet.svg",
project_site: "https://google.com",
skill_level: 99,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"React",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452092/react.svg",
project_site: "https://react.dev",
skill_level: 60,
skill_level: 70,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Docker",
TechDes {
tech_logo: "https://www.svgrepo.com/show/448221/docker.svg",
project_site: "https://www.docker.com",
skill_level: 70,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"FastAPI",
TechDes {
tech_logo: "https://fastapi.tiangolo.com/img/favicon.png",
project_site: "https://fastapi.tiangolo.com",
skill_level: 80,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Actix",
TechDes {
tech_logo: "https://actix.rs/img/logo.png",
project_site: "https://actix.rs",
skill_level: 20,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"HTML5",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
project_site: "https://google.com",
skill_level: 90,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"CSS",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
project_site: "https://google.com",
skill_level: 40,
skill_level: 65,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Git",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452210/git.svg",
project_site: "https://git-scm.com",
skill_level: 50,
skill_level: 55,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Github Actions",
TechDes {
tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
project_site: "https://github.com/",
skill_level: 40,
skill_level: 50,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Vs Code",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
project_site: "https://code.visualstudio.com",
skill_level: 60,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Gitea",
TechDes {
tech_logo: "https://about.gitea.com/gitea.png",
project_site: "https://about.gitea.com",
skill_level: 85,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"AWS",
TechDes {
tech_logo: "https://www.svgrepo.com/show/448266/aws.svg",
project_site: "https://aws.amazon.com",
skill_level: 30,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Firefox",
TechDes {
tech_logo:
@ -219,130 +234,127 @@ pub fn tech_table_lookup(to_lookup: &str) -> TechDes {
project_site: "https://www.mozilla.org/en-CA/firefox/developer/",
skill_level: 80,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Markdown",
TechDes {
tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
project_site: "https://www.markdownguide.org",
skill_level: 90,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Prettier",
TechDes {
tech_logo: "https://prettier.io/icon.png
",
tech_logo: "https://prettier.io/icon.png",
project_site: "https://prettier.io",
skill_level: 90,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"DynamoDB",
TechDes {
tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
project_site: "https://aws.amazon.com/dynamodb/",
skill_level: 20,
skill_level: 70,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Cloudflare",
TechDes {
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,
skill_level: 65,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Netlify",
TechDes {
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
project_site: "https://www.netlify.com",
skill_level: 34,
skill_level: 60,
},
),
(
"Vercel",
);
techs_tools_frameworks_lookup.insert(
"Vercel",
TechDes {
tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
project_site: "https://vercel.com/home",
skill_level: 30
tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
project_site: "https://vercel.com/home",
skill_level: 60,
},
),
);
(
"Dioxus",
TechDes {
tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
project_site: "https://dioxuslabs.com",
skill_level: 40,
skill_level: 70,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Vue",
TechDes {
tech_logo: "https://vuejs.org/logo.svg",
project_site: "https://vuejs.org",
skill_level: 1,
},
),
(
"Mongodb",
);
techs_tools_frameworks_lookup.insert(
"Mongodb",
TechDes {
tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg",
project_site: "https://www.mongodb.com",
skill_level: 10,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Sqlite",
TechDes {
tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg",
project_site: "https://www.sqlite.org",
skill_level: 10,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"PostgreSQL",
TechDes {
tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
project_site: "https://www.postgresql.org",
skill_level: 10,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Diesel",
TechDes {
tech_logo: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
project_site: "https://diesel.rs",
skill_level: 10,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Kubernetes",
TechDes {
tech_logo: "
https://kubernetes.io/images/kubernetes.png",
tech_logo: "https://kubernetes.io/images/kubernetes.png",
project_site: "https://kubernetes.io",
skill_level: 5,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Terraform",
TechDes {
tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg",
project_site: "https://www.terraform.io",
skill_level: 10,
skill_level: 15,
},
),
(
);
techs_tools_frameworks_lookup.insert(
"Traefik",
TechDes {
tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
project_site: "https://traefik.io/traefik/",
skill_level: 40,
skill_level: 60,
},
),
]);
techs_tools_frameworks_lookup[to_lookup]
);
}
techs_tools_frameworks_lookup
}

View File

@ -28,7 +28,7 @@ pub enum Route {
Home {},
// The route attribute can include dynamic parameters that implement [`std::str::FromStr`] and [`std::fmt::Display`] with the `:` syntax.
// In this case, id will match any integer like `/blog/123` or `/blog/-456`.
#[route("/blog/:id")]
#[route("/blogs/:id")]
// Fields of the route variant will be passed to the component as props. In this case, the blog component must accept
// an `id` prop of type `i32`.
Blog { id: i32 },
@ -38,6 +38,9 @@ pub enum Route {
#[route("/new_home")]
NewHome {},
// PageNotFound is a catch all route that will match any route and placing the matched segments in the route field
#[route("/:..route")]
PageNotFound { route: Vec<String> },
}
#[component]
@ -48,3 +51,11 @@ fn Hello() -> Element {
}
)
}
#[component]
fn PageNotFound(route: Vec<String>) -> Element {
rsx! {
h1 { "Page not found" }
p { "We are terribly sorry, but the page you requested doesn't exist." }
}
}

View File

@ -13,7 +13,10 @@ pub fn Ender() -> Element {
// 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));
footer_info.insert(
used_tech_item,
tech_table_lookup(used_tech_item, false, false),
);
}
rsx! {
document::Link { rel: "stylesheet", href: ENDER_CSS }

View File

@ -39,7 +39,7 @@ pub fn Home() -> Element {
div { class: "technologies",
h2 { "Technology" }
p { "Here is what I prefer to use." }
p { "Here is what I developed skills in." }
div { class: "technologies-cat",
TechCat { cat: "Languages", tech_vec: languages }
TechCat { cat: "Backend", tech_vec: backend }

View File

@ -18,7 +18,7 @@ pub fn Navbar() -> Element {
div { id: "navbar",
Link { to: Route::NewHome {}, "Home" }
Link { to: Route::Blog { id: 1 }, "Blog" }
Link { to: Route::Blog { id: 0 }, "Blogs" }
}
// The `Outlet` component is used to render the next component inside the layout. In this case, it will render either

View File

@ -61,10 +61,7 @@ pub fn ProjectCards(
}
if let Some(site) = website_prop {
a { href: "{site}",
img {
src: "https://www.svgrepo.com/show/490809/internet.svg",
alt: "Internet icon",
}
get_tech_logos_from_str { used_tech: "Internet" }
}
}
}

235
techs.json Normal file
View File

@ -0,0 +1,235 @@
{
"Rust": {
"tech_logo": "https://www.svgrepo.com/show/374056/rust.svg",
"project_site": "https://www.rust-lang.org",
"skill_level": 65
},
"Python": {
"tech_logo": "https://www.svgrepo.com/show/452091/python.svg",
"project_site": "https://www.python.org",
"skill_level": 60
},
"JavaScript": {
"tech_logo": "https://www.svgrepo.com/show/303206/javascript-logo.svg",
"project_site": "https://www.python.org",
"skill_level": 60
},
"YAML": {
"tech_logo": "https://yaml.org/favicon.svg",
"project_site": "https://yaml.org",
"skill_level": 95
},
"C": {
"tech_logo": "https://www.c-language.org/logo.svg",
"project_site": "https://www.c-language.org",
"skill_level": 50
},
"C++": {
"tech_logo": "https://www.svgrepo.com/show/452183/cpp.svg",
"project_site": "https://cplusplus.com",
"skill_level": 50
},
"Github": {
"tech_logo": "https://www.svgrepo.com/show/512317/github-142.svg",
"project_site": "https://github.com/darkicewolf50",
"skill_level": 80
},
"Email": {
"tech_logo": "https://www.svgrepo.com/show/491226/email.svg",
"project_site": "mailto:darkicewolf50@gmail.com",
"skill_level": 100
},
"LinkedIn": {
"tech_logo": "https://www.svgrepo.com/show/521725/linkedin.svg",
"project_site": "https://www.linkedin.com/in/brock-tomlinson/",
"skill_level": 4
},
"Twitch": {
"tech_logo": "https://www.svgrepo.com/show/519925/twitch.svg",
"project_site": "https://www.twitch.tv/darkicewolf50",
"skill_level": 6
},
"Youtube": {
"tech_logo": "https://www.svgrepo.com/show/521936/youtube.svg",
"project_site": "https://www.youtube.com/@darkicewolf50",
"skill_level": 4
},
"Internet": {
"tech_logo": "https://www.svgrepo.com/show/490809/internet.svg",
"project_site": "https://google.com",
"skill_level": 99
},
"React": {
"tech_logo": "https://www.svgrepo.com/show/452092/react.svg",
"project_site": "https://react.dev",
"skill_level": 60
},
"Docker": {
"tech_logo": "https://www.svgrepo.com/show/448221/docker.svg",
"project_site": "https://www.docker.com",
"skill_level": 70
},
"FastAPI": {
"tech_logo": "https://fastapi.tiangolo.com/img/favicon.png",
"project_site": "https://fastapi.tiangolo.com",
"skill_level": 80
},
"Actix": {
"tech_logo": "https://actix.rs/img/logo.png",
"project_site": "https://actix.rs",
"skill_level": 20
},
"HTML5": {
"tech_logo": "https://www.svgrepo.com/show/452228/html-5.svg",
"project_site": "https://google.com",
"skill_level": 90
},
"CSS": {
"tech_logo": "https://www.svgrepo.com/show/452185/css-3.svg",
"project_site": "https://google.com",
"skill_level": 60
},
"Git": {
"tech_logo": "https://www.svgrepo.com/show/452210/git.svg",
"project_site": "https://git-scm.com",
"skill_level": 50
},
"Github Actions": {
"tech_logo": "https://cdn.simpleicons.org/githubactions/2088FF",
"project_site": "https://github.com/",
"skill_level": 40
},
"Vs Code": {
"tech_logo": "https://www.svgrepo.com/show/452129/vs-code.svg",
"project_site": "https://code.visualstudio.com",
"skill_level": 60
},
"Gitea": {
"tech_logo": "https://about.gitea.com/gitea.png",
"project_site": "https://about.gitea.com",
"skill_level": 85
},
"AWS": {
"tech_logo": "https://www.svgrepo.com/show/448266/aws.svg",
"project_site": "https://aws.amazon.com",
"skill_level": 40
},
"Firefox": {
"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
},
"Markdown": {
"tech_logo": "https://www.svgrepo.com/show/510065/markdown.svg",
"project_site": "https://www.markdownguide.org",
"skill_level": 90
},
"Prettier": {
"tech_logo": "https://prettier.io/icon.png",
"project_site": "https://prettier.io",
"skill_level": 90
},
"DynamoDB": {
"tech_logo": "https://www.svgrepo.com/show/353450/aws-dynamodb.svg",
"project_site": "https://aws.amazon.com/dynamodb/",
"skill_level": 50
},
"Cloudflare": {
"tech_logo": "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/3b522ef84c409e4457032e4b4e3b984abbc92522c6f100f4ccc55c0ccfd3062b.png",
"project_site": "https://www.cloudflare.com/en-ca/",
"skill_level": 40
},
"Netlify": {
"tech_logo": "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
"project_site": "https://www.netlify.com",
"skill_level": 70
},
"Vercel": {
"tech_logo": "https://www.svgrepo.com/show/361653/vercel-logo.svg",
"project_site": "https://vercel.com/home",
"skill_level": 60
},
"Dioxus": {
"tech_logo": "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
"project_site": "https://dioxuslabs.com",
"skill_level": 60
},
"Vue": {
"tech_logo": "https://vuejs.org/logo.svg",
"project_site": "https://vuejs.org",
"skill_level": 1
},
"Mongodb": {
"tech_logo": "https://www.svgrepo.com/show/331488/mongodb.svg",
"project_site": "https://www.mongodb.com",
"skill_level": 10
},
"Sqlite": {
"tech_logo": "https://www.svgrepo.com/show/374094/sqlite.svg",
"project_site": "https://www.sqlite.org",
"skill_level": 10
},
"PostgreSQL": {
"tech_logo": "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
"project_site": "https://www.postgresql.org",
"skill_level": 10
},
"Diesel": {
"tech_logo": "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745443276/diesel_logo_ujtvia.png",
"project_site": "https://diesel.rs",
"skill_level": 10
},
"Kubernetes": {
"tech_logo": "https://kubernetes.io/images/kubernetes.png",
"project_site": "https://kubernetes.io",
"skill_level": 5
},
"Terraform": {
"tech_logo": "https://www.svgrepo.com/show/448253/terraform.svg",
"project_site": "https://www.terraform.io",
"skill_level": 10
},
"Traefik": {
"tech_logo": "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
"project_site": "https://traefik.io/traefik/",
"skill_level": 60
}
}