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.
Top comments (1)
the no-code -> own-stack migration is the right move for anything ur planning to actually iterate on. one shortcut for the next one: if u start from a single prompt + the saas gets generated straight into ur own gh + vercel + db (fully owned, no platform lock), u skip the migration step entirely. been building moonshift on that bet, $3 per shipped saas, no subscription. first run completely free if u want to test it on ur next side project.