The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Project title
Bam Music — artist portfolio website
Project description
Bam Music is a fully custom multi-page portfolio website built for a music artist. The goal was to give the artist a professional online home — somewhere fans and industry contacts could discover their work, listen to their music, and get in touch.
I designed and built the entire site using React and JavaScript, including a homepage, an integrated audio player, a portfolio/gallery section showcasing the artist's work, and additional pages for the about and contact sections.
The focus throughout was on clean layout, smooth interactions, and a visual identity that fits the music world — bold but not cluttered, and easy to navigate on any device.
What was built
Custom homepage with hero section and artist branding
Integrated music/audio player for showcasing tracks
Portfolio/gallery section displaying the artist's work
Multi-page structure — about, contact, and more
Responsive design for mobile and desktop
Tech used
ReactJavaScriptNetlify
Live link
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Recently I’ve started prototyping my designs in Figma more than I have in the past.
I tended to avoid prototyping in the past due to it being time consuming and honestly most of the projects I was working on were simple enough to not require this amount of detail.
But as the projects I work on have become more complex I’ve found that this extra attention to detail really helps align with stakeholders and sell them on a design before starting development.
With a prototyped design clients are able to interact and see how the website will function, not just how it will look. This helps reduce uncertainty in the final deliverable and ultimately helps speed up Webflow development.
In the past describing all the hover interactions and click interactions for something even as simple as the slider below would require both time for me to explain and some imagination on the client’s part.
While imagination is great, it’s not the best way to align on fine details.
Anyways, long story short, new policy is show don’t tell.
Great interactions! Reminds me Framer sites (ahah sorry had to do it as a Framer dev :))
project still going on this ecommerce website everyone.
how does it look?
This is clean and very well executed. You made it look effortless, which usually means a lot of work happened behind the scenes. Can you walk us through how you approached it from start to finish?
I built a personal website that represents me, from the design language, to the attention to detail within the micro-interactions and animations.
The core of the site features a card carousel layout, layout shifts, and a 3D logo that adds a touch of flare.
Some highlights include the site's design system when clicking the logo, using ZO's backend API's for visitor tracking, and implementing practical products for designers (including the site's Figma file) with the help of ZO's Stripe integration.
Live site → https://zzz-zuji.zocomputer.io/
https://www.loom.com/share/ab969164fb6546a4922a76b90e96c6d2
nice work~
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?