I Built a DevOps Portfolio That Actually Deploys Itself (React, Vite, Vercel) 🚀

As a DevOps and Cloud Engineer, I’ve always found traditional resume formats incredibly frustrating. They are great for listing out buzzwords, but they completely fail at showing how I think about system architecture, how I structure CI/CD pipelines, or how I handle cloud infrastructure.

So, I decided to build a centralized space to document my case studies, showcase my technical blog, and prove my deployment skills in real-time.

Here is a breakdown of how I built my new engineering portfolio, the architecture behind it, and why I treated it like a production-grade application.

🏗️ The Tech Stack (Keeping it Fast and Clean)
I didn't want to overcomplicate the frontend. I needed something blazing fast that I could maintain easily while focusing my real energy on the backend and deployment logic.

• Frontend Framework: React
• Build Tool: Vite (Because waiting for Webpack to compile in 2026 is a crime).
• Hosting & Edge Delivery: Vercel

⚙️ The CI/CD Pipeline: Zero-Touch Deployments
As a DevOps engineer, the most important part of this project wasn't the UI—it was the deployment pipeline. I wanted a setup where I could write a new Markdown blog post or update a case study, hit git push, and never think about it again.

Here is how the pipeline works:

1. Version Control: Hosted on GitHub.
2. Automated Triggers: Vercel is hooked directly into my main branch.
3. The Build Process: Every time code is merged, Vercel spins up an isolated build environment, runs npm run build via Vite, and instantly catches any broken asset links (like a missing logo.png!) before pushing to production.
4. Edge Routing: The compiled static assets are distributed globally across Vercel’s Edge Network.

📂 Project Showcases: Moving Beyond "Hello World"
I built this site specifically to break down complex cloud and architecture concepts into readable case studies. Currently, the site hosts deep dives into:

• **Cryptocurrency Trading Architecture: **The infrastructure and database modeling required to build a frictionless, modern Web3 trading platform.
• Automated Orchestration Systems: Full-stack architecture detailing how I handle complex job orchestration using Python and SQLite.

Instead of just linking to GitHub repos, each project on the site breaks down the Problem, the Architecture, and the Impact.

🔍 SEO and Analytics: Controlling the Narrative
A portfolio is useless if recruiters and clients can't find it. I treated SEO as a first-class citizen during development:

• Dynamic Meta Tags: Ensuring the <title> and <meta name="description"> are perfectly tailored for Google Search snippets.
• Sitemap & Robots.txt: Configured a custom sitemap.xml in the public folder and forced indexing via Google Search Console to ensure my case studies are discoverable.

💡 What I Learned
Building a portfolio is surprisingly similar to building enterprise software. You still have to worry about asset management (always put your dynamic images in the public folder!), case-sensitive Linux build servers, and automated testing.

I’d love for the community to take a look and tear it apart. Check out the live build here: https://gulbarge.tech

Let me know in the comments: What is your go-to tech stack for personal sites right now? Are you team Next.js, Vite, or strictly static HTML/CSS?

DevOps #CloudEngineering #WebDevelopment #ReactJS #Vercel #CICD #SoftwareEngineering #TechPortfolio