From 3bd2c4041bdc0c9fc28f2b0f9999a90e94fd23e6 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Wed, 7 May 2025 21:30:58 -0600 Subject: [PATCH] feat(contact_me): started on new form --- .github/workflows/githubPages.yml | 2 +- assets/styling/contactme.css | 65 +++++++++++++++++++++++++++++ {assets => dioxus info}/header.svg | 0 src/components/hero.rs | 8 ++-- src/helper_fun.rs | 2 +- src/lib.rs | 4 +- src/views/contact_me.rs | 66 ++++++++++++++++++++++++++++++ src/views/home.rs | 2 +- src/views/mod.rs | 5 ++- src/views/navbar.rs | 2 +- 10 files changed, 146 insertions(+), 10 deletions(-) create mode 100644 assets/styling/contactme.css rename {assets => dioxus info}/header.svg (100%) create mode 100644 src/views/contact_me.rs diff --git a/.github/workflows/githubPages.yml b/.github/workflows/githubPages.yml index bd8f5da..f76a941 100644 --- a/.github/workflows/githubPages.yml +++ b/.github/workflows/githubPages.yml @@ -3,7 +3,7 @@ name: github pages on: push: branches: - - main + - masasasasdasdasd jobs: build-deploy: diff --git a/assets/styling/contactme.css b/assets/styling/contactme.css new file mode 100644 index 0000000..c7ebb19 --- /dev/null +++ b/assets/styling/contactme.css @@ -0,0 +1,65 @@ +#ContactMe { + display: flex; + flex-flow: row wrap; + column-gap: 2svw; + row-gap: 4svh; + min-height: 70svh; + margin-top: 4svh; + justify-content: space-evenly; +} + +#ContactMe div { + display: flex; + flex-grow: 1; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + flex-direction: column; + justify-content: center; +} + +#ContactMe p { + margin: 2svh 2svw; + padding: 0svh 2svw; +} + +#ContactMe form { + display: flex; + justify-content: center; + flex-direction: column; + margin: 2svh 0.5svw; + padding: 0svh 1svw; +} + +#ContactMe input { + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + border-color: rgba(245, 245, 245, 0.5); + border-width: 2px; + padding: 1svh 0svw; + margin: 1svh 0.5svw; + color: inherit; + align-items: start; +} + +#ContactMe form textarea { + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + border-color: rgba(245, 245, 245, 0.4); + border-width: 2px; + padding: 1svh 0svw; + margin: 1svh 0.5svw; + color: inherit; + align-items: start; + min-height: 25svh; +} + +#ContactMe form button { + border-radius: var(--card-border-radius); + border-color: rgba(245, 245, 245, 0.5); + padding: 1svh 0svw; + margin: 1svh 0.5svw; + color: inherit; + align-items: start; + background-color: rgba(0, 128, 0, 0.6); + border-color: transparent; +} diff --git a/assets/header.svg b/dioxus info/header.svg similarity index 100% rename from assets/header.svg rename to dioxus info/header.svg diff --git a/src/components/hero.rs b/src/components/hero.rs index 3088c5c..c7f7f12 100644 --- a/src/components/hero.rs +++ b/src/components/hero.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; -const HEADER_SVG: Asset = asset!("/assets/header.svg"); +// const HEADER_SVG: Asset = asset!("/assets/header.svg"); #[component] pub fn Hero() -> Element { @@ -10,14 +10,16 @@ pub fn Hero() -> Element { // Attributes should be defined in the element before any children id: "hero", // After all attributes are defined, we can define child elements and components - img { src: HEADER_SVG, id: "header" } + // img { src: HEADER_SVG, id: "header" } div { id: "links", // The RSX macro also supports text nodes surrounded by quotes a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" } a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" } a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" } a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" } - a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" } + a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", + "💫 VSCode Extension" + } a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" } } } diff --git a/src/helper_fun.rs b/src/helper_fun.rs index fb6aa24..4a1d29c 100644 --- a/src/helper_fun.rs +++ b/src/helper_fun.rs @@ -1,5 +1,5 @@ use dioxus::prelude::*; -use std::{collections::HashMap, rc::Rc}; +use std::rc::Rc; #[component] pub fn get_tech_logos_from_str(used_tech: &'static str) -> Element { diff --git a/src/lib.rs b/src/lib.rs index cf1f283..3c980ed 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; // use components::Hero; -use views::{Blog, Blogs, Contact, Home, Navbar, NewHome, Projects}; +use views::{Blog, Blogs, ContactMe, Home, Navbar, NewHome, Projects}; /// Define a components module that contains all shared components for our app. mod components; @@ -40,7 +40,7 @@ pub enum Route { Projects {}, #[route("/contact")] - Contact {}, + ContactMe, #[route("/new_home")] NewHome {}, diff --git a/src/views/contact_me.rs b/src/views/contact_me.rs new file mode 100644 index 0000000..c40301a --- /dev/null +++ b/src/views/contact_me.rs @@ -0,0 +1,66 @@ +use std::collections::HashMap; + +use dioxus::{logger::tracing, prelude::*}; + +use crate::views::Contact; + +const CONTACTME_CSS: Asset = asset!("/assets/styling/contactme.css"); + +#[component] +pub fn ContactMe() -> Element { + // let mut test_form = use_signal(|| { + // HashMap::from([ + // ("Name", "".to_string()), + // ("Email", "".to_string()), + // ("Message", "".to_string()), + // ]) + // }); + + rsx! { + document::Link { rel: "stylesheet", href: CONTACTME_CSS } + div { id: "ContactMe", + div { + h2 { "Get in Touch" } + p { + "Please feel free to reach out about questions, opporunities or just want to connect. + Feel free to either fill out this form or contact me through one of the many of the platforms below" + } + } + div { + form { + onsubmit: move |event| { + event.prevent_default(); + tracing::info!("{:?}", event.data().values() ["name"]); + }, + label { "Name" } + input { name: "name" } + label { "Email" } + input { name: "email", r#type: "email" } + label { "Message" } + textarea { name: "message" } + button { + r#type: "submit", + onclick: move |_| tracing::info!("Clicked!"), + "Submit" + } + } + } + } + div { + h3 { "Form Submission" } + // p { "{test_form.values().iter().map(|value| value.to_string)}" } + } + Contact {} + } +} + +// onsubmit:move |event| { log::info!("Submitted! {event:?}"), +// FormEvent { +// value: "NameEmailMessageSubmit", +// values: { +// "name": FormValue(["asdasd"]), +// "message": FormValue(["asdads"]), +// "email": FormValue(["adasdad@asdasd.asdads"]) +// }, +// valid: false +// } diff --git a/src/views/home.rs b/src/views/home.rs index 935d76b..0c008da 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -55,7 +55,7 @@ pub fn Home() -> Element { } p { "I advore problem solving and building cool stuff, I'm happy to jump in and get started! " - Link { to: Route::Contact {}, "Let's create something great together!" } + Link { to: Route::ContactMe {}, "Let's create something great together!" } } } div { class: "technologies", diff --git a/src/views/mod.rs b/src/views/mod.rs index 24b880f..33116f4 100644 --- a/src/views/mod.rs +++ b/src/views/mod.rs @@ -24,4 +24,7 @@ mod contact; pub use contact::Contact; mod projects; -pub use projects::{ProjectCards, Projects}; +pub use projects::Projects; + +mod contact_me; +pub use contact_me::ContactMe; diff --git a/src/views/navbar.rs b/src/views/navbar.rs index 79d0c83..89c70af 100644 --- a/src/views/navbar.rs +++ b/src/views/navbar.rs @@ -20,7 +20,7 @@ pub fn Navbar() -> Element { Link { to: Route::Home {}, "Home" } Link { to: Route::Projects {}, "Projects" } Link { to: Route::Blogs { id: 0 }, "Blogs" } - Link { to: Route::Contact {}, "Contact" } + Link { to: Route::ContactMe {}, "Contact" } } // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either