updates to me card

Trombach · Sep 19, 2024 · ceff0f1 · ceff0f1
1 parent 2aa1363
commit ceff0f1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 19 deletions.
diff --git a/src/components/About/AboutText.astro b/src/components/About/AboutText.astro
@@ -9,7 +9,7 @@ const {
 const { Content } = await render();
 ---
 
-<div class="p-10 lg:w-1/2 w-full lg:ml-auto">
+<div class="p-10 lg:w-1/2 lg:ml-auto">
   <H1 {title} class="timeline-slide-in-bottom" />
   <div class="prose md:prose-lg dark:prose-invert *:timeline-slide-in-bottom">
     <Content />

diff --git a/src/components/About/MeCard/MeCard.astro b/src/components/About/MeCard/MeCard.astro
@@ -14,11 +14,11 @@ const { data } = await getEntry(person);
   class:list={[
     "@container/me-card",
     "z-50 rounded-xl border bg-card [transform-style:preserve-3d]",
-    "w-3/4 lg:w-1/2 aspect-[1/1.59] lg:aspect-[1.59/1] max-w-[750px]",
+    "w-3/4 md:w-1/2 aspect-[1/1.59] md:aspect-[1.59/1] max-w-[750px]",
   ]}
 >
   <div
-    class="flex flex-col lg:flex-row h-full w-full items-stretch justify-between"
+    class="flex flex-col sm:flex-row h-full w-full items-stretch justify-between"
   >
     <MeCardImage image={data.avatar} />
     <MeCardData {data} />

diff --git a/src/components/About/MeCard/MeCardData.astro b/src/components/About/MeCard/MeCardData.astro
@@ -9,24 +9,33 @@ const { data } = Astro.props;
 
 const me = {
   Name: data.name,
-  Age: Math.floor((Date.now() - data.birthday.getTime()) / 31_556_952_000), // age in years
   From: data.from,
   Location: `${data.currentLocation.city}, ${data.currentLocation.countryShort} ${data.currentLocation.flag}`,
+  Age: Math.floor((Date.now() - data.birthday.getTime()) / 31_556_952_000), // age in years
   Experience: `${new Date().getFullYear() - data.industryStart} years`,
   Education: data.education,
 } as const;
 ---
 
-<ul class="table mx-5 md:mr-10 basis-2/3 py-5 @lg:py-10">
+<ul class:list={[
+  "grid grid-cols-2 items-center content-evenly gap-x-2 @sm:gap-x-5 @md:gap-x-10 m-5 max-w-[750px] basis-2/3",
+  "[&>li]:col-span-2 [&>li:nth-child(n+2):nth-child(-n+5)]:col-span-1"
+]}>
   {
     Object.entries(me).map(([key, value]) => (
-      <li class="table-row">
-        <span class="table-cell text-sm align-middle font-bold @lg:text-lg">
-          {key}:
-        </span>
-        <span class="table-cell bg-background w-3/5 border-b border-t-0 border-x-0 border-dashed align-middle font-mono text-sm @lg:text-lg">
-          {value}
-        </span>
+      <li>
+        <label
+          for={key}
+          class="text-sm align-middle font-bold @lg:text-lg flex flex-col"
+        >
+          <span class="block text-sm font-medium leading-6">{key}</span>
+          <input
+            name={key}
+            readonly
+            {value}
+            class="rounded-lg border bg-background px-3 py-2 shadow-sm font-mono text-sm @lg:text-base"
+          />
+        </label>
       </li>
     ))
   }

diff --git a/src/components/About/MeCard/MeCardImage.astro b/src/components/About/MeCard/MeCardImage.astro
@@ -12,10 +12,13 @@ const { image } = Astro.props;
 ---
 
 <div
-  class="gradient basis-1/3 rounded-t-xl lg:rounded-l-xl flex flex-col items-center"
+  class:list={[
+    "gradient basis-1/3 rounded-t-xl sm:rounded-l-xl flex flex-row sm:flex-col gap-5 pt-5 max-sm:justify-center items-center",
+    "[--gradient-direction:160deg] sm:[--gradient-direction:105deg]",
+  ]}
 >
-  <Avatar {image} class="mt-5 size-24 @lg:size-32" />
-  <div class="mx-auto mt-5 max-w-fit max-h-fit rounded-full bg-background">
+  <Avatar {image} class="size-24 @lg:size-32" />
+  <div class="max-w-fit max-h-fit rounded-full bg-background">
     <AppLink
       as="a"
       href="/lukas-trombach.vcf"
@@ -30,10 +33,6 @@ const { image } = Astro.props;
 
 <style>
   .gradient {
-    --gradient-direction: 160deg;
-    @media screen(lg) {
-      --gradient-direction: 105deg;
-    }
     --spacing-1: 2%;
     --spacing-2: 1.5%;
     --width-1: 6%;