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

feat(home): homepage finished

Browse Source
This commit is contained in:
darkicewolf50 2025-04-25 14:03:33 -06:00
parent 05cb8cfc73
commit 8ab01ca725
14 changed files with 377 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/styling/blog.css
View File

@ -6,3 +6,31 @@
color: #ffffff;
margin-top: 50px;
}
#blogs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 80svh;
}
#blogs h1 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
}
#blogs button {
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
border: none;
color: #ffffff;
font-size: xx-large;
padding: 1rem;
}
#blogs a {
text-decoration: none;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}

86
assets/styling/experience.css Normal file
View File

@ -0,0 +1,86 @@
.experience-comp {
display: flex;
flex-direction: column;
flex-wrap: wrap;
/* flex-basis: 50%; */
}
.experience-comp h3 {
display: flex;
/* width: 90%; */
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
.experience-comp table {
border-collapse: separate;
border-spacing: 0svh 0px;
}
.experience-comp td {
position: relative;
margin: 0px;
padding: 0.25svh 2svw;
}
.experience-comp tr:nth-child(even) td {
padding-bottom: 2svh;
}
.postion {
text-wrap: nowrap;
}
.date-location {
text-wrap: nowrap;
}
.symbol {
position: relative;
width: 30px;
text-align: center;
}
.symbol[rowspan]::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background-color: rgb(120, 120, 120);
transform: translateX(-50%);
z-index: 0;
}
.symbol::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
z-index: 1;
}
.dot {
display: inline-block;
background-color: rgb(120, 120, 120);
border-radius: 100%;
width: 16px;
height: 16px;
line-height: 16px;
font-size: 12px;
font-weight: bold;
position: relative;
z-index: 2;
}
tr:nth-child(1) > .symbol::before {
top: 50%;
}
tr:nth-last-child(2) > .symbol::before {
bottom: 50%;
}

25
assets/styling/home.css
View File

@ -3,14 +3,6 @@
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;
@ -18,3 +10,20 @@
column-gap: 1svw;
row-gap: 1svh;
}
#experience {
display: flex;
flex-direction: column;
margin-bottom: 4svh;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
}
#experience div {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
margin: 4svh 0px;
}

7
assets/styling/main.css
View File

