feat(Projects): Update project entry design

Also update project card in index and project list.
Also added portrait image.

src/pages/projects/[page].astro

@@ -5,6 +5,7 @@ import { getCollection } from 'astro:content';
 import Layout from '@layouts/Layout.astro';
 import Card from '@components/Card.astro';
 import Pagination from '@components/Pagination.astro';
+import { Image } from 'astro:assets';
 
 changeLanguage('en');
 
@@ -35,24 +36,19 @@ const { page } = Astro.props;
       {
         page.data.map((item) => (
           <div>
-            <Card className="anim-hover-zoom">
+            <Card className="anim-hover-zoom h-100">
               <a class="clean" href={`/projects/${item.slug}`}>
-                <img
-                  src="https://placehold.co/600x400"
+                <Image
+                  src={item.thumbnail}
                   alt="project img"
                   class="border-radius respect-width"
-                  slot="img-header"
                 />
-                <h3 class="fs-4 text-center my-1">Project N°1</h3>
-                <p class="text-justify">
-                  cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet,
-                  qui minim labore adipisicing minim sint
-                </p>
-
-                <div class="text-end">
-                  <a href={`/projects/${item.slug}`}>See more...</a>
-                </div>
+                <h3 class="fs-4 text-center my-1">{item.title}</h3>
+                <p class="text-justify">{item.brief}</p>
               </a>
+              <div class="text-end" slot="footer">
+                <a href={`/projects/${item.slug}`}>See more...</a>
+              </div>
             </Card>
           </div>
         ))
@@ -63,7 +59,11 @@ const { page } = Astro.props;
 </Layout>
 
 <style lang="scss">
-  a.clean:hover {
-    text-decoration: none;
+  a.clean {
+    color: var(--prj-text);
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 </style>