846 lines
47 KiB
HTML
846 lines
47 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<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" 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" 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 data-i18n="meta.title">Opzeker IT — Cloud · DevOps · Automation</title>
|
|
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Icons -->
|
|
<link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- Modern stylesheet -->
|
|
<link href="assets/css/custom/modern.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body id="page-top">
|
|
|
|
<!-- =============== NAVIGATION =============== -->
|
|
<header class="mx-header">
|
|
<div class="mx-container">
|
|
<div class="mx-nav-inner">
|
|
<a href="#page-top" class="mx-logo" aria-label="Opzeker IT — Home">
|
|
<img src="assets/images/OpzekerIT_Logo_Final_Diapositief_CMYK_small.png" alt="Opzeker IT">
|
|
</a>
|
|
|
|
<nav aria-label="Hoofdnavigatie">
|
|
<ul class="mx-nav-links">
|
|
<li><a href="#page-top" data-i18n="nav.start">Start</a></li>
|
|
<li><a href="#about" data-i18n="nav.about">Over ons</a></li>
|
|
<li><a href="#services" data-i18n="nav.services">Diensten</a></li>
|
|
<li><a href="#tech" data-i18n="nav.tech">Tech</a></li>
|
|
<li><a href="#process" data-i18n="nav.process">Aanpak</a></li>
|
|
<li><a href="#skills" data-i18n="nav.skills">Skills</a></li>
|
|
<li><a href="#git" data-i18n="nav.git">Git</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">
|
|
<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">
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- =============== HERO =============== -->
|
|
<section class="mx-hero" id="hero">
|
|
<div id="mx-webgl" aria-hidden="true"></div>
|
|
|
|
<div class="mx-container mx-hero-content">
|
|
<div class="mx-hero-badge reveal">
|
|
<span class="dot"></span>
|
|
<span data-i18n="hero.badge">Beschikbaar voor nieuwe projecten</span>
|
|
</div>
|
|
|
|
<h1 class="reveal delay-1">
|
|
<span data-i18n="hero.titleLine1">Jouw IT-infrastructuur</span><br>
|
|
<span class="grad" data-i18n="hero.titleLine2">onder controle.</span>
|
|
</h1>
|
|
|
|
<div class="typed-line reveal delay-2">
|
|
> <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" 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">
|
|
<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" data-i18n="hero.ctaGhost">
|
|
Plan een gesprek
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-scroll-indicator" aria-hidden="true">
|
|
<span data-i18n="hero.scroll">Scroll</span>
|
|
<span class="line"></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== MARQUEE =============== -->
|
|
<div class="mx-marquee" aria-hidden="true">
|
|
<div class="mx-marquee-track">
|
|
<span class="mx-marquee-item">Microsoft Azure</span>
|
|
<span class="mx-marquee-item">Amazon Web Services</span>
|
|
<span class="mx-marquee-item">Azure DevOps</span>
|
|
<span class="mx-marquee-item">GitHub Actions</span>
|
|
<span class="mx-marquee-item">Terraform</span>
|
|
<span class="mx-marquee-item">PowerShell</span>
|
|
<span class="mx-marquee-item">Kubernetes</span>
|
|
<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" data-i18n="marquee.forgejo">Self-hosted Forgejo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =============== ABOUT =============== -->
|
|
<section class="mx-section" id="about">
|
|
<div class="mx-container">
|
|
<div class="mx-about-grid">
|
|
<div class="mx-about-visual reveal" aria-hidden="true">
|
|
<div class="orb"></div>
|
|
<div class="orb-core"></div>
|
|
<div class="ring r1"></div>
|
|
<div class="ring r2"></div>
|
|
</div>
|
|
|
|
<div class="mx-about-text reveal delay-1">
|
|
<span class="mx-eyebrow" data-i18n="about.eyebrow">Over ons</span>
|
|
<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 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 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
|
|
aanpak komen we met oplossingen waar anderen vaak niet aan denken.
|
|
</p>
|
|
|
|
<div class="mx-about-pills">
|
|
<span data-i18n="about.pill1">🚀 Pragmatisch</span>
|
|
<span data-i18n="about.pill2">⚡ Automation-first</span>
|
|
<span data-i18n="about.pill3">🔒 Security by design</span>
|
|
<span data-i18n="about.pill4">🌱 Continu lerend</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== STATS =============== -->
|
|
<section class="mx-section" style="padding-top: 0;">
|
|
<div class="mx-container">
|
|
<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" 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" 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" 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" data-i18n="stats.automation">Automation focus</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== SERVICES =============== -->
|
|
<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" data-i18n="services.eyebrow">Diensten</span>
|
|
<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;" data-i18n="services.subtitle">
|
|
Van strategie tot implementatie en beheer — een complete DevOps-partner
|
|
voor jouw cloud- en infrastructuurbehoeften.
|
|
</p>
|
|
</div>
|
|
|
|
<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 data-i18n="services.cloud.title">Cloud Oplossingen</h3>
|
|
<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"><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 data-i18n="services.devops.title">DevOps & Automatisering</h3>
|
|
<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"><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 data-i18n="services.onprem.title">On-Premise Beheer</h3>
|
|
<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"><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 data-i18n="services.security.title">Security & Compliance</h3>
|
|
<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"><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 data-i18n="services.scripting.title">Scripting & Tooling</h3>
|
|
<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"><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 data-i18n="services.consultancy.title">Consultancy & Strategie</h3>
|
|
<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"><span data-i18n="services.learnMore">Meer weten</span> <span aria-hidden="true">→</span></a>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== TECH STACK =============== -->
|
|
<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" data-i18n="tech.eyebrow">Tech stack</span>
|
|
<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;" data-i18n="tech.subtitle">
|
|
Proven technologies, battle-tested in productie.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-tech-grid">
|
|
<div class="mx-tech reveal"><i class="fa fa-windows"></i><span>Azure</span></div>
|
|
<div class="mx-tech reveal delay-1"><i class="fa fa-amazon"></i><span>AWS</span></div>
|
|
<div class="mx-tech reveal delay-2"><i class="fa fa-git"></i><span>Git</span></div>
|
|
<div class="mx-tech reveal delay-3"><i class="fa fa-terminal"></i><span>PowerShell</span></div>
|
|
<div class="mx-tech reveal"><i class="fa fa-code"></i><span>Terraform</span></div>
|
|
<div class="mx-tech reveal delay-1"><i class="fa fa-cubes"></i><span>Kubernetes</span></div>
|
|
|
|
<div class="mx-tech reveal delay-2"><i class="fa fa-docker"></i><span>Docker</span></div>
|
|
<div class="mx-tech reveal delay-3"><i class="fa fa-cog"></i><span>Azure DevOps</span></div>
|
|
<div class="mx-tech reveal"><i class="fa fa-github"></i><span>GitHub</span></div>
|
|
<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 data-i18n="tech.forgejo">Forgejo (self-hosted)</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== SELF-HOSTED GIT =============== -->
|
|
<section class="mx-section" id="git" style="padding-top: 0;">
|
|
<div class="mx-container">
|
|
<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" data-i18n="git.eyebrow">Self-hosted</span>
|
|
<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 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> <span data-i18n="git.feature1">Eigen beheer & data</span></span>
|
|
<span><i class="fa fa-shield" aria-hidden="true"></i> <span data-i18n="git.feature2">Hardened & gemonitord</span></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> <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>
|
|
<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" data-i18n="git.ctaGhost">
|
|
Zelf zo'n setup? Vraag het ons
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mx-git-banner-visual" aria-hidden="true">
|
|
<div class="mx-git-terminal">
|
|
<div class="mx-git-terminal-bar">
|
|
<span></span><span></span><span></span>
|
|
<span class="mx-git-terminal-title">~ git.opzeker.it</span>
|
|
</div>
|
|
<pre class="mx-git-terminal-body"><span class="t-prompt">$</span> git remote add origin <span class="t-str">https://git.opzeker.it/lanta/project.git</span>
|
|
<span class="t-prompt">$</span> git push -u origin main
|
|
<span class="t-ok">✔</span> Forgejo · self-hosted
|
|
<span class="t-ok">✔</span> CI pipeline triggered
|
|
<span class="t-ok">✔</span> Deployed to Azure ✨</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== PROCESS =============== -->
|
|
<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" data-i18n="process.eyebrow">Onze aanpak</span>
|
|
<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;" data-i18n="process.subtitle">
|
|
Transparant, iteratief en meetbaar. Geen verrassingen — wel resultaat.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-process">
|
|
<div class="mx-process-step reveal">
|
|
<div class="mx-process-num">01 — DISCOVERY</div>
|
|
<h4 data-i18n="process.step1.title">Analyse & scope</h4>
|
|
<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 data-i18n="process.step2.title">Architectuur</h4>
|
|
<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 data-i18n="process.step3.title">Implementatie</h4>
|
|
<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 data-i18n="process.step4.title">Beheer & evolutie</h4>
|
|
<p data-i18n="process.step4.body">Monitoring, kostenoptimalisatie en continue verbetering. Wij blijven betrokken.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== SKILLS =============== -->
|
|
<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" data-i18n="skills.eyebrow">Skills</span>
|
|
<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">
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">Azure DevOps</div>
|
|
<div class="mx-skill-val">90%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="90"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">AWS Cloud</div>
|
|
<div class="mx-skill-val">85%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="85"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">Azure Cloud</div>
|
|
<div class="mx-skill-val">80%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="80"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">Git / Version Control</div>
|
|
<div class="mx-skill-val">75%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="75"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">PowerShell</div>
|
|
<div class="mx-skill-val">95%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="95"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">JSON / YAML</div>
|
|
<div class="mx-skill-val">100%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="100"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">REST API</div>
|
|
<div class="mx-skill-val">75%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="75"></div></div>
|
|
</div>
|
|
<div class="mx-skill">
|
|
<div class="mx-skill-name">Infrastructure as Code</div>
|
|
<div class="mx-skill-val">88%</div>
|
|
<div class="mx-skill-track"><div class="mx-skill-bar" data-value="88"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== CTA BANNER =============== -->
|
|
<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;" data-i18n="cta.eyebrow">Let's talk</span>
|
|
<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 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">
|
|
<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>
|
|
<span data-i18n="cta.ctaGhost">Bekijk LinkedIn</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== CONTACT =============== -->
|
|
<section class="mx-section" id="contact" style="padding-top: 0;">
|
|
<div class="mx-container">
|
|
<div class="mx-contact-grid">
|
|
<div class="mx-contact-info reveal">
|
|
<span class="mx-eyebrow" data-i18n="contact.eyebrow">Contact</span>
|
|
<h2><span data-i18n="contact.titlePart1">Laten we</span> <span class="grad" data-i18n="contact.titleGrad">kennismaken</span></h2>
|
|
<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>
|
|
|
|
<div class="mx-socials">
|
|
<a href="https://www.linkedin.com/in/thijsstobbelaar/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
|
<i class="fa fa-linkedin" aria-hidden="true"></i>
|
|
</a>
|
|
<a href="mailto:thijs@opzeker.it" aria-label="E-mail">
|
|
<i class="fa fa-envelope" aria-hidden="true"></i>
|
|
</a>
|
|
<a href="tel:+31611054521" aria-label="Telefoon">
|
|
<i class="fa fa-phone" aria-hidden="true"></i>
|
|
</a>
|
|
<a href="https://git.opzeker.it/lanta/opzekerIT" target="_blank" rel="noopener" aria-label="Git">
|
|
<i class="fa fa-git" aria-hidden="true"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-contact-card reveal delay-1">
|
|
<ul class="mx-contact-list">
|
|
<li>
|
|
<span class="mx-contact-icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
|
|
<div>
|
|
<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" 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>
|
|
<li>
|
|
<span class="mx-contact-icon"><i class="fa fa-linkedin" aria-hidden="true"></i></span>
|
|
<div>
|
|
<p class="mx-contact-meta">LinkedIn</p>
|
|
<p class="mx-contact-val"><a href="https://www.linkedin.com/in/thijsstobbelaar/" target="_blank" rel="noopener">in/thijsstobbelaar</a></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="mx-contact-icon"><i class="fa fa-git" aria-hidden="true"></i></span>
|
|
<div>
|
|
<p class="mx-contact-meta">Git</p>
|
|
<p class="mx-contact-val"><a href="https://git.opzeker.it/lanta/opzekerIT" target="_blank" rel="noopener">git.opzeker.it</a></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span class="mx-contact-icon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
|
|
<div>
|
|
<p class="mx-contact-meta" data-i18n="contact.location">Locatie</p>
|
|
<p class="mx-contact-val" data-i18n="contact.locationVal">Nederland — remote first</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- =============== FOOTER =============== -->
|
|
<footer class="mx-footer">
|
|
<div class="mx-container">
|
|
<p>© <span id="mx-year"></span> Opzeker IT — Cloud · DevOps · Automation · <a href="http://www.opzeker.it">opzeker.it</a> · <a href="https://git.opzeker.it/lanta/opzekerIT" target="_blank" rel="noopener">git.opzeker.it</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- =============== 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>
|
|
|
|
<!-- Modern site JS -->
|
|
<script src="assets/js/custom/modern.js"></script>
|
|
</body>
|
|
</html>
|