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/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>