> ## 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: The Personal Homepage

> war.re is Ryan Warren's personal homepage, showcasing his identity as a Seattle-based Software Engineer at Stripe with links to his social profiles.

The main site at [war.re](https://war.re) serves as Ryan Warren's personal homepage — a clean, centered landing page that introduces him as a Seattle-based Software Engineer currently working at Stripe. Built with Next.js and React as a static export, the site is minimal by design: a name, a title, a short bio, and a handful of outbound links.

## URL Structure

The site uses a two-route layout: a root route (`/`) and the actual content route (`/n`).

<Info>
  Visiting `war.re/` automatically redirects to `war.re/n` via an HTML `meta` refresh tag (`<meta httpEquiv="refresh" content="0; url=/n" />`). Because the project uses Next.js static export, there is no server available to perform HTTP-level redirects (e.g., 301/302). The `meta` refresh is the standard client-side fallback for static sites.
</Info>

A `<noscript>` fallback link to `/n` is also included on the root page for the rare case where a browser has JavaScript disabled and cannot process the `meta` refresh\`.

The actual homepage content lives entirely in `main/pages/n/index.tsx` and is served at `war.re/n`.

## Page Content

The homepage centers its content in a constrained column. The rendered content, in order, is:

* **Ryan Warren** — displayed as the page's main heading
* **Software Engineer** — a subtitle rendered at normal font weight
* A short bio identifying Ryan as a Seattle-based Software Engineer working at [Stripe](https://stripe.com)
* A link to his current side projects at [wrixton.xyz](https://wrixton.xyz)
* A link to his online resume at [ryan.war.re/n](https://ryan.war.re/n)
* Social icon links for GitHub, LinkedIn, and Stack Overflow
* A footer copyright line: `© {year} war.re`

### Social and External Links

| Link           | Destination                                                                                       |
| -------------- | ------------------------------------------------------------------------------------------------- |
| GitHub         | [github.com/rwwarren](https://github.com/rwwarren)                                                |
| LinkedIn       | [linkedin.com/in/ryanwwarren](https://linkedin.com/in/ryanwwarren)                                |
| Stack Overflow | [stackoverflow.com/users/1879792/ryan-warren](http://stackoverflow.com/users/1879792/ryan-warren) |
| Side project   | [wrixton.xyz](https://wrixton.xyz)                                                                |
| Online resume  | [ryan.war.re/n](https://ryan.war.re/n)                                                            |

Social icons for GitHub, LinkedIn, and Stack Overflow are rendered as Next.js `Image` components (30×30px SVGs), each wrapped in a Next.js `Link` component that opens in a new tab with `rel="noopener noreferrer"`.

## Open Graph and Twitter Card Metadata

Both the `/` and `/n` routes include Open Graph and Twitter Card `<meta>` tags, configured in a Next.js `<Head>` block, so that sharing either URL on social platforms produces a rich preview card.

```tsx theme={null}
<meta property="og:type" content="website" />
<meta property="og:url" content="https://war.re/n" />
<meta property="og:title" content="Ryan Warren - Software Engineer" />
<meta property="og:description" content="Seattle based Software Engineer currently working at Stripe" />
<meta property="og:image" content="https://war.re/og.svg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="War.re" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Ryan Warren - Software Engineer" />
<meta name="twitter:description" content="Seattle based Software Engineer currently working at Stripe" />
```

A canonical `<link>` on both routes points to `https://war.re/n`, preventing search engines from indexing the redirect page as a duplicate.

## Component Structure

The `/n` page uses three Next.js built-in components:

<CardGroup cols={3}>
  <Card title="Head" icon="code">
    Injects `<title>`, `<meta>`, Open Graph, and Twitter Card tags into the document `<head>`.
  </Card>

  <Card title="Link" icon="link">
    Wraps all outbound anchors and the internal resume link, enabling prefetch behaviour on internal routes.
  </Card>

  <Card title="Image" icon="image">
    Renders the social icon SVGs with explicit `width` and `height` attributes, preventing layout shift.
  </Card>
</CardGroup>
