Fixed typos and added projects

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

assets/tailwind.css

@@ -618,10 +618,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .me-2 {
   margin-inline-end: 0.5rem;
 }
@@ -642,10 +638,6 @@ video {
   margin-top: 0.375rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -745,16 +737,12 @@ video {
   min-width: 100%;
 }
 
-.max-w-32 {
-  max-width: 8rem;
-}
-
 .max-w-40 {
   max-width: 10rem;
 }
 
-.max-w-md {
+.max-w-8 {
-  max-width: 28rem;
+  max-width: 2rem;
 }
 
 .max-w-screen-md {
@@ -773,10 +761,6 @@ video {
   max-width: 36rem;
 }
 
-.max-w-8 {
-  max-width: 2rem;
-}
-
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1262,16 +1246,16 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-gray-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-cyan-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-gray-200:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
+}
+
 .group:hover .group-hover\:from-green-400 {
   --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
@@ -1501,15 +1485,15 @@ video {
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
   }
 
-  .dark\:focus\:ring-gray-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-  }
-
   .dark\:focus\:ring-cyan-800:focus {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
   }
+
+  .dark\:focus\:ring-gray-600:focus {
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
+  }
 }
 
 @media (min-width: 768px) {

src/cv.rs

@@ -29,7 +29,7 @@ fn Introduction() -> Element {
                 src: "/pictures/portrait.webp"
             }
             P {
-                "While studying for my bachelors degree I collected a lot of
+                "While studying for my bachelors degree I accumulated a lot of
                 industry and academic experience. My professional and personal
                 intererests are DevOps/IaC, Systems/Software Security and Computer
                 Networking. All of which I deepen in personal projects such as my
@@ -63,25 +63,25 @@ fn WorkExperience() -> Element {
                     science program of the University Duisburg-Essen I
                     introduced groups of ~20 freshmen to their new academic
                     environment at the beginning of each semester. Offering
-                    additional organizational and technical guidance for an
+                    additional organizational and technical guidance for
-                     two-semesters."
+                    their first year in university."
                 },
                 CVEntry {time: "2018 - 2020", title: "Software Engineer @ gefeba Engineering GmbH",
                     technologies: vec!["C#".to_string(), "Angular".to_string(), "bootstrap".to_string(), "Entity Framework".to_string()],
                     description:
                     "As a software engineer at gefeba Engineering I worked
-                    worked the companies main software product, which was a
+                    on the companies main software product, which was a
                     frame-based data exchange system to monitor industry
-                    machinary using C# and Entity Framework. Another project
+                    machinery using C# and Entity Framework. Another project
                     I worked on was a real time log visualization application
-                    for the same machinary."
+                    for the same machinery."
                 },
                 CVEntry {time: "2016 - 2019", title: "Student Council Member @ UDE",
                     technologies: vec!["Linux".to_string(), "Networking".to_string(), "LaTeX".to_string()],
                     description:
                     "As a student council member I participated in faculty
                     committees and organized social events. My 
-                    main responsabilities as a member were the management
+                    main responsibilities as a member were the management
                     of the IT infrastructure and supporting students, be it
                     organizationally or subject-specific."
                 },
@@ -136,7 +136,7 @@ fn Skills() -> Element {
                 title: "Software Development",
                 P { "Rust" },
                 P { "Python" },
-                P { "Java" },
+                P { "C#" },
             }
         }
     }
@@ -162,9 +162,9 @@ fn Interests() -> Element {
             H4 {"Interests"}
             Entry {
                 P { "Coffee" },
-                P { "Mechanical Keyboards" },
                 P { "Tech/IT" },
-                P { "Music" },
+                P { "Guitar" },
+                P { "Mechanical Keyboards" },
             }
         }
     }
@@ -209,8 +209,11 @@ fn CVEntry(props: CVEntryProps) -> Element {
             div { class:"absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"},
             time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "{props.time}"},
             h6 { class: "text-lg font-semibold text-gray-900 dark:text-white", "{props.title}"}
