Case Study

Portfolio Platform – Next.js, VPS & Subdomain Services

This project is my personal portfolio platform, built and hosted on custom infrastructure.

Beyond presenting projects, it serves as a controlled environment for experimenting with frontend architecture, deployment workflows, subdomain-based services, and small interactive features.

The platform is designed to be incrementally extensible without architectural rewrites.

Project Overview

The platform runs on a custom VPS with multiple subdomains, each representing a focused service or application. Deployment, runtime behavior, and routing are fully under my control.

Contents

  1. 1. Motivation & Scope
  2. 2. System & Deployment Architecture
  3. 3. Subdomain-Based Service Model
  4. 4. Frontend Architecture (Next.js)
  5. 5. Achievements System
  6. 6. Internal Tools & Utilities
  7. 7. Infrastructure Decisions & Trade-offs
  8. 8. Future Expansion

1. Motivation & Scope

The portfolio was built not only to showcase projects, but to function as a small, real-world platform running on self-managed infrastructure. The focus is on clarity, extensibility, and control over the entire stack.

  • Host the platform on a custom VPS instead of managed hosting.
  • Support multiple independent services via subdomains.
  • Keep deployment simple, predictable, and reproducible.
  • Experiment with interactive frontend features without backend dependencies.

2. System & Deployment Architecture

The entire platform is hosted on a custom VPS and deployed via GitHub Actions. Each application runs as a Node.js process managed by PM2, with Nginx acting as a reverse proxy and entry point.

VPS & Runtime

  • VPS provider: Hostinger.
  • OS: Ubuntu Linux.
  • Node.js runtime managed via PM2.
  • Each app runs as an independent process.

Deployment

  • Custom GitHub Actions workflows.
  • Deployment script executed on the VPS.
  • Build step followed by controlled restarts via PM2.
  • No platform-specific abstractions.

Networking & Security

  • Nginx reverse proxy for domain and subdomain routing.
  • HTTPS enabled for each subdomain individually.
  • Environment variables managed via per-project .env files.

3. Subdomain-Based Service Model

Instead of a single monolithic site, the platform is split into multiple subdomains. Each subdomain represents a focused application or service with its own responsibility.

  • krouskystepan.com — main portfolio site with projects, tools, and interactive features.
  • darts.krouskystepan.com — a simple static darts score tracker (501 countdown).
  • overlay.chat.krouskystepan.com — frontend chat overlay.
  • overlay.alerts.krouskystepan.com — frontend alerts overlay.
  • overlay.server.krouskystepan.com — backend WebSocket service for overlays.
Separation of Concerns

Each subdomain can evolve independently. Larger systems, such as the overlay infrastructure, are intentionally documented in their own dedicated case study.

4. Frontend Architecture (Next.js)

The portfolio frontend is built using Next.js with the App Router. The application is built using next build and served via next start as a Node.js server.

  • App Router-based structure.
  • Primarily static content with no runtime server-side rendering.
  • Tailwind CSS with custom styling conventions.
  • No global state management required due to limited complexity.

5. Achievements System

The portfolio includes a lightweight achievements system intended as an interactive UX feature rather than a core functional component. Achievements are configuration-driven and tracked entirely on the client.

  • Achievements defined via configuration objects.
  • Unlocked based on user interactions (page visits, hover actions, feature usage).
  • Progress and unlocked state stored in localStorage.
  • Hidden page exposing all achievements and completion progress.
Design Intent

The system exists primarily as an experiment in lightweight gamification and user interaction, without introducing backend complexity.

6. Internal Tools & Utilities

The portfolio also serves as a host for small, self-contained frontend utilities. These tools are implemented as individual pages sharing a common layout and internal helper logic.

  • Text diff and comparison tool.
  • JSON formatter and validator.
  • UUID generator.
  • Color format converter.
  • Timestamp converter.
  • Text case and alphabet sorting utilities.

7. Infrastructure Decisions & Trade-offs

Several deliberate trade-offs were made to keep the platform simple and maintainable.

  • No database or backend persistence for portfolio-specific features.
  • Client-side storage used where durability is not critical.
  • Manual VPS management preferred over managed hosting for learning and control.
  • HTTPS handled per subdomain instead of centralized wildcard setup.

8. Future Expansion

The platform is intentionally open-ended. New subdomains, tools, and backend-backed services can be added without affecting the existing architecture.

Living Project

This portfolio evolves alongside my skill set. As more complex services are added, individual subsystems are documented as separate case studies.