diff --git a/assets/professional_photo_2023.jpg b/assets/professional_photo_2023.jpg new file mode 100644 index 0000000..027c5be Binary files /dev/null and b/assets/professional_photo_2023.jpg differ diff --git a/assets/styling/contact.css b/assets/styling/contact.css new file mode 100644 index 0000000..821fed6 --- /dev/null +++ b/assets/styling/contact.css @@ -0,0 +1,74 @@ +#contact { + display: flex; + flex-direction: row; + gap: 2svw; + align-items: center; +} + +#contact img { + flex: 1 1 50%; + border-radius: 100%; + max-width: 40%; + object-fit: cover; + display: block; +} + +#contact div { + display: flex; + flex-direction: column; + flex: 1; +} + +#contact div ul { + display: flex; + flex-direction: column; +} + +#contact div ul div { + display: flex; + flex-direction: row; +} + +#contact a { + text-decoration: none; + color: inherit; +} + +#contact h4 { + text-align: center; + margin-bottom: 0px; +} + +#contact div ul { + list-style-type: none; + gap: 1svh; + padding: 0px; +} + +#contact div ul li { + justify-content: flex-start; + + border: 1px solid whitesmoke; +} + +#contact div ul li a { + display: flex; + flex-direction: row; + align-items: center; +} + +#contact div ul li a div { + display: flex; + flex-direction: column; +} + +#contact ul li p { + padding: 0px; + margin: 0px; +} + +#contact ul li img { + height: 80px; + object-fit: contain; + border-radius: 0px; +} diff --git a/assets/styling/ender.css b/assets/styling/ender.css new file mode 100644 index 0000000..ad28cc5 --- /dev/null +++ b/assets/styling/ender.css @@ -0,0 +1,28 @@ +footer { + display: flex; + flex-direction: column; + text-align: center; + + background-color: #d3d3d3; +} + +footer div { + display: flex; + flex-direction: row; + flex: 1 1 2; + justify-content: space-between; +} + +footer img { + height: 100px; +} + +footer a { + display: flex; + flex-direction: column; + align-items: center; + + border: 1px solid lightgray; + text-decoration: none; + color: inherit; +} diff --git a/assets/styling/main.css b/assets/styling/main.css index e13b92d..aa7990c 100644 --- a/assets/styling/main.css +++ b/assets/styling/main.css @@ -1,42 +1,50 @@ body { - background-color: #0f1116; - color: #ffffff; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - margin: 20px; + background-color: #0f1116; + color: #ffffff; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + margin: 20px; +} +h2 { + width: 80%; + border-bottom: var(--underlineTitle); + margin: 2svh 0px; + margin-left: 2svw; + padding-left: 2svw; + padding-bottom: 1svh; } #hero { - margin: 0; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } #links { - width: 400px; - text-align: left; - font-size: x-large; - color: white; - display: flex; - flex-direction: column; + width: 400px; + text-align: left; + font-size: x-large; + color: white; + display: flex; + flex-direction: column; } #links a { - color: white; - text-decoration: none; - margin-top: 20px; - margin: 10px 0px; - border: white 1px solid; - border-radius: 5px; - padding: 10px; + color: white; + text-decoration: none; + margin-top: 20px; + margin: 10px 0px; + border: white 1px solid; + border-radius: 5px; + padding: 10px; } #links a:hover { - background-color: #1f1f1f; - cursor: pointer; + background-color: #1f1f1f; + cursor: pointer; } #header { - max-width: 1200px; -} \ No newline at end of file + max-width: 1200px; +} diff --git a/assets/styling/standardColoursandFonts.css b/assets/styling/standardColoursandFonts.css new file mode 100644 index 0000000..3a10ad8 --- /dev/null +++ b/assets/styling/standardColoursandFonts.css @@ -0,0 +1,3 @@ +:root { + --underlineTitle: 4px solid purple; +} diff --git a/assets/styling/techs.css b/assets/styling/techs.css index 8564811..499f94b 100644 --- a/assets/styling/techs.css +++ b/assets/styling/techs.css @@ -10,7 +10,7 @@ .tech-cat h3 { display: flex; width: 80%; - border-bottom: 4px solid purple; + border-bottom: var(--underlineTitle); margin: 2svh 0px; margin-left: 4svw; padding-left: 2svw; diff --git a/src/components/techs.rs b/src/components/techs.rs index 25f8d24..26abf98 100644 --- a/src/components/techs.rs +++ b/src/components/techs.rs @@ -1,42 +1,99 @@ +use std::collections::HashMap; +use std::hash::{BuildHasherDefault, DefaultHasher}; + use dioxus::prelude::*; -const NAVBAR_CSS: Asset = asset!("/assets/styling/techs.css"); +const TECHS_CSS: Asset = asset!("/assets/styling/techs.css"); #[component] -pub fn TechCard(props_tech: TechDes) -> Element { +pub fn TechCard(tech_props: &'static str) -> Element { + let props_tech = tech_table_lookup(tech_props); + rsx! { a { class: "tech-card", href: "{props_tech.project_site}", - img { - src: "{props_tech.lang_logo}", - alt: "{props_tech.lang_name}'s logo", - } - h4 { "{props_tech.lang_name}" } + img { src: "{props_tech.lang_logo}", alt: "{tech_props}'s logo" } + h4 { "{tech_props}" } progress { value: props_tech.skill_level, max: 100 } } } } #[component] -pub fn TechCat(cat: String, tech_vec: Vec) -> Element { +pub fn TechCat(cat: String, tech_vec: Vec<&'static str>) -> Element { rsx! { - document::Link { rel: "stylesheet", href: NAVBAR_CSS } + document::Link { rel: "stylesheet", href: TECHS_CSS } div { class: "tech-cat", div { h3 { "{cat}" } } div { class: "tech-row", for tech in tech_vec { - TechCard { props_tech: tech } + TechCard { tech_props: tech } } } } } } -#[derive(PartialEq, Props, Clone)] +#[derive(PartialEq, Props, Clone, Copy)] pub struct TechDes { - pub lang_name: &'static str, + // 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] +} diff --git a/src/views/contact.rs b/src/views/contact.rs new file mode 100644 index 0000000..578dfbd --- /dev/null +++ b/src/views/contact.rs @@ -0,0 +1,85 @@ +use dioxus::prelude::*; + +const PROFESSIONAL_PHOTO_JPG: Asset = asset!("assets/professional_photo_2023.jpg"); +const CONTACT_CSS: Asset = asset!("/assets/styling/contact.css"); + +#[component] +pub fn Contact() -> Element { + rsx! { + document::Link { href: CONTACT_CSS, rel: "stylesheet" } + h2 { "Contact" } + div { id: "contact", + img { + src: PROFESSIONAL_PHOTO_JPG, + alt: "Borck's professional photo", + } + div { + h4 { "Brock Tomlinson" } + ul { + li { "FullStack Webdev and Student Software Engineer" } + li { + a { href: "mailto:darkicewolf50@gmail.com", + img { + src: "https://www.svgrepo.com/show/491226/email.svg", + alt: "Email icon/logo", + } + div { + p { "Email I check:" } + p { "darkicewolf50@gmail.com" } + } + } + } + li { + a { href: "mailto:brock@eatsleepski.com", + img { + src: "https://www.svgrepo.com/show/491226/email.svg", + alt: "Email icon/logo", + } + div { + p { "Professional Email:" } + p { "brock@eatsleepski.com" } + } + } + } + li { + a { + img { + src: "https://www.svgrepo.com/show/512317/github-142.svg", + alt: "Github logo", + } + p { "darkicewolf50" } + } + } + li { + a { + img { + src: "https://www.svgrepo.com/show/521725/linkedin.svg", + alt: "LinkedIn logo", + } + p { "Brock Tomlinson" } + } + } + li { + a { + img { + src: "https://www.svgrepo.com/show/519925/twitch.svg", + alt: "Twitch logo", + } + p { "darkicewolf50" } + } + } + li { + a { + img { + src: "https://www.svgrepo.com/show/521936/youtube.svg", + alt: "Youtube logo", + } + p { "@darkicewolf50" } + } + } + } + + } + } + } +} diff --git a/src/views/footer.rs b/src/views/footer.rs new file mode 100644 index 0000000..cef3a36 --- /dev/null +++ b/src/views/footer.rs @@ -0,0 +1,50 @@ +use dioxus::prelude::*; + +const ENDER_CSS: Asset = asset!("/assets/styling/ender.css"); + +#[component] +pub fn Ender() -> Element { + rsx! { + document::Link { rel: "stylesheet", href: ENDER_CSS } + footer { + p { "Brock Tomlinson © 2025" } + div { + a { href: "https://github.com/darkicewolf50", + img { + src: "https://www.svgrepo.com/show/512317/github-142.svg", + alt: "Github logo", + } + 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" } + } + } + } + } +} diff --git a/src/views/home.rs b/src/views/home.rs index b1790bd..aa4caac 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -1,49 +1,14 @@ use crate::components::{TechCat, TechDes}; +use crate::views::Contact; use dioxus::prelude::*; #[component] pub fn Home() -> Element { - let languages = vec![ - TechDes { - lang_name: "Rust", - lang_logo: "https://www.rust-lang.org/static/images/rust-logo-blk.svg", - project_site: "https://www.rust-lang.org", - skill_level: 40, - }, - TechDes { - lang_name: "Python", - lang_logo: "https://www.svgrepo.com/show/452091/python.svg", - project_site: "https://www.python.org", - skill_level: 50, - }, - TechDes { - lang_name: "JavaScript", - lang_logo: "https://www.svgrepo.com/show/303206/javascript-logo.svg", - project_site: "https://www.python.org", - skill_level: 60, - }, - TechDes { - lang_name: "YAML", - lang_logo: "https://yaml.org/favicon.svg", - project_site: "https://yaml.org", - skill_level: 95, - }, - TechDes { - lang_name: "C", - lang_logo: "https://www.c-language.org/logo.svg", - project_site: "https://www.c-language.org", - skill_level: 30, - }, - TechDes { - lang_name: "C++", - lang_logo: "https://www.svgrepo.com/show/452183/cpp.svg", - project_site: "https://cplusplus.com", - skill_level: 30, - }, - ]; + let languages: Vec<&'static str> = vec!["Rust", "Python", "JavaScript", "YAML", "C", "C++"]; rsx!( h1 { "Hi I'm Brock" } TechCat { cat: "Languages".to_string(), tech_vec: languages } + Contact {} ) } diff --git a/src/views/mod.rs b/src/views/mod.rs index 4ddb91b..45682ed 100644 --- a/src/views/mod.rs +++ b/src/views/mod.rs @@ -19,3 +19,11 @@ pub use navbar::Navbar; mod home; pub use home::Home; + +mod footer; +pub use footer::Ender; + +mod contact; +pub use contact::Contact; + +mod projects; diff --git a/src/views/navbar.rs b/src/views/navbar.rs index 4b18e08..7fe2b7c 100644 --- a/src/views/navbar.rs +++ b/src/views/navbar.rs @@ -1,7 +1,9 @@ +use crate::views::Ender; use crate::Route; use dioxus::prelude::*; const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css"); +const STD_COLOUR_AND_FONTS_CSS: Asset = asset!("assets/styling/standardColoursandFonts.css"); /// The Navbar component that will be rendered on all pages of our app since every page is under the layout. /// @@ -12,6 +14,7 @@ const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css"); pub fn Navbar() -> Element { rsx! { document::Link { rel: "stylesheet", href: NAVBAR_CSS } + document::Link { rel: "stylesheet", href: STD_COLOUR_AND_FONTS_CSS } div { id: "navbar", Link { to: Route::NewHome {}, "Home" } @@ -21,5 +24,7 @@ pub fn Navbar() -> Element { // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either // the [`Home`] or [`Blog`] component depending on the current route. Outlet:: {} + + Ender {} } } diff --git a/src/views/projects.rs b/src/views/projects.rs new file mode 100644 index 0000000..11d6bee --- /dev/null +++ b/src/views/projects.rs @@ -0,0 +1,7 @@ +use dioxus::prelude::*; + +#[component] +pub fn Projects() -> Element { + todo!(); + rsx! {} +}