feat: bring back friends page

public/sitemap.xml

@@ -1,23 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://jaspermayone.com</loc><lastmod>2026-03-24T03:47:29.255Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
-<url><loc>https://jaspermayone.com/colophon</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://jaspermayone.com/concerts</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/contact</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
-<url><loc>https://jaspermayone.com/elsewhere</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://jaspermayone.com/green</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/hardware</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/keys/gpg</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/keys/ssh</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/now</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://jaspermayone.com/open-source</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/panera</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/pfp</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/podroll</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/portfolio</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
-<url><loc>https://jaspermayone.com/slashes</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/support-me</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/to</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
-<url><loc>https://jaspermayone.com/uses</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
-<url><loc>https://jaspermayone.com/verify</loc><lastmod>2026-03-24T03:47:29.256Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
+<url><loc>https://jaspermayone.com/colophon</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://jaspermayone.com/concerts</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/conferences</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/contact</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
+<url><loc>https://jaspermayone.com/elsewhere</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://jaspermayone.com/friends</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/green</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/hackathons</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/hardware</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/keys/gpg</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/keys/ssh</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/now</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://jaspermayone.com/open-source</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/opengraph-image</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/panera</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/pfp</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/podroll</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/portfolio</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>1</priority></url>
+<url><loc>https://jaspermayone.com/slashes</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/support-me</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/to</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
+<url><loc>https://jaspermayone.com/uses</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>weekly</changefreq><priority>0.7</priority></url>
+<url><loc>https://jaspermayone.com/verify</loc><lastmod>2026-08-13T00:50:32.196Z</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
 </urlset>

src/app/friends/page.tsx

@@ -0,0 +1,156 @@
+import ExternalLink from "@/components/ExternalLink";
+import FOOTER from "@/components/FOOTER";
+import MENU from "@/components/MENU";
+import { friends, siteUrl } from "@/lib/defs";
+import { safeJsonLd } from "@/lib/jsonld";
+import { Metadata } from "next";
+import Image from "next/image";
+import Script from "next/script";
+
+export const metadata: Metadata = {
+  title: "Friends",
+  description:
+    "Some of the super cool people I have the privilege to call friends.",
+  alternates: {
+    canonical: "https://jaspermayone.com/friends",
+  },
+};
+
+const friendsPageSchema = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "WebPage",
+      "@id": "https://jaspermayone.com/friends#webpage",
+      url: "https://jaspermayone.com/friends",
+      name: "Friends - Jasper Mayone",
+      description:
+        "Some of the super cool people I have the privilege to call friends.",
+      isPartOf: {
+        "@id": "https://jaspermayone.com/#website",
+      },
+      about: {
+        "@id": "https://jaspermayone.com/#person",
+      },
+      mainEntity: {
+        "@id": "https://jaspermayone.com/friends#friend-list",
+      },
+      breadcrumb: {
+        "@type": "BreadcrumbList",
+        "@id": "https://jaspermayone.com/friends#breadcrumb",
+        itemListElement: [
+          {
+            "@type": "ListItem",
+            position: 1,
+            name: "Home",
+            item: "https://jaspermayone.com",
+          },
+          {
+            "@type": "ListItem",
+            position: 2,
+            name: "Friends",
+            item: "https://jaspermayone.com/friends",
+          },
+        ],
+      },
+    },
+    {
+      "@type": "ItemList",
+      "@id": "https://jaspermayone.com/friends#friend-list",
+      name: "Friends",
+      description: "Friends of Jasper Mayone",
+      numberOfItems: friends.length,
+      itemListElement: friends.map((friend, index) => ({
+        "@type": "ListItem",
+        position: index + 1,
+        item: {
+          "@type": "Person",
+          name: friend.name,
+          ...(friend.image ? { image: `${siteUrl}${friend.image}` } : {}),
+          ...(friend.link ? { url: friend.link } : {}),
+        },
+      })),
+    },
+  ],
+};
+
+function initials(name: string): string {
+  const words = name.split(" ");
+  const first = words[0]?.[0] ?? "";
+  const last = words.length > 1 ? (words[words.length - 1][0] ?? "") : "";
+  return `${first}${last}`.toUpperCase();
+}
+
+export default function Friends() {
+  return (
+    <>
+      <Script
+        id="friends-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: safeJsonLd(friendsPageSchema),
+        }}
+      />
+      <div className="flex min-h-screen flex-col">
+        <MENU pageFirstWord="Friends" />
+        <main className="flex-1">
+          <div className="mx-5 mt-4 mb-4">
+            <h1
+              className="mb-2 text-xl font-semibold text-zinc-800 dark:text-white"
+              style={{ fontFamily: "var(--font-balgin)" }}
+            >
+              Friends
+            </h1>
+            <p className="mb-6 text-zinc-600 dark:text-white/70">
+              I have some super cool friends, check them all out! 🌟 (btw, shoot
+              me a message if you want to be added here, I definitely missed
+              some people lol.)
+            </p>
+
+            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+              {friends.map((friend) => {
+                const card = (
+                  <>
+                    {friend.image ? (
+                      <Image
+                        src={friend.image}
+                        alt={friend.name}
+                        width={400}
+                        height={400}
+                        className="aspect-square w-full rounded-lg object-cover"
+                      />
+                    ) : (
+                      <div
+                        aria-hidden
+                        className="flex aspect-square w-full items-center justify-center rounded-lg bg-[#56ba8e]/15 text-4xl font-semibold text-[#3d8a68] dark:bg-[#56ba8e]/10 dark:text-[#7ccfa9]"
+                        style={{ fontFamily: "var(--font-balgin)" }}
+                      >
+                        {initials(friend.name)}
+                      </div>
+                    )}
+                    <p className="mt-2 text-sm font-medium text-zinc-800 dark:text-zinc-100">
+                      {friend.name}
+                    </p>
+                  </>
+                );
+
+                return friend.link ? (
+                  <ExternalLink
+                    key={friend.name}
+                    href={friend.link}
+                    className="group rounded-lg transition-opacity hover:opacity-80"
+                  >
+                    {card}
+                  </ExternalLink>
+                ) : (
+                  <div key={friend.name}>{card}</div>
+                );
+              })}
+            </div>
+          </div>
+        </main>
+        <FOOTER />
+      </div>
+    </>
+  );
+}

