diff --git a/assets/styling/contact.css b/assets/styling/contact.css index 7fd1f6b..6dd282d 100644 --- a/assets/styling/contact.css +++ b/assets/styling/contact.css @@ -88,7 +88,7 @@ filter: invert() hue-rotate(180deg); } -@media only screen and (max-width: 430px) { +@media only screen and (max-width: 500px) { #contact ul li img { display: none; } diff --git a/assets/styling/home.css b/assets/styling/home.css index 01b72c1..c09290c 100644 --- a/assets/styling/home.css +++ b/assets/styling/home.css @@ -1,3 +1,27 @@ +#home-intro { + display: flex; + flex-direction: column; + width: 90%; + margin-top: 2svh; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); +} + +#home-intro h1 { + border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); + display: flex; + margin: 2svh 2svw; + padding: 0svh 2svw; + padding-bottom: 1svh; +} + +#home-intro p { + margin: 1svh 4svw; + padding: 0svh 2svw; + padding-bottom: 1svh; +} + .technologies { display: flex; flex-direction: column; diff --git a/assets/styling/navbar.css b/assets/styling/navbar.css index 7372c63..5110b83 100644 --- a/assets/styling/navbar.css +++ b/assets/styling/navbar.css @@ -1,16 +1,16 @@ #navbar { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } #navbar a { - color: #ffffff; - margin-right: 20px; - text-decoration: none; - transition: color 0.2s ease; + color: #ffffff; + margin-right: 20px; + text-decoration: none; + transition: color 0.2s ease; } #navbar a:hover { - cursor: pointer; - color: #91a4d2; -} \ No newline at end of file + cursor: pointer; + color: #91a4d2; +} diff --git a/assets/styling/notFound.css b/assets/styling/notFound.css new file mode 100644 index 0000000..8bd0ba9 --- /dev/null +++ b/assets/styling/notFound.css @@ -0,0 +1,27 @@ +#not-found { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 80svh; +} + +#not-found h1 { + border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); +} + +#not-found button { + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + border: none; + color: #ffffff; + font-size: xx-large; + padding: 1rem; +} + +#not-found a { + text-decoration: none; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); +} diff --git a/src/lib.rs b/src/lib.rs index 372dc25..cf1f283 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; // use components::Hero; -use views::{Blog, Blogs, Home, Navbar, NewHome}; +use views::{Blog, Blogs, Contact, Home, Navbar, NewHome, Projects}; /// Define a components module that contains all shared components for our app. mod components; @@ -36,8 +36,11 @@ pub enum Route { #[route("/blogs/:blog_title")] Blog {blog_title: String}, - #[route("/test")] - Hello {}, + #[route("/projects")] + Projects {}, + + #[route("/contact")] + Contact {}, #[route("/new_home")] NewHome {}, @@ -46,19 +49,18 @@ pub enum Route { PageNotFound { route: Vec }, } -#[component] -fn Hello() -> Element { - rsx!( - div { - h1 { "hello" } - } - ) -} +const NOT_FOUND_CSS: Asset = asset!("/assets/styling/notFound.css"); #[component] fn PageNotFound(route: Vec) -> Element { rsx! { - h1 { "Page not found" } - p { "We are terribly sorry, but the page you requested doesn't exist." } + document::Link { rel: "stylesheet", href: NOT_FOUND_CSS } + div { id: "not-found", + h1 { "Page not found" } + p { "We are terribly sorry, but the page you requested doesn't exist." } + dioxus::prelude::Link { to: Route::Home {}, + button { "Return Home Here" } + } + } } } diff --git a/src/views/home.rs b/src/views/home.rs index eda279a..935d76b 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -1,5 +1,6 @@ use crate::components::{Experience, TechCat}; use crate::views::{Contact, Projects}; +use crate::Route; use dioxus::prelude::*; const HOME_CSS: Asset = asset!("/assets/styling/home.css"); @@ -33,7 +34,30 @@ pub fn Home() -> Element { rsx!( document::Link { rel: "stylesheet", href: HOME_CSS } div { - h1 { "Hi I'm Brock" } + 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." + } + 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." + } + 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. + 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::Contact {}, "Let's create something great together!" } + } + } div { class: "technologies", h2 { "Technology" } diff --git a/src/views/navbar.rs b/src/views/navbar.rs index f3f5603..79d0c83 100644 --- a/src/views/navbar.rs +++ b/src/views/navbar.rs @@ -17,8 +17,10 @@ pub fn Navbar() -> Element { document::Link { rel: "stylesheet", href: STD_COLOUR_AND_FONTS_CSS } div { id: "navbar", - Link { to: Route::NewHome {}, "Home" } + Link { to: Route::Home {}, "Home" } + Link { to: Route::Projects {}, "Projects" } Link { to: Route::Blogs { id: 0 }, "Blogs" } + Link { to: Route::Contact {}, "Contact" } } // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either