Initial commit

frontend/src/components/content/WorkExperience.astro

@@ -0,0 +1,66 @@
+---
+import Tag from '../ui/Tag.astro';
+
+export interface Props {
+  year: string;
+  role: string;
+  company: string;
+  description: string;
+  tech: string[];
+  slug?: string;
+}
+
+const { year, role, company, description, tech, slug } = Astro.props;
+---
+
+{slug ? (
+  <a href={`/work/${slug}`} class="block">
+    <div
+      class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500 cursor-pointer"
+    >
+      <div class="lg:col-span-2">
+        <div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
+          {year}
+        </div>
+      </div>
+
+      <div class="lg:col-span-6 space-y-3">
+        <div>
+          <h3 class="text-lg sm:text-xl font-medium">{role}</h3>
+          <div class="text-muted-foreground">{company}</div>
+        </div>
+        <p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
+      </div>
+
+      <div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
+        {tech.map((technology) => (
+          <Tag text={technology} variant="tech" />
+        ))}
+      </div>
+    </div>
+  </a>
+) : (
+  <div
+    class="group grid lg:grid-cols-12 gap-4 sm:gap-8 py-6 sm:py-8 border-b border-border/50 hover:border-border transition-colors duration-500"
+  >
+    <div class="lg:col-span-2">
+      <div class="text-xl sm:text-2xl font-light text-muted-foreground group-hover:text-foreground transition-colors duration-500">
+        {year}
+      </div>
+    </div>
+
+    <div class="lg:col-span-6 space-y-3">
+      <div>
+        <h3 class="text-lg sm:text-xl font-medium">{role}</h3>
+        <div class="text-muted-foreground">{company}</div>
+      </div>
+      <p class="text-muted-foreground leading-relaxed max-w-lg">{description}</p>
+    </div>
+
+    <div class="lg:col-span-4 flex flex-wrap gap-2 lg:justify-end mt-2 lg:mt-0">
+      {tech.map((technology) => (
+        <Tag text={technology} variant="tech" />
+      ))}
+    </div>
+  </div>
+)}