Rogie Personal Portfolio and Component Showcase

Overview

This personal portfolio by Rogie King is a masterclass in blending minimalist typography with high-fidelity, skeuomorphic interactive components. It serves as an excellent clone reference for developers looking to implement custom web components that bridge the gap between static content and playful, tactile UI elements like the 3D 'movie stack' and the functional vinyl record player.

Design System

• Color Palette & Visual Hierarchy: The site uses a soft, light-gray neutral background (#eeeeee or similar) to reduce contrast fatigue. Visual hierarchy is established through font weight and occasional pops of color, such as the high-saturation red for specific keywords (e.g., "HORROR") and brand-specific blues for links.
• Typography: The system relies on a classic serif for body and headings, providing an editorial feel. Project lists use a clean, monospaced or sans-serif aesthetic for metadata like years and categories, separated by thin dot-leaders to guide the eye horizontally.
• Page Structure: The layout follows a single-column vertical flow: a personal intro with an avatar, a project list (#projects), a stacked movie gallery (#movies), and an interactive music player (#music).
• Reusable Components:
  • Project List: A clean <ul> with dotted separators that works perfectly for resumes or portfolios.
  • 3D Movie Stack: A custom component (rogie-movie) that uses CSS transforms to create a pseudo-3D 'shelf' effect for image covers.
  • Vinyl Record Player: A skeuomorphic rogie-music-list component featuring a rotating vinyl record, a functional needle-arm toggle, and a '33/45 RPM' speed switch.
• Interaction & Motion: The site uses subtle hover states for project links and complex state management for the music player (e.g., playing="false", current="true"). The movie stack likely utilizes z-index and transform shifts on hover to 'pull' a specific cover forward.
• Implementation Clues: The HTML reveals a heavy reliance on custom Web Components (rogie-movie, fig-tooltip, fig-switch, fig-button). This suggests a modular architecture where interactive logic is encapsulated within custom elements rather than a monolithic framework.

Use Cases

• Who should clone this: Designers or creative developers wanting a "digital garden" that feels personal and tactile rather than a standard corporate template.
• Effective Remixes:
  • Books/Games Gallery: Swap rogie-movie covers for book spines or video game boxes to create a digital library.
  • Podcast Player: Adaptation of the vinyl player into a vintage cassette or radio UI for audio-heavy portfolios.
• Practical Directions: For a quick win, clone the typography-based project list for a clean CV. For a deeper technical challenge, reuse the custom element structure to build a library of interactive, skeuomorphic widgets.
• Clone Scope: A full-page clone is best for those wanting a highly idiosyncratic personal brand, while the post-list and movie-list sections are easily detachable for use in broader CMS-driven sites.