feat. added dates & roles to work experience

src/sections/WorkExperience.tsx

@@ -6,7 +6,50 @@ interface WorkExperienceProps {
 	realWork: RealWork[];
 }
 
+function getWorkDateTimestamp(dateValue?: string) {
+	if (!dateValue) return Number.NEGATIVE_INFINITY;
+	const timestamp = Date.parse(dateValue);
+	return Number.isNaN(timestamp) ? Number.NEGATIVE_INFINITY : timestamp;
+}
+
+function getSortTimestamp(entry: RealWork) {
+	if (!entry.until || entry.until.trim().toLowerCase() === "present") {
+		return Number.POSITIVE_INFINITY;
+	}
+	const untilTimestamp = getWorkDateTimestamp(entry.until);
+	if (untilTimestamp !== Number.NEGATIVE_INFINITY) return untilTimestamp;
+	return getWorkDateTimestamp(entry.from);
+}
+
+function formatWorkDate(dateValue: string) {
+	const yearMonthMatch = /^(\d{4})-(\d{2})$/.exec(dateValue.trim());
+	if (yearMonthMatch) {
+		const year = Number.parseInt(yearMonthMatch[1], 10);
+		const monthIndex = Number.parseInt(yearMonthMatch[2], 10) - 1;
+		if (monthIndex >= 0 && monthIndex <= 11) {
+			return new Date(Date.UTC(year, monthIndex, 1)).toLocaleDateString("en-US", {
+				year: "numeric",
+				month: "short",
+				timeZone: "UTC",
+			});
+		}
+	}
+
+	const timestamp = Date.parse(dateValue);
+	if (Number.isNaN(timestamp)) return dateValue;
+	return new Date(timestamp).toLocaleDateString("en-US", {
+		year: "numeric",
+		month: "short",
+	});
+}
+
 export function WorkExperience({ realWork }: WorkExperienceProps) {
+	const sortedRealWork = [...realWork].sort(
+		(a, b) =>
+			getSortTimestamp(b) - getSortTimestamp(a) ||
+			getWorkDateTimestamp(b.from) - getWorkDateTimestamp(a.from),
+	);
+
 	return (
 		<section className="w-full max-w-4xl mx-auto px-4 space-y-8">
 			<div className="text-center space-y-2">
@@ -24,13 +67,28 @@ export function WorkExperience({ realWork }: WorkExperienceProps) {
 				</div>
 			) : (
 				<div className="space-y-4">
-					{realWork.map((entry, index) => (
+					{sortedRealWork.map((entry, index) => (
 						<div
 							key={`${entry.company}-${index}`}
 							className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
 						>
 							<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
-								<h3 className="text-2xl font-semibold text-white">{entry.company}</h3>
+								<div>
+									<h3 className="text-2xl font-semibold text-white">{entry.company}</h3>
+									{entry.role ? (
+										<p className="text-sm font-medium text-cyan-200/90 mt-1">{entry.role}</p>
+									) : null}
+									{entry.from || entry.until ? (
+										<p className="text-xs font-medium uppercase tracking-wide text-cyan-300/80 mt-1">
+											{entry.from ? formatWorkDate(entry.from) : "Unknown"} -{" "}
+											{entry.until
+												? entry.until.trim().toLowerCase() === "present"
+													? "Present"
+													: formatWorkDate(entry.until)
+												: "Present"}
+										</p>
+									) : null}
+								</div>
 								{entry.url ? (
 									<a
 										href={entry.url}