en

assets/css/custom/modern.css

@@ -1019,6 +1019,49 @@ p { margin: 0 0 1em; color: var(--c-text-dim); }
     box-shadow: 0 10px 24px rgba(0, 242, 255, .35);
 }
 
+/* ---------- Language toggle ---------- */
+.mx-lang-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 14px;
+    border-radius: var(--r-pill);
+    background: rgba(255, 255, 255, .04);
+    border: 1px solid var(--c-border);
+    color: var(--c-text);
+    font-family: var(--f-mono);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    cursor: pointer;
+    transition: all .3s var(--ease-out);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+}
+.mx-lang-toggle:hover {
+    background: rgba(0, 242, 255, .08);
+    border-color: rgba(0, 242, 255, .45);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 22px rgba(0, 242, 255, .2);
+}
+.mx-lang-toggle:active {
+    transform: translateY(0);
+}
+.mx-lang-flag {
+    font-size: 16px;
+    line-height: 1;
+}
+.mx-lang-code {
+    color: var(--c-accent);
+}
+@media (max-width: 900px) {
+    .mx-lang-toggle {
+        padding: 6px 10px;
+        font-size: 11px;
+    }
+    .mx-lang-toggle .mx-lang-code { display: none; }
+}
+
 /* ---------- Self-hosted Git banner ---------- */
 .mx-git-banner {
     position: relative;

index.html

@@ -4,17 +4,17 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Opzeker IT — DevOps, Cloud (Azure & AWS) en automatisering. Wij leveren schaalbare, veilige en futureproof IT-infrastructuur met een pragmatische aanpak.">
+    <meta name="description" data-i18n="meta.description" content="Opzeker IT — DevOps, Cloud (Azure & AWS) en automatisering. Wij leveren schaalbare, veilige en futureproof IT-infrastructuur met een pragmatische aanpak.">
     <meta name="author" content="Opzeker IT">
     <meta name="theme-color" content="#05060d">
 
     <!-- Open Graph -->
     <meta property="og:title" content="Opzeker IT — Cloud · DevOps · Automation">
-    <meta property="og:description" content="Wij zetten jouw IT-infrastructuur onder controle. Azure, AWS, DevOps & automation door specialisten.">
+    <meta property="og:description" data-i18n-attr="content" data-i18n="meta.ogDescription" content="Wij zetten jouw IT-infrastructuur onder controle. Azure, AWS, DevOps & automation door specialisten.">
     <meta property="og:type" content="website">
     <meta property="og:image" content="assets/images/OpzekerIT_logo.png">
 
-    <title>Opzeker IT — Cloud · DevOps · Automation</title>
+    <title data-i18n="meta.title">Opzeker IT — Cloud · DevOps · Automation</title>
 
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 
@@ -42,19 +42,25 @@
 
             <nav aria-label="Hoofdnavigatie">
                 <ul class="mx-nav-links">
-                    <li><a href="#page-top">Start</a></li>
+                    <li><a href="#page-top" data-i18n="nav.start">Start</a></li>
-                    <li><a href="#about">Over ons</a></li>
+                    <li><a href="#about" data-i18n="nav.about">Over ons</a></li>
-                    <li><a href="#services">Diensten</a></li>
+                    <li><a href="#services" data-i18n="nav.services">Diensten</a></li>
-                    <li><a href="#tech">Tech</a></li>
+                    <li><a href="#tech" data-i18n="nav.tech">Tech</a></li>
-                    <li><a href="#process">Aanpak</a></li>
+                    <li><a href="#process" data-i18n="nav.process">Aanpak</a></li>
-                    <li><a href="#skills">Skills</a></li>
+                    <li><a href="#skills" data-i18n="nav.skills">Skills</a></li>
-                    <li><a href="#git">Git</a></li>
+                    <li><a href="#git" data-i18n="nav.git">Git</a></li>
-                    <li><a href="#contact">Contact</a></li>
+                    <li><a href="#contact" data-i18n="nav.contact">Contact</a></li>
                 </ul>
             </nav>
 
+            <!-- Language toggle -->
+            <button class="mx-lang-toggle" id="mx-lang-toggle" aria-label="Switch language" title="Switch language">
+                <span class="mx-lang-flag" aria-hidden="true">🇳🇱</span>
+                <span class="mx-lang-code" id="mx-lang-code">NL</span>
+            </button>
+
             <a href="#contact" class="mx-nav-cta" data-magnetic="0.2">
-                Start project <span aria-hidden="true">→</span>
+                <span data-i18n="nav.cta">Start project</span> <span aria-hidden="true">→</span>
             </a>
 
             <button class="mx-burger" aria-label="Menu openen" aria-expanded="false">
@@ -71,36 +77,36 @@
     <div class="mx-container mx-hero-content">
         <div class="mx-hero-badge reveal">
             <span class="dot"></span>
-            <span>Beschikbaar voor nieuwe projecten</span>
+            <span data-i18n="hero.badge">Beschikbaar voor nieuwe projecten</span>
         </div>
 
         <h1 class="reveal delay-1">
-            Jouw IT-infrastructuur<br>
+            <span data-i18n="hero.titleLine1">Jouw IT-infrastructuur</span><br>
-            <span class="grad">onder controle.</span>
+            <span class="grad" data-i18n="hero.titleLine2">onder controle.</span>
         </h1>
 
         <div class="typed-line reveal delay-2">
             &gt; <span id="mx-typed" data-words='["Azure DevOps","AWS Cloud","Infrastructure as Code","CI/CD Pipelines","PowerShell Automation","Terraform","Kubernetes"]'></span>
         </div>
 
-        <p class="reveal delay-3">
+        <p class="reveal delay-3" data-i18n="hero.lead">
             Opzeker IT bouwt schaalbare, veilige en futureproof cloud-omgevingen.
             Van Azure en AWS tot volledig geautomatiseerde DevOps-pijplijnen — wij leveren pragmatische oplossingen waar anderen stoppen met denken.
         </p>
 
         <div class="mx-hero-ctas reveal delay-4">
             <a href="#services" class="mx-btn mx-btn-primary" data-magnetic="0.25">
-                Ontdek wat we doen
+                <span data-i18n="hero.ctaPrimary">Ontdek wat we doen</span>
                 <span class="arrow" aria-hidden="true">→</span>
             </a>
-            <a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2">
+            <a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2" data-i18n="hero.ctaGhost">
                 Plan een gesprek
             </a>
         </div>
     </div>
 
     <div class="mx-scroll-indicator" aria-hidden="true">
-        <span>Scroll</span>
+        <span data-i18n="hero.scroll">Scroll</span>
         <span class="line"></span>
     </div>
 </section>
@@ -118,7 +124,7 @@
         <span class="mx-marquee-item">Docker</span>
         <span class="mx-marquee-item">Bicep</span>
         <span class="mx-marquee-item">ARM Templates</span>
-        <span class="mx-marquee-item">Self-hosted Forgejo</span>
+        <span class="mx-marquee-item" data-i18n="marquee.forgejo">Self-hosted Forgejo</span>
     </div>
 </div>
 
@@ -134,14 +140,14 @@
             </div>
 
             <div class="mx-about-text reveal delay-1">
-                <span class="mx-eyebrow">Over ons</span>
+                <span class="mx-eyebrow" data-i18n="about.eyebrow">Over ons</span>
-                <h2>Een team van <span class="grad">DevOps-specialisten</span> met een passie voor automatisering.</h2>
+                <h2><span data-i18n="about.titlePart1">Een team van</span> <span class="grad" data-i18n="about.titleGrad">DevOps-specialisten</span> <span data-i18n="about.titlePart2">met een passie voor automatisering.</span></h2>
-                <p>
+                <p data-i18n="about.p1" data-i18n-html="true">
                     Wij zijn een team van DevOps IT-professionals met uitgebreide kennis van
                     <strong>AWS</strong> en <strong>Azure</strong> cloud services én ervaring
                     met het beheer van klassieke on-premise omgevingen.
                 </p>
-                <p>
+                <p data-i18n="about.p2">
                     Automatisering is onze passie: scripts voor beheertaken, templates,
                     configuraties en CI/CD-pijplijnen behoren tot onze favoriete bezigheden.
                     Complexe omgevingen zijn voor ons een uitdaging — door onze pragmatische
@@ -149,10 +155,10 @@
                 </p>
 
                 <div class="mx-about-pills">
-                    <span>🚀 Pragmatisch</span>
+                    <span data-i18n="about.pill1">🚀 Pragmatisch</span>
-                    <span>⚡ Automation-first</span>
+                    <span data-i18n="about.pill2">⚡ Automation-first</span>
-                    <span>🔒 Security by design</span>
+                    <span data-i18n="about.pill3">🔒 Security by design</span>
-                    <span>🌱 Continu lerend</span>
+                    <span data-i18n="about.pill4">🌱 Continu lerend</span>
                 </div>
             </div>
         </div>
@@ -165,19 +171,19 @@
         <div class="mx-stats">
             <div class="mx-stat reveal">
                 <div class="mx-stat-num"><span data-count="10" data-suffix="+">0</span></div>
-                <div class="mx-stat-label">Jaar ervaring</div>
+                <div class="mx-stat-label" data-i18n="stats.years">Jaar ervaring</div>
             </div>
             <div class="mx-stat reveal delay-1">
                 <div class="mx-stat-num"><span data-count="50" data-suffix="+">0</span></div>
-                <div class="mx-stat-label">Projecten geleverd</div>
+                <div class="mx-stat-label" data-i18n="stats.projects">Projecten geleverd</div>
             </div>
             <div class="mx-stat reveal delay-2">
                 <div class="mx-stat-num"><span data-count="99.9" data-suffix="%">0</span></div>
-                <div class="mx-stat-label">Uptime target</div>
+                <div class="mx-stat-label" data-i18n="stats.uptime">Uptime target</div>
             </div>
             <div class="mx-stat reveal delay-3">
                 <div class="mx-stat-num"><span data-count="100" data-suffix="%">0</span></div>
-                <div class="mx-stat-label">Automation focus</div>
+                <div class="mx-stat-label" data-i18n="stats.automation">Automation focus</div>
             </div>
         </div>
     </div>
@@ -187,9 +193,9 @@
 <section class="mx-section" id="services">
     <div class="mx-container">
         <div class="reveal" style="text-align:center; margin: 0 auto 60px; max-width: 720px;">
-            <span class="mx-eyebrow">Diensten</span>
+            <span class="mx-eyebrow" data-i18n="services.eyebrow">Diensten</span>
-            <h2 class="mx-section-title">Wat wij <span class="grad">voor jou doen</span></h2>
+            <h2 class="mx-section-title"><span data-i18n="services.titlePart1">Wat wij</span> <span class="grad" data-i18n="services.titleGrad">voor jou doen</span></h2>
-            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
+            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;" data-i18n="services.subtitle">
                 Van strategie tot implementatie en beheer — een complete DevOps-partner
                 voor jouw cloud- en infrastructuurbehoeften.
             </p>
@@ -198,68 +204,68 @@
         <div class="mx-services-grid">
             <article class="mx-service-card reveal" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-cloud" aria-hidden="true"></i></div>
-                <h3>Cloud Oplossingen</h3>
+                <h3 data-i18n="services.cloud.title">Cloud Oplossingen</h3>
-                <p>
+                <p data-i18n="services.cloud.body" data-i18n-html="true">
                     Ontwerp, implementatie en beheer van schaalbare en kostenefficiënte
                     cloud-architecturen op <strong>Azure</strong> en <strong>AWS</strong>.
                     Landing zones, migraties, multi-tenant setups — we regelen het.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
 
             <article class="mx-service-card reveal delay-1" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div>
-                <h3>DevOps &amp; Automatisering</h3>
+                <h3 data-i18n="services.devops.title">DevOps &amp; Automatisering</h3>
-                <p>
+                <p data-i18n="services.devops.body" data-i18n-html="true">
                     CI/CD-pijplijnen, Infrastructure as Code en scripting die jouw
                     ontwikkel- en releaseproces versnellen. <strong>Terraform</strong>,
                     <strong>Bicep</strong>, <strong>Azure DevOps</strong> en GitHub Actions.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
 
             <article class="mx-service-card reveal delay-2" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-server" aria-hidden="true"></i></div>
-                <h3>On-Premise Beheer</h3>
+                <h3 data-i18n="services.onprem.title">On-Premise Beheer</h3>
-                <p>
+                <p data-i18n="services.onprem.body">
                     Uitgebreide ondersteuning voor traditionele Windows Server en
                     hybrid omgevingen. Migratie-trajecten naar de cloud met zero downtime
                     als norm, niet als uitzondering.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
 
             <article class="mx-service-card reveal" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-shield" aria-hidden="true"></i></div>
-                <h3>Security &amp; Compliance</h3>
+                <h3 data-i18n="services.security.title">Security &amp; Compliance</h3>
-                <p>
+                <p data-i18n="services.security.body" data-i18n-html="true">
                     Identity, governance, monitoring en hardening — een security-first
                     approach die past bij <em>zero-trust</em> principes. We zorgen dat
                     je veilig slaapt én voldoet aan de norm.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
 
             <article class="mx-service-card reveal delay-1" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-code" aria-hidden="true"></i></div>
-                <h3>Scripting &amp; Tooling</h3>
+                <h3 data-i18n="services.scripting.title">Scripting &amp; Tooling</h3>
-                <p>
+                <p data-i18n="services.scripting.body">
                     PowerShell, Python en REST API's — rapportages, bulk-operaties en
                     integraties die handmatig werk volledig wegautomatiseren.
                     Uren terug in je week.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
 
             <article class="mx-service-card reveal delay-2" data-tilt="4">
                 <div class="mx-service-icon"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
-                <h3>Consultancy &amp; Strategie</h3>
+                <h3 data-i18n="services.consultancy.title">Consultancy &amp; Strategie</h3>
-                <p>
+                <p data-i18n="services.consultancy.body">
                     Een helder technisch kompas voor cloud-adoptie, DevOps-transformatie
                     of een concrete second opinion op je architectuur. We denken mee,
                     niet mee-praten.
                 </p>
-                <a class="arrow-link" href="#contact">Meer weten <span aria-hidden="true">→</span></a>
+                <a class="arrow-link" href="#contact"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
             </article>
         </div>
     </div>
@@ -269,9 +275,9 @@
 <section class="mx-section" id="tech" style="padding-top: 0;">
     <div class="mx-container">
         <div class="reveal" style="text-align:center; margin: 0 auto 60px; max-width: 720px;">
-            <span class="mx-eyebrow">Tech stack</span>
+            <span class="mx-eyebrow" data-i18n="tech.eyebrow">Tech stack</span>
-            <h2 class="mx-section-title">Gereedschap dat we <span class="grad">dagelijks gebruiken</span></h2>
+            <h2 class="mx-section-title"><span data-i18n="tech.titlePart1">Gereedschap dat we</span> <span class="grad" data-i18n="tech.titleGrad">dagelijks gebruiken</span></h2>
-            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
+            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;" data-i18n="tech.subtitle">
                 Proven technologies, battle-tested in productie.
             </p>
         </div>
@@ -290,7 +296,7 @@
             <div class="mx-tech reveal delay-1"><i class="fa fa-database"></i><span>SQL</span></div>
             <div class="mx-tech reveal delay-2"><i class="fa fa-file-code-o"></i><span>Bicep</span></div>
             <div class="mx-tech reveal delay-3"><i class="fa fa-cloud-upload"></i><span>REST API</span></div>
-            <div class="mx-tech reveal"><i class="fa fa-code-fork"></i><span>Forgejo (self-hosted)</span></div>
+            <div class="mx-tech reveal"><i class="fa fa-code-fork"></i><span data-i18n="tech.forgejo">Forgejo (self-hosted)</span></div>
         </div>
     </div>
 </section>
@@ -301,27 +307,27 @@
         <div class="mx-git-banner reveal">
             <div class="mx-git-banner-glow" aria-hidden="true"></div>
             <div class="mx-git-banner-content">
-                <span class="mx-eyebrow">Self-hosted</span>
+                <span class="mx-eyebrow" data-i18n="git.eyebrow">Self-hosted</span>
-                <h2>Onze eigen <span class="grad">Git-server</span> — <code>git.opzeker.it</code></h2>
+                <h2><span data-i18n="git.titlePart1">Onze eigen</span> <span class="grad" data-i18n="git.titleGrad">Git-server</span> — <code>git.opzeker.it</code></h2>
-                <p>
+                <p data-i18n="git.body" data-i18n-html="true">
                     We <em>eten ons eigen hondenvoer</em>: al onze code, Infrastructure as Code en
                     automation-scripts staan op een zelf-gehoste <strong>Forgejo</strong>-instance.
                     Volledig in eigen beheer, met onze eigen CI/CD, backups en monitoring —
                     een voorbeeld van wat we ook voor jou kunnen draaien.
                 </p>
                 <div class="mx-git-features">
-                    <span><i class="fa fa-lock" aria-hidden="true"></i> Eigen beheer &amp; data</span>
+                    <span><i class="fa fa-lock" aria-hidden="true"></i> <span data-i18n="git.feature1">Eigen beheer &amp; data</span></span>
-                    <span><i class="fa fa-shield" aria-hidden="true"></i> Hardened &amp; gemonitord</span>
+                    <span><i class="fa fa-shield" aria-hidden="true"></i> <span data-i18n="git.feature2">Hardened &amp; gemonitord</span></span>
-                    <span><i class="fa fa-cogs" aria-hidden="true"></i> CI/CD ready</span>
+                    <span><i class="fa fa-cogs" aria-hidden="true"></i> <span data-i18n="git.feature3">CI/CD ready</span></span>
-                    <span><i class="fa fa-cloud" aria-hidden="true"></i> Hybrid cloud</span>
+                    <span><i class="fa fa-cloud" aria-hidden="true"></i> <span data-i18n="git.feature4">Hybrid cloud</span></span>
                 </div>
                 <div style="display:flex; gap:14px; flex-wrap:wrap; margin-top: 28px;">
                     <a href="https://git.opzeker.it/lanta/opzekerIT" target="_blank" rel="noopener" class="mx-btn mx-btn-primary" data-magnetic="0.25">
                         <i class="fa fa-code-fork" aria-hidden="true"></i>
-                        Bezoek git.opzeker.it
+                        <span data-i18n="git.ctaPrimary">Bezoek git.opzeker.it</span>
                         <span class="arrow" aria-hidden="true">→</span>
                     </a>
-                    <a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2">
+                    <a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2" data-i18n="git.ctaGhost">
                         Zelf zo'n setup? Vraag het ons
                     </a>
                 </div>
@@ -347,9 +353,9 @@
 <section class="mx-section" id="process">
     <div class="mx-container">
         <div class="reveal" style="text-align:center; margin: 0 auto 60px; max-width: 720px;">
-            <span class="mx-eyebrow">Onze aanpak</span>
+            <span class="mx-eyebrow" data-i18n="process.eyebrow">Onze aanpak</span>
-            <h2 class="mx-section-title">Van idee naar <span class="grad">productie</span></h2>
+            <h2 class="mx-section-title"><span data-i18n="process.titlePart1">Van idee naar</span> <span class="grad" data-i18n="process.titleGrad">productie</span></h2>
-            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
+            <p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;" data-i18n="process.subtitle">
                 Transparant, iteratief en meetbaar. Geen verrassingen — wel resultaat.
             </p>
         </div>
@@ -357,23 +363,23 @@
         <div class="mx-process">
             <div class="mx-process-step reveal">
                 <div class="mx-process-num">01 — DISCOVERY</div>
-                <h4>Analyse &amp; scope</h4>
+                <h4 data-i18n="process.step1.title">Analyse &amp; scope</h4>
-                <p>We brengen je huidige situatie, doelstellingen en randvoorwaarden scherp in kaart.</p>
+                <p data-i18n="process.step1.body">We brengen je huidige situatie, doelstellingen en randvoorwaarden scherp in kaart.</p>
             </div>
             <div class="mx-process-step reveal delay-1">
                 <div class="mx-process-num">02 — DESIGN</div>
-                <h4>Architectuur</h4>
+                <h4 data-i18n="process.step2.title">Architectuur</h4>
-                <p>Een pragmatisch ontwerp met best practices op het gebied van schaalbaarheid en security.</p>
+                <p data-i18n="process.step2.body">Een pragmatisch ontwerp met best practices op het gebied van schaalbaarheid en security.</p>
             </div>
             <div class="mx-process-step reveal delay-2">
                 <div class="mx-process-num">03 — BUILD</div>
-                <h4>Implementatie</h4>
+                <h4 data-i18n="process.step3.title">Implementatie</h4>
-                <p>Infrastructure as Code, CI/CD en automation — alles reproduceerbaar en versioned.</p>
+                <p data-i18n="process.step3.body">Infrastructure as Code, CI/CD en automation — alles reproduceerbaar en versioned.</p>
             </div>
             <div class="mx-process-step reveal delay-3">
                 <div class="mx-process-num">04 — RUN</div>
-                <h4>Beheer &amp; evolutie</h4>
+                <h4 data-i18n="process.step4.title">Beheer &amp; evolutie</h4>
-                <p>Monitoring, kostenoptimalisatie en continue verbetering. Wij blijven betrokken.</p>
+                <p data-i18n="process.step4.body">Monitoring, kostenoptimalisatie en continue verbetering. Wij blijven betrokken.</p>
             </div>
         </div>
     </div>
@@ -383,8 +389,8 @@
 <section class="mx-section" id="skills" style="padding-top: 0;">
     <div class="mx-container">
         <div class="reveal" style="max-width: 720px; margin-bottom: 60px;">
-            <span class="mx-eyebrow">Skills</span>
+            <span class="mx-eyebrow" data-i18n="skills.eyebrow">Skills</span>
-            <h2 class="mx-section-title">Waar we <span class="grad">écht goed in zijn</span></h2>
+            <h2 class="mx-section-title"><span data-i18n="skills.titlePart1">Waar we</span> <span class="grad" data-i18n="skills.titleGrad">écht goed in zijn</span></h2>
         </div>
 
         <div class="mx-skills-wrap reveal delay-1">
@@ -436,17 +442,17 @@
 <section class="mx-section" style="padding-top: 0;">
     <div class="mx-container">
         <div class="mx-cta-banner reveal">
-            <span class="mx-eyebrow" style="margin: 0 auto 20px;">Let's talk</span>
+            <span class="mx-eyebrow" style="margin: 0 auto 20px;" data-i18n="cta.eyebrow">Let's talk</span>
-            <h2>Klaar om <span class="grad">écht vooruit</span> te gaan?</h2>
+            <h2><span data-i18n="cta.titlePart1">Klaar om</span> <span class="grad" data-i18n="cta.titleGrad">écht vooruit</span> <span data-i18n="cta.titlePart2">te gaan?</span></h2>
-            <p>Vertel ons over jouw uitdaging. Binnen 24 uur plannen we een call en maken we samen een plan.</p>
+            <p data-i18n="cta.body">Vertel ons over jouw uitdaging. Binnen 24 uur plannen we een call en maken we samen een plan.</p>
             <div style="display:flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
                 <a href="#contact" class="mx-btn mx-btn-primary" data-magnetic="0.25">
-                    Start een project
+                    <span data-i18n="cta.ctaPrimary">Start een project</span>
                     <span class="arrow" aria-hidden="true">→</span>
                 </a>
                 <a href="https://www.linkedin.com/in/thijsstobbelaar/" target="_blank" rel="noopener" class="mx-btn mx-btn-ghost" data-magnetic="0.2">
                     <i class="fa fa-linkedin" aria-hidden="true"></i>
-                    Bekijk LinkedIn
+                    <span data-i18n="cta.ctaGhost">Bekijk LinkedIn</span>
                 </a>
             </div>
         </div>
@@ -458,9 +464,9 @@
     <div class="mx-container">
         <div class="mx-contact-grid">
             <div class="mx-contact-info reveal">
-                <span class="mx-eyebrow">Contact</span>
+                <span class="mx-eyebrow" data-i18n="contact.eyebrow">Contact</span>
-                <h2>Laten we <span class="grad">kennismaken</span></h2>
+                <h2><span data-i18n="contact.titlePart1">Laten we</span> <span class="grad" data-i18n="contact.titleGrad">kennismaken</span></h2>
-                <p>
+                <p data-i18n="contact.body">
                     Een vraag, een project of gewoon eens sparren over jouw cloud-strategie?
                     We reageren snel en denken graag mee.
                 </p>
@@ -486,14 +492,14 @@
                     <li>
                         <span class="mx-contact-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
                         <div>
-                            <p class="mx-contact-meta">E-mail</p>
+                            <p class="mx-contact-meta" data-i18n="contact.email">E-mail</p>
                             <p class="mx-contact-val"><a href="mailto:thijs@opzeker.it">thijs@opzeker.it</a></p>
                         </div>
                     </li>
                     <li>
                         <span class="mx-contact-icon"><i class="fa fa-phone" aria-hidden="true"></i></span>
                         <div>
-                            <p class="mx-contact-meta">Telefoon</p>
+                            <p class="mx-contact-meta" data-i18n="contact.phone">Telefoon</p>
                             <p class="mx-contact-val"><a href="tel:+31611054521">+31 (0) 6 110 545 21</a></p>
                         </div>
                     </li>
@@ -514,8 +520,8 @@
                     <li>
                         <span class="mx-contact-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                         <div>
-                            <p class="mx-contact-meta">Locatie</p>
+                            <p class="mx-contact-meta" data-i18n="contact.location">Locatie</p>
-                            <p class="mx-contact-val">Nederland — remote first</p>
+                            <p class="mx-contact-val" data-i18n="contact.locationVal">Nederland — remote first</p>
                         </div>
                     </li>
                 </ul>
@@ -534,6 +540,303 @@
 <!-- =============== SCRIPTS =============== -->
 <script>document.getElementById('mx-year').textContent = new Date().getFullYear();</script>
 
+<!-- =============== I18N (NL / EN) =============== -->
+<script>
+(function () {
+    const I18N = {
+        nl: {
+            "meta.title": "Opzeker IT — Cloud · DevOps · Automation",
+            "meta.description": "Opzeker IT — DevOps, Cloud (Azure & AWS) en automatisering. Wij leveren schaalbare, veilige en futureproof IT-infrastructuur met een pragmatische aanpak.",
+            "meta.ogDescription": "Wij zetten jouw IT-infrastructuur onder controle. Azure, AWS, DevOps & automation door specialisten.",
+
+            "nav.start": "Start",
+            "nav.about": "Over ons",
+            "nav.services": "Diensten",
+            "nav.tech": "Tech",
+            "nav.process": "Aanpak",
+            "nav.skills": "Skills",
+            "nav.git": "Git",
+            "nav.contact": "Contact",
+            "nav.cta": "Start project",
+
+            "hero.badge": "Beschikbaar voor nieuwe projecten",
+            "hero.titleLine1": "Jouw IT-infrastructuur",
+            "hero.titleLine2": "onder controle.",
+            "hero.lead": "Opzeker IT bouwt schaalbare, veilige en futureproof cloud-omgevingen. Van Azure en AWS tot volledig geautomatiseerde DevOps-pijplijnen — wij leveren pragmatische oplossingen waar anderen stoppen met denken.",
+            "hero.ctaPrimary": "Ontdek wat we doen",
+            "hero.ctaGhost": "Plan een gesprek",
+            "hero.scroll": "Scroll",
+
+            "marquee.forgejo": "Self-hosted Forgejo",
+
+            "about.eyebrow": "Over ons",
+            "about.titlePart1": "Een team van",
+            "about.titleGrad": "DevOps-specialisten",
+            "about.titlePart2": "met een passie voor automatisering.",
+            "about.p1": "Wij zijn een team van DevOps IT-professionals met uitgebreide kennis van <strong>AWS</strong> en <strong>Azure</strong> cloud services én ervaring met het beheer van klassieke on-premise omgevingen.",
+            "about.p2": "Automatisering is onze passie: scripts voor beheertaken, templates, configuraties en CI/CD-pijplijnen behoren tot onze favoriete bezigheden. Complexe omgevingen zijn voor ons een uitdaging — door onze pragmatische aanpak komen we met oplossingen waar anderen vaak niet aan denken.",
+            "about.pill1": "🚀 Pragmatisch",
+            "about.pill2": "⚡ Automation-first",
+            "about.pill3": "🔒 Security by design",
+            "about.pill4": "🌱 Continu lerend",
+
+            "stats.years": "Jaar ervaring",
+            "stats.projects": "Projecten geleverd",
+            "stats.uptime": "Uptime target",
+            "stats.automation": "Automation focus",
+
+            "services.eyebrow": "Diensten",
+            "services.titlePart1": "Wat wij",
+            "services.titleGrad": "voor jou doen",
+            "services.subtitle": "Van strategie tot implementatie en beheer — een complete DevOps-partner voor jouw cloud- en infrastructuurbehoeften.",
+            "services.learnMore": "Meer weten",
+            "services.cloud.title": "Cloud Oplossingen",
+            "services.cloud.body": "Ontwerp, implementatie en beheer van schaalbare en kostenefficiënte cloud-architecturen op <strong>Azure</strong> en <strong>AWS</strong>. Landing zones, migraties, multi-tenant setups — we regelen het.",
+            "services.devops.title": "DevOps & Automatisering",
+            "services.devops.body": "CI/CD-pijplijnen, Infrastructure as Code en scripting die jouw ontwikkel- en releaseproces versnellen. <strong>Terraform</strong>, <strong>Bicep</strong>, <strong>Azure DevOps</strong> en GitHub Actions.",
+            "services.onprem.title": "On-Premise Beheer",
+            "services.onprem.body": "Uitgebreide ondersteuning voor traditionele Windows Server en hybrid omgevingen. Migratie-trajecten naar de cloud met zero downtime als norm, niet als uitzondering.",
+            "services.security.title": "Security & Compliance",
+            "services.security.body": "Identity, governance, monitoring en hardening — een security-first approach die past bij <em>zero-trust</em> principes. We zorgen dat je veilig slaapt én voldoet aan de norm.",
+            "services.scripting.title": "Scripting & Tooling",
+            "services.scripting.body": "PowerShell, Python en REST API's — rapportages, bulk-operaties en integraties die handmatig werk volledig wegautomatiseren. Uren terug in je week.",
+            "services.consultancy.title": "Consultancy & Strategie",
+            "services.consultancy.body": "Een helder technisch kompas voor cloud-adoptie, DevOps-transformatie of een concrete second opinion op je architectuur. We denken mee, niet mee-praten.",
+
+            "tech.eyebrow": "Tech stack",
+            "tech.titlePart1": "Gereedschap dat we",
+            "tech.titleGrad": "dagelijks gebruiken",
+            "tech.subtitle": "Proven technologies, battle-tested in productie.",
+            "tech.forgejo": "Forgejo (self-hosted)",
+
+            "git.eyebrow": "Self-hosted",
+            "git.titlePart1": "Onze eigen",
+            "git.titleGrad": "Git-server",
+            "git.body": "We <em>eten ons eigen hondenvoer</em>: al onze code, Infrastructure as Code en automation-scripts staan op een zelf-gehoste <strong>Forgejo</strong>-instance. Volledig in eigen beheer, met onze eigen CI/CD, backups en monitoring — een voorbeeld van wat we ook voor jou kunnen draaien.",
+            "git.feature1": "Eigen beheer & data",
+            "git.feature2": "Hardened & gemonitord",
+            "git.feature3": "CI/CD ready",
+            "git.feature4": "Hybrid cloud",
+            "git.ctaPrimary": "Bezoek git.opzeker.it",
+            "git.ctaGhost": "Zelf zo'n setup? Vraag het ons",
+
+            "process.eyebrow": "Onze aanpak",
+            "process.titlePart1": "Van idee naar",
+            "process.titleGrad": "productie",
+            "process.subtitle": "Transparant, iteratief en meetbaar. Geen verrassingen — wel resultaat.",
+            "process.step1.title": "Analyse & scope",
+            "process.step1.body": "We brengen je huidige situatie, doelstellingen en randvoorwaarden scherp in kaart.",
+            "process.step2.title": "Architectuur",
+            "process.step2.body": "Een pragmatisch ontwerp met best practices op het gebied van schaalbaarheid en security.",
+            "process.step3.title": "Implementatie",
+            "process.step3.body": "Infrastructure as Code, CI/CD en automation — alles reproduceerbaar en versioned.",
+            "process.step4.title": "Beheer & evolutie",
+            "process.step4.body": "Monitoring, kostenoptimalisatie en continue verbetering. Wij blijven betrokken.",
+
+            "skills.eyebrow": "Skills",
+            "skills.titlePart1": "Waar we",
+            "skills.titleGrad": "écht goed in zijn",
+
+            "cta.eyebrow": "Let's talk",
+            "cta.titlePart1": "Klaar om",
+            "cta.titleGrad": "écht vooruit",
+            "cta.titlePart2": "te gaan?",
+            "cta.body": "Vertel ons over jouw uitdaging. Binnen 24 uur plannen we een call en maken we samen een plan.",
+            "cta.ctaPrimary": "Start een project",
+            "cta.ctaGhost": "Bekijk LinkedIn",
+
+            "contact.eyebrow": "Contact",
+            "contact.titlePart1": "Laten we",
+            "contact.titleGrad": "kennismaken",
+            "contact.body": "Een vraag, een project of gewoon eens sparren over jouw cloud-strategie? We reageren snel en denken graag mee.",
+            "contact.email": "E-mail",
+            "contact.phone": "Telefoon",
+            "contact.location": "Locatie",
+            "contact.locationVal": "Nederland — remote first"
+        },
+        en: {
+            "meta.title": "Opzeker IT — Cloud · DevOps · Automation",
+            "meta.description": "Opzeker IT — DevOps, Cloud (Azure & AWS) and automation. We deliver scalable, secure and future-proof IT infrastructure with a pragmatic approach.",
+            "meta.ogDescription": "We put your IT infrastructure under control. Azure, AWS, DevOps & automation by specialists.",
+
+            "nav.start": "Home",
+            "nav.about": "About",
+            "nav.services": "Services",
+            "nav.tech": "Tech",
+            "nav.process": "Process",
+            "nav.skills": "Skills",
+            "nav.git": "Git",
+            "nav.contact": "Contact",
+            "nav.cta": "Start project",
+
+            "hero.badge": "Available for new projects",
+            "hero.titleLine1": "Your IT infrastructure",
+            "hero.titleLine2": "under control.",
+            "hero.lead": "Opzeker IT builds scalable, secure and future-proof cloud environments. From Azure and AWS to fully automated DevOps pipelines — we deliver pragmatic solutions where others stop thinking.",
+            "hero.ctaPrimary": "Discover what we do",
+            "hero.ctaGhost": "Book a call",
+            "hero.scroll": "Scroll",
+
+            "marquee.forgejo": "Self-hosted Forgejo",
+
+            "about.eyebrow": "About us",
+            "about.titlePart1": "A team of",
+            "about.titleGrad": "DevOps specialists",
+            "about.titlePart2": "with a passion for automation.",
+            "about.p1": "We are a team of DevOps IT professionals with extensive knowledge of <strong>AWS</strong> and <strong>Azure</strong> cloud services, plus experience managing classic on-premise environments.",
+            "about.p2": "Automation is our passion: scripts for management tasks, templates, configurations and CI/CD pipelines are among our favorite activities. Complex environments are a challenge for us — our pragmatic approach leads to solutions others rarely think of.",
+            "about.pill1": "🚀 Pragmatic",
+            "about.pill2": "⚡ Automation-first",
+            "about.pill3": "🔒 Security by design",
+            "about.pill4": "🌱 Always learning",
+
+            "stats.years": "Years of experience",
+            "stats.projects": "Projects delivered",
+            "stats.uptime": "Uptime target",
+            "stats.automation": "Automation focus",
+
+            "services.eyebrow": "Services",
+            "services.titlePart1": "What we",
+            "services.titleGrad": "do for you",
+            "services.subtitle": "From strategy to implementation and operations — a complete DevOps partner for your cloud and infrastructure needs.",
+            "services.learnMore": "Learn more",
+            "services.cloud.title": "Cloud Solutions",
+            "services.cloud.body": "Design, implementation and management of scalable and cost-efficient cloud architectures on <strong>Azure</strong> and <strong>AWS</strong>. Landing zones, migrations, multi-tenant setups — we handle it.",
+            "services.devops.title": "DevOps & Automation",
+            "services.devops.body": "CI/CD pipelines, Infrastructure as Code and scripting that accelerate your development and release process. <strong>Terraform</strong>, <strong>Bicep</strong>, <strong>Azure DevOps</strong> and GitHub Actions.",
+            "services.onprem.title": "On-Premise Management",
+            "services.onprem.body": "Extensive support for traditional Windows Server and hybrid environments. Migration paths to the cloud with zero downtime as the standard, not the exception.",
+            "services.security.title": "Security & Compliance",
+            "services.security.body": "Identity, governance, monitoring and hardening — a security-first approach aligned with <em>zero-trust</em> principles. We make sure you sleep well and stay compliant.",
+            "services.scripting.title": "Scripting & Tooling",
+            "services.scripting.body": "PowerShell, Python and REST APIs — reports, bulk operations and integrations that fully automate manual work. Hours back in your week.",
+            "services.consultancy.title": "Consultancy & Strategy",
+            "services.consultancy.body": "A clear technical compass for cloud adoption, DevOps transformation or a concrete second opinion on your architecture. We think along, not just talk along.",
+
+            "tech.eyebrow": "Tech stack",
+            "tech.titlePart1": "Tools we use",
+            "tech.titleGrad": "every day",
+            "tech.subtitle": "Proven technologies, battle-tested in production.",
+            "tech.forgejo": "Forgejo (self-hosted)",
+
+            "git.eyebrow": "Self-hosted",
+            "git.titlePart1": "Our own",
+            "git.titleGrad": "Git server",
+            "git.body": "We <em>eat our own dog food</em>: all our code, Infrastructure as Code and automation scripts live on a self-hosted <strong>Forgejo</strong> instance. Fully under our own management, with our own CI/CD, backups and monitoring — an example of what we can run for you too.",
+            "git.feature1": "Own management & data",
+            "git.feature2": "Hardened & monitored",
+            "git.feature3": "CI/CD ready",
+            "git.feature4": "Hybrid cloud",
+            "git.ctaPrimary": "Visit git.opzeker.it",
+            "git.ctaGhost": "Want this setup? Ask us",
+
+            "process.eyebrow": "Our approach",
+            "process.titlePart1": "From idea to",
+            "process.titleGrad": "production",
+            "process.subtitle": "Transparent, iterative and measurable. No surprises — just results.",
+            "process.step1.title": "Analysis & scope",
+            "process.step1.body": "We map out your current situation, goals and constraints with precision.",
+            "process.step2.title": "Architecture",
+            "process.step2.body": "A pragmatic design with best practices for scalability and security.",
+            "process.step3.title": "Implementation",
+            "process.step3.body": "Infrastructure as Code, CI/CD and automation — everything reproducible and versioned.",
+            "process.step4.title": "Operations & evolution",
+            "process.step4.body": "Monitoring, cost optimization and continuous improvement. We stay involved.",
+
+            "skills.eyebrow": "Skills",
+            "skills.titlePart1": "What we are",
+            "skills.titleGrad": "really good at",
+
+            "cta.eyebrow": "Let's talk",
+            "cta.titlePart1": "Ready to",
+            "cta.titleGrad": "really move forward",
+            "cta.titlePart2": "?",
+            "cta.body": "Tell us about your challenge. Within 24 hours we schedule a call and make a plan together.",
+            "cta.ctaPrimary": "Start a project",
+            "cta.ctaGhost": "View LinkedIn",
+
+            "contact.eyebrow": "Contact",
+            "contact.titlePart1": "Let's",
+            "contact.titleGrad": "get acquainted",
+            "contact.body": "A question, a project or just want to spar about your cloud strategy? We respond quickly and love to think along.",
+            "contact.email": "E-mail",
+            "contact.phone": "Phone",
+            "contact.location": "Location",
+            "contact.locationVal": "Netherlands — remote first"
+        }
+    };
+
+    const FLAGS = { nl: "🇳🇱", en: "🇬🇧" };
+    const STORAGE_KEY = "opzeker_lang";
+
+    function applyLang(lang) {
+        const dict = I18N[lang] || I18N.nl;
+        document.documentElement.lang = lang;
+
+        document.querySelectorAll("[data-i18n]").forEach((el) => {
+            const key = el.getAttribute("data-i18n");
+            const val = dict[key];
+            if (val === undefined) return;
+
+            const attrName = el.getAttribute("data-i18n-attr");
+            if (attrName) {
+                el.setAttribute(attrName, val);
+                return;
+            }
+
+            // Special: <title>
+            if (el.tagName === "TITLE") {
+                document.title = val;
+                return;
+            }
+            // Special: <meta>
+            if (el.tagName === "META") {
+                el.setAttribute("content", val);
+                return;
+            }
+
+            const useHtml = el.getAttribute("data-i18n-html") === "true" || /[<&]/.test(val);
+            if (useHtml) {
+                el.innerHTML = val;
+            } else {
+                el.textContent = val;
+            }
+        });
+
+        // Toggle button label + flag
+        const flagEl = document.querySelector(".mx-lang-flag");
+        const codeEl = document.getElementById("mx-lang-code");
+        if (flagEl) flagEl.textContent = FLAGS[lang] || FLAGS.nl;
+        if (codeEl) codeEl.textContent = lang.toUpperCase();
+
+        try { localStorage.setItem(STORAGE_KEY, lang); } catch (_) {}
+    }
+
+    function detectInitialLang() {
+        try {
+            const saved = localStorage.getItem(STORAGE_KEY);
+            if (saved && I18N[saved]) return saved;
+        } catch (_) {}
+        const browser = (navigator.language || "nl").slice(0, 2).toLowerCase();
+        return I18N[browser] ? browser : "nl";
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+        const initial = detectInitialLang();
+        applyLang(initial);
+
+        const btn = document.getElementById("mx-lang-toggle");
+        if (btn) {
+            btn.addEventListener("click", () => {
+                const current = document.documentElement.lang || "nl";
+                const next = current === "nl" ? "en" : "nl";
+                applyLang(next);
+            });
+        }
+    });
+})();
+</script>
+
 <!-- Three.js for WebGL hero -->
 <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>