My Updated Dev Portfolio

Fiewor John — Mon, 02 Feb 2026 06:53:54 +0000

New Year, New You Portfolio Challenge Submission

Portfolio

About Me

I am a software engineer who builds full-stack web applications with an emphasis on pragmatic, maintainable code and strong developer experience. For this portfolio refresh, I aimed to present a concise, modern summary of my skills and projects while improving performance, accessibility, and responsiveness so the site better represents my current capabilities.

How I Built It

Overview & Goals

Modernize an old Create React App portfolio I last updated four years ago.
Improve developer experience (faster dev server, smaller builds).
Improve end-user experience (dark mode, responsive layout, clearer project highlights).

Tools & Tech Stack

Frontend: React migrated from CRA → Vite (for faster dev feedback and smaller build times).
Build / Bundler: Vite (ESM-first, fast HMR).
Hosting / Deployment: Google Cloud Run (containerized, serverless deployment).
Containerization: Docker with multi-stage builds, small production image, gzip compression, SPA routing.
Google AI: Antigravity — AI-first development environment to refactor, suggest improvements, and accelerate repetitive tasks.
Development practices: prompt engineering best practices, incremental commits, dependency hygiene, CI/CD practices.

Key Development Steps

CRA → Vite Migration
- Replaced CRA-specific scripts and configs with Vite-compatible equivalents.
- Updated imports and adjusted environment variable usage to match Vite conventions.
Dependency Updates
- Upgraded major frontend dependencies to current stable releases (React 18 for compatibility).
- Resolved peer dependency conflicts between React, React DOM, and testing libraries.
- Removed deprecated or unmaintained packages.
Dark Mode
- System-preference-aware theme with manual toggle persisted in localStorage.
- CSS variables for theme tokens for maintainability and compact implementation.
Responsive & Accessibility Improvements
- Adjusted layout breakpoints and touch targets for mobile devices.
- Improved semantic HTML and ARIA attributes where appropriate.
Containerization & Cloud Run Deployment
- Multi-stage Docker build:
  - Node build stage for dependency installation and Vite production build.
  - Nginx runtime stage with gzip compression and SPA routing.
- Ensured cross-platform compatibility by building amd64/linux image for Cloud Run.
- Pushed Docker image to Artifact Registry and deployed to Cloud Run.
- Embedded the live Cloud Run deployment in this post.

How I Used Antigravity

Performed targeted refactors (e.g., simplifying a large portfolio component).
Generated guided migration snippets for CRA → Vite.
Used iterative prompt → change → test cycles to keep changes minimal and reversible.

What I'm Most Proud Of

Successful migration from CRA → Vite with faster builds and improved developer feedback loop.
Dark mode implementation that respects system preference with a simple toggle.
Dependency hygiene and modernized build process.
Cloud Run deployment with a multi-stage Docker build and gzip, making the portfolio lightweight, fast, and embeddable.
AI-augmented development workflow significantly reduced time spent on repetitive refactors.

What to Look for in the Demo

Project cards linking to code samples and short implementation notes.
Clear, scannable “About / Skills / Contact” section.
Theme toggle and responsive behavior — try resizing the viewport or switching system dark/light mode.
Accessible semantic structure and keyboard navigability for main sections.

Thank you for reviewing my submission — I look forward to feedback from the Google AI team and the community.

Using GitHub Actions to Battle Racism (or at least contribute to the process)!

Fiewor John — Sun, 21 Nov 2021 13:38:30 +0000

Introduction

GitHub Actions are event-driven workflows which are very useful for automating processes in software development lifecycle. They're even more awesome because they're located where all the fun stuff happens - GitHub! This takes resolving of issues, collaboration and deployment to a whole other level and makes it even easier too.

To learn more about GitHub actions and how you can begin to utilise them, check their easy-to-follow documentation

My Workflow

During Hacktoberfest, I created two greeting bots and one stale bot for IBM's Call for Code for Racial Justice Open Source projects.
Basically, the greeting bots greet new contributors to the project with a message.

name: Greetings

on: [pull_request, issues]

jobs:
  greeting:
    runs-on: ubuntu-latest
    steps:
       ...
       issue-message: 'Thank you so much for contributing to our work!'
       pr-message: 'Thank you for your contribution! Someone will review it ASAP.'

The stale bot marks issues stale after a particular number of days. You might be wondering why this would be useful. Well, it helps notify contributors of issues that have been unattended to for too long and hence prioritize such issues.

name: Mark stale issues and pull requests

on: 
  schedule:
    - cron: "0 0 * * *"

jobs:
  stale:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/stale@v1
        ....
          stale-issue-message: ':wave: Hi! This issue has been marked stale due to inactivity. If no further activity occurs within the next 7 days, it will automatically be closed.'
          ...
          stale-issue-label: 'stale'
          exempt-issue-label: 'keep-open'
          remove-stale-when-updated: true
          stale-issue-label: 'Stale'
          stale-pr-label: 'Stale'
          labels-to-add-when-unstale: 'help-wanted'
          days-before-stale: 60
          days-before-close: 7

These GitHub Action Bots are being used in two Call For Code for Racial Justice Projects

Truth Loop - a solution that helps communities simply understand the policies, regulations and legislation that will impact them the most and allows them to share their experiences around how policies have impacted them or how proposed policies could impact them using short video testimonials.
TakeTwo-Marker-ChromeExtension which is 'a plugin to facilitate the capture and categorization of words and phrases that could be racially biased through a browser.'

Submission Category:
Maintainer Must-Haves - since it makes the lives of open source maintainers easier.

Link to Code

Stale Bot
https://github.com/Call-for-Code-for-Racial-Justice/Truth-Loop/pull/211/files

Greeting Bot
TakeTwo-Marker-ChromeExtension
https://github.com/Call-for-Code-for-Racial-Justice/TakeTwo-Marker-ChromeExtension/pull/29/files

Truth Loop
https://github.com/Call-for-Code-for-Racial-Justice/Truth-Loop/pull/195/files

Additional Resources / Info

Here's the article by Call for Code in which I was featured:
https://medium.com/callforcode/hacktoberfest-fighting-racism-with-open-source-code-956559da7d6d
I was also a speaker in the Demo Day (somewhere between 8:00 and 13:00)
https://www.youtube.com/watch?v=7VWlc5JiZ7Q
Most importantly, join the call, there's a lot more awesome stuff to be done!
https://developer.ibm.com/callforcode/racial-justice/

DEV Community: Fiewor John