Tom Parkes Portfolio Design Gallery

Overview

This portfolio is a masterclass in high-impact, minimalist digital design, leveraging bold typography and integrated motion to create a premium feel. It serves as an excellent reference for builders wanting to showcase creative work through a mix of large-scale display text and immersive full-width video backgrounds.

Design System

• Color Palette & Visual Hierarchy: A strictly monochromatic base (white background, black and grey text) allows high-fidelity project images and videos to provide the primary visual interest. Hierarchy is established through extreme contrast in text sizes rather than color.
• Typography: The site uses a heavy sans-serif typeface for display headings (xl-display). Scale is used dramatically, with hero text occupying nearly the entire viewport width. Inline icons (man, bird, eye) are treated as characters within the text flow to add personality.
• Page Structure: The layout follows a linear narrative: a bold typographic hero, followed by alternating project sections. Larger projects use full-width background videos, while others utilize a split-grid layout to balance imagery with descriptive text and metadata.
• Reusable Components:
  • Typographic Hero: A container that mixes text blocks and inline images for a magazine-style intro.
  • Scroll-Reveal Video Blocks: Full-width sections using w-background-video with overlay titles.
  • Dense Masonry Grid: The "Visual Feed" section uses a multi-column grid (row-a) for smaller assets, experiments, and GIFs, perfect for a "scratchpad" or secondary work showcase.
• Interaction & Motion: The portfolio utilizes opacity-based scroll reveals (seen in data-w-id and style="opacity: 0;" attributes) that fade elements into view as the user scrolls. Hover states on the profile image reveal a hidden information card (bg-info-card).
• Implementation Clues: Built with Webflow, as evidenced by classes like w-layout-grid, w-background-video-atom, and w-container. The use of data-w-id indicates the use of Webflow Interactions for the entrance animations.

Use Cases

• Who should clone this: Senior designers, creative directors, or motion studios who want a site that feels "designed" without being overly decorative.
• Effective Remixes: This pattern works exceptionally well for high-end boutique agencies or product landing pages where the "story" is told through a few key case studies.
• Remix Directions: Replace the inline icons in the hero section with brand-specific symbols or SVGs; adapt the "Visual Feed" grid into a client logo wall or a team gallery.
• Clone Scope: A full-page clone is recommended to maintain the specific rhythmic transition between the massive hero text and the immersive video sections, though the Masonry Grid section is a perfect quick-clone for any asset-heavy page.