Added Social and tweaked Home

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

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "athome"
-version = "0.1.0"
+version = "0.2.2"
 authors = ["Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>"]
 edition = "2021"
 
@@ -8,7 +8,6 @@ edition = "2021"
 
 [dependencies]
 serde = { version = "1.0.197", features = ["derive"] }
-
 dioxus = { version = "0.5", features = ["fullstack", "router"] }
 
 # Debug

Dockerfile

@@ -1,9 +1,9 @@
-FROM rust:1.77.2 as dioxus
+FROM rust:1.79.0 AS dioxus
 RUN cargo install dioxus-cli@^0.5
 
-FROM dioxus as builder
+FROM dioxus AS builder
 WORKDIR /athome/
-RUN apt-get update && apt-get install nodejs npm -y && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install nodejs npm libssl-dev musl-tools -y && rm -rf /var/lib/apt/lists/*
 RUN npm install -D tailwindcss
 COPY ./src/ ./src/
 COPY ./assets/ ./assets/
@@ -11,9 +11,10 @@ COPY ./Cargo.toml ./Cargo.toml
 COPY ./input.css ./input.css
 COPY ./Dioxus.toml ./Dioxus.toml
 COPY ./tailwind.config.js ./tailwind.config.js
-RUN npx tailwindcss -i ./input.css -o ./assets/tailwind.css && dx build --platform fullstack --release
+RUN npx tailwindcss -i ./input.css -o ./assets/tailwind.css
+RUN dx build --platform fullstack --release
 
-FROM dioxus as runner
+FROM dioxus AS runner
 WORKDIR /app/
 COPY --from=builder /athome/docs/ ./docs/
 CMD [ "./docs/athome" ]

assets/pictures/Gitea_Logo.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 640 640;" xml:space="preserve" viewBox="5.67 143.05 628.65 387.55"> <g> 	<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"></path> 	<g> 		<g> 			<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"></path> 			<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"></path> 		</g> 	</g> </g> </svg>

assets/pictures/LI-Bug.svg.original.svg

@@ -0,0 +1,5 @@
+<svg id="Group_1282" data-name="Group 1282" xmlns="http://www.w3.org/2000/svg" width="76.624" height="65.326" viewBox="0 0 76.624 65.326">
+  <path id="Path_2525" data-name="Path 2525" d="M1165,274.515a1.2,1.2,0,0,0,1.21-1.269c0-.9-.543-1.33-1.657-1.33h-1.8v4.712h.677v-2.054h.832l.019.025,1.291,2.029h.724l-1.389-2.1Zm-.783-.472h-.785V272.45h.995c.514,0,1.1.084,1.1.757,0,.774-.593.836-1.314.836" transform="translate(-1092.136 -213.406)" fill="#0a66c2"/>
+  <path id="Path_2520" data-name="Path 2520" d="M958.98,112.559h-9.6V97.525c0-3.585-.064-8.2-4.993-8.2-5,0-5.765,3.906-5.765,7.939v15.294h-9.6V81.642h9.216v4.225h.129a10.1,10.1,0,0,1,9.093-4.994c9.73,0,11.524,6.4,11.524,14.726ZM918.19,77.416a5.571,5.571,0,1,1,5.57-5.572,5.571,5.571,0,0,1-5.57,5.572m4.8,35.143h-9.61V81.642h9.61Zm40.776-55.2h-55.21a4.728,4.728,0,0,0-4.781,4.67v55.439a4.731,4.731,0,0,0,4.781,4.675h55.21a4.741,4.741,0,0,0,4.8-4.675V62.025a4.738,4.738,0,0,0-4.8-4.67" transform="translate(-903.776 -57.355)" fill="#0a66c2"/>
+  <path id="Path_2526" data-name="Path 2526" d="M1156.525,264.22a4.418,4.418,0,1,0,.085,0h-.085m0,8.33a3.874,3.874,0,1,1,3.809-3.938c0,.022,0,.043,0,.065a3.791,3.791,0,0,1-3.708,3.871h-.1" transform="translate(-1084.362 -207.809)" fill="#0a66c2"/>
+</svg>

assets/robots.txt

@@ -0,0 +1,41 @@
+User-agent: CCBot
+Disallow: /
+
+User-agent: img2dataset
+Disallow: /
+
+User-agent: Google-Extended
+Disallow: /
+
+User-agent: anthropic-ai
+Disallow: /
+
+User-agent: Claude-Web
+Disallow: /
+
+User-agent: Omgilibot
+Disallow: /
+
+User-agent: Omgili
+Disallow: /
+
+User-agent: FacebookBot
+Disallow: /
+
+User-agent: Bytespider
+Disallow: /
+
+User-agent: magpie-crawler
+Disallow: /
+
+User-Agent: GPTBot
+Disallow: /
+
+User-agent: *
+Disallow: /impressum
+Allow: /
+Allow: /resume
+Allow: /publications
+Allow: /consulting
+Sitemap: https://www.tudattr.dev/sitemap.xml
+

assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

assets/sitemap.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+   <url>
+      <loc>https://www.tudattr.dev/</loc>
+      <lastmod>2024-07-25</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>1.0</priority>
+   </url>
+   <url>
+      <loc>https://www.tudattr.dev/resume</loc>
+      <lastmod>2024-07-25</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+   <url>
+      <loc>https://www.tudattr.dev/publications</loc>
+      <lastmod>2024-07-25</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+   <url>
+      <loc>https://www.tudattr.dev/consulting</loc>
+      <lastmod>2024-07-25</lastmod>
+      <changefreq>monthly</changefreq>
+      <priority>0.8</priority>
+   </url>
+</urlset>

assets/tailwind.css

@@ -554,6 +554,40 @@ video {
   --tw-contain-style:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .static {
   position: static;
 }
@@ -642,15 +676,6 @@ video {
   display: flex;
 }
 
-.inline-flex {
-  display: inline-flex;
-}
-
-.size-auto {
-  width: auto;
-  height: auto;
-}
-
 .h-16 {
   height: 4rem;
 }
@@ -675,8 +700,8 @@ video {
   height: 1px;
 }
 
-.h-screen {
+.h-32 {
-  height: 100vh;
+  height: 8rem;
 }
 
 .min-h-screen {
@@ -695,11 +720,6 @@ video {
   width: 0.75rem;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .w-full {
   width: 100%;
 }
@@ -717,8 +737,8 @@ video {
   max-width: 2rem;
 }
 
-.max-w-screen-xl {
+.max-w-md {
-  max-width: 1280px;
+  max-width: 28rem;
 }
 
 .max-w-sm {
@@ -729,6 +749,10 @@ video {
   max-width: 36rem;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -745,8 +769,8 @@ video {
   align-items: center;
 }
 
-.justify-start {
+.justify-end {
-  justify-content: flex-start;
+  justify-content: flex-end;
 }
 
 .justify-center {
@@ -767,8 +791,16 @@ video {
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.overflow-hidden {
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  overflow: hidden;
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .overflow-x-auto {
@@ -925,10 +957,6 @@ video {
           background-clip: text;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -1049,6 +1077,10 @@ video {
   text-transform: uppercase;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1251,6 +1283,16 @@ video {
     margin-top: 0px;
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
   .sm\:text-center {
     text-align: center;
   }

scripts/docker-push.sh

@@ -1,9 +1,20 @@
 #!/bin/sh
 
-VERSION=0.1.1
+TAG=$(git branch | grep "*" | awk '{ print $2 }')
 LOCAL_IMAGE="athome"
+REGISTRY="mos4"
 REMOTE_IMAGE="athome"
+DOCKERFILE="./Dockerfile"
 
-docker build -t $LOCAL_IMAGE .
+echo "DOCKERFILE: $DOCKERFILE"
-docker tag $LOCAL_IMAGE:latest mos4/$REMOTE_IMAGE:$VERSION
+echo "TAG: $TAG"
-docker push mos4/$REMOTE_IMAGE:$VERSION
+echo "LOCAL_IMAGE: $LOCAL_IMAGE"
+echo "REGISTRY: $REGISTRY"
+echo "REMOTE_IMAGE: $REMOTE_IMAGE"
+
+#docker buildx build --platform linux/amd64,linux/arm64 -f ${DOCKERFILE} -t \
+#  ${REGISTRY}/${REMOTE_IMAGE}:${TAG} . --push
+
+docker buildx build --platform linux/amd64 -f ${DOCKERFILE} \
+  -t ${REGISTRY}/${REMOTE_IMAGE}:${TAG} \
+  -t ${REGISTRY}/${REMOTE_IMAGE}:latest . --push

src/components/mod.rs

@@ -21,6 +21,19 @@ pub fn P(props: PProps) -> Element {
     }
 }
 
+#[component]
+pub fn Title(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            h1 {
+                class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
+                {props.children}
+            }
+        }
+    }
+}
+
 #[component]
 pub fn H1(props: PProps) -> Element {
     rsx! {
@@ -80,11 +93,11 @@ pub fn Card(prop: CardProp) -> Element {
             div {
                 class: "pb-4",
                 div {
-                    class: "flex justify-between",
+                    class: "justify-between",
                     Picture {src: "{prop.picture}"},
                 }
             }
-            H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
+            Title { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
             { prop.children }
         }
     }
@@ -112,11 +125,11 @@ 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 my-8",
+            class:"rounded 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",
+                class:"items-center mx-auto",
                 p {
-                    class:"flex items-center text-sm font-normal text-gray-500 dark:text-gray-400",
+                    class:"items-center text-sm font-normal text-gray-500 dark:text-gray-400",
                     span { { translate!(i18, "components.under_construction") } }
                 }
             }

src/cv.rs

@@ -8,7 +8,12 @@ pub fn CV() -> Element {
     rsx! {
         div {
             class: "flex flex-col ",
-            Introduction {},
+            div {
+                class: "flex justify-between",
+                Introduction {},
+                Socials {}
+            },
+
             HR {}
             div {
                 class: "flex justify-between",
@@ -16,7 +21,6 @@ pub fn CV() -> Element {
                 Miscellaneous {},
             },
             HR {},
-            Socials {}
         }
     }
 }
@@ -27,12 +31,14 @@ fn Introduction() -> Element {
     rsx! {
         div {
             class: "flex",
+
             img {
                 class: "rounded-full w-16 h-16 mx-16",
-                src: "/pictures/portrait.webp"
+                src: "/pictures/headshot.webp"
             }
-            P { { translate!(i18, "cv.introduction") }}
+            P { { translate!(i18, "cv.introduction_0") } },
-        }
+            P { { translate!(i18, "cv.introduction_1") } }
+        },
     }
 }
 
@@ -228,9 +234,17 @@ fn random_badge_color(seed: usize) -> String {
 }
 
 fn Socials() -> Element {
+    let i18 = use_i18();
+
     rsx! {
         div {
-            "todo!()"
+            class: "ms-8 max-w-3/4",
+            H4 { { translate!(i18, "cv.socials.title") } },
+            div {
+                class: "flex justify-center items-center space-x-4",
+                P { Link { to:"https://www.linkedin.com/in/tudattr/", class:"hover:underline", new_tab: true, img { class: "h-8", src:"/pictures/LI-Bug.svg.original.svg", alt:"LinkedIn Logo" } }},
+                P { Link { to:"https://git.tudattr.dev/tudattr", class:"hover:underline", new_tab: true, img { class: "h-8", src:"/pictures/Gitea_Logo.svg", alt:"Gitea Logo" } }},
+            }
         }
     }
 }

src/home.rs

@@ -6,34 +6,35 @@ use dioxus_sdk::{i18n::use_i18, translate};
 pub fn Home() -> Element {
     let i18 = use_i18();
     rsx! {
-        Card {
+        div {
-            name: translate!(i18, "home.card.name"),
+            class: "container mx-auto p-4 flex items-center justify-center max-w-md w-full",
-            gender: translate!(i18, "home.card.gender"),
+            Card {
-            picture: "/pictures/comfy.webp",
+                name: translate!(i18, "home.card.name"),
-            div {
+                gender: translate!(i18, "home.card.gender"),
-                class: "py-4",
+                picture: "/pictures/headshot.webp",
                 div {
-                    class: "mb-2",
+                    class: "py-4",
-                    P { { translate!(i18, "home.card.l1") }  },
+                    div {
-                    P { { translate!(i18, "home.card.l2") }  },
+                        class: "mb-2",
-                    P { { translate!(i18, "home.card.l3") },
+                        P { { translate!(i18, "home.card.l1") }  },
-                        Link {
+                        P { { translate!(i18, "home.card.l2") }  },
-                            to: "https://git.tudattr.dev/explore/repos",
+                        P { { translate!(i18, "home.card.l3") } },
-                            new_tab: true,
+                        P { { translate!(i18, "home.card.l4") }
-                            class: "inline-flex items-center font-medium hover:underline",
+                            Link {
-                            "gitea"},
+                                to: "https://git.tudattr.dev/explore/repos",
-                        { translate!(i18, "home.card.l3_1") }
+                                new_tab: true,
+                                class: "items-center font-medium hover:underline",
+                                "gitea"},
+                            { translate!(i18, "home.card.l4_1") }
+                        },
                     },
                 },
-            },
+                Link {
-            Link {
+                    to: "mailto:tuan-dat.tran@tudattr.dev",
-                to: "mailto:tuan-dat.tran@tudattr.dev",
+                    class: "text-gray-900 bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white rounded-full shadow-lg py-4 px-4",
-                class: "w-fit relative inline-flex items-center justify-center p-1 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white w-fill",
-                p {
-                    class: "p-1",
                     { translate!(i18, "home.card.contact_button") }
                 }
-            }
+            },
-        },
+        }
     }
 }

src/languages/de-DE.json

@@ -18,13 +18,14 @@
         "gender": "",
         "l1": "Hallihallo! 👋🏻👋🏼👋🏽👋🏾👋🏿",
         "l2": "Willkommen auf meiner kleinen Webseite im World Wide Web.",
-        "l3": "Während du hier bist, schau dir doch meine Projekte auf ",
+        "l3": "Mein Name ist Tuan und ich bin Linux-Bastler, IT-Security Nerd und Automatisierer aus Leidenschaft.",
-        "l3_1": " an.",
+        "l4": "Während du hier bist, schau dir doch meine Projekte auf ",
+        "l4_1": " an.",
         "contact_button": "Get in touch."
       }
     },
     "cv": {
-      "introduction": "Während meines Bachelorstudiums habe ich viele Erfahrungen in der Industrie und im Studium gesammelt. Meine beruflichen und persönlichen Interessen sind DevOps/IaC, Systems/Software Security und Computer Networking. All diese Interessen vertiefe ich in persönlichen Projekten wie meinem Homelab und CTF-Challenges.",
+      "introduction_0": "Während meines Bachelorstudiums habe ich viele Erfahrungen in der Industrie und im Studium gesammelt. Meine beruflichen und persönlichen Interessen sind DevOps/IaC, Systems/Software Security und Computer Networking. All diese Interessen vertiefe ich in persönlichen Projekten wie meinem Homelab und CTF-Challenges.",
       "workexperience": {
         "title": "Berufserfahrung",
         "se1_gefeba": {
@@ -53,6 +54,9 @@
           "description": "Während meiner Tätigkeit als wissenschaftlicher Mitarbeiter in der Network Communication System Research Group an der Universität Duisburg-Essen habe ich an der Forschung rund um Software Defined Networking, 5G, Staukontrollalgorithmen und föderiertes maschinelles Lernen mitgearbeitet. Ich habe die On-Premise- und Cloud-Infrastruktur, das Inventarsystem und die Online-Präsenz der Forschungsgruppe aufgebaut und verwaltet."
         }
       },
+      "socials": {
+        "title": "Profile"
+      },
       "education": {
         "title": "Bildungsweg",
         "bachelor": {

src/languages/en-GB.json

@@ -18,13 +18,14 @@
         "gender": "(He/Him)",
         "l1": "Hey there! 👋🏻👋🏼👋🏽👋🏾👋🏿",
         "l2": "Welcome to my little place on the internet.",
-        "l3": "While you're here, why don't you check out my projects over on ",
+        "l3": "My name is Tuan and I'm passionate about Linux, system security, automation, network performance tweaking and all things tech.",
-        "l3_1": "?",
+        "l4": "While you're here, why don't you check out my projects over on ",
+        "l4_1": "?",
         "contact_button": "Get in touch."
       }
     },
     "cv": {
-      "introduction": "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 homelab and CTF challenges.",
+      "introduction_0": "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 homelab and CTF challenges.",
       "workexperience": {
         "title": "Work Experience",
         "se1_gefeba": {
@@ -53,6 +54,9 @@
           "description": "While working for the Network Communication System Research Group at the University Duisburg-Essen as a research assistant I've assisted in research around software defined networking, 5G, congestion control algorithms and federated machine learning. I've established and managed the research groups on-premise and cloud infractructure, inventory system and online presence."
         }
       },
+      "socials": {
+        "title": "Socials"
+      },
       "education": {
         "title": "Education",
         "bachelor": {

src/layout/footer.rs

@@ -8,6 +8,7 @@ pub fn Footer() -> Element {
 
     rsx! {
         div {
+            class: "container mx-auto",
             // ToolsUsed {},
             footer {
                 class:"bg-white rounded-lg shadow dark:bg-gray-800",

src/layout/header.rs

@@ -9,21 +9,25 @@ pub fn Header() -> Element {
     rsx! {
         nav {
             div {
-                class: "flex items-center justify-between p-4 space-x-8",
+                // class: "justify-between p-4 space-x-8",
-                Link {
+                class: "container mx-auto p-4",
-                    to: Route::Home {},
+
-                    class: "justify-start",
-                    img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"TuDatTr Logo" },
-                },
                 ul {
-                    class:"flex space-x-8",
+                    class:"flex flex-col justify-between sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-s-4",
+                    li {
+                        Link {
+                            to: Route::Home {},
+                            class: "rounded-md shadow-sm",
+                            img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"TuDatTr Logo" },
+                        },
+                    },
                     li { HeaderLink { url: Route::Home {}, text: translate!(i18, "headers.home")}  },
                     li { HeaderLink { url: Route::CV {}, text: translate!(i18, "headers.cv") } },
                     li { HeaderLink { url: Route::PublicationsProjects {}, text: translate!(i18, "headers.publications_projects") } },
                     li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
                     li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
+                    li { LanguageButtonGroup {} },
                 },
-                LanguageButtonGroup { },
             }
         }
     }
@@ -38,7 +42,7 @@ fn LanguageButtonGroup() -> Element {
 
     rsx! {
       div {
-          class: "inline-flex rounded-md shadow-sm",
+          class: "rounded-md shadow-sm justify-end",
           button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
           button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
       }

src/layout/mod.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
-mod footer;
+pub mod footer;
-mod header;
+pub mod header;
 
 use crate::{Body, Route};
 use footer::Footer;
@@ -10,14 +10,11 @@ use header::Header;
 pub fn Layout() -> Element {
     rsx! {
         div {
-            class: "flex justify-center ",
+            class: "flex flex-col min-h-screen",
-            div {
+            Header {},
-                class: "max-w-screen-xl flex-col" ,
+            Body {
-                Header {},
+                Outlet::<Route> {},
-                Body {
+            Footer {},
-                    Outlet::<Route> {},
-                }
-                Footer {},
             }
         }
     }

src/main.rs

@@ -2,9 +2,12 @@
 
 use std::str::FromStr;
 
+use components::H1;
 use dioxus::prelude::*;
 use dioxus_sdk::i18n::*;
 
+use layout::footer::Footer;
+use layout::header::Header;
 use tracing::Level;
 
 pub mod components;
@@ -61,9 +64,40 @@ fn App() -> Element {
 
     rsx! {
         meta {
-            name: "robots",
+            name: "description",
-            content: "noindex",
+            content: "Visit Tuan-Dat Tran's website for his CV, publications, projects, and consulting services. Connect for collaboration.",
         },
+        script {
+            r#type: "application/ld+json",
+            "
+            {{
+                \"@context\": \"https://schema.org\",
+                \"@type\": \"ProfilePage\",
+                \"mainEntity\": {{
+                  \"@type\": \"Person\",
+                  \"name\": \"Tuan-Dat Tran\",
+                  \"alternateName\": \"TuDatTr\",
+                  \"image\": \"https://www.tudattr.dev/pictures/headshot.webp\",
+                }}
+            }}
+            "
+        }
+        // meta {
+        //     property: "og:title",
+        //     content: "Tuan-Dat Trans Personal Website",
+        // }
+        // meta {
+        //     property: "og:description",
+        //     content: "Explore Tuan-Dat Tran's personal website featuring his CV, publications, projects, and consulting services. Get insights into his professional journey and connect for collaboration opportunities.",
+        // }
+        // meta {
+        //     property: "og:image",
+        //     content: "https://www.tudattr.dev/pictures/headshot.webp",
+        // }
+        // meta {
+        //     property: "og:url",
+        //     content: "https://tudattr.dev",
+        // }
         div {
             class: "bg-white dark:bg-gray-900 min-h-screen",
             Router::<Route> {},
@@ -75,12 +109,16 @@ fn App() -> Element {
 fn PageNotFound(route: Vec<String>) -> Element {
     rsx! {
         div {
-            class: "h-screen flex items-center justify-center",
+            class: "flex flex-col min-h-screen items",
-            img {
+            Header {},
-                class: "size-auto",
+            div {
-                src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/404Notfound/NotFound.png"
+                class: "container mx-auto p-4 flex items-center justify-center max-w-md w-full",
+                H1 {
+                    "Site not found (404)"
+                },
             }
-        }
+            Footer {}
+        },
     }
 }
 
@@ -92,7 +130,7 @@ pub struct BodyProp {
 pub fn Body(prop: BodyProp) -> Element {
     rsx! {
         div {
-            class: "my-4 flex justify-center",
+            class: "flex-grow container mx-auto p-4",
             {prop.children}
         }
     }

src/publications.rs

@@ -60,6 +60,7 @@ fn Publications() -> Element {
     }
 }
 fn Publication(prop: PublicationProp) -> Element {
+    let pattern = "T.-D. Tran";
     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",
@@ -71,8 +72,11 @@ fn Publication(prop: PublicationProp) -> Element {
             },
             span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" },
             p {
-                class:"font-normal text-gray-700 dark:text-gray-400",
+                class:"font-normal text-gray-700 dark:text-gray-400 italic",
-                "{prop.authors}",
+                Authors {
+                    authors: "{prop.authors}",
+                    pattern: "{pattern}",
+                },
             }
             p {
                 class:"font-normal text-gray-700 dark:text-gray-400",
@@ -125,6 +129,8 @@ struct ProjectProp {
 }
 
 fn Project(prop: ProjectProp) -> Element {
+    let pattern = "T.-D. Tran";
+
     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",
@@ -137,7 +143,10 @@ fn Project(prop: ProjectProp) -> Element {
             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}",
+                Authors {
+                    authors: "{prop.authors}",
+                    pattern: "{pattern}",
+                },
             }
             p {
                 class:"font-normal text-gray-700 dark:text-gray-400",
@@ -146,3 +155,23 @@ fn Project(prop: ProjectProp) -> Element {
         }
     }
 }
+
+#[derive(Clone, PartialEq, Props)]
+struct AuthorProp {
+    authors: String,
+    pattern: String,
+}
+
+fn Authors(prop: AuthorProp) -> Element {
+    if let Some(start) = prop.authors.find(&prop.pattern) {
+        let end = start + prop.pattern.len();
+        let left = &prop.authors[..start];
+        let middle = &prop.authors[start..end];
+        let right = &prop.authors[end..];
+        rsx! {
+            "{left}" , b { "{middle}" }, "{right}",
+        }
+    } else {
+        rsx! { "{prop.authors}" }
+    }
+}