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/Greeting.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from "astro:assets"
-import me from "../images/me.jpg"
-import * as m from "../paraglide/messages.js"
-import "../styles/global.css"
+import me from "@/images/polite-cat.jpg"
+import * as m from "@/paraglide/messages.js"
+import "@/styles/global.css"
 ---
 
 <div class="flex items-center justify-around flex-wrap">

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

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

src/components/projects/ProjectPage.astro

@@ -1,14 +1,12 @@
 ---
-import Layout from "../layouts/Layout.astro"
+import Layout from "@/layouts/Layout.astro"
 import { Image } from "astro:assets"
 import { getEntry } from "astro:content"
-import BadgeList from "./badge/BadgeList.astro"
-import ExternalLink from "./links/ExternalLink.astro"
-import * as m from "../paraglide/messages"
-import { languageTag } from "../paraglide/runtime"
-import Gitea from "../icons/Gitea.astro"
-import "../styles/global.css"
-import GiteaLink from "./links/GiteaLink.astro"
+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
@@ -26,7 +24,7 @@ const {
   heroImageAlt,
   source,
   createdAt,
-  updatedAt,
+  updatedAt
 } = entry!.data
 ---