Fixed flex-boxes in CV section

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

README.md

@@ -2,6 +2,16 @@
 
 My personal website.
 
+## Usage
+
+```sh
+npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
+```
+
+```sh
+ dx serve --platform fullstack
+```
+
 ## Screenshot
 
 [[./resources/screenshot.webp]]

assets/tailwind.css

@@ -608,6 +608,10 @@ video {
   inset-inline-start: -0.375rem;
 }
 
+.m-16 {
+  margin: 4rem;
+}
+
 .mx-16 {
   margin-left: 4rem;
   margin-right: 4rem;
@@ -628,6 +632,16 @@ video {
   margin-bottom: 2rem;
 }
 
+.my-16 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -700,10 +714,6 @@ video {
   height: 1px;
 }
 
-.h-32 {
-  height: 8rem;
-}
-
 .min-h-screen {
   min-height: 100vh;
 }
@@ -785,6 +795,16 @@ video {
   gap: 1rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.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)));
+}
+
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -797,10 +817,16 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
+  --tw-space-y-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
 .overflow-x-auto {
@@ -1279,6 +1305,11 @@ video {
 }
 
 @media (min-width: 640px) {
+  .sm\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -1293,6 +1324,12 @@ video {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:text-center {
     text-align: center;
   }

src/cv.rs

@@ -7,16 +7,21 @@ use crate::components::{H4, HR};
 pub fn CV() -> Element {
     rsx! {
         div {
-            class: "flex flex-col ",
+            class: "flex flex-col",
             div {
-                class: "flex justify-between",
+                class: "flex flex-col sm:flex-row justify-center items-center sm:space-x-8 space-y-8 sm:space-y-0",
+                img {
+                    class: "rounded-full w-24 h-24",
+                    alt: "headshot",
+                    src: "/pictures/headshot.webp"
+                }
                 Introduction {},
                 Socials {}
             },
 
             HR {}
             div {
-                class: "flex justify-between",
+                class: "flex flex-col justify-between sm:flex-row",
                 WorkExperience {},
                 Miscellaneous {},
             },
@@ -31,11 +36,6 @@ fn Introduction() -> Element {
     rsx! {
         div {
             class: "flex",
-
-            img {
-                class: "rounded-full w-16 h-16 mx-16",
-                src: "/pictures/headshot.webp"
-            }
             P { { translate!(i18, "cv.introduction_0") } },
             P { { translate!(i18, "cv.introduction_1") } }
         },
@@ -195,7 +195,7 @@ fn CVEntry(props: CVEntryProps) -> Element {
             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}"}
             ul {
-                class: "flex",
+                class: "flex flex-wrap gap-2",
                 for (index, value) in props.technologies.iter().enumerate() {
                     li { key: "{index}", RandomBadge { text: "{value}"} }
                 }