diff --git a/src/assets/name-to-speech.mp3 b/src/assets/name-to-speech.mp3
new file mode 100644
index 0000000..2204e45
Binary files /dev/null and b/src/assets/name-to-speech.mp3 differ
diff --git a/src/assets/project-building-roof-detection.webp b/src/assets/project-building-roof-detection.webp
new file mode 100644
index 0000000..71b7533
Binary files /dev/null and b/src/assets/project-building-roof-detection.webp differ
diff --git a/src/assets/project-facial-expression-recognition.webp b/src/assets/project-facial-expression-recognition.webp
new file mode 100644
index 0000000..4fd04b3
Binary files /dev/null and b/src/assets/project-facial-expression-recognition.webp differ
diff --git a/src/assets/project-gabinsoft-dashboard.webp b/src/assets/project-gabinsoft-dashboard.webp
new file mode 100644
index 0000000..4312a39
Binary files /dev/null and b/src/assets/project-gabinsoft-dashboard.webp differ
diff --git a/src/assets/project-gabinsoft-landing.webp b/src/assets/project-gabinsoft-landing.webp
new file mode 100644
index 0000000..e0ee0d6
Binary files /dev/null and b/src/assets/project-gabinsoft-landing.webp differ
diff --git a/src/assets/project-measesoran-rentas.webp b/src/assets/project-measesoran-rentas.webp
new file mode 100644
index 0000000..d1d2346
Binary files /dev/null and b/src/assets/project-measesoran-rentas.webp differ
diff --git a/src/assets/project-open-source.webp b/src/assets/project-open-source.webp
new file mode 100644
index 0000000..875194b
Binary files /dev/null and b/src/assets/project-open-source.webp differ
diff --git a/src/components/ExpandableHoloJobCard.tsx b/src/components/ExpandableHoloJobCard.tsx
index b075e91..4ebe335 100644
--- a/src/components/ExpandableHoloJobCard.tsx
+++ b/src/components/ExpandableHoloJobCard.tsx
@@ -11,9 +11,11 @@ import holocardLogoPatternSvg from "../assets/svg/holocard-logo-pattern.svg?raw"
 
 export function ExpandableHoloJobCard({
 	animation,
+	bullet,
 	listClassName,
 }: {
 	animation?: React.ReactNode;
+	bullet?: React.ReactNode;
 	listClassName?: string;
 }) {
   const [active, setActive] = useState<(typeof cards)[number] | boolean | null>(
@@ -98,37 +100,40 @@ export function ExpandableHoloJobCard({
                     </motion.h3>
 										<motion.p
 											layoutId={`role-${active.id}-${id}`}
-											className="text-neutral-600 dark:text-neutral-400 text-base"
+											className="text-primary/50 text-base"
 										>
 											{active.role}
 										</motion.p>
                     <motion.p
                       layoutId={`timeperiod-${active.id}-${id}`}
-                      className="text-neutral-600 dark:text-neutral-400 text-base text-xs"
+                      className="text-primary/50 text-base text-xs"
                     >
                       {active.timePeriod}
                     </motion.p>
                   </div>
                 </div>
 								<div className="p-4 px-6">
-									<motion.div layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex gap-1">
+									<motion.div layout initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="flex gap-1 gap-y-2 flex-wrap">
 										{active.badges.map((badge, index) => (
 											<span key={index} className="text-xs bg-foreground text-background px-2 py-1 rounded-full mr-2">{badge}</span>
 										))}
 									</motion.div>
 								</div>
                 <div className="pt-4 relative px-6 flex-1">
-                  <motion.div
+                  <motion.ul
                     layout
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="flex-1 text-foreground/50 text-xs md:text-sm lg:text-base h-40 md:h-fit pb-10 flex flex-col items-start gap-4"
+                    className="flex-1 text-foreground/60 text-xs md:text-sm h-40 md:h-fit pb-10 flex flex-col items-start gap-4"
                   >
                     {active.paragraphs.map((paragraph, index) => (
-											<p key={index}>{paragraph}</p>
+											<div className="flex items-start gap-2" key={index}>
+												{bullet}
+												<li className="flex-1">{paragraph}</li>
+											</div>
 										))}
-                  </motion.div>
+                  </motion.ul>
                 </div>
               </div>
             </motion.div>
@@ -206,11 +211,13 @@ const cards = [
 		title: "Gabinsoft",
 		timePeriod: "2022 - present",
 		svg: gabinsoftSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["TypeScript", "Go", "React", "React Native", "HTML/CSS", "Docker", "Kubernetes", "SQL", "RabbitMQ", "Redis", "NodeJS", "Google Cloud", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Drove the creation of the platform based on the foundations of Calmavity, which included the development of the backend and frontend technologies.",
+			"Reimplemented the psychologist's platform with the updated requirements of our new business model, which included the development of new features and the improvement of existing ones.",
+			"Developed a landing page for the platform, focusing on the design, SEO, and performance of the website.",
+			"Migrated critical and heavy processes to Go, which allowed us to improve the performance and scalability of the platform.",
 		],
   },
   {
@@ -218,11 +225,13 @@ const cards = [
 		title: "Me Asesoran",
 		timePeriod: "sep. 2020 - present",
 		svg: measesoranSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["PHP", "Laravel", "React", "TypeScript", "HTML/CSS", "Docker", "Kubernetes", "PostgreSQL", "RabbitMQ", "NodeJS", "AWS", "Git"],
+		role: "Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Developed a variety of features for the platform, which included the development of backend and frontend technologies for thousands of users.",
+			"Worked alongside the product team to develop new features and improve existing ones",
+			"Drove the migration of the main platform to a new architecture, which included developing new processes and rewriting our monolithic application into a microservices architecture, allowing us to create a more scalable and reliable platform. In this process, we implemented concepts such as event-driven architecture, CQRS, and DDD. This allowed us to scale the platform and develop new features faster.",
+			"Drove the development of Me Asesoran Rentas, a new product that allowed users to easily submit their tax returns to the government. This included the development of a backend and frontend, the integration with the Spain government's API and authentication system, and the development of a variety of features related to the validation and submission of tax returns by fiscal advisors.",
 		],
   },
   {
@@ -230,21 +239,15 @@ const cards = [
 		title: "Calmavity",
 		timePeriod: "2019 - 2022",
 		svg: calmavitySvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["TypeScript", "React", "React Native", "HTML/CSS", "Docker", "Kubernetes", "MongoDB", "NodeJS", "AWS", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Drove the development of the full stack of the platform, including the architecture, design, and implementation of the backend and frontend technologies.",
+			"Developed a mobile application for iOS and Android using React Native, which included features such as user authentication, push notifications, real-time chat, and video calls, among others.",
+			"Developed two web application using React, which included the features of the mobile application",
+			"Developed a backend using NodeJS and MongoDB, with support for the features needed by the mobile and web applications.",
+			"Deployed the platform on AWS using Docker and Kubernetes, which allowed for a scalable and reliable infrastructure. This was a little overkill for the size of the project, but I did it primarily to learn how to use these technologies.",
+
 		],
   },
 	{
@@ -252,11 +255,12 @@ const cards = [
 		title: "Nodelix",
 		timePeriod: "2019 - present",
 		svg: nodelixSvg,
-		badges: ["React", "TypeScript", "Tailwind CSS"],
-		role: "Frontend Developer",
+		badges: ["Python", "Django", "ML", "TensorFlow", "OCR", "AWS", "Git"],
+		role: "Co-Founder & Fullstack Developer",
 		paragraphs: [
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
-			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut purus eget nunc. Nullam nec nisl nec nunc.",
+			"Deliver scalable and reliable ML solutions to clients in the fiscal sector, including OCR and data extraction tools. Focused on the development of computer vision and machine learning models.",
+			"Developed a custom OCR solution for a client in the fiscal sector, which included a pipeline for data processing, extraction, and indexing. The solution was able to process and extract data in real time from multiple types of documents, including invoices, receipts, and contracts.",
+			"Worked side by side with clients to understand their needs and requirements, and to deliver a solution that met their expectations.",
 		],
   },
 ]
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 606e5b7..9cd35a9 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -15,7 +15,7 @@ const links = [
     { href: "/#about", text: "About" },
     { href: "/#jobs", text: "Experience" },
     { href: "/#projects", text: "Work" },
-    { href: "/blog", text: "Blog" },
+    // { href: "/blog", text: "Blog" },
     { href: "/resume.pdf", text: "Resume", external: true },
 ];
 ---
diff --git a/src/sections/About.astro b/src/sections/About.astro
index 65b5bb2..703c940 100644
--- a/src/sections/About.astro
+++ b/src/sections/About.astro
@@ -7,6 +7,7 @@ import { Icon } from "astro-icon/components";
 import { Particles } from "../components/Particles";
 import { Image } from "astro:assets";
 import profileImage from "../assets/profile.webp";
+import nameToSpeech from "../assets/name-to-speech.mp3";
 ---
 
 <script>
@@ -72,26 +73,38 @@ import profileImage from "../assets/profile.webp";
                     class="inline flex-1 w-fit translate-y-1 border-primary"
                 />
             </div>
+            <audio id="name-to-speech-audio" src={nameToSpeech} class="hidden"
+            ></audio>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50 mt-8">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                id lorem a eros rutrum finibus. Donec rhoncus turpis quis
-                lacinia varius. Fusce sagittis at justo eu molestie. Fusce
-                bibendum, quam fringilla tincidunt luctus, enim orci iaculis
-                ipsum, id auctor dolor erat ac sem. Cras cursus leo vel mollis
-                rhoncus. Praesent ac ultricies eros, id vestibulum est.
-                Suspendisse eros eros, pretium ac leo nec, malesuada fermentum
-                diam. Donec quam velit, efficitur non enim non, elementum
-                euismod tortor.
+                Hey there! My name is <button
+                    onclick="document.getElementById('name-to-speech-audio').play()"
+                    class="cursor-pointer hover:text-primary/60 hover:underline"
+                    area-label="Check pronunciation"
+                    ><strong>Rubén Buzón</strong><Icon
+                        name="tabler:volume-2"
+                        class="inline transform -translate-y-1 translate-x-[1px]"
+                    /></button
+                >
+
+                and I'm a software engineer based in Madrid, Spain. I'm
+                passionate about technology and science in general. I started
+                programming when I was 14 because I've always loved video games
+                and I wanted to know how software was made. Since then, I've
+                been learning and improving my skills to become a better
+                developer.
             </p>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
-                id lorem a eros rutrum finibus. Donec rhoncus turpis quis
-                lacinia varius. Fusce sagittis at justo eu molestie. Fusce
-                bibendum, quam fringilla tincidunt luctus, enim orci iaculis
-                ipsum, id auctor dolor erat ac sem.
+                I truly believe that technology, specially software, can change
+                the world for the better. That's why I'm always looking for new
+                opportunities to work on projects that can make a difference,
+                and why I put so much effort, care and passion into my work
+                (like this website!).
             </p>
             <p class="mt-4 md:max-w-lg leading-normal text-foreground/50">
-                Things I am interested in:
+                I would describe myself as a full-stack developer with
+                experience in a wide range of technologies, but I'm always
+                looking to learn new things and improve my skills. Some of the
+                things I'm good at are:
             </p>
             <ul
                 class="mt-4 md:max-w-lg leading-normal text-foreground/50 grid grid-cols-2"
@@ -99,10 +112,11 @@ import profileImage from "../assets/profile.webp";
                 {
                     [
                         "Web development",
+                        "Backend development",
                         "UI/UX design",
+                        "Sofware architecture",
                         "Mobile development",
-                        "Backend development",
-                        "Machine learning",
+                        "ML/AI",
                     ].map((item) => (
                         <li class="relative group text-primary mt-2 ml-2 flex items-center">
                             <Icon
diff --git a/src/sections/Hero.astro b/src/sections/Hero.astro
index b5e554c..0e219b0 100644
--- a/src/sections/Hero.astro
+++ b/src/sections/Hero.astro
@@ -21,8 +21,8 @@ import Anchor from "../components/Anchor.astro";
         </p>
         <p class="mt-4 max-w-lg leading-normal text-foreground/50 md:text-lg">
             I'm a Full-Stack engineer with a passion for building high-quality
-            software. I have experience in both frontend and backend
-            technologies, and I'm always looking for new challenges.
+            and scalable software. I have experience in both frontend and
+            backend technologies, and I'm always looking for new challenges.
         </p>
         <div class="flex gap-4 mt-8">
             <Anchor size="default" href={mailUrl} target="_blank">
diff --git a/src/sections/Jobs.astro b/src/sections/Jobs.astro
index c2a0466..7ed8f6b 100644
--- a/src/sections/Jobs.astro
+++ b/src/sections/Jobs.astro
@@ -1,4 +1,5 @@
 ---
+import { Icon } from "astro-icon/components";
 import ConicHeader from "../components/ConicHeader.astro";
 import { ExpandableHoloJobCard } from "../components/ExpandableHoloJobCard";
 import { Globe } from "../components/Globe";
@@ -50,14 +51,15 @@ import Separator from "../components/Separator.astro";
             />
         </div>
         <p class="mt-8 self-center text-center text-foreground/50 max-w-lg">
-            Click on the cards to learn more about the places I have worked at
-            and the projects I have been involved in.
+            Click on the cards below to learn more about the places I've worked
+            at, and a little bit about what I did there.
         </p>
         <ExpandableHoloJobCard
             client:visible
             listClassName="grid justify-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-24 w-fit self-center"
         >
             <MeteorAnimation slot="animation" />
+            <Icon name="tabler:chevron-right" slot="bullet" class="mt-1" />
         </ExpandableHoloJobCard>
     </Section>
 </div>
diff --git a/src/sections/Projects.astro b/src/sections/Projects.astro
index f41a589..ce549e3 100644
--- a/src/sections/Projects.astro
+++ b/src/sections/Projects.astro
@@ -5,60 +5,91 @@ import { Particles } from "../components/Particles";
 import Separator from "../components/Separator.astro";
 import GridIcon from "../components/GridIcon.astro";
 import { cn } from "../lib/utils";
+import projectGabinsoftDashboard from "../assets/project-gabinsoft-dashboard.webp";
+import projectMeAsesoranRentas from "../assets/project-measesoran-rentas.webp";
+import projectBuildingRoofDetection from "../assets/project-building-roof-detection.webp";
+import projectGabinsoftLanding from "../assets/project-gabinsoft-landing.webp";
+import projectFacialExpressionRecognition from "../assets/project-facial-expression-recognition.webp";
+import projectOpenSource from "../assets/project-open-source.webp";
+import { Image } from "astro:assets";
 
 const projects = [
     {
-        title: "Project 1",
+        title: "Gabinsoft Web and Mobile Apps",
         paragraphs: [
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
+            "Gabinsoft is a company that specializes in building tools for psychologists. I created the full stack web and mobile apps, as well as the backend services.",
+            "This apps include a full CRM, a billing system, a calendar, real-time chat, video calls, and more.",
         ],
-        badges: ["React", "TailwindCSS", "Vite"],
-        url: "https://github.com",
+        badges: ["TypeScript", "Go", "React", "React Native", "CSS", "SQL"],
+        url: "https://app.gabinsoft.com",
+        image: projectGabinsoftDashboard,
         feature: false,
     },
     {
-        title: "Project 2",
+        title: "Me Asesoran Rentas",
         paragraphs: [
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
+            "Me Asesoran Rentas is an app that helps people submit their tax returns. I created the backend services, the web and mobile apps, and the review tools.",
+            "This project has a lot of integrations with the government's APIs, and it's used by thousands of people every year.",
         ],
-        badges: ["React", "TailwindCSS", "Vite"],
-        url: "https://github.com",
+        badges: ["TypeScript", "React", "React Native", "CSS", "SQL"],
+        url: "https://rentas.measesoran.com",
+        image: projectMeAsesoranRentas,
         feature: false,
     },
     {
-        title: "Project 3",
+        title: "Open Source contributions",
         paragraphs: [
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
+            "I've contributed to the open source community by releasing a few small projects of my own, and will continue to do so. I believe that open source is the future of software development, and I feel that it's important to give back to the community that has given me so much.",
+            "Some of my projects include a few Reac Native Navigation components, some ML projects, and a Twitter client for bash.",
         ],
-        badges: ["React", "TailwindCSS", "Vite"],
-        url: "https://github.com",
+        badges: ["TypeScript", "React Native", "Python", "Bash"],
+        url: "https://github.com/rubenbupe",
+        image: projectOpenSource,
         feature: true,
     },
     {
-        title: "Project 4",
+        title: "Next Gabinsoft Landing Page",
         paragraphs: [
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
+            "I created the landing page for Gabinsoft, with a hero section inspired by Linear's website, and a few sections showcasing the features of the apps.",
+            "Focusing on performance, SEO, and accessibility, I built the site using Astro, TailwindCSS, and TypeScript.",
+            "This project is still in development, and will be released soon.",
         ],
-        badges: ["React", "TailwindCSS", "Vite"],
-        url: "https://github.com",
+        badges: ["TypeScript", "Astro", "TailwindCSS"],
+        url: "https://next-gabinsoft.rubenbupe.com",
+        image: projectGabinsoftLanding,
         feature: false,
     },
     {
-        title: "Project 5",
+        title: "Facial expression recognition",
         paragraphs: [
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
+            "This was one of my last projects at my university. I created a system that could detect facial expressions in real-time using a webcam.",
+            "The system was built using TensorFlow and OpenCV, and it was able to detect 3 different expressions with an accuracy of 86%, or 5 different expressions with an accuracy of 74%.",
+            "I got honorable mention for this project.",
         ],
-        badges: ["React", "TailwindCSS", "Vite"],
-        url: "https://github.com",
+        badges: ["TypeScript", "Astro", "TailwindCSS"],
+        url: "https://next-gabinsoft.rubenbupe.com",
+        image: projectFacialExpressionRecognition,
         feature: false,
     },
+    {
+        title: "Building roof detection",
+        paragraphs: [
+            "This was also one of my last projects at my university. We created a system that could detect the roofs of buildings in satellite images.",
+            "I also developed a microservices architecture to showcase how the system could be used in a real-world scenario. This included a web app, a backend service to process the images, and an analytics service.",
+            "This project got me an offer to work at my professor's company, which I declined to pursue my own projects.",
+        ],
+        badges: [
+            "Python",
+            "React",
+            "Docker",
+            "Kubernetes",
+            "MongoDB",
+            "TensorFlow",
+        ],
+        url: "https://github.com/rubenbupe/building-roof-detection",
+        image: projectBuildingRoofDetection,
+        feature: true,
+    },
 ];
 ---
 
@@ -117,7 +148,7 @@ const projects = [
                 <h2
                     class="inline text-2xl font-bold tracking-tight sm:text-4xl md:text-5xl"
                 >
-                    Projects
+                    Some projects
                 </h2>
             </div>
         </div>
@@ -204,7 +235,7 @@ const projects = [
                             `relative group border-t border-r border-dashed w-full cursor-pointer hover:[box-shadow:inset_0_0_10px_0_rgba(255,255,255,0.2)] transition-all duration-500`,
                             project.feature
                                 ? "md:col-span-2 grid grid-cols-1 md:grid-cols-2 items-center"
-                                : "md:col-span-1 flex flex-col"
+                                : "md:col-span-1 flex flex-col justify-between"
                         )}
                     >
                         <div class="p-8 group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all duration-500">
@@ -234,8 +265,8 @@ const projects = [
                             )}
                         >
                             <div class="absolute inset-8 bg-foreground/20 group-hover:translate-x-2 group-hover:translate-y-2 transition-all duration-500 ease-in-out group-hover:[box-shadow:inset_0_0_10px_0_rgba(255,255,255,0.2)]" />
-                            <img
-                                src="https://picsum.photos/200"
+                            <Image
+                                src={project.image}
                                 alt="Project 1"
                                 class="w-full h-full filter grayscale group-hover:filter-none transition-all duration-500 group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow object-cover"
                             />