---
title: Portfolio footer lockup
description: Use the footer examples as shown or adapt them to your site, keeping both logos and their relative proportions.
sidebar:
  icon: panels-top-left
  order: 9
---

These examples pair the main SHAUGHV wordmark and the Shaughnessy crest using the proportions from the [SHAUGHV portfolio](https://shaughv.com). Both keep the marks side by side and place the copyright beneath them.

**Use either example as shown, or customize it to fit the site.** Both approaches are valid. The footer does not need to reproduce this layout exactly: adapt its alignment, spacing, padding, typography, colors, navigation, copyright placement, and responsive behavior to the design already being implemented elsewhere on the site. Black and white are neutral demonstration colors, not a required palette.

**Keep both logos in the footer and preserve their relative sizing.** The main SHAUGHV wordmark and Shaughnessy crest form the footer identity. Retain both as a recognizable pair; scale them up or down together to suit the site, preserving each logo's natural aspect ratio. Do not remove one or resize them independently in a way that changes their visual balance.

Each preview starts with black artwork on white. Use **Invert contrast** to see white on black. The toggle changes only colors; logo sizes, spacing, alignment, and padding stay fixed.

**These dimensions are a proportional reference, not fixed installation sizes.** At the example scale, the wordmark is 64px high (about 95px wide) and the crest is 80 × 100px. Multiply both logos' dimensions by the same factor: at 0.75×, the wordmark is 48px high and the crest is 60 × 75px. Scale the wordmark's 7px optical offset with them when using the same renderer. The 24px gap is a suggested starting point and can change to fit the composition.

Both examples use 40px of padding on the left and right, reduced to 28px on screens up to 580px wide. Top and bottom padding is 32px. These spacing values and breakpoints are customizable.

## Left aligned with navigation

The identity sits on the left, with sample site navigation on the right. On a small screen, navigation moves below the identity. These links open the corresponding portfolio destinations; replace them with your own site's routes.

<FooterPreview />

## Centered

The same marks are centered horizontally, with the copyright centered beneath the pair.

<FooterPreview centered />

## On this documentation website

Every CDN documentation page uses a single centered footer containing just the paired logos, without footer navigation or copyright text. It uses the same static wordmark renderer and strengthened footer crest as the examples, keeping the 64 px wordmark height, 80 × 100 px crest, and 7 px optical offset. Both marks follow the website's light or dark theme.

## Choose the correct crest

The source footer uses a strengthened mono derivative, with translucent vector fills emphasizing the lions, helmet, shield, and charges at small sizes. The CDN hosts that exact existing file as **Shaughnessy-Crest-Footer.svg**. The supplied color and mono originals remain separate and unchanged.

| Purpose | Asset |
| --- | --- |
| Original color artwork | [Shaughnessy-Crest.svg](https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest.svg) |
| Original engraved mono artwork | [Shaughnessy-Crest-Mono.svg](https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Mono.svg) |
| Actual small footer derivative | [Shaughnessy-Crest-Footer.svg](https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Footer.svg) |
| Static main logo | [SHAUGHV-Official.svg](https://cdn.shaughv.com/brand/shaughv/logos/SHAUGHV-Official.svg) |

## Source layout

The inspected source is `src/components/sections/FooterSection.tsx`, at commit `59b37a73fa5047bc0b4350dc8769ad97ebeeb117`. It uses `<shaughv-mark data-static>` for the main logo and a CSS mask for the crest. The source site's assets are local; the example below adapts those paths to the CDN.

| Detail | Source value |
| --- | --- |
| Space between marks | 24px |
| Wordmark size | 64px high; natural width approximately 95px |
| Wordmark optical offset | 7px downward |
| Crest size | 80px wide × 100px high |
| Crest color | `currentColor` through a CSS mask |
| Example layout | Copyright below the paired marks; navigation stacks on narrow screens |
| Typography | Makira and Paper Mono; no Michelangelus in this footer |

These values describe the source and previews; they do not require an identical footer layout. The small downward wordmark offset compensates for whitespace in the shared mark's animation viewBox. Preserve its natural aspect ratio rather than forcing a square.

## CDN implementation

This is a ready-to-use implementation of the left example. You may use it unchanged or adapt the surrounding markup and CSS to the site's theme. In this version, the identity wrapper keeps the copyright below both marks at every size. Set `--footer-background` and `--footer-foreground` to your project's colors; the black-and-white fallbacks below are illustrative only. When resizing the pair, apply the same scale factor to the wordmark height and both crest dimensions.

```html
<link rel="stylesheet" href="https://cdn.shaughv.com/fonts/fonts.css" />
<script src="https://cdn.shaughv.com/js/animated-brand-mark.js"></script>

<footer class="identity-footer">
  <div class="identity-brand">
    <div class="identity-lockup">
      <shaughv-mark data-static aria-label="SHAUGHV"></shaughv-mark>
      <span class="family-crest" role="img"
        aria-label="Shaughnessy family crest — Fortis et stabilis"></span>
    </div>
    <small>© 2026 Emmett Shaughnessy</small>
  </div>
  <nav class="footer-navigation" aria-label="Footer">
    <span>Navigate</span>
    <a href="/#about">About</a>
    <a href="/#projects">Projects</a>
    <a href="/tasks">Tasks</a>
  </nav>
</footer>
```

```css
.identity-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  padding: 32px 40px;
  /* Demo fallbacks only; choose colors from the consuming project. */
  background: var(--footer-background, #fff);
  color: var(--footer-foreground, #000);
  font-family: "Paper Mono", ui-monospace, monospace;
}
.identity-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.identity-brand small { font-size: 11px; line-height: 1.6; }
.identity-lockup { display: flex; align-items: center; gap: 24px; }
.identity-lockup shaughv-mark {
  display: block;
  height: 64px;
  width: auto;
  transform: translateY(7px);
}
.family-crest {
  display: block;
  flex: none;
  width: 80px;
  height: 100px;
  background: currentColor;
  mask: url("https://cdn.shaughv.com/brand/crests/Shaughnessy-Crest-Footer.svg") center / contain no-repeat;
}
.footer-navigation { display: flex; flex-direction: column; font-size: 13px; }
.footer-navigation span { font-size: 11px; margin-bottom: 8px; }
.footer-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.footer-navigation a:hover { text-decoration: underline; }
.footer-navigation a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.identity-footer.is-centered { grid-template-columns: 1fr; }
.identity-footer.is-centered .identity-brand { align-items: center; text-align: center; }
@media (max-width: 580px) {
  .identity-footer { grid-template-columns: 1fr; padding-inline: 28px; }
  .footer-navigation { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
  .footer-navigation span { flex-basis: 100%; }
}
```

For the centered variant, add `is-centered` to the footer and omit the navigation. Keep the same identity wrapper and CSS:

```html
<footer class="identity-footer is-centered">
  <div class="identity-brand">
    <div class="identity-lockup">
      <shaughv-mark data-static aria-label="SHAUGHV"></shaughv-mark>
      <span class="family-crest" role="img"
        aria-label="Shaughnessy family crest — Fortis et stabilis"></span>
    </div>
    <small>© 2026 Emmett Shaughnessy</small>
  </div>
</footer>
```

To reproduce the inverse preview, set `--footer-background: #000` and `--footer-foreground: #fff` on either footer. The preview controls are demonstration tools and are not required in the site's actual footer.

For a script-free variant, use the static main-logo SVG in an `<img>` with meaningful alt text. The previews use the same static mark renderer as the custom element, matching the portfolio's framing. The standalone SVG has a different viewBox, so its size and optical offset should be checked separately. A mask is useful when the crest must follow a text color; a plain `<img>` is sufficient when its original color is desired.

## Agent and MCP-readable context

Start with `/tree.json`, follow `usage.documentation.footer_example`, and read [crest-info.json](https://cdn.shaughv.com/brand/crests/crest-info.json). It records the source project, source commit, variant relationships, SHA-256 checksums, logo URL, example dimensions, and the layout, sizing, and color policies. Agents may use either example as is or customize the footer to the consuming site's current theme. The requirements are to retain both logos in the footer, preserve their relative sizing, and keep each logo's aspect ratio; the surrounding layout and absolute scale are flexible.

The same guide is exported at `/footer-lockup.md`, `/footer-lockup.mdx`, and `/api/docs/pages/footer-lockup.json`, and included in `llms-full.txt`, search, and the agent catalogs. Tools consuming these endpoints can retrieve the example without inferring it from image filenames.