23 Bin Laden — Artist Website

Problem

23 Bin Laden, a Toronto music artist, needed a single place online to present their music, content and brand identity. The goal was a professional digital home that makes it easy for visitors and fans to discover the artist, explore their content and connect with their online presence.

Approach

I designed and developed the site from concept through deployment as a paid Built.km client project, covering the UI/UX, responsive layouts, content presentation and the overall digital experience. The visual design is custom and built around the artist's brand.

The site focuses on six priorities: a strong visual identity, modern UI/UX, responsive design, clear content organization, mobile usability and a cohesive artist-brand experience. It carries the artist's top tracks with previews, music videos, a discography, a timeline and links to their streaming and social platforms, with a background track a visitor can mute at any time.

Architecture

The site is a TypeScript project managed as a pnpm workspace, formatted with Prettier and hosted on Replit. The page is rendered in the browser from one bundled module, behind an entry screen:

bin-laden-vibes.replit.app
  ├─ entry screen   23 / BINLADEN title sequence → "Tap to enter" starts the background track
  ├─ hero           artist name, Toronto, mute control
  ├─ top tracks     most-streamed songs with 30-second previews
  ├─ music videos
  ├─ discography
  ├─ timeline
  └─ streaming and social links
one shared audio controller: background track, previews and videos never overlap

Challenges

• Browsers block sound until a visitor interacts, so the site opens on a "Tap to enter" screen and that tap is what starts the background track.
• The background track, the song previews and the embedded music videos could talk over each other, so one shared audio controller pauses the track for a preview and silences everything when a video starts.
• The previews came as AAC files that some browsers can't play, so I converted them to MP3 and stored every cover and clip with the site instead of hotlinking them.

Results

The site is live at https://bin-laden-vibes.replit.app/ as "23 BinLaden". It is responsive across desktop, tablet and mobile and links out to the artist's streaming and social platforms.

Lessons

The project gave me hands-on experience building a real-world, client-facing product and translating an artist's brand identity into a functional web experience.