Odunayo Bolarinwa Portfolio

01Client: Personal project
02Year: 2026
03Category: Portfolio / Custom Development
04Services: DesignFront-End DevelopmentStatic Site GeneratorCreative Coding

The site you're on. Designed and hand-coded from scratch with no template, theme or page builder: a custom Python build system, five languages, dark and light modes, a case study for every project and interactive details like a code-to-photo portrait, a 3D full-screen menu and generated ambient sound.

Case study

A portfolio that is itself the proof

The challenge

A portfolio built on a template says very little about a developer. I wanted the site itself to show how I work: custom code, attention to detail on every screen size, and features you don't see on a normal portfolio.

It also had to stay easy to update. With 20+ projects, case studies, translations and screenshots, adding work by hand page after page would have been slow and error-prone.

The approach

I wrote a small Python static site generator for it. One JSON file holds the content, and each project is a folder of screenshots; the build turns them into every page, the sitemap and structured data, and converts images to WebP at two sizes so phones download less.

On the front end it's plain HTML, CSS and JavaScript with GSAP for motion, so it loads fast and nothing depends on a page builder. Every change is checked in dark mode, light mode and at phone, tablet and desktop widths before it ships.

What I built

Case study for every project
The story, the stack each site actually runs on, real results, stacked screens and phone views, generated from the same config.
Five languages
English, Nigerian Pidgin, Yoruba, Hausa and French, switched instantly in the browser.
Code-to-photo portrait
A canvas effect that draws my portrait in code characters; hover (or watch it sweep on phones) to decode it back into the photo.
Full-screen 3D menu
Shutters drop over the page and the links stand up in 3D; on phones it becomes a stack of numbered slabs with a thumb dock and swipe-down to close.
Generated sound
Ambient music and click sounds synthesised live with the Web Audio API: no audio files, and it only plays while you're on the tab.
X-ray mode
One switch reveals how each section of the page is built.
Project brief & world map
A shareable 3-minute project brief at /start/, and an interactive map of where my clients are.

Under the hood

Frontend: HTMLCSSVanilla JavaScriptGSAP + ScrollTriggerVue 3 (works filter)Three.js (WebGL grain)
Browser APIs: Canvas 2D (code portrait)Web Audio API (generated sound)Intl (Lagos clock)
Build: Custom Python static site generatorPillow (WebP images)JSON content config
Hosting: GitHub PagesGitHub ActionsCustom domain

The outcome

Live at odunayobolarinwa.com, deployed automatically by GitHub Actions on every push.
Adding a new project is a folder of screenshots plus a few lines of JSON.
Every update is listed on the site's changelog.