From dc67f71f559faa2c51980947250856830dce0051 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 14 May 2025 17:57:24 -0600 Subject: [PATCH] feat(dixous): started groundwork for blogs, UI now more consistent and contact me works --- Cargo.lock | 2 +- Cargo.toml | 2 +- Design Docs.drawio | 571 +++++++++++++++++++++++++++++--- assets/styling/contact.css | 7 + assets/styling/contactme.css | 14 +- assets/styling/ender.css | 6 + assets/styling/home.css | 24 ++ assets/styling/notFound.css | 11 +- assets/styling/projectCards.css | 5 + src/lib.rs | 2 +- src/views/blog.rs | 2 +- src/views/contact_me.rs | 2 +- src/views/home.rs | 21 +- src/views/projects.rs | 21 +- 14 files changed, 624 insertions(+), 66 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index d90b8e1..69ac2de 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -3178,7 +3178,7 @@ checksum = "e3148f5046208a5d56bcfc03053e3ca6334e51da8dfb19b6cdc8b306fae3283e" [[package]] name = "personal_site" -version = "1.0.0" +version = "1.5.0" dependencies = [ "dioxus", "reqwest", diff --git a/Cargo.toml b/Cargo.toml index 4e13d9f..991754b 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "personal_site" -version = "1.0.0" +version = "1.5.0" authors = ["darkicewolf50 "] edition = "2021" diff --git a/Design Docs.drawio b/Design Docs.drawio index 2428f04..9dd9978 100644 --- a/Design Docs.drawio +++ b/Design Docs.drawio @@ -1,9 +1,15 @@ - + - + + + + + + + @@ -13,6 +19,12 @@ + + + + + + @@ -54,7 +66,7 @@ - + @@ -119,8 +131,7 @@ - - + @@ -158,7 +169,7 @@ - + @@ -170,8 +181,7 @@ - - + @@ -190,27 +200,172 @@ - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + @@ -758,111 +913,435 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/styling/contact.css b/assets/styling/contact.css index 6dd282d..82892e8 100644 --- a/assets/styling/contact.css +++ b/assets/styling/contact.css @@ -88,6 +88,13 @@ filter: invert() hue-rotate(180deg); } +#contact ul li a:hover { + cursor: pointer; + color: #91a4d2; + filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) + hue-rotate(187deg) brightness(95%) contrast(90%); +} + @media only screen and (max-width: 500px) { #contact ul li img { display: none; diff --git a/assets/styling/contactme.css b/assets/styling/contactme.css index b35da95..eac7d89 100644 --- a/assets/styling/contactme.css +++ b/assets/styling/contactme.css @@ -25,7 +25,7 @@ padding: 0svh 0svw; } -#contact-me input { +/* #contact-me input { background-color: var(--card-background-color); border-radius: var(--card-border-radius); border-color: rgba(245, 245, 245, 0.5); @@ -46,9 +46,9 @@ color: inherit; align-items: start; min-height: 25svh; -} +} */ -#contact-me button { +/* #contact-me button { border-radius: var(--card-border-radius); border-color: rgba(245, 245, 245, 0.5); padding: 1svh 0svw; @@ -57,7 +57,7 @@ align-items: start; background-color: rgba(0, 128, 0, 0.6); border-color: transparent; -} +} */ #ContactMe input { background-color: var(--card-background-color); @@ -92,3 +92,9 @@ background-color: rgba(0, 128, 0, 0.6); border-color: transparent; } + +#ContactMe button:hover { + cursor: pointer; + color: #91a4d2; + background-color: rgba(0, 150, 0, 0.6); +} diff --git a/assets/styling/ender.css b/assets/styling/ender.css index 981ccff..7f448c4 100644 --- a/assets/styling/ender.css +++ b/assets/styling/ender.css @@ -21,6 +21,12 @@ footer img { filter: invert() hue-rotate(180deg); } +footer img:hover { + cursor: pointer; + filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) + hue-rotate(187deg) brightness(95%) contrast(90%); +} + footer a { display: flex; flex-direction: column; diff --git a/assets/styling/home.css b/assets/styling/home.css index c09290c..5447014 100644 --- a/assets/styling/home.css +++ b/assets/styling/home.css @@ -22,6 +22,30 @@ padding-bottom: 1svh; } +#home-intro button { + display: block; + background-color: transparent; + color: inherit; + border-radius: var(--card-border-radius); + background-color: var(--card-background-color); + border: 2px solid purple; + padding: 2svh 0.5svw; + margin: 2svh 0svw; +} + +#home-intro button { + cursor: pointer; +} + +#home-intro a { + text-decoration: none; + color: inherit; +} + +#home-intro a:hover { + color: #91a4d2; +} + .technologies { display: flex; flex-direction: column; diff --git a/assets/styling/notFound.css b/assets/styling/notFound.css index 8bd0ba9..939e9da 100644 --- a/assets/styling/notFound.css +++ b/assets/styling/notFound.css @@ -15,13 +15,22 @@ background-color: var(--card-background-color); border-radius: var(--card-border-radius); border: none; - color: #ffffff; + color: inherit; font-size: xx-large; padding: 1rem; } +#not-found button:hover { + cursor: pointer; +} + #not-found a { text-decoration: none; background-color: var(--card-background-color); border-radius: var(--card-border-radius); + color: inherit; +} + +#not-found a:hover { + color: #91a4d2; } diff --git a/assets/styling/projectCards.css b/assets/styling/projectCards.css index c13cfb9..74f53a4 100644 --- a/assets/styling/projectCards.css +++ b/assets/styling/projectCards.css @@ -63,6 +63,11 @@ filter: invert() hue-rotate(180deg); } +.project-title-info img:hover { + filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) + hue-rotate(187deg) brightness(95%) contrast(90%); +} + .project-title-info div { display: flex; gap: 1svw; diff --git a/src/lib.rs b/src/lib.rs index 3c980ed..7face5b 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -40,7 +40,7 @@ pub enum Route { Projects {}, #[route("/contact")] - ContactMe, + ContactMe {}, #[route("/new_home")] NewHome {}, diff --git a/src/views/blog.rs b/src/views/blog.rs index 41b6c08..8da1d46 100644 --- a/src/views/blog.rs +++ b/src/views/blog.rs @@ -1,6 +1,6 @@ use crate::Route; use dioxus::{logger::tracing, prelude::*}; -use reqwest::{Client, Response}; +use reqwest; const BLOG_CSS: Asset = asset!("/assets/styling/blog.css"); diff --git a/src/views/contact_me.rs b/src/views/contact_me.rs index 4594494..d396980 100644 --- a/src/views/contact_me.rs +++ b/src/views/contact_me.rs @@ -97,7 +97,7 @@ async fn send_message(name: String, email: String, message: String, mut recived: .await; match res { Ok(_) => { - recived.set("Sent Sucessfully".to_string()); + recived.set("Sent Sucessfully, I will be in contact with you soon".to_string()); } Err(_) => { recived.set("An Error Occured".to_string()); diff --git a/src/views/home.rs b/src/views/home.rs index 0c008da..8d6d7af 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -33,29 +33,32 @@ pub fn Home() -> Element { let platforms = vec!["AWS", "Cloudflare", "Vercel", "Netlify", "Gitea", "Github"]; rsx!( document::Link { rel: "stylesheet", href: HOME_CSS } + title { "Brock Tomlinson" } div { div { id: "home-intro", h1 { "Hi I'm Brock" } p { "a fourth year Software Engineering Student specializing in full-stack development with a strong focus on backend technologies. - I am developing the language of how to design, develop, and create programs that are to industry standards and reasonably efficent. - I bring the lessons learned from each project I have completed, - learning from the mistakes I have made and bringing improved versions forward into the next project." + I am developing the language of how to design, develop, and create programs that are to industry standards and reasonably efficent. + I bring the lessons learned from each project I have completed, + learning from the mistakes I have made and bringing improved versions forward into the next project." } p { "As of writing this I intend to bring the knowledge learned from my time at university in Software Engineering onto a Baja SAE car, - where we can collect data remotely and graph data for instantaneous and future analysis, - during vechile operation." + where we can collect data remotely and graph data for instantaneous and future analysis, + during vechile operation." } p { "I grew up in a small ski town where, I started learning about programming, from of course Minecraft, - where I thought the application of this was so futuristic and downright cool that I knew I wanted to persure it further. + where I thought the application of this was so futuristic and downright cool that I knew I wanted to persue it further. While living there I spend a majority of my time outside of school swimming competitively, where I ranked top 10 in BC. Along with swimming I spend a lot of time volunteering with fundraising events and coaching the local Special Olympics swim team." } p { - "I advore problem solving and building cool stuff, I'm happy to jump in and get started! " - Link { to: Route::ContactMe {}, "Let's create something great together!" } + "I adore problem solving and building cool stuff, I'm happy to jump in and get started! " + Link { to: Route::ContactMe {}, + button { "Let's create something great together!" } + } } } div { class: "technologies", @@ -73,7 +76,7 @@ pub fn Home() -> Element { } } Contact {} - Projects {} + Projects { display_title: false } div { id: "experience", h2 { "Experience" } div { diff --git a/src/views/projects.rs b/src/views/projects.rs index 8ba3839..ad5494d 100644 --- a/src/views/projects.rs +++ b/src/views/projects.rs @@ -1,14 +1,33 @@ +use std::default; + use crate::helper_fun::get_tech_logos_from_str; use dioxus::prelude::*; #[component] -pub fn Projects() -> Element { +pub fn Projects(#[props(default = true)] display_title: bool) -> Element { rsx! { + if display_title { + title { "Brock Tomlinson - Projects" } + } div { h2 { "Projects" } p { "Top Featured and Recent Projects" } } div { class: "project-section", + ProjectCards { + project_name: "Portfolio Site Version 1.1.0", + website_prop: "https://darkicewolf50.github.io", + github_prop: "https://github.com/darkicewolf50/darkicewolf50.github.io", + project_img: "https://res.cloudinary.com/dpgrgsh7g/image/upload/v1745630861/Portfolio_site_k4mhmj.png", + techs_used: vec!["Rust", "CSS", "Dioxus", "Github Actions", "Git", "Github"], + project_des: "This project was a great test of my newly learned Rust. + This minor update added functionality for the contact me, the ground work for the blogs part of the site, as well as many minor + UI consistencies to ensure that all of the buttons and links felt like buttons and links. + I was surprise how easy it was to set up a discord webhook using the 'reqwest' crate. + As I continue on I find myself struggling with how and why to use databases for content I generate. + I think using tools like disocrd webhooks and email notifications are great for users but certainly not great for reading data from. + The part I am both excited for and deading is going to be the blogs component which I believe I have solved for now.", + } ProjectCards { project_name: "Portfolio Site", website_prop: "https://darkicewolf50.github.io",