Cyd Stumpel Portfolio Portfolio & Blog

Overview

This portfolio for creative developer Cyd Stumpel is an exceptional reference for high-impact personal branding that balances brutalist-inspired typography with sophisticated motion. It demonstrates how to integrate video backgrounds, interactive components, and experimental CSS techniques like scroll-driven animations and view transitions into a cohesive professional site.

Design System

• Color Palette & Visual Hierarchy: The palette uses a warm off-white/cream background (#f9f3ed) to soften a high-contrast coral/terracotta accent (#d9533f). Service cards and blog links introduce supplemental muted tones (lavender, sage, mustard) to differentiate content types while maintaining a professional, earthy aesthetic.
• Typography System: A bold, condensed sans-serif (huge-hero class) is used for the massive header and branding, paired with a sophisticated serif for body copy and specialized headings (serif xsmall-heading). Labels and utility text use a heavy, all-caps sans-serif for high readability in a dense layout.
• Page Structure:
  • Hero: A layered section featuring a massive scrolling name marquee, a video mask with a custom silhouette, and alternating headline text.
  • Work Grid: A staggered collection of project cards with custom-shaped masks and hovering labels.
  • Blog Feed: A line-separated list featuring the "webmention" pattern—a cluster of small, rotated avatars signifying social engagement.
  • Services (Cards): A unique stack of interactive cards using <details> and <summary> elements that utilize CSS scroll-driven timelines for rotation and layering.
• Reusable Components:
  • Interactive Project Thumbs: Cards with a foreground image, a background color circle, and rotating tags.
  • Animated Buttons: Pill-shaped caps buttons with hover states using the bueno font.
  • Webmention Avatars: A reusable CSS pattern for stacking overlapping, slightly rotated circular images.
• Interaction & Motion: Extensive use of GSAP and Scroll-driven animations. Notable patterns include the "sticker" containers for floating elements, tooltip video hover effects within text links, and the card-stacking mechanism triggered by scroll position.

Use Cases

• Creative Professionals: Ideal for developers, motion designers, or digital artists who want to showcase technical proficiency through the UI itself rather than just a traditional gallery.
• Event & Studio Landing Pages: The hero layout can be remixed for conference sites where speaker videos need to be highlighted alongside massive typography for the event name.
• Technical Blogs: The blog feed with webmention avatars is a perfect pattern for developers moving toward the "IndieWeb" where social proof and cross-platform interactions are valued.
• Practical Remix Directions: Use the service card stacking logic for a pricing section; swap the terracotta for a brand-specific primary color; or extract the video-masking hero section to upgrade a standard "About Me" page.