Add images to work experience

package.json

@@ -17,6 +17,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "5.15.2",
+    "framer-motion": "^12.23.24",
     "lucide-react": "^0.548.0",
     "mdast-util-to-string": "^4.0.0",
     "react": "^18.3.1",

src/components/ui/ImageLightbox.tsx

@@ -0,0 +1,135 @@
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+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);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowRight') {
+        goToNext();
+      } else if (e.key === 'ArrowLeft') {
+        goToPrev();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.body.style.overflow = 'unset';
+      };
+    }
+  }, [isOpen, currentIndex]);
+
+  if (!isOpen) return null;
+
+  const goToNext = () => setCurrentIndex((currentIndex + 1) % images.length);
+  const goToPrev = () =>
+    setCurrentIndex((currentIndex - 1 + images.length) % images.length);
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+          onClick={onClose}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Image gallery"
+        >
+          <button
+            onClick={handleClose}
+            className="absolute top-4 right-4 text-white/80 hover:text-white text-3xl w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors z-10"
+            aria-label="Close gallery"
+          >
+            ×
+          </button>
+
+          <div className="relative w-full h-full flex items-center justify-center p-4 md:p-8">
+            <AnimatePresence mode="wait" custom={currentIndex}>
+              <motion.img
+                key={currentIndex}
+                src={images[currentIndex].src}
+                alt={images[currentIndex].alt || ''}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.3, ease: 'easeOut' }}
+                className="max-w-full max-h-full w-auto h-auto object-contain rounded-lg"
+                onClick={(e) => e.stopPropagation()}
+                style={{ maxWidth: '90vw', maxHeight: '90vh' }}
+              />
+            </AnimatePresence>
+
+            {images.length > 1 && (
+              <>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goToPrev();
+                  }}
+                  className="absolute left-4 text-white/80 hover:text-white text-5xl w-12 h-12 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors"
+                  aria-label="Previous image"
+                >
+                  ‹
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goToNext();
+                  }}
+                  className="absolute right-4 text-white/80 hover:text-white text-5xl w-12 h-12 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors"
+                  aria-label="Next image"
+                >
+                  ›
+                </button>
+                <div className="absolute bottom-6 flex gap-2">
+                  {images.map((_, idx) => (
+                    <button
+                      key={images[idx].src}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setCurrentIndex(idx);
+                      }}
+                      className={`w-2 h-2 rounded-full transition-all ${
+                        idx === currentIndex
+                          ? 'bg-white w-6'
+                          : 'bg-white/50 hover:bg-white/70'
+                      }`}
+                      aria-label={`Go to image ${idx + 1}`}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

src/components/ui/WorkExperience.astro

@@ -7,6 +7,13 @@ interface Props {
 
 const { entry } = Astro.props;
 const { Content } = await render(entry);
+
+const images = entry.data.images 
+  ? entry.data.images.map((img) => ({
+      src: img.src,
+      alt: entry.data.title,
+    }))
+  : [];
 ---
 
 <li class="py-0.5">
@@ -22,6 +29,66 @@ 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';
+
+  const container = document.querySelector('.flex.gap-2.flex-wrap.mt-2');
+
+  if (container) {
+    const clickHandler = (event: Event) => {
+      const thumb = (event.target as HTMLElement).closest('.work-image-thumb');
+      if (!thumb || !container.contains(thumb)) return;
+
+      const images = JSON.parse(thumb.getAttribute('data-images') || '[]');
+      const index = parseInt(thumb.getAttribute('data-index') || '0');
+
+      const lightboxContainer = document.createElement('div');
+      document.body.appendChild(lightboxContainer);
+      const root = createRoot(lightboxContainer);
+
+      const closeHandler = () => {
+        root.unmount();
+        try {
+          document.body.removeChild(lightboxContainer);
+        } catch (e) {
+          // Container may have already been removed; ignore error
+        }
+      };
+
+      root.render(
+        createElement(ImageLightbox, {
+          images,
+          isOpen: true,
+          initialIndex: index,
+          onClose: closeHandler,
+        })
+      );
+    };
+
+    container.addEventListener('click', clickHandler);
+  }
+</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.mdx → src/content/jobs/reboot-studio/index.mdx

@@ -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/sofia.mdx → src/content/jobs/sofia/index.mdx

@@ -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