Digital Ocean & Pocketbase

<div class="row g-5"><!-- Left Column: The Architecture --> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Infrastructure</h2> <p class="text-white-50 lead mb-5">Moving beyond managed hosting, I engineered a self-sufficient production environment on <strong>DigitalOcean</strong>. This project isn't just a website&mdash;it's a custom-configured VPS running multiple Node.js applications, managed by a bespoke PowerShell deployment system.</p> <h3 class="fw-bold text-white mb-3 mt-5">The Stack</h3> <p class="text-white-50 mb-4">We replaced expensive PaaS solutions with a raw <strong>Ubuntu Droplet</strong>. The core is powered by <strong>PocketBase</strong> (a lightweight Go backend) serving dynamic content, while <strong>Nginx</strong> handles reverse proxying and <strong>PM2</strong> ensures 24/7 uptime.</p> <div class="d-flex flex-wrap gap-3 mt-4"><span class="badge bg-primary bg-opacity-25 border border-primary text-primary px-4 py-3 rounded-pill">DigitalOcean</span> <span class="badge bg-warning bg-opacity-25 border border-warning text-warning px-4 py-3 rounded-pill">PocketBase</span> <span class="badge bg-success bg-opacity-25 border border-success text-success px-4 py-3 rounded-pill">Nginx + PM2</span></div> </div> <!-- Right Column: The "Brain" (Terminal Visual) --> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary bg-black bg-opacity-75 position-relative shadow-lg h-100 d-flex align-items-center justify-content-center p-5"> <div class="font-monospace text-start" style="color: #00ff00; opacity: 0.9; font-size: 0.9rem; line-height: 1.6;"><span class="text-white-50"># Deploying to Production...</span><br>&gt; Connecting to VPS... <span class="text-success">[OK]</span><br>&gt; Syncing Git Repo... <span class="text-success">[OK]</span><br>&gt; Uploading Assets... <span class="text-success">[OK]</span><br>&gt; Reloading Nginx... <span class="text-success">[OK]</span><br><br><span class="text-white">Success! Site is live.</span><br><span class="blink">_</span></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"><!-- Workflow Grid (With Official Logos) --> <h3 class="fw-bold text-white mb-4 text-center">The Workflow</h3> <div class="row g-4 mb-5"><!-- Step 1 --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img class="rounded-circle" style="width: 60px; height: 60px; object-fit: contain;" src="https://yt3.googleusercontent.com/-PCeii0ezD7You77VnltsKkMGgNC8JOdRSnpfV651vgj55z8EVC0DmuyVVgWUoqNcu-ARtA7fNI=s900-c-k-c0x00ffffff-no-rj" alt="DigitalOcean"></div> <h4 class="fw-bold text-white h5 mt-3">VPS Config</h4> <p class="text-white-50 small mb-0">Manual setup of an Ubuntu 22.04 Droplet, hardening SSH security, and configuring UFW firewalls.</p> </div> </div> <!-- Step 2 --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img style="width: 60px; height: 60px; object-fit: contain;" src="https://images.seeklogo.com/logo-png/46/1/pocketbase-logo-png_seeklogo-465584.png" alt="PocketBase"></div> <h4 class="fw-bold text-white h5 mt-3">PocketBase Migration</h4> <p class="text-white-50 small mb-0">Migrated content to a flexible PocketBase SQLite backend for real-time updates.</p> </div> </div> <!-- Step 3 (Fixed) --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img class="rounded-circle" style="width: 60px; height: 60px; object-fit: contain;" src="https://pbs.twimg.com/profile_images/1990585614279049216/-Zz6T2nk_400x400.png" alt="Antigravity"></div> <h4 class="fw-bold text-white h5 mt-3">Automated Deployer</h4> <div class="my-2"><span class="badge bg-dark border border-secondary text-white font-monospace">ULTIMATE_DEPLOYER.ps1</span></div> <p class="text-white-50 small mb-0">A custom script that handles git syncing, surgical asset uploads, and service restarts with one click.</p> </div> </div> </div>

