> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wrixton.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# War.re

> Ryan Warren's personal website and online resume — built with Next.js and deployed on Vercel.

<div className="mx-auto flex w-full max-w-[720px] flex-col gap-12 px-4 py-10 lg:gap-14 lg:py-16">
  <div className="flex flex-col items-center gap-6">
    <div className="flex max-w-[480px] flex-col gap-2 text-center">
      <h1 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">
        War.re Documentation
      </h1>

      <p className="text-balance text-base text-gray-600 dark:text-gray-400">
        Everything you need to understand, run, and extend Ryan Warren's personal site. Use the sidebar to navigate or search with <kbd>⌘</kbd> <kbd>K</kbd>.
      </p>
    </div>
  </div>

  <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <a href="/introduction" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="globe" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium text-gray-900 dark:text-gray-50">Introduction</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Learn what War.re is, how it's structured, and what each domain does.
        </span>
      </div>
    </a>

    <a href="/development/getting-started" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="terminal" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium text-gray-900 dark:text-gray-50">Getting Started</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Clone the repo, install dependencies, and run the site locally in minutes.
        </span>
      </div>
    </a>
  </div>

  <div className="flex flex-col gap-4">
    <h2 className="text-lg font-medium tracking-tight text-gray-900 dark:text-gray-50">Explore</h2>

    <Columns cols={2}>
      <Card title="Site Structure" icon="layout" iconType="light" href="/site-structure">
        Understand the monorepo layout and how the two Next.js apps relate to each other.
      </Card>

      <Card title="Dev Commands" icon="square-terminal" iconType="light" href="/development/commands">
        All yarn commands for linting, building, testing, and formatting.
      </Card>
    </Columns>

    <Columns cols={2}>
      <Card title="Pages" icon="file-text" iconType="light" href="/pages/main-site">
        The homepage at war.re and the resume at ryan.war.re, explained in detail.
      </Card>

      <Card title="Deployment" icon="rocket" iconType="light" href="/deployment/overview">
        How each app is built as a static export and deployed to Vercel.
      </Card>
    </Columns>
  </div>
</div>