The Vynil
A vinyl-inspired music player component for Framer featuring multi-track playback, hover interactions, custom cursor support, album artwork integration, and a minimalist interface designed to add personality to portfolio websites.
Client Name:
Tools Used:
Role:
Date:
Personal Project
Framer, React, JavaScript
Design, Development
The Challenge:
Most portfolios communicate skills, experience, and projects, but very few communicate personality.
While building my portfolio, I noticed a recurring problem: visitors could learn what I do, but not who I am. As someone heavily influenced by music, film, and internet culture, I wanted to create a more personal experience without relying on lengthy biography sections or excessive copy.
The challenge was to introduce personality into the portfolio in a way that felt intentional, memorable, and integrated into the overall experience rather than added as a gimmick.
The objective became clear: create an interactive element that could communicate identity, encourage exploration, and make the portfolio more memorable while remaining unobtrusive to visitors who simply wanted to review my work.
Research & Design Strategy
I explored how people build emotional connections with digital experiences and found that memorable portfolios often reveal something about the creator beyond their professional work.
Music emerged as the strongest medium for this purpose. A curated playlist can communicate mood, taste, influences, and personality more effectively than a paragraph of text.
From a visual perspective, I wanted the player to feel like a physical object rather than a traditional interface element. This led to the concept of a vinyl-inspired music player integrated directly into the navigation experience.
Key design decisions included:
• Using a vinyl record as the primary visual metaphor
• Converting album artwork to grayscale to maintain visual consistency with the portfolio
• Using the site's signature yellow accent as the center label to strengthen brand cohesion
• Keeping interactions intentionally minimal through click-to-play and double-click-to-skip controls
The goal was to create something that felt discoverable and enjoyable without distracting from the portfolio itself.
Development & Implementation
The music player was developed as a custom React-based code component inside Framer.
A significant challenge was ensuring that playback persisted across navigation while preventing multiple instances of the player from conflicting with one another. To solve this, a shared global audio state was implemented, allowing a single audio source to remain active throughout the site.
Additional functionality included:
• Playlist management
• Dynamic album artwork updates
• Track information display
• Persistent playback across pages
• Animated vinyl rotation while music is playing
• Responsive interaction states
The final playlist was intentionally curated rather than randomly selected. Each track was chosen to represent different creative influences and aspects of my personality, turning the player into a subtle extension of the portfolio's identity.
Reflection
This project reinforced an idea that influences much of my work: people rarely remember features, but they remember experiences.
The goal was never simply to build a music player. The goal was to create a portfolio that felt more human and more representative of the person behind the work.
By combining visual design, interaction design, and development into a single component, the project transformed a personal interest into a meaningful part of the user experience.
The result is a feature that adds personality to the portfolio without competing with its primary purpose, helping visitors learn about both my work and the individual behind it.
