en
This commit is contained in:
Lanta
parent
3f5fba9d8d
commit
8a5661e69c
2 changed files with 437 additions and 91 deletions
|
|
@ -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;
|
||||
|
|
|
|||
485
index.html
485
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="#about">Over ons</a></li>
|
||||
<li><a href="#services">Diensten</a></li>
|
||||
<li><a href="#tech">Tech</a></li>
|
||||
<li><a href="#process">Aanpak</a></li>
|
||||
<li><a href="#skills">Skills</a></li>
|
||||
<li><a href="#git">Git</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<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">
|
||||
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 class="grad">onder controle.</span>
|
||||
<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">
|
||||
<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>
|
||||
<h2>Een team van <span class="grad">DevOps-specialisten</span> met een passie voor automatisering.</h2>
|
||||
<p>
|
||||
<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>
|
||||
<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>⚡ Automation-first</span>
|
||||
<span>🔒 Security by design</span>
|
||||
<span>🌱 Continu lerend</span>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
<h2 class="mx-section-title">Wat wij <span class="grad">voor jou doen</span></h2>
|
||||
<p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
<p>
|
||||
<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">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 & Automatisering</h3>
|
||||
<p>
|
||||
<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">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>
|
||||
<p>
|
||||
<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">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 & Compliance</h3>
|
||||
<p>
|
||||
<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">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 & Tooling</h3>
|
||||
<p>
|
||||
<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">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 & Strategie</h3>
|
||||
<p>
|
||||
<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">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>
|
||||
<h2 class="mx-section-title">Gereedschap dat we <span class="grad">dagelijks gebruiken</span></h2>
|
||||
<p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
<h2>Onze eigen <span class="grad">Git-server</span> — <code>git.opzeker.it</code></h2>
|
||||
<p>
|
||||
<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> Eigen beheer & data</span>
|
||||
<span><i class="fa fa-shield" aria-hidden="true"></i> Hardened & gemonitord</span>
|
||||
<span><i class="fa fa-cogs" aria-hidden="true"></i> CI/CD ready</span>
|
||||
<span><i class="fa fa-cloud" aria-hidden="true"></i> Hybrid cloud</span>
|
||||
<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>
|
||||
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>
|
||||
<h2 class="mx-section-title">Van idee naar <span class="grad">productie</span></h2>
|
||||
<p class="mx-section-subtitle" style="margin-left:auto;margin-right:auto;">
|
||||
<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>
|
||||
|
|
@ -357,23 +363,23 @@
|
|||
<div class="mx-process">
|
||||
<div class="mx-process-step reveal">
|
||||
<div class="mx-process-num">01 — DISCOVERY</div>
|
||||
<h4>Analyse & scope</h4>
|
||||
<p>We brengen je huidige situatie, doelstellingen en randvoorwaarden scherp in kaart.</p>
|
||||
<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>Architectuur</h4>
|
||||
<p>Een pragmatisch ontwerp met best practices op het gebied van schaalbaarheid en security.</p>
|
||||
<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>Implementatie</h4>
|
||||
<p>Infrastructure as Code, CI/CD en automation — alles reproduceerbaar en versioned.</p>
|
||||
<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>Beheer & evolutie</h4>
|
||||
<p>Monitoring, kostenoptimalisatie en continue verbetering. Wij blijven betrokken.</p>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
<h2 class="mx-section-title">Waar we <span class="grad">écht goed in zijn</span></h2>
|
||||
<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">
|
||||
|
|
@ -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>
|
||||
<h2>Klaar om <span class="grad">écht vooruit</span> te gaan?</h2>
|
||||
<p>Vertel ons over jouw uitdaging. Binnen 24 uur plannen we een call en maken we samen een plan.</p>
|
||||
<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">
|
||||
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>
|
||||
<h2>Laten we <span class="grad">kennismaken</span></h2>
|
||||
<p>
|
||||
<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>
|
||||
|
|
@ -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-val">Nederland — remote first</p>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue