jarv.is/app/(home)/page.tsx

import { IconArrowUpRight } from "@tabler/icons-react";
import Image, { type StaticImageData } from "next/image";

import { FadeTransition } from "@/components/page-transition";

import domainstackIcon from "./icons/domainstack.png";
import snoozleIcon from "./icons/snoozle.png";
import sofaIcon from "./icons/sofa.png";
import stanzaIcon from "./icons/stanza.png";
import uiIcon from "./icons/ui.png";
import versioneerIcon from "./icons/versioneer.png";

type Project = {
  name: string;
  url: string;
  tagline: string;
  icon: StaticImageData;
};

const projects: readonly Project[] = [
  {
    name: "Domainstack",
    url: "https://domainstack.io",
    tagline: "Domain intelligence made easy",
    icon: domainstackIcon,
  },
  {
    name: "Stanza",
    url: "https://stanza.tools",
    tagline: "shadcn/ui for infrastructure",
    icon: stanzaIcon,
  },
  {
    name: "Sofa",
    url: "https://sofa.watch",
    tagline: "Self-hosted movie & TV show tracker",
    icon: sofaIcon,
  },
  {
    name: "Versioneer",
    url: "https://versioneer.app",
    tagline: "macOS app updater with privacy-friendly crowdsourcing",
    icon: versioneerIcon,
  },
  {
    name: "Snoozle",
    url: "https://snoozle.ai",
    tagline: "AI-powered bedtime stories for kids",
    icon: snoozleIcon,
  },
  {
    name: "jarvis-ui",
    url: "https://ui.jarv.is",
    tagline: "Intentionally random React component library",
    icon: uiIcon,
  },
] as const;

const Page = () => (
  <FadeTransition>
    <h1 className="text-lg font-medium tracking-tight">
      Hi there! I&rsquo;m Jake.{" "}
      <span className="ml-0.5 inline-block origin-[65%_80%] text-[1.2rem] motion-safe:animate-wave">
        👋
      </span>
    </h1>

    <div className="markdown">
      <p className="text-sm leading-normal tracking-[-0.0125em]">
        I&rsquo;m a developer based in the Boston area working on some cool stuff:
      </p>
    </div>

    <section className="my-3">
      <ul className="flex flex-col gap-2 sm:gap-3">
        {projects.map((project) => (
          <li key={project.name}>
            <a
              href={project.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group flex flex-col gap-1 rounded-md py-1 transition-colors sm:flex-row sm:items-center sm:gap-4"
            >
              <div className="flex items-center gap-3">
                <Image
                  src={project.icon}
                  alt={project.name}
                  width={64}
                  height={64}
                  decoding="async"
                  className="size-6 shrink-0 rounded-[26%] ring-1 ring-border"
                />
                <span className="text-sm font-medium tracking-[-0.0125em] text-primary group-hover:underline group-hover:underline-offset-4">
                  {project.name}
                </span>
              </div>
              <span className="ml-9 text-xs text-pretty text-muted-foreground sm:ml-auto">
                {project.tagline}
                <IconArrowUpRight
                  className="ml-1 inline size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-primary"
                  aria-hidden="true"
                />
              </span>
            </a>
          </li>
        ))}
      </ul>
    </section>
  </FadeTransition>
);

export default Page;