Re-Engineering My Portfolio: Moving from No-Code to React & Firebase

Kaushalya Mullegama — Fri, 29 May 2026 09:14:07 +0000

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I built a professional, production-ready React 18 + Vite Engineering Portfolio and Interactive Media Dashboard. As an undergraduate studying Electronic and Telecommunication Engineering, my work constantly jumps between hardware schematic designs, firmware code, web dashboards, and technical writing.

This platform isn't just a basic resume resume layout; it's a fully integrated software architecture. It bridges a modern dark UI framework with a robust Firebase 11 ecosystem. The system handles live data mirroring via Firestore, real-time social engagement pipelines (likes, threaded blog comments), dynamic newsletter enrollment tracking, and automated static Open Graph template injections so social platforms scrape perfect image previews whenever my work is shared.

Demo

🌐 Live Production Application
Explore the live deployment here: https://kaushalyamullegama.netlify.app
💻 Repository
https://github.com/KRBAI/Kaushalya

1. The Home Page & Background Canvas View

2. The Interactive Skills Bento Grid View

uploads.s3.amazonaws.com/uploads/articles/p9czp5u3rstv9qustfvi.png)

3. The Live CMS Admin Edit View

The Comeback Story

The Problem:
The portfolio originally lived as a closed-source, layout-restricted mock-up draft on Wix Studio (Previous Wix Draft- https://krbmullegama.wixstudio.com/kaushalya). While it visually captured my style, it lacked real engineering depth. It was completely static, did not allow for any user interaction, could not dynamically display project logs or updates without opening a visual website builder, and lacked proper modern developer ergonomics.

Rebuilding from Scratch
I decided to revive this static layout draft and transition it into a maintainable engineering asset. I used an advanced AI workflow to turn this project around. First, I utilized Gemini to scrape the visual assets, text structures, and image links from the original page layout, translating them into a clean Single-Page Application baseline. From there, I expanded the architecture into a full-scale React + Vite software app using GitHub Copilot.

What I changed, fixed, and added to finish it up:

The Cloud Data Layer: Centralized static data configurations in src/data/defaultContent.js with structured, automated fallbacks to local files if Firestore network connections are unavailable.
Real-time Interaction Hub: Added dynamic user spaces utilizing real-time Firestore synchronization tunnels for a live blog commenting system and client post likes.
Pre-rendered Social Previews: Integrated custom shell preprocessing commands inside package.json (npm run build runs a secondary custom script scripts/generate-shares.js) that outputs pre-rendered meta configurations inside an export wrapper. This provides beautiful social card embeds on messaging apps like WhatsApp, Discord, or X.
Responsive Layout Overhaul: Rebuilt the layout sheets with mobile-first CSS grids. The mobile navigation menu collapses smoothly, and the login dialog contextually positions itself under primary viewport coordinates on smaller devices.

My Experience with GitHub Copilot

This project went from an abandoned, locked-down draft layout to a live, production-grade cloud application in record time because GitHub Copilot acted as an experienced engineering peer right inside VS Code. Here is exactly how Copilot accelerated the development process:

Handling complex Firebase Lifecycles: Copilot was incredibly efficient when writing asynchronous state wrappers inside ContentContext.jsx and AuthContext.jsx. It generated clean error boundaries, cleanly initialized the core configurations inside src/lib/firebase.js, and anticipated subscription cleanups (unsubscribe()) to avoid database leaks.
Mathematical Vector Math: Writing custom HTML5 Canvas rendering logic manually can feel tedious. Copilot instantly scaffolded the mathematical bounding box physics for the network nodes, allowing the circuit lines to trace toward the user's mouse movements smoothly.
Eliminating Asset Font Dependencies: To ensure total layout reliability without massive external font files slowing things down, Copilot swiftly wrote lightweight inline SVGs for all my technical branding icons and social footers.
Vite Optimization Insights: When the compiler threw chunk size optimization alerts, Copilot helped me track down the dependencies, suggesting clean lazy loading paths and code splitting strategies to keep the application lightning fast.

DEV Community: Kaushalya Mullegama

Re-Engineering My Portfolio: Moving from No-Code to React & Firebase

What I Built

Demo

The Comeback Story

My Experience with GitHub Copilot