feat(about): highlight active timeline entries

components/about-content.tsx

@@ -17,6 +17,7 @@ type TimelineItem = {
   title: string;
   subtitle: string;
   period: string;
+  current?: boolean;
   description?: string;
 };
 
@@ -44,48 +45,62 @@ function SectionHeading({
 function TimelineList({ items }: { items: TimelineItem[] }) {
   return (
     <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"
-        >
-          <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>
+      {items.map((item) => {
+        return (
+          <div
+            key={item.id}
+            className="relative grid grid-cols-[1.5rem_1fr] gap-3"
+          >
+            <span
+              className={`mt-1 size-6 rounded-full border p-1 ${
+                item.current
+                  ? "border-success-border bg-success"
+                  : "border-border bg-background"
+              }`}
+            >
+              <span
+                className={`block size-full rounded-full ${
+                  item.current ? "bg-success-solid" : "bg-primary"
+                }`}
+              />
+            </span>
+
+            <div className="border-b border-border pb-4">
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <Typography variant="large" className="text-base leading-tight">
+                    {item.title}
+                  </Typography>
+                  <Typography
+                    variant="small"
+                    className="mt-0.5 text-muted-foreground"
+                  >
+                    {item.subtitle}
+                  </Typography>
+                </div>
 
-          <div className="border-b border-border pb-4">
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div className="min-w-0 flex-1">
-                <Typography variant="large" className="text-base leading-tight">
-                  {item.title}
-                </Typography>
                 <Typography
-                  variant="small"
-                  className="mt-0.5 text-muted-foreground"
+                  variant="display"
+                  className={`shrink-0 text-right font-medium ${
+                    item.current ? "text-success-icon" : "text-primary"
+                  }`}
                 >
-                  {item.subtitle}
+                  {item.period}
                 </Typography>
               </div>
 
-              <Typography
-                variant="display"
-                className="shrink-0 text-right font-medium text-primary"
-              >
-                {item.period}
-              </Typography>
+              {item.description ? (
+                <Typography
+                  variant="small"
+                  className="mt-3 leading-relaxed text-muted-foreground"
+                >
+                  {item.description}
+                </Typography>
+              ) : null}
             </div>
-
-            {item.description ? (
-              <Typography
-                variant="small"
-                className="mt-3 leading-relaxed text-muted-foreground"
-              >
-                {item.description}
-              </Typography>
-            ) : null}
           </div>
-        </div>
-      ))}
+        );
+      })}
     </div>
   );
 }
@@ -100,6 +115,7 @@ export function AboutContent() {
     title: getLocalizedValue(item.title, locale),
     subtitle: item.institution,
     period: getLocalizedValue(item.period, locale),
+    current: "current" in item ? item.current : undefined,
   }));
 
   const experienceItems: TimelineItem[] = EXPERIENCE.map((item) => ({
@@ -107,6 +123,7 @@ export function AboutContent() {
     title: getLocalizedValue(item.role, locale),
     subtitle: item.company,
     period: getLocalizedValue(item.period, locale),
+    current: "current" in item ? item.current : undefined,
   }));
 
   return (

data/education.ts

@@ -10,6 +10,7 @@ export const EDUCATION = [
       tr: "2024 - Günümüz",
       en: "2024 - Present",
     },
+    current: true,
     description: {
       tr: "Yazılım temelleri, ürün bakış açısı ve disiplinler arası proje geliştirme alanlarında kendimi geliştirmeye devam ediyorum.",
       en: "Continuing to develop my skills in software foundations, product perspective, and interdisciplinary project development.",

data/experience.ts

@@ -10,6 +10,7 @@ export const EXPERIENCE = [
       tr: "Ağustos 2025 - Günümüz",
       en: "August 2025 - Present",
     },
+    current: true,
   },
   {
     id: "omedya-intern",