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

Feat(dioxus): finished tech category, footer, contact, and started home and tech cards

Browse Source
This commit is contained in:
darkicewolf50 2025-04-22 16:28:12 -06:00
parent 467edd5e54
commit f2e479acc7
13 changed files with 367 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/professional_photo_2023.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

74
assets/styling/contact.css Normal file
View File

@ -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;
}

28
assets/styling/ender.css Normal file
View File

@ -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;
}

60
assets/styling/main.css
View File

@ -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;
}
max-width: 1200px;
}

3
assets/styling/standardColoursandFonts.css Normal file
View File

@ -0,0 +1,3 @@
:root {
--underlineTitle: 4px solid purple;
}

2
assets/styling/techs.css
View File

@ -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;

81
src/components/techs.rs
View File

@ -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<TechDes>) -> 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]
}

85
src/views/contact.rs Normal file
View File

@ -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" }
}
}
}
}
}
}
}

50
src/views/footer.rs Normal file
View File

@ -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" }
}
}
}
}
}

41
src/views/home.rs
View File

@ -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 {}
)
}

8
src/views/mod.rs
View File

@ -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;

5
src/views/navbar.rs
View File

@ -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::<Route> {}
Ender {}
}
}

7
src/views/projects.rs Normal file
View File

@ -0,0 +1,7 @@
use dioxus::prelude::*;
#[component]
pub fn Projects() -> Element {
todo!();
rsx! {}
}