feat(seo): enhance team avatar handling, update contact page content, and improve image source resolution across components

Author: MohammadTahaBatoomi

.env

@@ -5,5 +5,5 @@ CONTACT_EMAIL=cipherunit.dev@gmail.com
 NEXT_PUBLIC_BRAND_IMAGE_MAIN=https://res.cloudinary.com/djc6gxgjc/image/upload/q_auto/f_auto/v1781272726/SharpCipherUnit_krk0zv.png
 NEXT_PUBLIC_BRAND_IMAGE_LOGO=https://res.cloudinary.com/djc6gxgjc/image/upload/q_auto/f_auto/v1781272725/CipherUnit_gkjt2m.jpg
 NEXT_PUBLIC_BRAND_IMAGE_ALT=https://res.cloudinary.com/djc6gxgjc/image/upload/q_auto/f_auto/v1781272726/CipherUnitWithoutBG_zbbq4w.png
-GOOGLE_PUBLIC_KEY=JAqVoZOf1UANedsrHM9nVT00TPrWuA8na9tIGSticg4
+GOOGLE_PUBLIC_KEY=LvFG04WguElw5_gD50zQhyMH1xEQUJua1Xj1Mh9nQ80
 INSTAGRAM_PAGE=https://instagram.com/cipherunits

public/llms.txt

@@ -30,7 +30,7 @@
 
 - Public GitHub organization members: https://cipherunit.xyz/team
 - Organization: https://github.com/cipherunits
-- Team photos/avatars are listed on https://cipherunit.xyz/team and in https://cipherunit.xyz/image-sitemap.xml
+- Team photos/avatars are served from https://cipherunit.xyz/avatars/<github-login> and listed in https://cipherunit.xyz/image-sitemap.xml
 
 ## Focus
 

src/app/avatars/[login]/route.ts

@@ -0,0 +1,46 @@
+import { getTeamMembers } from "@/lib/team";
+import { seoAvatarUrl } from "@/lib/seo-images";
+
+export const revalidate = 3600;
+
+type RouteContext = {
+  params: Promise<{ login: string }>;
+};
+
+/**
+ * Same-origin avatar URLs so Google Image Search attributes photos to
+ * cipherunit.xyz instead of avatars.githubusercontent.com.
+ */
+export async function GET(_request: Request, context: RouteContext) {
+  const { login } = await context.params;
+  const members = await getTeamMembers();
+  const member = members.find(
+    (entry) => entry.login.toLowerCase() === login.toLowerCase(),
+  );
+
+  if (!member) {
+    return new Response("Avatar not found", { status: 404 });
+  }
+
+  const upstream = await fetch(seoAvatarUrl(member.avatarUrl), {
+    next: { revalidate: 3600 },
+    headers: {
+      Accept: "image/*",
+      "User-Agent": "CipherPortfolio-AvatarProxy",
+    },
+  });
+
+  if (!upstream.ok || !upstream.body) {
+    return new Response("Upstream avatar unavailable", { status: 502 });
+  }
+
+  const contentType = upstream.headers.get("content-type") || "image/jpeg";
+
+  return new Response(upstream.body, {
+    status: 200,
+    headers: {
+      "Content-Type": contentType,
+      "Cache-Control": "public, max-age=86400, s-maxage=86400, stale-while-revalidate=604800",
+    },
+  });
+}

src/app/contact/page.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import ContactBox from "@/components/contacts/ContactBox";
 import ContactMedia from "@/components/contacts/ContactMedia";
 import ContactText from "@/components/contacts/ContactText";
