Fix @ alias.

Fix margins on mobile for projects.

Moved html code to common component for projects

Updated image of me to a far superior one.

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/pages/en/project/[project].astro

@@ -1,11 +1,11 @@
 ---
-import ProjectPage from "../../../components/ProjectPage.astro"
+import ProjectPage from "../../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
+    { params: { project: "homepage" } }
   ]
 }
 

src/pages/en/project/index.astro

@@ -1,5 +1,11 @@
 ---
+import { getCollection } from "astro:content"
+import Layout from "@/layouts/Layout.astro"
+import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
+
+const projects = await getCollection("projects")
+---
 
----
-
-<p>These are all my projects</p>
+<Layout title="Projects">
+  <MyProjectsPage projects={projects} />
+</Layout>

src/pages/project/[project].astro

@@ -1,11 +1,11 @@
 ---
-import ProjectPage from "../../components/ProjectPage.astro"
+import ProjectPage from "../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },
-    { params: { project: "homepage" } },
+    { params: { project: "homepage" } }
   ]
 }
 

src/pages/project/index.astro

@@ -1,32 +1,11 @@
 ---
 import { getCollection } from "astro:content"
-import ProjectCard from "../../components/ProjectCard.astro"
-import Layout from "../../layouts/Layout.astro"
+import Layout from "@/layouts/Layout.astro"
+import MyProjectsPage from "@/components/projects/MyProjectsPage.astro"
 
 const projects = await getCollection("projects")
 ---
 
-<Layout title="Projects">
-  <h1 class="text-4xl font-bold text-center my-10">Projects</h1>
-  <div class="flex flex-wrap justify-around">
-    {
-      projects.map(
-        ({
-          data: { title, description, tags, heroImage, heroImageAlt },
-          slug,
-        }) => (
-          <div class="my-5">
-            <ProjectCard
-              title={title}
-              linkTo={`/project/${slug}`}
-              description={description}
-              tags={tags}
-              image={heroImage}
-              imageAlt={heroImageAlt}
-            />
-          </div>
-        ),
-      )
-    }
-  </div>
+<Layout title="Prosjekter">
+  <MyProjectsPage projects={projects} />
 </Layout>