How This Portfolio Was Built: A Story in Commits
Design & Engineering, no boundaries — and the repo that proves it. From the first commit to Afrofuturism, Supabase, admin, and 90+ commits.
How This Portfolio Was Built: A Story in Commits
Design & Engineering, no boundaries — and the repo that proves it.
The starting line
It didn’t begin with a grand plan. It began with a single commit: “Add initial project structure with backend and frontend components.” That was March 2026. One evening, the decision was simple — stop talking about the portfolio and start building it.
The first push brought in a FastAPI backend with models and seed data for personal info, projects, courses, blog posts, gallery, timeline, testimonials, contact messages, and newsletter subscriptions. On the front, a React app with Vite, a full set of UI primitives (Radix-based), and the first portfolio components: Hero, About, Projects, Courses, Timeline, Contact, Footer. No design system doc yet — just the conviction that the portfolio had to show the craft, not only list it.
Identity before pixels
Before the second commit, the question was: what does this thing look like? Not “modern” or “clean” in the generic sense — something that could only be this portfolio.
The answer became Afrofuturism × Dark Cosmic: African geometric heritage (Kente-inspired grids, Adire patterns, terracotta and gold) meets cosmic depth (void backgrounds, nebula glows, sharp geometry). That’s now written down in docs/DESIGN-SYSTEM.md — three pillars (Cultural Identity, Cosmic Depth, Technical Craft), a strict palette (Sungold, Terracotta, Stardust, Void), and a rule: no rounded corners. The “Z concept” — sharp, deliberate, from somewhere.
Commit by commit, the stack got a soul: “Enhance design system and UI components,” “Update tech stack and enhance footer component,” “Implement new Home page layout and enhance About and Projects components.” The grid stopped being generic; it started to feel like a choice.
From backend to Supabase
The backend was useful for structure, but it was also a single point of failure and extra hosting. So the next turn was pragmatic: “Add Supabase integration for admin authentication and data management.” Auth, database, realtime, and storage in one place. Then: “Remove backend files and dependencies.” The FastAPI server went away; the frontend kept the same shape of data (personal_info, projects, blog_posts, gallery, courses, timeline, testimonials, messages, newsletter) and started reading and writing via Supabase.
That meant refactoring the API layer: “Refactor Supabase integration and improve async handling,” “Add Realtime Data Support with Supabase Integration,” “Enhance Portfolio Components with Realtime Data and Error Handling.” The UI didn’t just fetch once — it subscribed. Change the content in the admin panel; the site updates without a refresh.
Making it usable: admin and content
A portfolio that only a developer can update isn’t really “yours” in a practical sense. So in came the admin: “Add admin authentication and management features,” “Add admin analytics and new header component for admin pages.” Login, dashboard, and then content screens for every entity: personal info, projects, blog, gallery, courses, timeline, education, testimonials, messages, newsletter. Each with list, create, edit, delete — and later, “Add Rich Text Editor and Pagination to Admin and Content Pages,” so the blog could be written and formatted in-place.
The blog itself evolved: “Enhance Writing and Admin Pages with Improved Filtering and Category Selection,” “Refactor Rich Text Editor and Blog Post Page for Improved Formatting and Accessibility,” “Implement social sharing and enhanced styling for blog posts.” Read time computed from body, slug-based URLs, meta description and OG image, sharing to X and WhatsApp. Small decisions that add up to “this feels finished.”
Polish and craft
Once the data and admin were in place, the work shifted to feel and behaviour. “Implement theme toggle and enhance styling across components.” “Add smooth scrolling and scroll reveal features to portfolio layout.” “Refactor Navigation and Button Components for Improved Accessibility and User Experience.” Skip links, focus management, and keyboard navigation — the kind of details that don’t get screenshots but matter.
Then motion: “Implement Framer Motion animations and scanline effects on various page headers and elements,” “Enhance admin UI with Framer Motion animations, active navigation indicators, and visual styling adjustments.” Not decoration for its own sake — motion that reinforces hierarchy and feedback. The CV page got “background glow, grid accents, and interactive hover effects.” The work detail page got a “nebula backdrop” and a proper lightbox for project screenshots. Gallery, teach, writing, and search pages got consistent treatment: “Enhance Search and Contact pages with Framer Motion animations and new background visual effects.”
Mobile, PWA, and going live
The site had to work where people actually are: on the phone. “Implement mobile bottom navigation and pull-to-refresh functionality” replaced the hamburger with a bottom nav and pull-to-refresh. “Add collapsible 'More' menu to mobile bottom navigation” kept the bar clean. “Implement comprehensive PWA support by adding Apple splash screens and updating manifest icons” made it installable and a bit more native.
Under the hood: “Add Sitemap and RSS Generation Scripts,” “Implement Analytics Dashboard and User Activity Tracking,” “Add Export Functionality for User Activity in Admin Analytics Page.” So the portfolio could be discovered, measured, and improved. “Update Open Graph image generation to use a dynamic Supabase function for blog posts and work details” meant every share looked intentional.
What’s in the repo today
Roughly 90 commits after the first one, the stack looks like this:
- Frontend: React 19, Vite, Tailwind, Radix UI, Framer Motion, design tokens (Afro Warm + Cosmic Cool).
- Data & auth: Supabase (Postgres, Auth, Realtime, Storage, Edge Functions for OG images).
- Content: Admin UI for personal info, projects, blog, gallery, courses, timeline, education, testimonials, messages, newsletter — all editable without touching code.
- Experience: Theming, smooth scroll, skip links, skeletons instead of mock fallbacks, realtime updates, mobile bottom nav, PWA, sitemap, RSS, analytics, and structured data for SEO and sharing.
The git history is the real spec: every “feat” and “refactor” is a small decision — sometimes technical, sometimes aesthetic — that turned a weekend idea into a portfolio that can stand for “Design & Engineering, no boundaries.” From Nigeria, for the world; from one commit, for the next.
This story was written from the project’s git history and docs. The rest is in the repos.