<div class="row g-5"><!-- Left Column: The Architecture --> <div class="col-lg-6"> <h2 class="fw-bold text-white mb-4">The Infrastructure</h2> <p class="text-white-50 lead mb-5">Moving beyond managed hosting, I engineered a self-sufficient production environment on <strong>DigitalOcean</strong>. This project isn't just a website&mdash;it's a custom-configured VPS running multiple Node.js applications, managed by a bespoke PowerShell deployment system.</p> <h3 class="fw-bold text-white mb-3 mt-5">The Stack</h3> <p class="text-white-50 mb-4">We replaced expensive PaaS solutions with a raw <strong>Ubuntu Droplet</strong>. The core is powered by <strong>PocketBase</strong> (a lightweight Go backend) serving dynamic content, while <strong>Nginx</strong> handles reverse proxying and <strong>PM2</strong> ensures 24/7 uptime.</p> <div class="d-flex flex-wrap gap-3 mt-4"><span class="badge bg-primary bg-opacity-25 border border-primary text-primary px-4 py-3 rounded-pill">DigitalOcean</span> <span class="badge bg-warning bg-opacity-25 border border-warning text-warning px-4 py-3 rounded-pill">PocketBase</span> <span class="badge bg-success bg-opacity-25 border border-success text-success px-4 py-3 rounded-pill">Nginx + PM2</span></div> </div> <!-- Right Column: The "Brain" (Terminal Visual) --> <div class="col-lg-6"> <div class="rounded-4 overflow-hidden border border-secondary bg-black bg-opacity-75 position-relative shadow-lg h-100 d-flex align-items-center justify-content-center p-5"> <div class="font-monospace text-start" style="color: #00ff00; opacity: 0.9; font-size: 0.9rem; line-height: 1.6;"><span class="text-white-50"># Deploying to Production...</span><br>&gt; Connecting to VPS... <span class="text-success">[OK]</span><br>&gt; Syncing Git Repo... <span class="text-success">[OK]</span><br>&gt; Uploading Assets... <span class="text-success">[OK]</span><br>&gt; Reloading Nginx... <span class="text-success">[OK]</span><br><br><span class="text-white">Success! Site is live.</span><br><span class="blink">_</span></div> </div> </div> </div> <hr class="my-5 border-secondary opacity-25"><!-- Workflow Grid (With Official Logos) --> <h3 class="fw-bold text-white mb-4 text-center">The Workflow</h3> <div class="row g-4 mb-5"><!-- Step 1 --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img class="rounded-circle" style="width: 60px; height: 60px; object-fit: contain;" src="https://yt3.googleusercontent.com/-PCeii0ezD7You77VnltsKkMGgNC8JOdRSnpfV651vgj55z8EVC0DmuyVVgWUoqNcu-ARtA7fNI=s900-c-k-c0x00ffffff-no-rj" alt="DigitalOcean"></div> <h4 class="fw-bold text-white h5 mt-3">VPS Config</h4> <p class="text-white-50 small mb-0">Manual setup of an Ubuntu 22.04 Droplet, hardening SSH security, and configuring UFW firewalls.</p> </div> </div> <!-- Step 2 --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img style="width: 60px; height: 60px; object-fit: contain;" src="https://images.seeklogo.com/logo-png/46/1/pocketbase-logo-png_seeklogo-465584.png" alt="PocketBase"></div> <h4 class="fw-bold text-white h5 mt-3">PocketBase Migration</h4> <p class="text-white-50 small mb-0">Migrated content to a flexible PocketBase SQLite backend for real-time updates.</p> </div> </div> <!-- Step 3 (Fixed) --> <div class="col-md-4"> <div class="p-4 border border-secondary bg-white bg-opacity-05 rounded-4 h-100 text-center"> <div class="mb-3 d-flex justify-content-center align-items-center" style="height: 60px;"><img class="rounded-circle" style="width: 60px; height: 60px; object-fit: contain;" src="https://pbs.twimg.com/profile_images/1990585614279049216/-Zz6T2nk_400x400.png" alt="Antigravity"></div> <h4 class="fw-bold text-white h5 mt-3">Automated Deployer</h4> <div class="my-2"><span class="badge bg-dark border border-secondary text-white font-monospace">ULTIMATE_DEPLOYER.ps1</span></div> <p class="text-white-50 small mb-0">A custom script that handles git syncing, surgical asset uploads, and service restarts with one click.</p> </div> </div> </div>