Portfolio footer lockup

Use the footer examples as shown or adapt them to your site, keeping both logos and their relative proportions.

These examples pair the main SHAUGHV wordmark and the Shaughnessy crest using the proportions from the SHAUGHV portfolio. 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.

Black on whiteInvert contrast

© 2026 Emmett Shaughnessy

Centered

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

Black on whiteInvert contrast

© 2026 Emmett Shaughnessy

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.

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.

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.

<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>

.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:

<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. 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.