Pixel Pal: Gamifying the GitHub Copilot CLI Experience 🧙‍♂️⚔️

Gbolahan Olanrewaju — Sat, 14 Feb 2026 19:27:50 +0000

What I Built

Pixel Pal is a VS Code extension that turns your coding workflow into an RPG adventure. It creates a visual feedback loop where your "pal" reacts to your development habits in real-time.

But it does more than just look cute—it is designed to gamify the adoption of GitHub Copilot CLI.

Developers often forget to use CLI tools. Pixel Pal sits in your sidebar and watches for specific "Magic Keywords." When you use GitHub Copilot (e.g., typing gh copilot in the terminal or planning AI prompts in comments like // copilot explain), the Pixel Pal casts a Magic Spell and awards you XP.

It turns "asking for help" into a "power move."

Key Features:

🧙‍♂️ AI Detection: Detects copilot or ai keywords in your code/terminal and triggers a "Cast Spell" animation to celebrate using the CLI.
⚔️ Git Combat: Typing git push triggers an "Attack" animation—you aren't just uploading code, you are slaying the backlog!
🏃 Flow State: The pet runs when you type, mirroring your momentum.
🛡️ Save Streaks: Saving your file (Ctrl+S) triggers a Jump animation and celebratory HUD message.
🐛 Error Empathy: If you have syntax errors, the pet looks hurt, encouraging you to fix bugs quickly to "heal" him.

Demo

Here is Pixel Pal in action. Watch how the character reacts to typing, saving, and specifically using Copilot commands.

My Experience with GitHub Copilot CLI

Building Pixel Pal was a meta-experience. I wanted to build a tool for Copilot users, while using Copilot to build it.

I used the GitHub Copilot CLI to help me navigate the complex VS Code Extension API. Specifically, it helped me bridge the gap between the Extension Backend (TypeScript) and the React Webview Frontend.

It generated the initial useEffect logic to handle the message passing system.
It suggested the "Debounce" logic to stop the running animation when I stopped typing.

The CLI allowed me to stay in my terminal workflow without constantly switching to documentation tabs. Pixel Pal is my tribute to that workflow—making the terminal feel like a magical place to build software.

Link to Source Code:
https://github.com/gbollybambam/pixel-pal

Intelligent Portfolio: Built with Google Gemini + Applied Logic

Gbolahan Olanrewaju — Wed, 21 Jan 2026 13:48:37 +0000

About Me

I am a final-year Mathematics Researcher at the University of Lagos and the Founder of Imago, a digital transformation consultancy.

My engineering philosophy is simple: Software is Applied Topology. I don't just write code; I model logic. Whether I am architecting a Django backend or a Next.js frontend, I treat every component tree and database relation as a mathematical proof—it must be clean, efficient, and rigorously correct.

I built this portfolio to demonstrate that mathematical precision and creative design can coexist perfectly.

Portfolio

gbolahan-portfolio-website-5npkrlctp.vercel.app

⚠️ Deployment Note:
My original architecture is containerized and configured for Google Cloud Run. However, due to regional banking restrictions in Nigeria, I was unable to bypass the verification hold on the Google Cloud billing account in time for this submission.

In the spirit of resilience, I have deployed the production build to Vercel so the judges and community can interact with the live site. The Dockerfile and Cloud Run configuration remain in the source code to demonstrate readiness.

How I Built It

I used Google Gemini not just as a code assistant, but as my "Senior Technical Partner."

Math-to-Code Translation: I prompted Gemini to help me visualize topological structures using CSS Grid. We turned abstract spatial concepts into a responsive, grid-based layout.
Logic Proofing: Instead of standard debugging, I asked Gemini to "audit" my JavaScript logic for edge cases, similar to proof-reading a theorem. This ensured my contact form and scroll interactions were error-free on the first try.
Tech Stack:
- Core: HTML5, CSS3 (Semantic), JavaScript
- AI: Google Gemini (Logic Auditing & Architecture)
- Deployment: Vercel (Live), Docker/Cloud Run (Architected)

What I'm Most Proud Of

I am most proud of the "Applied Topology" Design System.

Many portfolios feel like templates, but I wanted mine to feel like a structured mathematical space. Using Gemini, I was able to write custom CSS that feels fluid and organic but is built on a rigid, logical grid.

I am also proud of the resilience behind this project. When the Google Cloud billing gate blocked my deployment, I didn't quit. I pivoted, reconfigured for Vercel, and shipped the product. That ability to solve problems under pressure is exactly what I bring to my clients at Imago.

DEV Community: Gbolahan Olanrewaju