feat: add image gallery to work experience

Add support for displaying featured images in work experience entries with lightbox gallery view.

Closes #8

Author: shrvansudhakara

src/components/ui/ImageLightbox.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+interface ImageLightboxProps {
+  images: { src: string; alt?: string }[];
+  isOpen: boolean;
+  initialIndex: number;
+  onClose: () => void;
+}
+
+export default function ImageLightbox({
+  images,
+  isOpen,
+  initialIndex,
+  onClose,
+}: ImageLightboxProps) {
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
+  if (!isOpen) return null;
+
+  const goToNext = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCurrentIndex((currentIndex + 1) % images.length);
+  };
+
+  const goToPrev = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCurrentIndex((currentIndex - 1 + images.length) % images.length);
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
+      onClick={onClose}
+    >
+      <button
+        onClick={handleClose}
+        className="absolute top-4 right-4 text-white text-2xl hover:text-gray-300 z-10"
+        aria-label="Close"
+      >
+        ×
+      </button>
+
+      <div className="relative w-full h-full flex items-center justify-center p-8">
+        <img
+          src={images[currentIndex].src}
+          alt={images[currentIndex].alt || ''}
+          className="max-w-full max-h-full object-contain"
+          onClick={(e) => e.stopPropagation()}
+        />
+
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={goToPrev}
+              className="absolute left-4 text-white text-4xl hover:text-gray-300"
+              aria-label="Previous"
+            >
+              ‹
+            </button>
+            <button
+              onClick={goToNext}
+              className="absolute right-4 text-white text-4xl hover:text-gray-300"
+              aria-label="Next"
+            >
+              ›
+            </button>
+            <div className="absolute bottom-4 flex gap-2">
+              {images.map((_, idx) => (
+                <button
+                  key={idx}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setCurrentIndex(idx);
+                  }}
+                  className={`w-2 h-2 rounded-full ${
+                    idx === currentIndex ? 'bg-white' : 'bg-white/50'
+                  }`}
+                  aria-label={`Go to image ${idx + 1}`}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ui/WorkExperience.astro

@@ -7,6 +7,15 @@ interface Props {
 
 const { entry } = Astro.props;
 const { Content } = await render(entry);
+
+const images = entry.data.images 
+  ? await Promise.all(
+      entry.data.images.map(async (img) => ({
+        src: img.src,
+        alt: entry.data.title,
+      }))
+    )
+  : [];
 ---
 
 <li class="py-0.5">
@@ -22,6 +31,59 @@ const { Content } = await render(entry);
       <div class="prose dark:prose-invert prose-sm">
         <Content />
       </div>
+      
+      {images.length > 0 && (
+        <div class="flex gap-2 flex-wrap mt-2">
+          {images.map((image, idx) => (
+            <button
+              class="work-image-thumb overflow-hidden rounded-lg border border-border hover:opacity-80 transition-opacity"
+              data-images={JSON.stringify(images)}
+              data-index={idx}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                class="w-20 h-20 object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   </div>
-</li>
+</li>
+
+<script>
+  import ImageLightbox from './ImageLightbox';
+  import { createRoot } from 'react-dom/client';
+  import { createElement } from 'react';
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const thumbs = document.querySelectorAll('.work-image-thumb');
+    
+    thumbs.forEach((thumb) => {
+      thumb.addEventListener('click', () => {
+        const images = JSON.parse(thumb.getAttribute('data-images') || '[]');
+        const index = parseInt(thumb.getAttribute('data-index') || '0');
+        
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const root = createRoot(container);
+        
+        const closeHandler = () => {
+          root.unmount();
+          document.body.removeChild(container);
+        };
+        
+        root.render(
+          createElement(ImageLightbox, {
+            images,
+            isOpen: true,
+            initialIndex: index,
+            onClose: closeHandler,
+          })
+        );
+      });
+    });
+  });
+</script>

src/content.config.ts

@@ -43,14 +43,16 @@ const linkCollection = defineCollection({
 
 const jobCollection = defineCollection({
   loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/jobs' }),
-  schema: z.object({
-    title: z.string(),
-    company: z.string(),
-    location: z.string(),
-    from: z.number(),
-    to: z.number().or(z.enum(['Now'])),
-    url: z.string(),
-  }),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      company: z.string(),
+      location: z.string(),
+      from: z.number(),
+      to: z.number().or(z.enum(['Now'])),
+      url: z.string(),
+      images: z.array(image()).optional(),
+    }),
 });
 
 const talkCollection = defineCollection({

src/content/jobs/reboot-studio/image-1.jpg

@@ -5,10 +5,15 @@ location: Mexico City
 from: 2022
 to: 2022 # Use 'Now' if the job is still active
 url: https://reboot.studio
+images:
+  - ./image-1.jpg
+  - ./image-2.jpg
+  - ./image-3.jpg
+  - ./image-4.jpg
 ---
 
 I developed a new feature to display related products in Freshis blog posts. I also designed and launched an operational dashboard to manage delivery routes and customer orders in real-time, improving the Freshis delivery process.
 
 Additionally, I redesigned the web mobile app used by pickers to optimize the placement process when they prepare orders and place products in the bag for delivery. I also assisted in testing and developing a new TO-DO extension for Raycast called Hypersonic, connected through Notion with OAuth.
 
-Tools used: Node, React + Next.js, GraphQL, NestJS, Prisma, PostgreSQL, Strapi, Stitches, TypeScript.
+Tools used: Node, React + Next.js, GraphQL, NestJS, Prisma, PostgreSQL, Strapi, Stitches, TypeScript.

src/content/jobs/reboot-studio/image-2.jpg

@@ -13,4 +13,4 @@ Currently building a health insurance platform for Mexico. Responsibilities incl
 - Maintain the app and fix bugs.
 - Work closely with the product team to understand the needs of the business and the users.
 
-Tools used: React, React Native, TypeScript
+Tools used: React, React Native, TypeScript