<script src="https://tailwindcss.com/"></script>
<style>
/* Define custom colors and apply base styles */
:root {
--dark-blue: #0A1429;
--accent-orange: #F97316;
--light-orange: #FF8F42;
}
/* Override default WordPress/Theme body styles for the dark look */
html body {
background-color: var(--dark-blue) !important;
color: white !important;
font-family: 'Inter', sans-serif !important;
}
/* Specific gradient class for sections */
.section-gradient {
background: linear-gradient(360deg, var(--dark-blue) 0%, #152238 100%);
}
/* Language Toggle Styles */
#lang-toggle {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.1);
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid rgba(249, 115, 22, 0.3);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
#lang-toggle:hover {
background: rgba(249, 115, 22, 0.2);
border-color: var(--accent-orange);
}
</style>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E.gear-fill%7Bfill:none;stroke:%23F97316;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;%7D%3C/style%3E%3Cpath class='gear-fill' d='M90.3 49.9c.4-1.6.6-3.3.6-5.1 0-7.8-3.1-15-8-20.5l-9.1 1.7c-1-.7-2-1.4-3.1-1.9l2.7-8.8c-3.7-2-7.8-3.3-12-4L60 6.6c-1.3-.1-2.7-.2-4-.2h-12c-1.3 0-2.7-.1-4 .2l-1.4 8.7c-4.2.7-8.3 2-12 4l2.7 8.8c-1.1.5-2.1 1.2-3.1 1.9l-9.1-1.7c-4.9 5.5-8 12.7-8 20.5 0 1.8.2 3.5.6 5.1l-9.1 1.7c-.4 1.7-.6 3.5-.6 5.3 0 7.8 3.1 15 8 20.5l9.1-1.7c1 .7 2 1.4 3.1 1.9l-2.7 8.8c3.7 2 7.8 3.3 12 4l1.4 8.7c1.3.1 2.7.2 4 .2h12c1.3 0 2.7-.1 4-.2l1.4-8.7c4.2-.7 8.3-2 12-4l-2.7-8.8c1.1-.5 2.1-1.2 3.1-1.9l9.1 1.7c4.9-5.5 8-12.7 8-20.5-.1-1.8-.3-3.6-.7-5.3l-9.1-1.7zM50 66c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16z'/%3E%3C/svg%3E">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary-dark': '#0A1429',
'accent-orange': '#F97316',
'light-orange': '#FF8F42',
}
}
}
}
</script>
<script defer src="https://analytics.paho-tilburg.nl/script.js" data-website-id="7f06ef54-7e58-460d-b6a6-ef72af3da230"></script>
<div class="min-h-screen bg-primary-dark">
<!-- Navigation -->
<header class="fixed top-0 left-0 right-0 z-50 bg-black/50 backdrop-blur-sm shadow-lg border-b border-orange-500/20">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<a href="#hero" class="text-2xl font-extrabold text-accent-orange hover:text-light-orange transition">
PaHo-Tilburg
</a>
<div class="flex items-center gap-6">
<div class="space-x-4 hidden md:flex">
<a href="#about" class="text-white hover:text-accent-orange transition duration-200" data-en="About Me" data-nl="Over Mij">About Me</a>
<a href="#amp" class="text-white hover:text-accent-orange transition duration-200" data-en="AMP Gameserver" data-nl="AMP Gameserver">AMP Gameserver</a>
<a href="#infra" class="text-white hover:text-accent-orange transition duration-200" data-en="Infrastructure" data-nl="Infrastructuur">Infrastructure</a>
<a href="#projects" class="text-white hover:text-accent-orange transition duration-200" data-en="Projects" data-nl="Projecten">Projects</a>
</div>
<!-- Language Toggle Button -->
<button id="lang-toggle" onclick="toggleLanguage()">
<span id="lang-text">NL</span>
</button>
<button class="text-white md:hidden p-2 rounded hover:bg-orange-500/20">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
</button>
</div>
</nav>
</header>
<!-- 1. Hero Section -->
<section id="hero" class="section-gradient pt-32 pb-20 text-center min-h-[70vh] flex items-center justify-center border-b border-white/10">
<div class="max-w-4xl mx-auto px-4">
<h1 class="text-6xl sm:text-7xl font-extrabold leading-tight tracking-tight text-white mb-4">
<span data-en="Welcome to the Digital World of" data-nl="Welkom in de Digitale Wereld van">Welcome to the Digital World of</span> <span class="text-accent-orange">PaHo-Tilburg</span>
</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto" data-en="Exploring technology, networking, and digital fabrication in Tilburg. This is my space for servers, hobbies, and projects." data-nl="Verkenning van technologie, netwerken en digitale fabricage in Tilburg. Dit is mijn ruimte voor servers, hobby's en projecten.">
Exploring technology, networking, and digital fabrication in Tilburg. This is my space for servers, hobbies, and projects.
</p>
<a href="#about" class="inline-block px-8 py-3 bg-accent-orange text-white font-bold rounded-xl shadow-xl hover:bg-light-orange transition duration-300 transform hover:scale-105" data-en="Discover My Projects" data-nl="Ontdek Mijn Projecten">
Discover My Projects
</a>
</div>
</section>
<!-- 2. About Me / Hobbies Section -->
<section id="about" class="py-20 bg-primary-dark border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center text-accent-orange mb-12" data-en="About Me & Hobbies" data-nl="Over Mij & Hobby's">About Me & My Hobbies</h2>
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6 text-lg text-gray-300">
<p data-en="I'm a technology enthusiast based in Tilburg, with a passion for building and optimizing complex systems. My professional interest lies heavily in networking and virtual infrastructure, driving me to create a robust home lab environment." data-nl="Ik ben een technologie-enthousiasteling uit Tilburg, met een passie voor het bouwen en optimaliseren van complexe systemen. Mijn professionele interesse ligt sterk bij netwerken en virtuele infrastructuur, wat mij drijft om een robuuste home-lab omgeving te creëren.">I'm a technology enthusiast based in Tilburg, with a passion for building and optimizing complex systems. My professional interest lies heavily in networking and virtual infrastructure, driving me to create a robust home lab environment.</p>
<p data-en="When I step away from the keyboard, my hobbies merge the digital with the physical:" data-nl="Wanneer ik niet achter het toetsenbord zit, smelten mijn hobby's het digitale samen met het fysieke:">When I step away from the keyboard, my hobbies merge the digital with the physical:</p>
<ul class="list-none space-y-3 pt-4 text-white">
<li class="flex items-start">
<span class="text-accent-orange text-xl mr-3">⚙️</span>
<div data-en="**3D Printing & CNC:** Bringing digital designs to life using my Prusa i3 MK2.5 and Workbee CNC router. I run Octoprint and CNC-JS for control." data-nl="**3D Printen & CNC:** Digitale ontwerpen tot leven brengen met mijn Prusa i3 MK2.5 en Workbee CNC-router. Ik gebruik Octoprint en CNC-JS voor de besturing.">**3D Printing & CNC:** Bringing digital designs to life using my Prusa i3 MK2.5 and Workbee CNC router. I run Octoprint and CNC-JS for control.</div>
</li>
<li class="flex items-start">
<span class="text-accent-orange text-xl mr-3">🎮</span>
<div data-en="**Gaming & Hosting:** Running game servers for friends on my dedicated AMP panel, currently hosting titles are listed below." data-nl="**Gaming & Hosting:** Gameservers draaien voor vrienden op mijn eigen AMP-paneel. De momenteel gehoste titels staan hieronder vermeld.">**Gaming & Hosting:** Running game servers for friends on my dedicated AMP panel, currently hosting titles are listed below.</div>
</li>
<li class="flex items-start">
<span class="text-accent-orange text-xl mr-3">💾</span>
<div data-en="**Home Lab & Virtualization:** Managing a three-node Proxmox cluster, which hosts everything from Home Assistant to Jellyfin." data-nl="**Home Lab & Virtualisatie:** Beheer van een Proxmox-cluster met drie nodes, dat alles host van Home Assistant tot Jellyfin.">**Home Lab & Virtualization:** Managing a three-node Proxmox cluster, which hosts everything from Home Assistant to Jellyfin.</div>
</li>
</ul>
</div>
<div class="rounded-xl overflow-hidden shadow-2xl bg-black/50 p-6">
<img
src="/wp-content/uploads/2026/03/Server-Cluster1.webp"
alt="Paho-Tilburg Proxmox Cluster"
class="w-full h-64 object-cover rounded-lg border border-accent-orange/40 shadow-lg"
>
</div>
</div>
</div>
</section>
<!-- 3. AMP Gameserver Info -->
<section id="amp" class="py-20 section-gradient border-b border-white/10">
<div class="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center text-white mb-6" data-en="AMP Gameserver Status" data-nl="AMP Gameserver Status">AMP Gameserver Status</h2>
<p class="text-xl text-gray-400 text-center mb-12">
<span data-en="Managed by CubeCoders AMP running on my Proxmox cluster." data-nl="Beheerd door CubeCoders AMP, draaiend op mijn Proxmox-cluster.">Managed by CubeCoders AMP running on my Proxmox cluster.</span>
<span class="text-accent-orange font-bold" data-en="Data below updates dynamically." data-nl="Onderstaande data wordt dynamisch bijgewerkt.">Data below updates dynamically.</span>
</p>
<div class="flex flex-wrap justify-center gap-4">
[amp_server id="3d996bcd" steam="526870" epic="com.epicgames.launcher://apps/crab%3Aef4a63daa7d4420e91420a72050be89d%3ACrabTest?action=launch&silent=true"]
[amp_server id="d2f4fa08" steam="228380"]
[amp_server id="87681704" steam="284160"]
[amp_server id="43f757a2" steam="730" free="Free to Play on Steam"]
[amp_server id="ab06eb04" steam="1203620"]
[amp_server id="2284b168" steam="251570"]
[amp_server id="13f20998" steam="1631270"]
[amp_server id="2d01aa5e" steam="" free="https://github.com/OldUnreal/FullGameInstallers/releases/download/windows-game-installers/UT2004.exe"]
[amp_server id="9854df1b" steam="1203190"]
[amp_server id="277c86c4" steam="983870"]
[amp_server id="77267969" steam="945360"]
[amp_server id="c8a2e828" steam="304930" free="Free to Play on Steam"]
</div>
<div class="text-center mt-12">
<p class="text-gray-300 text-lg">
<span data-en="The AMP game servers are available exclusively to members of the PlayingGodTilburg Discord community. Apply for membership." data-nl="De AMP gameservers zijn exclusief beschikbaar voor leden van de PlayingGodTilburg Discord community. Word lid.">The AMP game servers are available exclusively to members of the PlayingGodTilburg Discord community. Apply for membership.</span>
<a href="https://discord.gg/nMJNRhpYnB" target="_blank" class="text-light-orange text-lg hover:underline block pt-2">PlayingGodTilburg Discord</a>
</p>
<img
src="/wp-content/uploads/2026/03/PlayingGodLogo-M365copilot-Trans.webp"
alt="Logo PlayingGodTilburg"
class="mx-auto block w-64 h-64 object-cover rounded-lg shadow-lg"
>
</div>
</div>
</section>
<!-- 4. My Infrastructure Overview -->
<section id="infra" class="py-20 bg-primary-dark border-b border-white/10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center text-accent-orange mb-12" data-en="My Core Infrastructure" data-nl="Mijn Kern Infrastructuur">My Core Infrastructure</h2>
<p class="text-xl text-gray-400 text-center mb-12" data-en="A look at the hardware and software that keeps my digital life running, organized by VLANs." data-nl="Een blik op de hardware en software die mijn digitale leven draaiende houdt, georganiseerd per VLAN.">
A look at the hardware and software that keeps my digital life running, organized by VLANs.
</p>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1: Proxmox Cluster -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">🖥️</span>
<h4 class="text-xl font-bold text-white">Proxmox Cluster (3x GMKtec M5)</h4>
<p class="text-gray-400 text-sm" data-en="High-availability setup running 3 mini PCs. Hosts all core services (Pi-Hole, MySQL, Nextcloud, Home Assistant, etc.) via VMs and LXCs." data-nl="High-availability opstelling met 3 mini-pc's. Host alle kerndiensten (Pi-Hole, MySQL, Nextcloud, Home Assistant, enz.) via VM's en LXC's.">
High-availability setup running 3 mini PCs. Hosts all core services (Pi-Hole, MySQL, Nextcloud, Home Assistant, etc.) via VMs and LXCs.
</p>
<a href="https://paho-tilburg.nl" target="_blank" class="text-light-orange text-sm hover:underline block pt-2" data-en="View My Server Documentation" data-nl="Bekijk Mijn Server Documentatie">View My Server Documentation</a>
</div>
<!-- Card 2: Networking Gear -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">📡</span>
<h4 class="text-xl font-bold text-white">TP-Link Omada Network</h4>
<p class="text-gray-400 text-sm" data-en="Managed by the Omada Controller. Includes the SG3210X-M2 core switch, ER605 v2.0 router, and EAP245 access points across multiple VLANs." data-nl="Beheerd door de Omada Controller. Inclusief de SG3210X-M2 core switch, ER605 v2.0 router en EAP245 access points over meerdere VLAN's.">
Managed by the Omada Controller. Includes the SG3210X-M2 core switch, ER605 v2.0 router, and EAP245 access points across multiple VLANs.
</p>
<a href="https://omadanetworks.com" target="_blank" class="text-light-orange text-sm hover:underline block pt-2" data-en="Omada Controller Link" data-nl="Omada Controller Link">Omada Controller Link</a>
</div>
<!-- Card 3: Storage & Backup -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">💾</span>
<h4 class="text-xl font-bold text-white" data-en="Storage & Backup" data-nl="Opslag & Backup">Storage & Backup</h4>
<p class="text-gray-400 text-sm" data-en="5-Bay RAID enclosure (5x 4TB drives) handles media storage (Jellyfin) and serves as the primary backup target managed by UrBackup." data-nl="5-Bay RAID behuizing (5x 4TB schijven) verzorgt mediaopslag (Jellyfin) en dient als primair backupdoel beheerd door UrBackup.">
5-Bay RAID enclosure (4x 4TB drives) handles media storage (Jellyfin) and serves as the primary backup target managed by UrBackup.
</p>
<span class="text-gray-500 text-sm block pt-2" data-en="Data Integrity is Key" data-nl="Data-integriteit is Cruciaal">Data Integrity is Key</span>
</div>
<!-- Card 4: Home Automation -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">🏠</span>
<h4 class="text-xl font-bold text-white">Home Assistant & IoT</h4>
<p class="text-gray-400 text-sm" data-en="Running on Proxmox, using Conbee II and SkyConnect. All accessible via secure Cloudflare tunnel." data-nl="Draait op Proxmox, gebruikmakend van Conbee II en SkyConnect. Alles toegankelijk via een beveiligde Cloudflare-tunnel.">
Running on Proxmox, using Conbee II and SkyConnect. All accessible via secure Cloudflare tunnel at mijnhuisje.paho-tilburg.nl.
</p>
<a href="https://mijnhuisje.paho-tilburg.nl" target="_blank" class="text-light-orange text-sm hover:underline block pt-2" data-en="Home Assistant Access" data-nl="Home Assistant Toegang">Home Assistant Access</a>
</div>
<!-- Card 5: Digital Fabrication -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">🧵</span>
<h4 class="text-xl font-bold text-white" data-en="3D Printing & CNC" data-nl="3D Printen & CNC">3D Printing & CNC</h4>
<p class="text-gray-400 text-sm" data-en="Prusa i3 MK2.5 (Octoprint) and Workbee CNC (CNC-JS). Used for various personal and custom hardware projects." data-nl="Prusa i3 MK2.5 (Octoprint) en Workbee CNC (CNC-JS). Gebruikt voor diverse persoonlijke en op maat gemaakte hardwareprojecten.">
Prusa i3 MK2.5 (Octoprint) and Workbee CNC (CNC-JS). Used for various personal and custom hardware projects.
</p>
<span class="text-gray-500 text-sm block pt-2" data-en="Fabrication Zone" data-nl="Fabricage Zone">Fabrication Zone</span>
</div>
<!-- Card 6: Monitoring & Security -->
<div class="bg-black/50 p-6 rounded-xl border border-gray-700 space-y-3 shadow-xl transition hover:shadow-orange-500/30">
<span class="text-3xl text-accent-orange">👁️</span>
<h4 class="text-xl font-bold text-white">Uptime Kuma & Nginx PM</h4>
<p class="text-gray-400 text-sm" data-en="Uptime Kuma monitors service health. Nginx Proxy Manager handles secure reverse proxies for all services." data-nl="Uptime Kuma bewaakt de status van diensten. Nginx Proxy Manager verzorgt beveiligde reverse proxies voor alle diensten.">
Uptime Kuma monitors service health. Nginx Proxy Manager handles secure reverse proxies for all services, including Cloudflare DNS.
</p>
<span class="text-gray-500 text-sm block pt-2" data-en="Always Observing" data-nl="Altijd Observerend">Always Observing</span>
</div>
</div>
</div>
</section>
<!-- 5. Projects Section -->
<section id="projects" class="py-20 section-gradient">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-bold text-center text-white mb-12" data-en="Current & Finished Projects" data-nl="Lopende & Afgeronde Projecten">Current & Finished Projects</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Project 1 -->
<div class="bg-black/50 p-8 rounded-xl shadow-2xl border-l-4 border-accent-orange space-y-3">
<span class="text-sm font-semibold uppercase text-accent-orange" data-en="Finished" data-nl="Afgerond">Finished</span>
<h3 class="text-2xl font-bold text-white" data-en="High-Availability Proxmox Cluster" data-nl="High-Availability Proxmox Cluster">High-Availability Proxmox Cluster</h3>
<p class="text-gray-400" data-en="Successfully configured three GMKtec M5 mini-PCs into a production-ready HA cluster for zero-downtime service hosting." data-nl="Drie GMKtec M5 mini-pc's succesvol geconfigureerd tot een productie-ready HA-cluster voor hosting zonder downtime.">Successfully configured three GMKtec M5 mini-PCs into a production-ready HA cluster for zero-downtime service hosting. Includes shared storage configuration.</p>
</div>
<!-- Project 2 -->
<div class="bg-black/50 p-8 rounded-xl shadow-2xl border-l-4 border-yellow-500 space-y-3">
<span class="text-sm font-semibold uppercase text-yellow-500" data-en="In Progress" data-nl="In Behandeling">In Progress</span>
<h3 class="text-2xl font-bold text-white" data-en="Network Segmentation" data-nl="Netwerk Segmentatie">Network Segmentation & VLAN Hardening</h3>
<p class="text-gray-400" data-en="Implementing strict firewall rules between the five VLAN groups using the ER605 and managed switches." data-nl="Implementatie van strikte firewall-regels tussen de vijf VLAN-groepen met de ER605 en managed switches.">Implementing strict firewall rules between the five VLAN groups (Servers, HA, Main, Guest, Network Equipment) using the ER605 and managed switches.</p>
</div>
<!-- Project 3 -->
<div class="bg-black/50 p-8 rounded-xl shadow-2xl border-l-4 border-accent-orange space-y-3">
<span class="text-sm font-semibold uppercase text-accent-orange" data-en="Finished" data-nl="Afgerond">Finished</span>
<h3 class="text-2xl font-bold text-white" data-en="Cloudflare Tunnel" data-nl="Cloudflare Tunnel">Cloudflare Tunnel for Home Assistant</h3>
<p class="text-gray-400" data-en="Setup a secure access point for Home Assistant using Cloudflare's secure tunnel service, eliminating open ports." data-nl="Beveiligd toegangspunt opgezet voor Home Assistant via de Cloudflare tunnel-service, waardoor open poorten overbodig zijn.">Setup a secure, reverse-proxied access point for Home Assistant using a CNAME (`mijnhuisje.paho-tilburg.nl`) and Cloudflare's secure tunnel service, eliminating open ports.</p>
</div>
<!-- Project 4 -->
<div class="bg-black/50 p-8 rounded-xl shadow-2xl border-l-4 border-yellow-500 space-y-3">
<span class="text-sm font-semibold uppercase text-yellow-500" data-en="In Progress" data-nl="In Behandeling">In Progress</span>
<h3 class="text-2xl font-bold text-white" data-en="ESPHome Integration" data-nl="ESPHome Integratie">Advanced ESPHome Device Integration</h3>
<p class="text-gray-400" data-en="Developing custom ESPHome code for various sensor inputs and integrating Ebyte devices via MQTT." data-nl="Ontwikkeling van custom ESPHome code voor diverse sensoren en integratie van Ebyte apparaten via MQTT.">Developing custom ESPHome code for various sensor inputs and integrating the UTP-to-RS232 Ebyte devices into the Home Assistant ecosystem via MQTT (Mosquitto).</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black/70 mt-12 py-8 border-t border-orange-500/20">
<div class="max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm">
<p data-en="© 2025 Paho-Tilburg Personal Website. Built with Tailwind CSS for a modern, responsive look." data-nl="© 2025 Paho-Tilburg Persoonlijke Website. Gebouwd met Tailwind CSS voor een moderne, responsive look.">© 2025 Paho-Tilburg Personal Website. Built with Tailwind CSS for a modern, responsive look.</p>
</div>
</footer>
</div>
<script>
// Language Toggle Logic
let currentLang = localStorage.getItem('paho-lang') || 'en';
function updateContent() {
document.querySelectorAll('[data-en]').forEach(el => {
el.innerText = el.getAttribute(`data-${currentLang}`);
});
// Update Toggle Button Text
document.getElementById('lang-text').innerText = currentLang === 'en' ? 'NL' : 'EN';
// Custom event for the server refresh script if needed
window.dispatchEvent(new CustomEvent('languageChanged', { detail: currentLang }));
}
function toggleLanguage() {
currentLang = currentLang === 'en' ? 'nl' : 'en';
localStorage.setItem('paho-lang', currentLang);
updateContent();
}
// Initialize on load
document.addEventListener('DOMContentLoaded', updateContent);
</script>