The portfolio uses two types of visual assets: raster images stored in public/images/ and SVG icons in src/images/icons/.
Project Thumbnails: Each project has a folder at public/images/projects/{project-id}/ containing thumbnail.webp. The project ID must match the id field in src/data/projects.ts.
Profile Images: Hand-drawn profile graphics live in public/images/drawn/, including the default avatar and sneeze animation frames.
Easter Egg Assets: Special images for the AAAAHHHH transformation live in public/images/aaaahhhh/.
Files in public/ are served statically and referenced by absolute paths (e.g., /images/projects/gaia/thumbnail.webp).
SVG icons are stored as files in src/images/icons/ and imported as React components via @svgr/webpack.
The icons.tsx file exports wrapped icons as MUI-compatible components:
import GitHubSVG from './icons/github.svg';
export const GitHubIcon = (props: SvgIconProps) =>
<SvgIcon component={GitHubSVG} inheritViewBox {...props} />;
This pattern allows icons to accept MUI SvgIconProps (color, fontSize, etc.) while preserving the SVG viewBox.
Components import icons from @images/icons:
import { GitHubIcon } from '@images/icons';
The @svgr/webpack loader converts SVG files to React components at build time. This provides:
WebP Preferred: Project thumbnails use WebP format for smaller file sizes. PNG and JPG are supported but less efficient.
SVG for Icons: Scalable vectors ensure crisp rendering at any size without multiple asset files.
Implementation: src/images/icons.tsx