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/components/projects/MyProjectsPage.astro

@@ -0,0 +1,33 @@
+---
+import ProjectCard from "./ProjectCard.astro"
+import * as m from "@/paraglide/messages"
+
+interface Props {
+  projects: any[] // TODO Type this
+}
+
+const { projects } = Astro.props
+---
+
+<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
+<div class="flex flex-wrap justify-around">
+  {
+    projects.map(
+      ({
+         data: { title, description, tags, heroImage, heroImageAlt },
+         slug
+       }) => (
+        <div class="my-5 px-2">
+          <ProjectCard
+            title={title}
+            linkTo={`/project/${slug}`}
+            description={description}
+            tags={tags}
+            image={heroImage}
+            imageAlt={heroImageAlt}
+          />
+        </div>
+      )
+    )
+  }
+</div>

src/components/projects/ProjectCard.astro

@@ -0,0 +1,32 @@
+---
+import { Image } from "astro:assets"
+import { type ImageMetadata } from "astro"
+import BadgeList from "../badge/BadgeList.astro"
+
+interface Props {
+  title: string
+  description: string
+  tags: string[]
+  image: ImageMetadata
+  imageAlt: string
+  linkTo: string
+}
+
+const { title, description, tags, image, imageAlt, linkTo } = Astro.props
+---
+
+<a
+  href={linkTo}
+  class="card bg-base-100 max-w-96 shadow-xl hover:scale-105 transition"
+>
+  <figure>
+    <Image src={image} alt={imageAlt} />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title">
+      {title}
+    </h2>
+    <p>{description}</p>
+    <BadgeList tags={tags} />
+  </div>
+</a>

src/components/projects/ProjectPage.astro

@@ -0,0 +1,53 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import { Image } from "astro:assets"
+import { getEntry } from "astro:content"
+import BadgeList from "../badge/BadgeList.astro"
+import * as m from "@/paraglide/messages"
+import { languageTag } from "@/paraglide/runtime"
+import GiteaLink from "../links/GiteaLink.astro"
+import "@/styles/global.css"
+
+interface Props {
+  project: string // TODO typeof project slug
+}
+
+const { project } = Astro.props
+
+const entry = await getEntry("projects", project)
+const { Content } = await entry!.render()
+const {
+  title,
+  description,
+  tags,
+  heroImage,
+  heroImageAlt,
+  source,
+  createdAt,
+  updatedAt
+} = entry!.data
+---
+
+<!--TODO day.js for dates?-->
+<Layout title={title} class="mx-auto max-w-[750px]">
+  <div class="flex justify-between my-2">
+    <div>
+      <h1>{title}</h1>
+      <BadgeList tags={tags} />
+    </div>
+    <div class="flex flex-col items-end">
+      <p>
+        {m.createdAt()}: {new Date(createdAt).toLocaleDateString(languageTag())}
+      </p>
+      <p>
+        {m.updatedAt()}: {new Date(updatedAt).toLocaleDateString(languageTag())}
+      </p>
+    </div>
+  </div>
+  <Image src={heroImage} alt={heroImageAlt} />
+
+  <GiteaLink href={source} />
+
+  <p class="my-2">{description}</p>
+  <Content />
+</Layout>