feat. add real work experience section and update types

2026-03-13 23:55:22 +01:00
parent d8697ac08d
commit ad165736bf
4 changed files with 117 additions and 11 deletions
@@ -0,0 +1,73 @@
+import type { RealWork } from "../types";
+
+interface WorkExperienceProps {
+	realWork: RealWork[];
+}
+
+export function WorkExperience({ realWork }: WorkExperienceProps) {
+	return (
+		<section className="w-full max-w-4xl mx-auto px-4 space-y-8">
+			<div className="text-center space-y-2">
+				<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
+					Work Experience
+				</h2>
+				<p className="text-gray-400 max-w-2xl mx-auto">
+					Professional collaborations and product work I have contributed to.
+				</p>
+			</div>
+
+			{realWork.length === 0 ? (
+				<div 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 text-center">
+					<p className="text-gray-300">No work experience entries available yet.</p>
+				</div>
+			) : (
+				<div className="space-y-4">
+					{realWork.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>
+								{entry.url ? (
+									<a
+										href={entry.url}
+										target="_blank"
+										rel="noreferrer"
+										className="inline-flex items-center gap-2 self-start sm:self-auto rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1.5 text-sm font-medium text-cyan-200 hover:bg-cyan-400/20 hover:border-cyan-300/50 transition-colors"
+									>
+										<span>{new URL(entry.url).hostname.replace(/^www\./, "")}</span>
+										<svg
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											aria-hidden="true"
+											className="h-4 w-4"
+										>
+											<path d="M5 6.75A1.75 1.75 0 0 1 6.75 5h2a.75.75 0 0 0 0-1.5h-2A3.25 3.25 0 0 0 3.5 6.75v6.5A3.25 3.25 0 0 0 6.75 16.5h6.5a3.25 3.25 0 0 0 3.25-3.25v-2a.75.75 0 0 0-1.5 0v2A1.75 1.75 0 0 1 13.25 15h-6.5A1.75 1.75 0 0 1 5 13.25v-6.5Z" />
+											<path d="M11.25 3.5a.75.75 0 0 0 0 1.5h2.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06L15 6.06v2.69a.75.75 0 0 0 1.5 0V3.5h-5.25Z" />
+										</svg>
+									</a>
+								) : null}
+							</div>
+
+							<p className="text-gray-300 leading-relaxed">{entry.summary}</p>
+
+							{entry.tags && entry.tags.length > 0 ? (
+								<div className="flex flex-wrap gap-2">
+									{entry.tags.map((tag) => (
+										<span
+											key={`${entry.company}-${tag}`}
+											className="px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/20 text-cyan-200 border border-cyan-500/30"
+										>
+											{tag}
+										</span>
+									))}
+								</div>
+							) : null}
+						</div>
+					))}
+				</div>
+			)}
+		</section>
+	);
+}