lanta/opzekerIT
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2.0

Browse source
This commit is contained in:
thijs 2026-05-08 11:59:43 +02:00
parent ac9945b918
commit 0c1341acf1
3 changed files with 1906 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

806
index.html
View file

@ -1,436 +1,482 @@
<!DOCTYPE html>
<html lang="en">
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
<meta name="description" content="">
<meta name="author" content="">
<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="author" content="Opzeker IT">
<meta name="theme-color" content="#05060d">
<title>Opzeker IT</title>
<!-- 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:type" content="website">
<meta property="og:image" content="assets/images/OpzekerIT_logo.png">
<title>Opzeker IT — Cloud · DevOps · Automation</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700%7CTitillium+Web:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
<link href="assets/fonts/material-icons/material-icons.css" rel="stylesheet">
<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">
<!-- Libraries CSS -->
<link href="assets/css/libraries/bootstrap.css" rel="stylesheet">
<link href="assets/css/libraries/animate.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/custom/theme.css" rel="stylesheet">
<link href="assets/css/custom/colors.css" rel="stylesheet">
<link href="assets/css/custom/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Modern stylesheet -->
<link href="assets/css/custom/modern.css" rel="stylesheet">
</head>
<!-- The #page-top ID is part of the scrolling feature -
the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target="#st-nav">
<body id="page-top">
<!-- Navigation Menu
================================================== -->
<header>
<div id="st-logo">
<a href="#0">
<img src="assets/images/OpzekerIT_Logo_Final_Diapositief_CMYK_small.png" alt="Logo">
</a>
<!-- =============== 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">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="#contact">Contact</a></li>
</ul>
</nav>
<a href="#contact" class="mx-nav-cta" data-magnetic="0.2">
Start project <span aria-hidden="true">→</span>
</a>
<button class="mx-burger" aria-label="Menu openen" aria-expanded="false">
<span></span>
</button>
</div>
</div>
</header>
<div id="st-nav">
<a href="#0" class="st-nav-trigger">
Menu<span></span>
</a>
<!-- =============== HERO =============== -->
<section class="mx-hero" id="hero">
<div id="mx-webgl" aria-hidden="true"></div>
<nav id="st-main-nav">
<ul>
<li>
<a class="page-scroll hvr-underline-from-center" href="#page-top">Begin</a>
</li>
<li>
<a class="page-scroll hvr-underline-from-center" href="#about">Over ons</a>
</li>
<li>
<a class="page-scroll hvr-underline-from-center" href="#services">Diensten</a>
</li>
<li>
<a class="page-scroll hvr-underline-from-center" href="#skills">Skills</a>
</li>
<li>
<a class="page-scroll hvr-underline-from-center" href="#contact">Contact</a>
</li>
</ul>
</nav>
<div class="mx-container mx-hero-content">
<div class="mx-hero-badge reveal">
<span class="dot"></span>
<span>Beschikbaar voor nieuwe projecten</span>
</div>
<h1 class="reveal delay-1">
Jouw IT-infrastructuur<br>
<span class="grad">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">
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 class="arrow" aria-hidden="true">→</span>
</a>
<a href="#contact" class="mx-btn mx-btn-ghost" data-magnetic="0.2">
Plan een gesprek
</a>
</div>
</div>
<div class="mx-scroll-indicator" aria-hidden="true">
<span>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>
</div>
</div>
<!-- /#st-nav -->
<!-- Hero Section
================================================== -->
<section id="hero" class="hero-section-2">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="particles-js"></div>
<div class="headlines-wrapper">
<span class="skilltechtypetext">
<span class="typed-cursor">|</span>
</span>
</div>
<!-- /.headlines-wrapper -->
<h3 class="first-headline">Opzeker IT your systems under controle</h3>
<!-- <h3 class="second-headline">Welcome to <span>Particle</span> by SkillTech</h3> -->
<!-- =============== 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>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.hero-section-2 -->
<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>
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>
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>
<!-- About Us Section
================================================== -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="about-text">
<h2 class="wow fadeIn animated"><span>Over ons</span></h2>
<p class="wow fadeIn animated">
Wij zijn een team van DevOps IT-professionals met uitgebreide kennis van AWS en Azure cloud services en resources. Daarnaast hebben we ervaring met het beheer van klassieke on-premise omgevingen. Automatisering is onze passie; het creëren van scripts om beheertaken, configuraties of rapportages te automatiseren, het schrijven van templates en het deployen via een CI/CD-pijplijn behoren tot onze favoriete bezigheden. Complexe IT-omgevingen zijn voor ons een uitdaging. Door onze pragmatische aanpak van problemen en vraagstukken, komen we met oplossingen waar anderen vaak niet aan denken.
Het aanleren en in de praktijk toepassen van nieuwe technieken is een van onze sterke punten.
</p>
<!-- /.about-icons -->
</div>
<!-- /.about-text -->
</div>
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /.about-section -->
<!-- Services Section
================================================== -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="services-headline">
<h2 class="wow fadeIn animated">Onze <span>Diensten</span></h2>
<p class="wow fadeIn animated">Wij bieden een reeks diensten aan om uw IT-infrastructuur te optimaliseren en te beheren.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="service-box wow fadeIn animated">
<div class="service-icon">
<i class="fa fa-cloud"></i>
</div>
<div class="service-content">
<h4>Cloud Oplossingen</h4>
<p>Wij zijn gespecialiseerd in het ontwerpen, implementeren en beheren van schaalbare en kostenefficiënte cloud-oplossingen op AWS en Azure.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="service-box wow fadeIn animated" data-wow-delay="0.2s">
<div class="service-icon">
<i class="fa fa-cogs"></i>
</div>
<div class="service-content">
<h4>DevOps & Automatisering</h4>
<p>Optimaliseer uw ontwikkelings- en implementatieprocessen met onze expertise in CI/CD, scripting en infrastructuurautomatisering.</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="service-box wow fadeIn animated" data-wow-delay="0.4s">
<div class="service-icon">
<i class="fa fa-server"></i>
</div>
<div class="service-content">
<h4>On-Premise Beheer</h4>
<p>Naast cloud-diensten bieden wij ook uitgebreide ondersteuning en beheer voor traditionele on-premise IT-omgevingen.</p>
</div>
<div class="mx-about-pills">
<span>🚀 Pragmatisch</span>
<span>⚡ Automation-first</span>
<span>🔒 Security by design</span>
<span>🌱 Continu lerend</span>
</div>
</div>
</div>
</div>
</section>
<!-- /.services-section -->
<!-- Quote Section
================================================== -->
<section id="quote" class="quote-section">
<div class="container-fluid"></div>
<div class="row">
<!-- /.quote-headline -->
<div class="col-md-12 quote-bottom">
<!-- =============== 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">Jaar ervaring</div>
</div>
<!-- /.quote-bottom -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.quote-section -->
<!-- Call To Action Section
================================================== -->
<section id="call-to" class="call-to-section">
<div class="call-to-layer"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Like what You see? <span>Get in contact</span> Now!</h3>
<p class="wow fadeIn animated">For more information see our Linkedin profile or drop us a message</p>
<button onclick="javascript:document.location='https://www.linkedin.com/in/thijsstobbelaar/'" class="btn btn-default wow fadeInRight hvr-sweep-to-right animated">Linkedin</button>
<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>
<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>
<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>
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /.call-to-section -->
<!-- Skills Section
================================================== -->
<section id="skills" class="skills-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">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;">
Van strategie tot implementatie en beheer — een complete DevOps-partner
voor jouw cloud- en infrastructuurbehoeften.
</p>
</div>
<div class="container">
<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>
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>
</article>
<div class="row">
<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>
<p>
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>
</article>
<div class="col-md-12">
<div class="skills-headline">
<h4 class="wow fadeIn animated"> <span>Onze Skills</span></h4>
<p class="wow fadeIn animated">
</p>
<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>
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>
</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>
<p>
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>
</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>
<p>
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>
</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>
<p>
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>
</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">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;">
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>
</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">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;">
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>Analyse &amp; scope</h4>
<p>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>
</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>
</div>
<div class="mx-process-step reveal delay-3">
<div class="mx-process-num">04 — RUN</div>
<h4>Beheer &amp; evolutie</h4>
<p>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">Skills</span>
<h2 class="mx-section-title">Waar we <span class="grad">é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;">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>
<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 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
</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">Contact</span>
<h2>Laten we <span class="grad">kennismaken</span></h2>
<p>
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>
</div>
</div>
<!-- /.col-md-12 -->
<div class="col-md-12 progress-bar-wrapper">
<div class="progress-bars">
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">Azure Devops</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated first-bar"></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">E-mail</p>
<p class="mx-contact-val"><a href="mailto:thijs@opzeker.it">thijs@opzeker.it</a></p>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">90</span><span>%</span>
</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-val"><a href="tel:+31611054521">+31 (0) 6 110 545 21</a></p>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">AWS Cloud</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated second-bar"></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>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">85</span><span>%</span>
</li>
<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>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">Git</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated third-bar"></div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">75</span><span>%</span>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">Azure Cloud</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated fourth-bar"></div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">80</span><span>%</span>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">PowerShell</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated fifth-bar"></div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">95</span><span>%</span>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">JSON/YAML</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated sixth-bar"></div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">100</span><span>%</span>
</div>
</div>
<div class="bar-wrapper">
<div class="col-md-3 col-sm-3 col-xs-4 wow fadeIn animated">REST API</div>
<div class="col-md-8 col-sm-8 col-xs-7">
<div class="progressBar gradient wow animated sixth-bar"></div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<span class="counter">75</span><span>%</span>
</div>
</div>
</div>
<!-- /.progress-bars -->
</li>
</ul>
</div>
<!-- /.progress-bar-wrapper -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /.skills-section -->
<section id="big-image" class="image-section">
<div class="container">
<div class="row">
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
<!-- =============== 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></p>
</div>
<!-- /.container -->
</section>
<!-- /.image section -->
<!-- Contact Section
================================================== -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="contact-headline">
<h3 class="wow fadeIn animated">Let's <span>Connect</span></h3>
</div>
<!-- /.contact-headline -->
<div class="contact-content">
<div class="contact-info">
<p class="contact-header">Our office <span>info</span></p>
<div class="info-line">
<div class="info-icon wow fadeIn animated">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</div>
<div class="info-text wow fadeIn animated">
<p>thijs@opzeker.it</p>
</div>
</div>
<div class="info-line">
<div class="info-icon wow fadeIn animated">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="info-text wow fadeIn animated">
<p>+31 (0) 6 110 545 21</p>
</div>
</div>
<div class="bottom-info">
<h4 class="wow fadeIn animated"><span>Connect</span> with us</h4>
<ul class="list-inline social-icons wow fadeIn animated">
<li>
<a href="https://www.linkedin.com/in/thijsstobbelaar/">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- /.contact-info -->
</div>
<!-- /.contact-content -->
</div>
<!-- /.col-md-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /.contact-section -->
<!-- Footer
================================================== -->
<footer>
<p>Copyright © 2025 -<a href="http://www.opzeker.it"> Opzeker IT</a></p>
</footer>
<!-- Scripts
================================================== -->
<!-- jQuery -->
<script src="assets/js/libraries/jquery-2.2.4.js"></script>
<!-- =============== SCRIPTS =============== -->
<script>document.getElementById('mx-year').textContent = new Date().getFullYear();</script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/libraries/bootstrap.js"></script>
<!-- Three.js for WebGL hero -->
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<!-- JavaScript Libraries -->
<script src="assets/js/libraries/typed.js"></script>
<script src="assets/js/libraries/wow.js"></script>
<script src="assets/js/libraries/particles.js"></script>
<script src="assets/js/libraries/waypoint.js"></script>
<script src="assets/js/libraries/jquery.counterup.js"></script>
<!-- Custom Particle Theme JavaScript -->
<script>
var sentences = ["Azure", "Azure Devops", "Git","Microsoft","AWS","Windows Server","Visual Studio Code","Powershell"];
</script>
<script src="assets/js/custom/particle-theme-dark.js"></script>
<!-- Modern site JS -->
<script src="assets/js/custom/modern.js"></script>
</body>
</html>