Added extra Project section and fixed banner

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>

assets/tailwind.css

@@ -586,34 +586,6 @@ video {
   inset-inline-start: -0.375rem;
 }
 
-.start-0 {
-  inset-inline-start: 0px;
-}
-
-.top-0 {
-  top: 0px;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
-.top-3 {
-  top: 0.75rem;
-}
-
-.top-4 {
-  top: 1rem;
-}
-
-.top-auto {
-  top: auto;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
 .m-16 {
   margin: 4rem;
 }
@@ -658,10 +630,6 @@ video {
   margin-inline-end: 0.5rem;
 }
 
-.me-3 {
-  margin-inline-end: 0.75rem;
-}
-
 .ms-4 {
   margin-inline-start: 1rem;
 }
@@ -686,12 +654,12 @@ video {
   margin-top: 1rem;
 }
 
-.block {
+.mb-8 {
-  display: block;
+  margin-bottom: 2rem;
 }
 
-.inline {
+.block {
-  display: inline;
+  display: block;
 }
 
 .flex {
@@ -727,14 +695,6 @@ video {
   height: 0.75rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-8 {
   height: 2rem;
 }
@@ -771,14 +731,6 @@ video {
   width: 0.75rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -788,10 +740,6 @@ video {
   width: 100%;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -825,14 +773,6 @@ video {
   max-width: 36rem;
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -911,10 +851,6 @@ video {
   border-inline-start-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1037,10 +973,6 @@ video {
   padding: 0.25rem;
 }
 
-.p-1\.5 {
-  padding: 0.375rem;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
@@ -1181,11 +1113,6 @@ video {
   letter-spacing: 0.1em;
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
 .text-blue-800 {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -1260,23 +1187,6 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.underline {
-  text-decoration-line: underline;
-}
-
-.decoration-solid {
-  text-decoration-style: solid;
-}
-
-.underline-offset-2 {
-  text-underline-offset: 2px;
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1313,20 +1223,10 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gradient-to-br:hover {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
 
-.hover\:text-gray-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1336,10 +1236,6 @@ video {
   text-decoration-line: underline;
 }
 
-.hover\:no-underline:hover {
-  text-decoration-line: none;
-}
-
 .hover\:grayscale-0:hover {
   --tw-grayscale: grayscale(0);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1491,11 +1387,6 @@ video {
     background-color: rgb(30 58 138 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-gray-700 {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1541,21 +1432,11 @@ video {
     background-color: rgb(113 63 18 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-blue-800 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-  }
-
   .dark\:text-blue-300 {
     --tw-text-opacity: 1;
     color: rgb(147 197 253 / var(--tw-text-opacity));
   }
 
-  .dark\:text-blue-500 {
-    --tw-text-opacity: 1;
-    color: rgb(59 130 246 / var(--tw-text-opacity));
-  }
-
   .dark\:text-cyan-400 {
     --tw-text-opacity: 1;
     color: rgb(34 211 238 / var(--tw-text-opacity));
@@ -1611,26 +1492,11 @@ video {
     color: rgb(253 224 71 / var(--tw-text-opacity));
   }
 
-  .dark\:text-blue-200 {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:bg-gray-600:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
   .dark\:hover\:bg-gray-700:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
   .dark\:focus\:ring-cyan-800:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));

src/components/mod.rs

@@ -84,7 +84,7 @@ pub fn Card(prop: CardProp) -> Element {
 pub fn UnderConstruction() -> Element {
     rsx! {
         div {
-            class:"rounded flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 m-16",
+            class:"rounded flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 my-8",
             div {
                 class:"flex items-center mx-auto",
                 p {
@@ -97,3 +97,9 @@ pub fn UnderConstruction() -> Element {
         }
     }
 }
+
+pub fn HR() -> Element {
+    rsx! {
+        hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}
+    }
+}

src/cv.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::components::H4;
+use crate::components::{H4, HR};
 
 #[component]
 pub fn CV() -> Element {
@@ -8,13 +8,13 @@ pub fn CV() -> Element {
         div {
             class: "flex flex-col ",
             Introduction {},
-            hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"},
+            HR {}
             div {
                 class: "flex justify-between",
                 WorkExperience {},
                 Miscellaneous {},
             },
-            hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"},
+            HR {},
             Socials {}
         }
     }

src/home.rs

@@ -17,6 +17,8 @@ pub fn Home() -> Element {
                 H5 { "Tuan-Dat Tran", span { class: "text-grey-600 dark:text-grey-500 text-lg", " (He/Him)" } },
                 div {
                     class: "py-4",
+                    div {
+                        class: "mb-2",
                         P { "Hey there! 👋🏻👋🏼👋🏽👋🏾👋🏿" },
                         P { "Welcome to my little place on the internet." },
                         P { "While you're here, why don't you check out my other projects over on my ",
@@ -27,8 +29,11 @@ pub fn Home() -> Element {
                                 "gitea"},
                             ", while this page is still in the proccess of being built? 😊"
                         },
+                    },
+                    div {
                         P { "I also offer IT-related consulting." },
                         P { "Have a look at my CV and contact me if you're interested." },
+                    }
                 },
                 Link {
                     to: "mailto:tuan-dat.tran@tudattr.dev",

src/impressum.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::{server_fn::error::ServerFnError, *};
 use tracing::info;
 
-use crate::components::{H1, P};
+use crate::components::{H1, HR, P};
 
 #[component]
 pub fn Impressum() -> Element {
@@ -22,7 +22,7 @@ pub fn Impressum() -> Element {
                 P { "Birkenallee 24" },
                 P { "36037 Fulda" },
             }
-            hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}
+            HR {}
             div {
                 class: "flex flex-col items-center",
                 P { "tuan-dat.tran@tudattr.dev" },

src/layout/footer.rs

@@ -7,8 +7,7 @@ pub fn Footer() -> Element {
         div {
             ToolsUsed {},
             footer {
-                class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa
+                class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa mb-4",
-    ",
                 div {
                     class:"w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between",
                     span {

src/layout/header.rs

@@ -28,7 +28,7 @@ pub fn Header() -> Element {
                             Link { to: Route::CV {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "CV" }
                         }
                         li {
-                            Link { to: Route::Publications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" }
+                            Link { to: Route::ProjectsPublications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" }
                         }
                         li {
                             Link { to: Route::Impressum {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "About" }

src/main.rs

@@ -14,7 +14,7 @@ use crate::cv::CV;
 use crate::home::Home;
 use crate::impressum::Impressum;
 use crate::layout::Layout;
-use crate::publications::Publications;
+use crate::publications::ProjectsPublications;
 
 #[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
 pub enum Route {
@@ -24,7 +24,7 @@ pub enum Route {
     #[route("/impressum")]
     Impressum {},
     #[route("/publications")]
-    Publications {},
+    ProjectsPublications {},
     #[route("/resume")]
     CV {},
     #[end_layout]

src/publications.rs

@@ -1,11 +1,36 @@
 use dioxus::prelude::*;
 
-use crate::components::UnderConstruction;
+use crate::components::{UnderConstruction, H1, HR};
 
 #[component]
-pub fn Publications() -> Element {
+pub fn ProjectsPublications() -> Element {
     rsx! {
         UnderConstruction { },
+        div {
+            H1 { "Publications" }
+            Publications { },
+        },
+        HR {},
+        div {
+            H1 { "Projects" }
+            Projects { },
+        }
+    }
+}
+
+#[derive(Clone, PartialEq, Props)]
+struct PublicationProp {
+    #[props(default = "".to_string())]
+    doi: String,
+    authors: String,
+    title: String,
+    conference: String,
+    #[props(default = "".to_string())]
+    description: String,
+}
+
+fn Publications() -> Element {
+    rsx! {
         div {
             class: "flex gap-4 items-center",
             Publication {
@@ -24,7 +49,8 @@ pub fn Publications() -> Element {
                     well as the flow completion time, especially for small
                     Data Center TCP (DCTCP) flows. around P4 programmable ASIC
                     switches."
-                }
+            },
+
             Publication {
                 doi: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
                 conference: "Seminar",
@@ -35,22 +61,10 @@ pub fn Publications() -> Element {
                     by IoT fuzzers to circumvent the challenges presented 
                     by IoT devices and the constraints of the
                     solutions proposed by the IoT fuzzers."
-            }
+            },
         }
     }
 }
-
-#[derive(Clone, PartialEq, Props)]
-struct PublicationProp {
-    #[props(default = "".to_string())]
-    doi: String,
-    authors: String,
-    title: String,
-    conference: String,
-    #[props(default = "".to_string())]
-    description: String,
-}
-
 fn Publication(prop: PublicationProp) -> Element {
     rsx! {
         Link {
@@ -61,6 +75,55 @@ fn Publication(prop: PublicationProp) -> Element {
                 class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
                 "{prop.title}",
             },
+            span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" },
+            p {
+                class:"font-normal text-gray-700 dark:text-gray-400",
+                "{prop.authors}",
+            }
+            p {
+                class:"font-normal text-gray-700 dark:text-gray-400",
+                "{prop.description}",
+            }
+        }
+    }
+}
+
+fn Projects() -> Element {
+    rsx! {
+        Project {
+                url: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
+                kind: "Bachelorproject",
+                title: "Undisclosed Ethereum Smart Contract Fuzzer",
+                authors: "Tuan-Dat Tran",
+                description: "
+                    In this ingoing project I am building an Ethereum
+                    Smart Contract Fuzzer. More info will follow."
+            },
+    }
+}
+
+#[derive(Clone, PartialEq, Props)]
+struct ProjectProp {
+    #[props(default = "".to_string())]
+    url: String,
+    authors: String,
+    title: String,
+    kind: String,
+    #[props(default = "".to_string())]
+    description: String,
+}
+
+fn Project(prop: ProjectProp) -> Element {
+    rsx! {
+        Link {
+            class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700",
+            to:"{prop.url}",
+            new_tab: true,
+            h5 {
+                class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
+                "{prop.title}",
+            },
+            p { class: "text-lg text-gray-900 dark:text-white", "{prop.kind}" },
             p {
                 class:"font-normal text-gray-700 dark:text-gray-400",
                 "{prop.authors}",