feat(Projects): Update project entry design

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

src/pages/projects/[...slug].astro

@@ -1,19 +1,20 @@
 ---
-import { changeLanguage } from "i18next";
-import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
-import { getCollection } from "astro:content";
-import Layout from "@layouts/Layout.astro";
-import Toc from "@components/Toc/Toc";
-import Gallery from "@components/MediaGallery/Gallery";
+import { changeLanguage } from 'i18next';
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import { getCollection } from 'astro:content';
+import Layout from '@layouts/Layout.astro';
+import Toc from '@components/Toc/Toc';
+import Card from '@components/Card.astro';
+import Button from '@components/Button/Button.astro';
 
-changeLanguage("en");
+changeLanguage('en');
 
 export const getStaticPaths = (async () => {
-    const entries = await getCollection("portafolio");
-    return entries.map((entry) => ({
-        params: { slug: entry.slug },
-        props: entry,
-    }));
+  const entries = await getCollection('portafolio');
+  return entries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: entry,
+  }));
 }) satisfies GetStaticPaths;
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 const entry = Astro.props;
@@ -22,10 +23,59 @@ const { Content, headings } = await entry.render();
 
 <Layout title={entry.data.title}>
   <h1>{entry.data.title}</h1>
+  <Card className="w-lg-50 mx-auto">
+    <div class="project-specs grid">
+      <div class="project-spec-property">Timeframe:</div>
+      <div class="project-spec-value">{entry.data.timeframe}</div>
 
-  <Gallery client:load items={entry.data.media} />
+      <div class="project-spec-property">Repo:</div>
+      <div class="project-spec-value">{entry.data.links?.url ?? 'Private'}</div>
+
+      <div class="project-spec-property">Website:</div>
+      <div class="project-spec-value">
+        {entry.data.links?.repo ?? 'Private'}
+      </div>
+
+      <div class="project-spec-property">Technologies:</div>
+      <div class="project-spec-value">
+        <ul>
+          {entry.data.technologies.map((item) => <li>{item}</li>)}
+        </ul>
+      </div>
+    </div>
+  </Card>
 
   <Toc headings={headings} />
 
   <Content />
+
+  <div
+    class="position-fixed bottom-0"
+    style={{ top: 'unset', left: 'unset', bottom: '5%', right: '5%' }}
+  >
+    <Button className="btn-back">Go back</Button>
+  </div>
 </Layout>
+
+<style is:global lang="scss">
+  img {
+    margin: 0 auto var(--prj-spacing-2) auto;
+    display: block;
+  }
+
+  .project-specs.grid {
+    --prj-columns: 0.2fr 1fr;
+
+    .project-spec-property {
+      font-weight: bold;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    document.querySelector('.btn-back')?.addEventListener('click', () => {
+      history.back();
+    });
+  });
+</script>