feat: updated about content

components/about-content.tsx

@@ -43,16 +43,19 @@ function SectionHeading({
 
 function TimelineList({ items }: { items: TimelineItem[] }) {
   return (
-    <div className="relative space-y-3 before:absolute before:top-3 before:bottom-3 before:left-3 before:w-px before:bg-border">
+    <div className="relative space-y-4 before:absolute before:top-3 before:bottom-3 before:left-3 before:w-px before:bg-border">
       {items.map((item) => (
-        <div key={item.id} className="relative grid grid-cols-[1.5rem_1fr] gap-3">
+        <div
-          <span className="mt-3 size-6 rounded-full border border-border bg-background p-1">
+          key={item.id}
+          className="relative grid grid-cols-[1.5rem_1fr] gap-3"
+        >
+          <span className="mt-1 size-6 rounded-full border border-border bg-background p-1">
             <span className="block size-full rounded-full bg-primary" />
           </span>
 
-          <Card className="rounded-sm border-border p-4">
+          <div className="border-b border-border pb-4">
-            <div className="flex flex-wrap items-start justify-between gap-2">
+            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div className="min-w-0">
+              <div className="min-w-0 flex-1">
                 <Typography variant="large" className="text-base leading-tight">
                   {item.title}
                 </Typography>
@@ -64,9 +67,12 @@ function TimelineList({ items }: { items: TimelineItem[] }) {
                 </Typography>
               </div>
 
-              <Badge variant="soft" className="rounded-sm text-primary">
+              <Typography
+                variant="display"
+                className="shrink-0 text-right font-medium text-primary"
+              >
                 {item.period}
-              </Badge>
+              </Typography>
             </div>
 
             {item.description ? (
@@ -77,7 +83,7 @@ function TimelineList({ items }: { items: TimelineItem[] }) {
                 {item.description}
               </Typography>
             ) : null}
-          </Card>
+          </div>
         </div>
       ))}
     </div>
@@ -94,7 +100,6 @@ export function AboutContent() {
     title: getLocalizedValue(item.title, locale),
     subtitle: item.institution,
     period: getLocalizedValue(item.period, locale),
-    description: getLocalizedValue(item.description, locale),
   }));
 
   const experienceItems: TimelineItem[] = EXPERIENCE.map((item) => ({
@@ -134,7 +139,7 @@ export function AboutContent() {
         </Typography>
       </section>
 
-      <section className="grid gap-8 lg:grid-cols-2">
+      <section className="space-y-10">
         <div className="space-y-3">
           <SectionHeading title={t("educationTitle")} />
           <TimelineList items={educationItems} />