@@ -80,11 +81,44 @@ export default function ContactPage() {
 
       <header className="space-y-3">
         <NamePage title="Contact CipherUnit" />
-        <SubNamePage text="Contact CipherUnit" />
+        <SubNamePage text="Open-source collaborations, contributions, and technical inquiries." />
+        <p className="max-w-3xl text-sm leading-7 text-(--color-stroke)">
+          Reach the Cipher Unit engineering collective for open-source project
+          partnerships, GitHub contributions, consulting, and developer support.
+          Prefer email at{" "}
+          <a
+            href={`mailto:${siteConfig.email}`}
+            className="text-white underline-offset-2 hover:underline"
+          >
+            {siteConfig.email}
+          </a>{" "}
+          or message the team through{" "}
+          <a
+            href={siteConfig.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white underline-offset-2 hover:underline"
+          >
+            GitHub @{siteConfig.githubOrg}
+          </a>
+          .
+        </p>
       </header>
 
       <section className="mt-10 flex flex-col items-center justify-between gap-10 md:flex-row">
-        <ContactText />
+        <div className="space-y-6">
+          <ContactText />
+          <Image
+            src={siteConfig.brand.main}
+            overrideSrc={absoluteUrl(siteConfig.brand.main)}
+            alt="Contact Cipher Unit (CipherUnit) — open-source engineering collective"
+            title="Contact Cipher Unit"
+            width={420}
+            height={240}
+            sizes="(max-width: 768px) 90vw, 420px"
+            className="h-auto w-full max-w-[420px] rounded-lg border border-(--color-stroke)/40"
+          />
+        </div>
         <ContactBox />
       </section>
 

src/app/image-sitemap.xml/route.ts

@@ -49,6 +49,10 @@ export async function GET() {
       pageUrl: absoluteUrl("/team"),
       images: teamSitemapImages(members),
     },
+    {
+      pageUrl: absoluteUrl("/contact"),
+      images: brandImages,
+    },
   ]);
 
   return new Response(xml, {

src/app/projects/[slug]/page.tsx

@@ -151,6 +151,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
           <meta itemProp="caption" content={imageCaption} />
           <Image
             src={project.imageUrl}
+            overrideSrc={absoluteUrl(project.imageUrl)}
             alt={`${project.title} open source software developed by Cipher Unit (CipherUnit). ${project.description}`}
             title={imageTitle}
             fill

src/app/robots.ts

@@ -1,8 +1,8 @@
 import type { MetadataRoute } from "next";
 import { absoluteUrl, siteConfig } from "@/lib/site";
 
-const allowAssets = ["/", "/_next/static/", "/_next/image/"];
-const allowAi = ["/", "/llms.txt", "/_next/static/", "/_next/image/"];
+const allowAssets = ["/", "/avatars/", "/_next/static/", "/_next/image/"];
+const allowAi = ["/", "/llms.txt", "/avatars/", "/_next/static/", "/_next/image/"];
 const disallow = [
   "/api/",
   "/_next/data/",

src/app/sitemap.ts

@@ -5,14 +5,14 @@ import {
   brandImageUrls,
   projectImageUrls,
   projectPagePath,
-  seoAvatarUrl,
+  teamAvatarUrl,
 } from "@/lib/seo-images";
 import { absoluteUrl, siteConfig } from "@/lib/site";
 import { getTeamMembers } from "@/lib/team";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const members = await getTeamMembers();
-  const teamAvatars = members.map((member) => seoAvatarUrl(member.avatarUrl));
+  const teamAvatars = members.map((member) => teamAvatarUrl(member));
   const projectImages = projectImageUrls();
   const brandImages = brandImageUrls();
   const lastModified = new Date();

src/app/team/page.tsx

@@ -7,7 +7,7 @@ import {
   buildTeamGraphJsonLd,
   JsonLd,
 } from "@/components/shared/JsonLd";
-import { seoAvatarUrl, teamImageTitle } from "@/lib/seo-images";
+import { teamAvatarUrl, teamImageTitle } from "@/lib/seo-images";
 import { absoluteUrl, brandOgImages, siteConfig } from "@/lib/site";
 import { getTeamMembers } from "@/lib/team";
 
@@ -18,7 +18,7 @@ export const revalidate = 3600;
 export async function generateMetadata(): Promise<Metadata> {
   const members = await getTeamMembers();
   const memberOgImages = members.slice(0, 8).map((member) => ({
-    url: seoAvatarUrl(member.avatarUrl),
+    url: teamAvatarUrl(member),
     alt: teamImageTitle(member),
   }));
 
@@ -97,9 +97,23 @@ export default async function TeamPage() {
     <main id="main-content" className="mx-auto my-8 max-w-6xl px-4 sm:px-6 md:my-22">
       <JsonLd id="jsonld-team-graph" data={buildTeamGraphJsonLd(members)} />
 
-      <header className="mb-10 space-y-2">
+      <header className="mb-10 space-y-3">
         <NamePage title="GitHub Team & Contributors" />
         <SubNamePage text="Public GitHub members of the Cipher Units organization." />
+        <p className="max-w-3xl text-sm leading-7 text-(--color-stroke)">
+          Cipher Unit ({siteConfig.shortName}) is built by public members of the{" "}
+          <a
+            href={siteConfig.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-white underline-offset-2 hover:underline"
+          >
+            @{siteConfig.githubOrg}
+          </a>{" "}
+          GitHub organization. Browse profiles, avatars, and open-source
+          contributions from engineers shipping developer tools, Rust/Python
+          libraries, and infrastructure projects.
+        </p>
       </header>
 
       <Team preview={false} />

src/components/landing/about-me/AboutMe.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Fields from "@/components/shared/Fields";
 import Button from "@/components/shared/Button";
 import Link from "next/link";
-import { siteConfig } from "@/lib/site";
+import { absoluteUrl, siteConfig } from "@/lib/site";
 
 export default function AboutMe() {
   return (
@@ -30,6 +30,7 @@ export default function AboutMe() {
       </div>
       <Image
         src="/images/AboutMe.png"
+        overrideSrc={absoluteUrl("/images/AboutMe.png")}
         alt="CipherUnit Cipher Unit Open Source Engineering Collective — about us"
         width={300}
         height={300}