-            for tech in props.technologies {
+            ul {
-                RandomBadge {text: "{tech}"}
+                class: "flex",
+                for (index, value) in props.technologies.iter().enumerate() {
+                    li { key: "{index}", RandomBadge { text: "{value}"} }
+                }
             }
             p { class:"text-base font-normal text-gray-500 dark:text-gray-400", "{props.description}"},
             {props.children}

src/home.rs

@@ -27,7 +27,7 @@ pub fn Home() -> Element {
                                 new_tab: true,
                                 class: "inline-flex items-center font-medium hover:underline",
                                 "gitea"},
-                            ", while this page is still in the proccess of being built? 😊"
+                            "?"
                         },
                     },
                     div {

src/main.rs

@@ -33,7 +33,7 @@ pub enum Route {
 }
 
 fn main() {
-    dioxus_logger::init(Level::INFO).expect("failed to init logger");
+    dioxus_logger::init(Level::DEBUG).expect("failed to init logger");
     launch(App);
 }
 

src/publications.rs

@@ -32,7 +32,7 @@ struct PublicationProp {
 fn Publications() -> Element {
     rsx! {
         div {
-            class: "flex gap-4 items-center",
+            class: "flex gap-4 items-center flex-wrap",
             Publication {
                 doi: "https://doi.org/10.48550/arXiv.2307.09639",
                 conference: "IEEE LCN 2023",
@@ -42,12 +42,12 @@ fn Publications() -> Element {
                     In this paper, we present Reverse Path Congestion Marking
                     (RPM) to accelerate the reaction to network congestion
                     events without changing the end-host stack. RPM decouples
-                    the conges- tion signal from the downstream path after the
+                    the congestion signal from the downstream path after the
                     bottleneck while maintaining the stability of the
                     congestion control loop. We show that RPM improves
-                    throughput fairness for RTT- heterogeneous TCP flows as
+                    throughput fairness for RTT on heterogeneous TCP flows as
                     well as the flow completion time, especially for small
-                    Data Center TCP (DCTCP) flows. around P4 programmable ASIC
+                    Data Center TCP (DCTCP) flows around P4 programmable ASIC
                     switches."
             },
 
@@ -90,8 +90,10 @@ fn Publication(prop: PublicationProp) -> Element {
 
 fn Projects() -> Element {
     rsx! {
-        Project {
+        div {
-                url: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
+            class: "flex gap-4 items-center flex-wrap",
+            Project {
+                url: "https://git.ude-syssec.de/uni-due-syssec/students/2022_tuan-dat_tran_libAFLEVMFuzzer/ethfuzz/",
                 kind: "Bachelorproject",
                 title: "Undisclosed Ethereum Smart Contract Fuzzer",
                 authors: "Tuan-Dat Tran",
@@ -99,6 +101,33 @@ fn Projects() -> Element {
                     In this ingoing project I am building an Ethereum
                     Smart Contract Fuzzer. More info will follow."
             },
+            Project {
+                url: "https://git.tudattr.dev/tudattr/dotfiles",
+                kind: "Personal Project",
+                title: ".dotfiles",
+                authors: "Tuan-Dat Tran",
+                description: "
+                    dotfiles is a slang term usually used for configuration files in
+                    Linux based systems. My dotfiles contain configurations for tools
+                    I frequently use as well as a documentation on how to set up
+                    my daily-use notebook. It provides a baseline for any personal
+                    Linux system I set up and allows for repeatability simplifies
+                    the process of setting up an ArchLinux based system.
+                    "
+            },
+            Project {
+                url: "https://git.tudattr.dev/tudattr/ansible",
+                kind: "Personal Project",
+                title: "Ansible Homelab",
+                authors: "Tuan-Dat Tran",
+                description: "
+                    Ansible is a automation engine which allows for automatic
+                    provisioning, configuration management and application
+                    deployment. I use ansible to set up my homelab, which serves as
+                    a platform for me to try out and learn new technologies.
+                    "
+            }
+        }
     }
 }