DEV Community

Cover image for My Updated Dev Portfolio
Fiewor John
Fiewor John

Posted on

My Updated Dev Portfolio

#devchallenge #googleaichallenge #portfolio #gemini

New Year, New You Portfolio Challenge Submission

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

  1. CRA → Vite Migration

    • Replaced CRA-specific scripts and configs with Vite-compatible equivalents.
    • Updated imports and adjusted environment variable usage to match Vite conventions.

  2. 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.

  3. Dark Mode

    • System-preference-aware theme with manual toggle persisted in localStorage.
    • CSS variables for theme tokens for maintainability and compact implementation.

  4. Responsive & Accessibility Improvements

    • Adjusted layout breakpoints and touch targets for mobile devices.
    • Improved semantic HTML and ARIA attributes where appropriate.

  5. 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.

Top comments (0)