Back to Portfolio

24Gibby Music Portfolio

Home page showing the collage-style hero and Void theme

24Gibby Music Portfolio main image

Shows page showing Django models (easy for client to add more of via admin page)

24Gibby Music Portfolio screenshot 1

Ease of adding shows to the site from an admin account, with show appearing immediately

24Gibby Music Portfolio screenshot 2

Contact page with reCAPTCHA integration

24Gibby Music Portfolio screenshot 3

Filling out the contact form with form validation and a feedback message

24Gibby Music Portfolio screenshot 4

Email that gets sent to client from a custom domain email

24Gibby Music Portfolio screenshot 5

A custom Django portfolio site built from the ground up for 24Gibby, an underground electronic artist based in Milwaukee. This project involved complete ownership of the design, development, deployment, and ongoing maintenance of the site, from concept through a live production launch.

The site features a distinct 'Void' visual theme built around a chaotic collage-style hero section, Bebas Neue and Inter typography, and scroll-driven animation systems powered by IntersectionObserver for staggered photo assembly and reveal effects as visitors move down the page. The CSS architecture separates structural styling (base.css) from visual/theme styling (theme_void.css), making it possible to swap in entirely new visual themes down the line without touching layout code.

The site includes a reCAPTCHA-protected contact form for booking and fan inquiries, an embedded music and video showcase, and a fully responsive layout tuned for mobile listeners discovering the artist through social links. Deployment to Heroku involved working through reCAPTCHA integration, contact form edge cases, and video hosting, with video delivery currently being migrated to external object storage (Cloudflare R2/S3) to keep the app lean as the media library grows.

Ongoing maintenance includes content updates, feature expansion, and infrastructure improvements as the artist's catalog and fanbase grow.

June - July 2026

Technologies Used:

Backend:

Django 5, SQLite

Frontend:

HTML5, CSS3, Vanilla JavaScript, IntersectionObserver scroll animations

Other Tools:

reCAPTCHA integration, Gunicorn + Whitenoise for Heroku deployment, .env for configuration

Scrolling through the home page showing custom animations