🖼️ Pato Perpetua Public Assets

This repository publishes public profile assets, favicons, and PWA manifests for use in personal websites, resumes, and other platforms.

Public builds are served at assets.patricioperpetua.com.

Quick Downloads

Use these defaults when you do not need a specific variant:

Design

All icons, profile pictures, and export variants in this repository come from the main design source created in Figma. If you ever need to review the original compositions, tweak a background, adjust borders, or export new sizes, you can open the full editable file here:

👉 Figma – Patricio Perpetua Assets

This file includes the master frames for square and circle shapes, light and dark theme variants, and all background/border combinations used across this asset library.

Contributor Workflow

This README is used to generate the public asset index page. Contributor-only workflow details live in Profile Asset Workflow.

Build Output Profiles

Build output now uses two profiles so CI artifacts stay under upload limits.

  • CI build (CI=true): static profile PNGs are capped at <= 512px.
  • Local/full build (default): static profile PNGs use the configured size groups (including high-res sizes such as 1024 and 4096, depending on preset).
  • Override for either mode: set PROFILE_STATIC_MAX_SIZE=<number>.

Examples:

# CI-friendly static outputs (320/512 only)
CI=true yarn build

# Explicit static cap for any environment
PROFILE_STATIC_MAX_SIZE=512 yarn build

# Full local static outputs from configured size groups
yarn build

When the static cap is active, stale PNG sizes in dist/profile/static are pruned automatically so old 1024/4096 files do not remain in artifacts.

🖼️ Visual Preview

Here's a quick preview of the main icon variants available:

Circle Icons

Variant Preview
bg-none (transparent) Circle bg-none
bg-yellow Circle bg-yellow
bg-mustard Circle bg-mustard
bg-white Circle bg-white
bg-none / bd-black Circle bg-none bd-black
bg-none / bd-white Circle bg-none bd-white
bd-black Circle bd-black
bd-white Circle bd-white

Square Icons

Variant Preview
bg-none (transparent) Square bg-none
bg-yellow Square bg-yellow
bg-mustard Square bg-mustard
bg-none / bd-black Square bg-none bd-black
bg-none / bd-white Square bg-none bd-white
bd-black Square bd-black
bd-white Square bd-white

OG Images

Variant Preview
dark / default OG Image dark default
dark / square OG Image dark square
light / default OG Image light default
light / square OG Image light square

🔗 Available Manifest Files

  • favicons/circle/bg-none/site.webmanifest: Transparent circle icons.
  • favicons/circle/bg-mustard/site.webmanifest: Circled icons with a mustard background.
  • favicons/circle/bg-yellow/site.webmanifest: Circled icons with a yellow background.
  • favicons/circle/bg-none/bd-white/site.webmanifest: Transparent circle icons with a white border.
  • favicons/circle/bg-none/bd-black/site.webmanifest: Transparent circle icons with a black border.

✅ How to Use

1. Reference the manifest in your HTML

Default Light (yellow)

<link rel="manifest" href="./favicons/circle/bg-yellow/site.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-yellow/apple-touch-icon.png" />
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./favicons/circle/bg-yellow/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="./favicons/circle/bg-yellow/favicon-16x16.png"
/>
<link rel="shortcut icon" href="./favicons/circle/bg-yellow/favicon.png" />

Light Theme

<link rel="manifest" href="./favicons/circle/bg-mustard/site.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-mustard/apple-touch-icon.png" />
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./favicons/circle/bg-mustard/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="./favicons/circle/bg-mustard/favicon-16x16.png"
/>
<link rel="shortcut icon" href="./favicons/circle/bg-mustard/favicon.png" />

Dark Theme

<link rel="manifest" href="./favicons/circle/bg-yellow/site.webmanifest" />
<link rel="apple-touch-icon" href="./favicons/circle/bg-yellow/apple-touch-icon.png" />
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="./favicons/circle/bg-yellow/favicon-32x32.png"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="./favicons/circle/bg-yellow/favicon-16x16.png"
/>
<link rel="shortcut icon" href="./favicons/circle/bg-yellow/favicon.png" />

2. Dynamic Theme Support (Optional)

You can load the correct manifest dynamically depending on user preference:

<script>
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const link = document.createElement('link');
  link.rel = 'manifest';
  link.href = prefersDark
    ? './favicons/circle/bg-yellow/site.webmanifest'
    : './favicons/circle/bg-mustard/site.webmanifest';
  document.head.appendChild(link);
</script>

3. Download asset

Circle Assets

circle / bd-black
circle / bd-white
circle / bg-mustard
circle / bg-mustard / bd-white
circle / bg-none
circle / bg-none / bd-black
circle / bg-none / bd-white
circle / bg-white
circle / bg-yellow
circle / bg-yellow / bd-black

Square Assets

square / bd-black
square / bd-white
square / bg-mustard
square / bg-mustard / bd-white
square / bg-none
square / bg-none / bd-black
square / bg-none / bd-white
square / bg-yellow
square / bg-yellow / bd-black

OG Image Downloads

og-image / dark
og-image / light

🧱 Folder Structure

The published site serves the dist/ directory at the site root, so public URLs omit a /dist prefix (for example /favicons/...).

dist/ (generated + copied by yarn build)

dist/
├── index.html
├── favicons/
│   ├── circle/
│   │   ├── bd-black/
│   │   ├── bd-white/
│   │   ├── bg-mustard/
│   │   │   └── bd-white/
│   │   ├── bg-none/
│   │   │   ├── bd-black/
│   │   │   └── bd-white/
│   │   ├── bg-white/
│   │   ├── bg-yellow/
│   │   │   └── bd-black/
│   └── square/
│       ├── bd-black/
│       ├── bd-white/
│       ├── bg-mustard/
│       │   └── bd-white/
│       ├── bg-none/
│       │   ├── bd-black/
│       │   └── bd-white/
│       ├── bg-yellow/
│       │   └── bd-black/
├── profile/
│   ├── static/
│   │   ├── neutral/
│   │   │   ├── circle/.../320.png
│   │   │   ├── circle/.../512.png
│   │   │   ├── square/.../320.png
│   │   │   └── square/.../512.png
│   │   └── <expression>/
│   │       └── {circle|square}/.../{320|512}.png
│   └── animated/
│       └── animation-all/
└── og-image/
    ├── dark/
    └── light/

Open Graph JPEGs are maintained under src/og-image/ (dark/, light/) and copied into dist/ during the build. README links use ./og-image/... because the live site serves the dist/ tree at the site root (same public paths).

Notes:

  • In CI, profile/static is capped to 320 and 512 by default.
  • In local/full builds, additional sizes (for example 1024 and 4096) can be generated when enabled by preset size groups.
  • With PROFILE_STATIC_MAX_SIZE, generated static sizes and README links should be interpreted relative to the selected cap.

🎨 Notes

  • All icons follow the PWA format with 192x192 and 512x512 sizes.
  • MIME type is application/manifest+json
  • You can use these assets freely on your own sites, resumes, or apps.

© 2026 Pato Perpetua. All rights reserved.