I am a Software Engineer. This is my engineering blog where I document everything I am learning, and what I understand.

Software engineering blog documenting technical learnings, custom projects, and build breakdowns from Imaa.

I remember watching Peace Itimi's Innovating Africa documentary and thinking to myself, this is amazing. Finally someone is telling Nigeria's story. I had begun working on this site for her a few months before I watched it, but the documentary cemented the idea in my mind that since she's so busy telling other people's stories, someone should tell hers. This site was my attempt to do that.

It is a custom framework site (built off of this Luis Bizarro's course) running Express on the backend, Pug for the templating on the frontend, and SCSS for the styling. It is hosted on Vercel.

Initially, I wanted to create a Peace Itimi version of the Rocani website for Khaby Lame. I already began creating designs of what the site will look like, and gathering assets for the project. I remember downloading photos off of Peace Itimi's Instagram. Later on, I came across this prison website and this art gallery website while browsing through a web design inspiration gallery. (I cannot remember which it was. Here is a curation of my go-to web inspiration galleries: Share your work here.) I liked the storytelling of the prison website, and the simplicity of the art gallery site so I decided to combine them. (You can click the image to open the Sketch file I was designing it in before I changed the design direction.)

Having a 'better' design direction in mind, I went after a mixture of the prison site design and the art gallery site. The art gallery made use of serifs for its headers and the prison site scrolled horizontally. These were two things I noted that I wanted to implement.

I had in mind for the intro sequence to be a sort of cinematic intro, with each line fading in-and-out of the screen, and a cinematic percussion sound that fades in with the text and crescendoes when it is the most visible then fades out as the text fades out. I was not able to achieve this because finding the specific soundtrack I wanted was difficult (without paying for any audio service) but I am pretty satisfied with the soundtrack that was chosen. There are two soundtracks, both gotten from MixKit: Intro Sequence track and Story track. The fonts used are Rethink Sans for the body text and Cormorant for headings.

The slides are simple div containers each with its images and content positioned, either using the grid system or absolutely. Each slide has a 12-column grid that the texts are aligned to. I had intended for both the images and content to be aligned to the the grid but as the project went on, I discovered it was hard to maintain that sense of randomness like a farm website I came across months ago had, using a grid. So I aligned the text to the grid while positioning the images absolutely in most cases.

That's it. The site is a simple blend of GSAP animations, really. Made by a human and an AI. Here is a link to the site: peaceitimi.imanmachukwu.com

Technical case study on building a fan site for Nigerian documentary filmmaker Peace Itimi, featuring horizontal scrolling, serif typography, and custom stack—inspired by prison history and art gallery website designs.

Hey, I am Imaa

Blog Posts

Newsletter Subscription