src/lib/defs.ts

@@ -10,6 +10,7 @@ import {
   Appearance,
   Conference,
   Domain,
+  Friend,
   Hackathon,
   HardwareItem,
   HostedService,
@@ -79,6 +80,7 @@ export const pages: PageItem[] = [
   { text: "Conferences", slug: "conferences", showInNav: false, order: 99 },
   { text: "Hackathons", slug: "hackathons", showInNav: false, order: 99 },
   { text: "Elsewhere", slug: "elsewhere", showInNav: false, order: 99 },
+  { text: "Friends", slug: "friends", showInNav: false, order: 99 },
   { text: "Colophon", slug: "colophon", showInNav: false, order: 8 },
   { text: "Open Source", slug: "open-source", showInNav: false, order: 99 },
   { text: "Blank", slug: "blank", showInNav: false, order: 99 },
@@ -802,6 +804,69 @@ export const appearances: Appearance[] = [
   },
 ];
 
+export const friends: Friend[] = [
+  {
+    name: "Kieran Klukas",
+    image: "/images/friends/kieran_klukas.png",
+    link: "https://dunkirk.sh/",
+  },
+  {
+    name: "Ryan Di Lorenzo",
+    image: "/images/friends/ryan_di_lorenzo.png",
+    link: "https://github.com/LimesKey",
+  },
+  {
+    name: "Samantha Miel",
+    image: "/images/friends/samantha_miel.png",
+    link: "https://www.instagram.com/cirque_du_samantha/",
+  },
+  {
+    name: "Théo Reid",
+    image: "/images/friends/theo_reid.png",
+    link: "https://www.instagram.com/theointheair/",
+  },
+  {
+    name: "Maclean Dunkin",
+    image: "/images/friends/maclean_dunkin.png",
+    link: "https://www.morizuru.co/",
+  },
+  {
+    name: "Dominic Petrarca",
+    image: "/images/friends/dominic_petrarca.png",
+    link: "https://dominicpetrarca.com/",
+  },
+  {
+    name: "Logan Lambert",
+    image: "/images/friends/logan_lambert.png",
+    link: "https://cattn.dev/",
+  },
+  {
+    name: "Karl Wünsche",
+  },
+  {
+    name: "Clarissa Lambert",
+  },
+  {
+    name: "Tristan Gottshall",
+  },
+  {
+    name: "Jenn Johnsey",
+    image: "/images/friends/jenn_johnsey.png",
+    link: "https://www.linkedin.com/in/jennjohnsey/",
+  },
+  {
+    name: "Zoya Hussain",
+    link: "https://zoya.sh/",
+  },
+  {
+    name: "Heidi Liou",
+    link: "https://www.linkedin.com/in/heidiliou/",
+  },
+  {
+    name: "CJ Kanne",
+  },
+];
+
 export const podcasts: Podcast[] = [
   {
     name: "Mac Power Users",
@@ -1087,6 +1152,12 @@ export const slashPages: SlashPage[] = [
     name: "Elsewhere",
     description: "Find me on other platforms",
   },
+  {
+    slug: "friends",
+    name: "Friends",
+    description:
+      "Some of the super cool people I have the privilege to call friends",
+  },
   {
     slug: "podroll",
     name: "Podroll",

src/lib/types.ts

@@ -105,6 +105,12 @@ export interface Podcast {
   url: string;
 }
 
+export interface Friend {
+  name: string;
+  image?: string;
+  link?: string;
+}
+
 export interface Tool {
   emoji: string;
   name: string;