System Status: ONLINE – A Terminal-Inspired Portfolio for Backend Architect 🖥️⚡

Arek H — Fri, 30 Jan 2026 05:51:58 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

Hi, I'm Arkadiusz! 👋

I'm a Senior Backend Architect who has spent more time looking at terminal windows and Grafana dashboards than pretty UI layouts.

For the New Year, New You Portfolio Challenge, I wanted to break away from the standard "Hero Image + Bio" template. Instead, I asked myself: "What if my portfolio looked like the tools I use every day?"

The result is a High-Availability, resilient portfolio that visualizes my skills as "system resources" and invites visitors to interact via a CLI-style interface.

Portfolio

How I Built It

I built this project to be as lightweight and resilient as the backend systems I design.

The Stack

Frontend: React + Vite for blazing fast build times.
Styling: Zero UI Frameworks. I used pure CSS Variables (Design Tokens) and Flexbox/Grid. No Bootstrap, no Tailwind. Just clean, semantic CSS.
Hosting: Google Cloud Run. The app is containerized with Docker and served via Nginx. This allows it to scale down to zero (saving costs) and scale up instantly when traffic hits.

The AI Co-Pilot

I paired deeply with Google's Gemini throughout the process. It wasn't just about generating code; it was about rapid prototyping:

SVG Math: I used Gemini to calculate the control points for the Bezier curves in the "Blood Pressure" widget graphs.
CSS Glassmorphism: Fine-tuning the backdrop-filter and border transparency to get that perfect "Head-Up Display" look.

What I'm Most Proud Of

There are three features I'm particularly happy with:

1. The "Blood Pressure" Widget 💓

In the top right, instead of a static "Hire Me", I built a live "System Status" monitor. It simulates server load (or my caffeine levels ☕) with a randomized React state machine that transitions between Normal, Elevated, and High load, changing colors and graph shapes in real-time.

2. The Interactive Tech Stack 📚

The /stack page isn't just a list. It's a filtered matrix of my 29+ mastered technologies. I added a custom "Expertise" calculation that aggregates my years of experience across active filters.

3. CLI Contact Form ⌨️

The /contact page is styled like a terminal window (visitor@portfolio:~/contact).

Interactive Buttons: The Hire_Me() button in the nav isn't just a link—it passes a smart query parameter to pre-fill the form with "Project Inquiry".
Quick Actions: Buttons like initiate_consultation() run macros that auto-focus fields or open external scheduling tools.

Deployed with ❤️ on Google Cloud Run.

DEV Community: Arek H