From 030ca4009c1cc3d51d1a56adb7eaef8c4404e4fd Mon Sep 17 00:00:00 2001
From: AramJonghu <aramjonghu@tutamail.com>
Date: Thu, 6 Aug 2026 18:33:32 +0200
Subject: [PATCH] feat(Timeline): Timeline component showing current entry.
 Might change.

---
 .../components/portfolio/TimelineEntry.tsx    | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 frontend/src/components/portfolio/TimelineEntry.tsx

diff --git a/frontend/src/components/portfolio/TimelineEntry.tsx b/frontend/src/components/portfolio/TimelineEntry.tsx
new file mode 100644
index 0000000..4a3a322
--- /dev/null
+++ b/frontend/src/components/portfolio/TimelineEntry.tsx
@@ -0,0 +1,59 @@
+import type { ReactElement } from "react";
+
+interface TimelineEntryProps {
+    title: string;
+    subtitle: string;
+    subtitleUrl?: string;
+    date: string;
+    current?: boolean;
+    highlights: string[];
+}
+
+export default function TimelineEntry({
+    title,
+    subtitle,
+    subtitleUrl,
+    date,
+    current,
+    highlights,
+}: TimelineEntryProps): ReactElement {
+    return (
+        <div className="relative pl-6 pb-8 border-l-2 border-ctp-overlay0">
+            <span className="absolute -left-1.25 top-1 size-2 rounded-full bg-ctp-green" />
+            <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+                <h3 className="text-lg font-semibold text-ctp-text">
+                    {title}
+                    {current && (
+                        <span className="ml-2 text-xs font-normal text-ctp-green border border-ctp-green rounded-full px-2 py-0.5 align-middle">
+                            Current
+                        </span>
+                    )}
+                </h3>
+                <span className="text-sm text-ctp-subtext0">{date}</span>
+            </div>
+            <p className="text-ctp-mauve">
+                {subtitleUrl ? (
+                    <a
+                        href={subtitleUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="hover:underline"
+                    >
+                        {subtitle}
+                    </a>
+                ) : (
+                    subtitle
+                )}
+            </p>
+            {highlights.length > 0 && (
+                <ul className="list-disc pl-6 mt-2 space-y-1 text-ctp-text">
+                    {highlights.map((h) => (
+                        <li key={h} className="text-sm">
+                            {h}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}