@ -5,12 +5,11 @@ body {
margin: 20px;
}
h2 {
width: 90%;
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
margin: 2svh 0px;
margin-left: 2svw;
padding-left: 2svw;
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}
/*

6
assets/styling/techs.css
View File

@ -14,9 +14,9 @@
.tech-cat h3 {
border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius);
margin: 2svh 1svw;
padding-left: 2svw;
display: flex;
margin: 2svh 2svw;
padding: 0svh 2svw;
padding-bottom: 1svh;
}

116
src/components/experience.rs Normal file
View File

@ -0,0 +1,116 @@
use dioxus::prelude::*;
const EXPERIENCE_CSS: Asset = asset!("/assets/styling/experience.css");
#[component]
pub fn Experience(professional_jobs: bool) -> Element {
let experience: [ExpDes; 4] = match professional_jobs {
true => EXPERIENCE_JOBS,
false => EXPERIENCE_VOL,
};
rsx! {
div { class: "experience-comp",
document::Link { rel: "stylesheet", href: EXPERIENCE_CSS }
if professional_jobs {
h3 { "Professional" }
} else {
h3 { "Volunteering" }
}
table {
colgroup {
col { class: "symbol" }
col { class: "postion" }
col { class: "date-location" }
}
tbody {
for exp in experience {
tr {
td { class: "symbol", rowspan: 2,
span { class: "dot", "" }
}
td { "{exp.postition}" }
td { "{exp.start_month} - {exp.end_month}" }
}
tr {
// td { "" }
td { "{exp.company}" }
td { "{exp.location}" }
}
}
}
}
}
}
}
#[derive(PartialEq, Props, Clone)]
struct ExpDes {
pub postition: &'static str,
pub company: &'static str,
pub location: &'static str,
pub start_month: &'static str,
pub end_month: &'static str,
}
const EXPERIENCE_JOBS: [ExpDes; 4] = [
ExpDes {
postition: "Project Coordinator",
company: "Rally Engineering",
location: "Ab",
start_month: "Jan 2025",
end_month: "May 2025",
},
ExpDes {
postition: "Project Controller Student",
company: "Rally Engineering",
location: "Ab",
start_month: "May 2024",
end_month: "Jan 2025",
},
ExpDes {
postition: "Staff",
company: "Red Deer Farmer's Market",
location: "Ab",
start_month: "Mar 2013",
end_month: "Present",
},
ExpDes {
postition: "Staff",
company: "Ghostrider Storage",
location: "BC",
start_month: "Mar 2020",
end_month: "Present",
},
];
const EXPERIENCE_VOL: [ExpDes; 4] = [
ExpDes {
postition: "Software Subteam Lead",
company: "UCalgary Baja",
location: "Ab",
start_month: "Sept 2024",
end_month: "Present",
},
ExpDes {
postition: "Software, Logistics and Business Sub Team Lead",
company: "Schulich Off-Road",
location: "Ab",
start_month: "May 2023",
end_month: "Sept 2024",
},
ExpDes {
postition: "Chassis Junior Member",
company: "Schulich Off-Road",
location: "Ab",
start_month: "Sept 2022",
end_month: "May 2023",
},
ExpDes {
postition: "Coaching with Elk Valley Special Olympics",
company: "Elk Valley Dolphins",
location: "BC",
start_month: "May 2019",
end_month: "May 2019",
},
];

2
src/views/footer.rs → src/components/footer.rs
View File

@ -1,6 +1,6 @@
use std::collections::HashMap;
use crate::helper_fun::{get_tech_logos_from_str, tech_table_lookup, TechDes};
use crate::helper_fun::{tech_table_lookup, TechDes};
use dioxus::prelude::*;
const ENDER_CSS: Asset = asset!("/assets/styling/ender.css");

6
src/components/mod.rs
View File

@ -7,3 +7,9 @@ pub use hero::Hero;
mod techs;
pub use techs::TechCat;
mod footer;
pub use footer::Ender;
mod experience;
pub use experience::Experience;

209
src/helper_fun.rs
View File

@ -11,6 +11,7 @@ pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element {
#[derive(PartialEq, Props, Clone, Copy)]
pub struct TechDes {
pub tech_name: &'static str,
pub tech_logo: &'static str,
pub project_site: &'static str,
pub skill_level: u8,
@ -26,326 +27,246 @@ pub struct ProjectDes {
}
pub fn tech_table_lookup(to_lookup: &str) -> Rc<TechDes> {
let techs_tools_frameworks_lookup: Rc<HashMap<&'static str, TechDes>> = HashMap::from([
(
"Rust",
let mut tech_to_return: TechDes = TechDes {
tech_name: "Not in table",
tech_logo: "",
project_site: "",
skill_level: 0,
};
for tech in TECH_TABLE {
if tech.tech_name == to_lookup {
tech_to_return = tech.into();
}
}
tech_to_return.into()
}
const TECH_TABLE:[TechDes; 37] = [
TechDes {
tech_name: "Rust",
tech_logo: "https://www.svgrepo.com/show/374056/rust.svg",
project_site: "https://www.rust-lang.org",
skill_level: 60,
},
),
(
"Python",
TechDes {
tech_name: "Python",
tech_logo: "https://www.svgrepo.com/show/452091/python.svg",
project_site: "https://www.python.org",
skill_level: 50,
},
),
(
"JavaScript",
TechDes {
tech_name: "JavaScript",
tech_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg",
project_site: "https://www.python.org",
skill_level: 60,
},
),
(
"YAML",
TechDes {
tech_name: "YAML",
tech_logo: "https://yaml.org/favicon.svg",
project_site: "https://yaml.org",
skill_level: 95,
},
),
(
"C",
TechDes {
tech_logo: "https://www.c-language.org/logo.svg",
project_site: "https://www.c-language.org",
skill_level: 49,
},
),
(
"C++",
TechDes {
tech_logo: "https://www.svgrepo.com/show/452183/cpp.svg",
project_site: "https://cplusplus.com",
skill_level: 49,
},
),
(
"Github",
TechDes {
tech_name: "Github",
tech_logo: "https://www.svgrepo.com/show/512317/github-142.svg",
project_site: "https://github.com/darkicewolf50",
skill_level: 80,
},
),
(
"Email",
TechDes {
tech_name: "Email",
tech_logo: "https://www.svgrepo.com/show/491226/email.svg",
project_site: "mailto:darkicewolf50@gmail.com",
skill_level: 100,
},
),
(
"LinkedIn",
TechDes {
tech_name: "LinkedIn",
tech_logo: "https://www.svgrepo.com/show/521725/linkedin.svg",
project_site: "https://www.linkedin.com/in/brock-tomlinson/",
skill_level: 40,
},
),
(
"Twitch",
TechDes {
tech_name: "Twitch",
tech_logo: "https://www.svgrepo.com/show/519925/twitch.svg",
project_site: "https://www.twitch.tv/darkicewolf50",
skill_level: 60,
},
),
(
"Youtube",
TechDes {
tech_name: "Youtube",
tech_logo: "https://www.svgrepo.com/show/521936/youtube.svg",
project_site: "https://www.youtube.com/@darkicewolf50",
skill_level: 40,
},
),
(
"Internet",
TechDes {
tech_name: "Internet",
tech_logo: "https://www.svgrepo.com/show/490809/internet.svg",
project_site: "https://google.com",
skill_level: 99,
},
),
(
"React",
TechDes {
tech_name: "React",
tech_logo: "https://www.svgrepo.com/show/452092/react.svg",
project_site: "https://react.dev",
skill_level: 70,
},
),
(
"Docker",
TechDes {
tech_name: "Docker",
tech_logo: "https://www.svgrepo.com/show/448221/docker.svg",
project_site: "https://www.docker.com",
skill_level: 70,
},
),
(
"FastAPI",
TechDes {
tech_name: "FastAPI",
tech_logo: "https://fastapi.tiangolo.com/img/favicon.png",
project_site: "https://fastapi.tiangolo.com",
skill_level: 80,
},
),
(
"Actix",
TechDes {
tech_name: "Actix",
tech_logo: "https://actix.rs/img/logo.png",
project_site: "https://actix.rs",
skill_level: 20,
},
),
(
"HTML5",
TechDes {
tech_name: "HTML5",
tech_logo: "https://www.svgrepo.com/show/452228/html-5.svg",
project_site: "https://google.com",
skill_level: 90,
},
),
(
"CSS",
TechDes {
tech_name: "CSS",
tech_logo: "https://www.svgrepo.com/show/452185/css-3.svg",
project_site: "https://google.com",
skill_level: 65,
},
),
(
"Git",
TechDes {
tech_name: "Git",
tech_logo: "https://www.svgrepo.com/show/452210/git.svg",
project_site: "https://git-scm.com",
skill_level: 55,
},
),
(
"Github Actions",
TechDes {
tech_name: "Github Actions",
tech_logo: "https://cdn.simpleicons.org/githubactions/2088FF",
project_site: "https://github.com/",
skill_level: 50,
},
),
(
"Vs Code",
TechDes {
tech_name: "Vs Code",
tech_logo: "https://www.svgrepo.com/show/452129/vs-code.svg",
project_site: "https://code.visualstudio.com",
skill_level: 60,
},
),
(
"Gitea",
TechDes {
tech_name: "Gitea",
tech_logo: "https://about.gitea.com/gitea.png",
project_site: "https://about.gitea.com",
skill_level: 85,
},
),
(
"AWS",
TechDes {
tech_name: "AWS",
tech_logo: "https://www.svgrepo.com/show/448266/aws.svg",
project_site: "https://aws.amazon.com",
skill_level: 30,
},
),
(
"Firefox",
TechDes {
tech_logo:
"https://www.svgrepo.com/show/378808/firefox-developer-edition-57-70.svg",
tech_name: "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",
TechDes {
tech_name: "Markdown",
tech_logo: "https://www.svgrepo.com/show/510065/markdown.svg",
project_site: "https://www.markdownguide.org",
skill_level: 90,
},
),
(
"Prettier",
TechDes {
tech_name: "Prettier",
tech_logo: "https://prettier.io/icon.png",
project_site: "https://prettier.io",
skill_level: 90,
},
),
(
"DynamoDB",
TechDes {
tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
project_site: "https://aws.amazon.com/dynamodb/",
skill_level: 70,
},
),
(
"Cloudflare",
TechDes {
tech_name: "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: 65,
},
),
(
"Netlify",
TechDes {
tech_name: "Netlify",
tech_logo: "https://qualified-production.s3.us-east-1.amazonaws.com/uploads/0f63ae7280d8d193e346973a1915bf99aea8c63e254eb062bad0bde99b43a9b7.png",
project_site: "https://www.netlify.com",
skill_level: 60,
},
),
(
"Vercel",
TechDes {
tech_name: "Vercel",
tech_logo: "https://www.svgrepo.com/show/361653/vercel-logo.svg",
project_site: "https://vercel.com/home",
skill_level: 60,
},
),
(
"Dioxus",
TechDes {
tech_name: "Dioxus",
tech_logo: "https://dioxuslabs.com/assets/smalllogo-b1926fd214dc8427.png",
project_site: "https://dioxuslabs.com",
skill_level: 70,
},
),
(
"Vue",
TechDes {
tech_name: "Vue",
tech_logo: "https://vuejs.org/logo.svg",
project_site: "https://vuejs.org",
skill_level: 1,
},
),
(
"Mongodb",
TechDes {
tech_name: "Mongodb",
tech_logo: "https://www.svgrepo.com/show/331488/mongodb.svg",
project_site: "https://www.mongodb.com",
skill_level: 10,
},
),
(
"Sqlite",
TechDes {
tech_name: "Sqlite",
tech_logo: "https://www.svgrepo.com/show/374094/sqlite.svg",
project_site: "https://www.sqlite.org",
skill_level: 10,
},
),
(
"PostgreSQL",
TechDes {
tech_name: "PostgreSQL",
tech_logo: "https://www.svgrepo.com/show/303301/postgresql-logo.svg",
project_site: "https://www.postgresql.org",
skill_level: 10,
},
),
(
"Diesel",
TechDes {
tech_name: "DynamoDB",
tech_logo: "https://www.svgrepo.com/show/473526/amazondynamodb.svg",
project_site: "https://aws.amazon.com/dynamodb/",
skill_level: 70,
},
TechDes {
tech_name: "Diesel",
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_name: "Kubernetes",
tech_logo: "https://kubernetes.io/images/kubernetes.png",
project_site: "https://kubernetes.io",
skill_level: 5,
},
),
(
"Terraform",
TechDes {
tech_name: "Terraform",
tech_logo: "https://www.svgrepo.com/show/448253/terraform.svg",
project_site: "https://www.terraform.io",
skill_level: 15,
},
),
(
"Traefik",
TechDes {
tech_name: "Traefik",
tech_logo: "https://hub.docker.com/api/media/repos_logo/v1/library%2Ftraefik",
project_site: "https://traefik.io/traefik/",
skill_level: 60,
},
),
]).into();
techs_tools_frameworks_lookup[to_lookup].into()
}
// pub fn techs_tools_frameworks_lookup_create() -> HashMap<&'static str, TechDes> {
// techs_tools_frameworks_lookup
// }
];

7
src/lib.rs
View File

@ -1,7 +1,7 @@
use dioxus::prelude::*;
// use components::Hero;
use views::{Blog, Home, Navbar, NewHome};
use views::{Blog, Blogs, Home, Navbar, NewHome};
/// Define a components module that contains all shared components for our app.
mod components;
@ -31,7 +31,10 @@ pub enum Route {
#[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 },
Blogs { id: i32 },
#[route("/blogs/:blog_title")]
Blog {blog_title: String},
#[route("/test")]
Hello {},

50
src/views/blog.rs
View File

@ -1,5 +1,5 @@
use crate::Route;
use dioxus::prelude::*;
use dioxus::{document::Link, prelude::*};
const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
@ -8,31 +8,43 @@ const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
/// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
/// re-run and the rendered HTML will be updated.
#[component]
pub fn Blog(id: i32) -> Element {
pub fn Blog(blog_title: String) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: BLOG_CSS }
div {
id: "blog",
div { id: "blog",
// Content
h1 { "This is blog #{id}!" }
p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
h1 { "This is blog #{blog_title}!" }
p {
"In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components."
}
// Navigation links
// The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
// any number of child nodes.
Link {
// The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
// blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
// at compile time to make sure they are valid.
to: Route::Blog { id: id - 1 },
"Previous"
// // Navigation links
// // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
// // any number of child nodes.
// Link {
// // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
// // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
// // at compile time to make sure they are valid.
// to: Route::Blog { id: id - 1 },
// "Previous"
// }
// span { " <---> " }
// Link { to: Route::Blog { id: id + 1 }, "Next" }
}
span { " <---> " }
Link {
to: Route::Blog { id: id + 1 },
"Next"
}
}
#[component]
pub fn Blogs(id: i32) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: BLOG_CSS }
div { id: "blogs",
h1 { "Page Under Development" }
p { "Please Try Again Later" }
dioxus::prelude::Link { to: Route::Home {},
button { "Home" }
}
}
}

11
src/views/home.rs
View File

@ -1,4 +1,4 @@
use crate::components::TechCat;
use crate::components::{Experience, TechCat};
use crate::views::{Contact, Projects};
use dioxus::prelude::*;
@ -10,8 +10,6 @@ pub fn Home() -> Element {
"Rust",
"Python",
"YAML",
"C",
"C++",
"HTML5",
"CSS",
"JavaScript",
@ -52,6 +50,13 @@ pub fn Home() -> Element {
}
Contact {}
Projects {}
div { id: "experience",
h2 { "Experience" }
div {
Experience { professional_jobs: true }
Experience { professional_jobs: false }
}
}
}
)
}

5
src/views/mod.rs
View File

@ -12,7 +12,7 @@ mod new_home;
pub use new_home::NewHome;
mod blog;
pub use blog::Blog;
pub use blog::{Blog, Blogs};
mod navbar;
pub use navbar::Navbar;
@ -20,9 +20,6 @@ pub use navbar::Navbar;
mod home;
pub use home::Home;
mod footer;
pub use footer::Ender;
mod contact;
pub use contact::Contact;

4
src/views/navbar.rs
View File

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