Add project description

src/components/Project.astro

@@ -2,26 +2,34 @@
 import ConditionalLink from "./ConditionalLink.astro";
 
 interface Props {
-  name: string;
+  description: string;
+  tech?: string;
   image?: string;
   link?: string;
 }
 
-const { image, link } = Astro.props;
+const { description, tech, image, link } = Astro.props;
 ---
 
 <div
   class="group relative flex aspect-square overflow-hidden rounded-lg shadow-xl"
 >
   <ConditionalLink link={link} target="_blank">
     <img
-      class="absolute h-full w-full bg-purple-400 object-cover duration-500 ease-in-out group-hover:rotate-6 group-hover:scale-125"
+      class="absolute h-full w-full bg-[#476f83] object-cover duration-500 ease-in-out group-hover:rotate-6 group-hover:scale-125"
       src={import.meta.env.BASE_URL + image}
     />
 
     <div
-      class="absolute h-full w-full bg-black opacity-0 transition-opacity duration-500 group-hover:opacity-50"
+      class="absolute h-full w-full bg-black opacity-0 transition-opacity duration-500 group-hover:opacity-70"
     >
     </div>
+
+    <div class="absolute h-full w-full text-white opacity-0 transition-opacity duration-500 group-hover:opacity-100">
+      <div class="flex items-center justify-center h-full w-full">
+        <p class="text-2xl p-4 text-center">{description}</p>
+      </div>
+      <div class="absolute bottom-0 right-0 p-2">{tech}</div>
+    </div>
   </ConditionalLink>
 </div>

src/content/perso/air.md

@@ -1,8 +1,8 @@
 ---
 name: Air.
 year: 2020
-image: air.jpg
+short_description: Air quality sensor with IPS screen
 tech: Fusion 360, 3D Print, Esp32, C++
+image: air.jpg
 on_resume: 4
-short_description: Air quality sensor with IPS screen
 ---

src/content/perso/bike.md

@@ -1,8 +1,8 @@
 ---
 name: Cargo Bike
 year: 2022
-image: bike.jpg
-on_resume: 3
 short_description: Designed & built long john cargo bike
 tech: OnShape, Welding, Woodworking
+image: bike.jpg
+on_resume: 3
 ---

src/content/perso/mac-setup.md

@@ -1,9 +1,8 @@
 ---
 name: Mac Setup
 year: 2023
-image: mac-setup.jpg
-tech: Ansible
-on_resume: false
 short_description: Automated Mac setup using Ansible
+tech: Ansible
+image: mac-setup.jpg
 link: https://www.github.com/davidbertet/mac-setup
 ---

src/content/perso/new-portfolio.md

@@ -1,8 +1,8 @@
 ---
-name:
+name: Portfolio
 year: 2023
-image: portfolio.jpg
-tech: Astro, TailwindCSS, Mailjet
 short_description: My current portfolio
+tech: Astro, TailwindCSS, Mailjet
+image: portfolio.jpg
 link: https://www.github.com/davidbertet/portfolio
 ---

src/content/perso/old-portfolio.md

@@ -1,8 +1,8 @@
 ---
-name:
+name: Portfolio
 year: 2015
-image: old-portfolio.jpg
-tech: HTML, CSS, JS
 short_description: My first portfolio
+tech: PHP, HTML, CSS, JS
+image: old-portfolio.jpg
 link: https://david.bertet.fr/old
 ---

src/content/perso/opensource.md

@@ -1,9 +1,9 @@
 ---
 name: Open Source
 year: 2023
-image: opensource.jpg
-tech: Swift, React Native, Ruby
-on_resume: true
 short_description: See GitHub for contributions
+tech: Swift, React Native, Ruby
+image: opensource.jpg
 link: https://www.github.com/davidbertet
+on_resume: 1
 ---

src/content/perso/powerjeep.md

@@ -1,9 +1,9 @@
 ---
 name: Power Jeep
 year: 2021
-image: powerjeep.jpg
-tech: Esp32, EspIDF, C, WebSocket
-on_resume: 2
 short_description: Kids Ride On car conversion to Ryobi 18v battery with web interface
+tech: Esp32, EspIDF, C, WebSocket
+image: powerjeep.jpg
 link: https://www.github.com/davidbertet/powerjeep
+on_resume: 2
 ---

src/content/perso/resume.md

@@ -1,6 +1,8 @@
 ---
-name:
+name: Resume
 year: 2022
+short_description: My resume, built as a webpage
+tech: Astro, Markdown
 image: resume.png
 link: resume
 ---

src/content/perso/synology-docker.md

@@ -1,6 +1,8 @@
 ---
-name:
+name: Home lab
 year: 2023
+short_description: Scripts to setup my home lab
+tech: Docker compose, Reverse proxy
 image: synology-docker.jpg
 link: https://www.github.com/davidbertet/synology-docker
 ---

src/content/perso/workbench.md

@@ -1,5 +1,7 @@
 ---
-name:
+name: Wood workbench
 year: 2019
+short_description: Wood workbench for the garage
+tech: Woodworking, OnShape
 image: workbench.jpg
 ---

src/content/work/bat.md

@@ -1,5 +1,6 @@
 ---
-name:
 year: 2016
+short_description: Internal tool that captures every coming offers. Used for client validation
+tech: iOS screenshots, Jenkins, JS
 image: bat.png
 ---

src/content/work/cashback.md

@@ -1,5 +1,6 @@
 ---
-name:
 year: 2020
+short_description: Internal tool to easily browse data. Used by dev, clearer & customer support teams
+tech: NextJS 
 image: cashback.png
 ---

src/content/work/coupons.md

@@ -1,5 +1,6 @@
 ---
-name:
 year: 2021
+short_description: Coupons.com mobile app
+tech: iOS, Android
 image: coupons.jpg
 ---

src/content/work/shopmium.md

@@ -1,6 +1,7 @@
 ---
-name:
 year: 2017
+short_description: Shopmium mobile apps
+tech: iOS, Android
 image: shopmium.jpg
 link: https://www.shopmium.com
 ---

src/pages/index.astro

@@ -77,7 +77,8 @@ const perso = await Astro.glob("../content/perso/*.md");
             .sort((a, b) => b.frontmatter.year - a.frontmatter.year)
             .map((project) => (
               <Project
-                name={project.frontmatter.name}
+                description={project.frontmatter.short_description}
+                tech={project.frontmatter.tech}
                 image={project.frontmatter.image}
                 link={project.frontmatter.link}
               />
@@ -95,7 +96,8 @@ const perso = await Astro.glob("../content/perso/*.md");
             .sort((a, b) => b.frontmatter.year - a.frontmatter.year)
             .map((project) => (
               <Project
-                name={project.frontmatter.name}
+                description={project.frontmatter.short_description}
+                tech={project.frontmatter.tech}
                 image={project.frontmatter.image}
                 link={project.frontmatter.link}
               />