feat(projectcard): halfway done, need to make it so that 2 can be accepted

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

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");
 

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

src/views/mod.rs

@@ -27,3 +27,4 @@ mod contact;
 pub use contact::Contact;
 
 mod projects;
+pub use projects::{ProjectCards, Projects};

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