feat(contact_me): started on new form

.github/workflows/githubPages.yml

@@ -3,7 +3,7 @@ name: github pages
 on:
   push:
     branches:
-      - main
+      - masasasasdasdasd
 
 jobs:
   build-deploy:

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

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

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 {

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 {},

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
+// }

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",

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;

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