From 25238dea05a97438881885e450171062b5d29b72 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 22 Apr 2025 17:38:29 -0600 Subject: [PATCH] feat(projectcard): halfway done, need to make it so that 2 can be accepted --- assets/styling/projectCards.css | 69 ++++++++++++++++++++++++++++++++ src/components/techs.rs | 4 +- src/views/home.rs | 5 ++- src/views/mod.rs | 1 + src/views/projects.rs | 71 ++++++++++++++++++++++++++++++++- 5 files changed, 143 insertions(+), 7 deletions(-) create mode 100644 assets/styling/projectCards.css diff --git a/assets/styling/projectCards.css b/assets/styling/projectCards.css new file mode 100644 index 0000000..cb579e5 --- /dev/null +++ b/assets/styling/projectCards.css @@ -0,0 +1,69 @@ +.project-card { + display: flex; + flex-direction: column; + flex-wrap: wrap; + background-color: aqua; +} + +.project-card img { + width: 96%; + height: 50svh; + align-self: center; + padding-top: 1svh; +} + +.project-title-info { + display: flex; + flex-direction: row; + + border-bottom: var(--underlineTitle); + width: 80%; + margin: 0px 4svw; + padding: 0px 4svw; + + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; +} +.project-title-info h3 { + margin: 0px; + text-align: start; + white-space: nowrap; + align-self: center; +} + +.project-title-info img { + height: 6svh; +} + +.project-title-info div { + display: flex; + gap: 1svw; + justify-content: flex-end; + border-bottom: none; +} + +.project-card div p { + display: flex; + width: 90%; + justify-self: center; + text-align: start; +} + +.project-tech-logos { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + align-self: center; + width: 90%; + justify-content: space-between; + /* gap: 1svw; */ +} + +.project-tech-logos img { + width: 60px; + height: 60px; + padding: 1svh 0px; + flex: 0 1 19%; +} diff --git a/src/components/techs.rs b/src/components/techs.rs index 26abf98..9a601e8 100644 --- a/src/components/techs.rs +++ b/src/components/techs.rs @@ -1,7 +1,5 @@ -use std::collections::HashMap; -use std::hash::{BuildHasherDefault, DefaultHasher}; - use dioxus::prelude::*; +use std::collections::HashMap; const TECHS_CSS: Asset = asset!("/assets/styling/techs.css"); diff --git a/src/views/home.rs b/src/views/home.rs index aa4caac..e540ac2 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -1,5 +1,5 @@ -use crate::components::{TechCat, TechDes}; -use crate::views::Contact; +use crate::components::TechCat; +use crate::views::{Contact, Projects}; use dioxus::prelude::*; #[component] @@ -9,6 +9,7 @@ pub fn Home() -> Element { h1 { "Hi I'm Brock" } TechCat { cat: "Languages".to_string(), tech_vec: languages } Contact {} + Projects {} ) } diff --git a/src/views/mod.rs b/src/views/mod.rs index 45682ed..cb34b00 100644 --- a/src/views/mod.rs +++ b/src/views/mod.rs @@ -27,3 +27,4 @@ mod contact; pub use contact::Contact; mod projects; +pub use projects::{ProjectCards, Projects}; diff --git a/src/views/projects.rs b/src/views/projects.rs index 11d6bee..0f55b8d 100644 --- a/src/views/projects.rs +++ b/src/views/projects.rs @@ -2,6 +2,73 @@ use dioxus::prelude::*; #[component] pub fn Projects() -> Element { - todo!(); - rsx! {} + rsx! { + div { + h2 { "Projects" } + p { "Top Featured and Recent Projects" } + } + div { ProjectCards {} } + } } + +const PROJECT_CARDS_CSS: Asset = asset!("/assets/styling/projectCards.css"); + +#[component] +pub fn ProjectCards() -> Element { + let website: Option<&'static str> = Some("https://google.com"); + let github: Option<&'static str> = Some("https://google.com"); + + rsx! { + document::Link { href: PROJECT_CARDS_CSS, rel: "stylesheet" } + div { class: "project-card", + img { + src: "https://picsum.photos/200", + alt: "dashboard of project or the logo of the project", + } + div { class: "project-title-info", + h3 { "Project Name" } + div { + if let Some(github_site) = github { + a { href: "{github_site}", + img { + src: "https://www.svgrepo.com/show/512317/github-142.svg", + alt: "Github logo", + } + } + } + if let Some(site) = website { + a { href: "{site}", + img { + src: "https://www.svgrepo.com/show/490809/internet.svg", + alt: "Internet icon", + } + } + } + + } + + } + div { + p { + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet risus tristique nisi euismod elementum. Duis et est sed neque pulvinar sodales sit amet non purus. Nam ut ultrices enim. Vestibulum blandit sapien dui. Aliquam sit amet ex quis lectus consectetur tempor at non arcu. Curabitur placerat justo sed nulla lobortis molestie. Sed eget justo sit amet justo lobortis tempus. Phasellus laoreet leo est, in lacinia ante aliquet ut. Etiam ultricies fermentum dolor id pretium. Sed dictum nisl id felis pulvinar varius." + } + + } + div { class: "project-tech-logos", + img { alt: "todo cards" } + img { alt: "todo cards" } + img { alt: "todo cards" } + img { alt: "todo cards" } + img { alt: "todo cards" } + img { alt: "todo cards" } + } + + } + } +} + +// if let Some(site) = website { +// a { href: "{site}", {img { +// src: "https://www.svgrepo.com/show/490809/internet.svg", +// alt: "Internet icon", +// }