2.0

assets/js/custom/modern.js

@@ -0,0 +1,409 @@
+/* ============================================================
+   OPZEKER IT — MODERN JS
+   - Three.js animated WebGL hero (particle network / torus knot)
+   - Typed text rotator
+   - Scroll reveal (IntersectionObserver)
+   - Spotlight hover on service cards
+   - Magnetic nav, sticky header, scrollspy, smooth scroll
+   - Counter up, skill bars animation
+   ============================================================ */
+(function () {
+    'use strict';
+
+    /* ---------- Helpers ---------- */
+    const $  = (s, r = document) => r.querySelector(s);
+    const $$ = (s, r = document) => Array.from(r.querySelectorAll(s));
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+    /* ============================================================
+       1. THREE.JS WEBGL HERO BACKGROUND
+       Dynamic particle network + glowing torus knot
+       ============================================================ */
+    function initWebGLHero() {
+        const container = document.getElementById('mx-webgl');
+        if (!container || typeof THREE === 'undefined') return;
+
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(
+            55,
+            container.clientWidth / container.clientHeight,
+            0.1,
+            1000
+        );
+        camera.position.z = 18;
+
+        const renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: true,
+            powerPreference: 'high-performance'
+        });
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setClearColor(0x000000, 0);
+        container.appendChild(renderer.domElement);
+
+        /* ----- Glowing torus knot (center hero object) ----- */
+        const knotGeo = new THREE.TorusKnotGeometry(3.2, 0.55, 220, 28, 2, 3);
+        const knotMat = new THREE.MeshBasicMaterial({
+            color: 0x9600f4,
+            wireframe: true,
+            transparent: true,
+            opacity: 0.28
+        });
+        const knot = new THREE.Mesh(knotGeo, knotMat);
+        scene.add(knot);
+
+        // Second ghostly knot for parallax
+        const knot2Mat = new THREE.MeshBasicMaterial({
+            color: 0x00f2ff,
+            wireframe: true,
+            transparent: true,
+            opacity: 0.18
+        });
+        const knot2 = new THREE.Mesh(knotGeo, knot2Mat);
+        knot2.scale.setScalar(1.15);
+        scene.add(knot2);
+
+        /* ----- Particle starfield ----- */
+        const particleCount = prefersReducedMotion ? 400 : 1400;
+        const positions = new Float32Array(particleCount * 3);
+        const colors    = new Float32Array(particleCount * 3);
+        const colorA = new THREE.Color(0x00f2ff);
+        const colorB = new THREE.Color(0xd42bff);
+
+        for (let i = 0; i < particleCount; i++) {
+            const i3 = i * 3;
+            // distribute in a large sphere shell
+            const r = 10 + Math.random() * 30;
+            const theta = Math.random() * Math.PI * 2;
+            const phi   = Math.acos(2 * Math.random() - 1);
+            positions[i3]     = r * Math.sin(phi) * Math.cos(theta);
+            positions[i3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+            positions[i3 + 2] = r * Math.cos(phi);
+
+            const c = colorA.clone().lerp(colorB, Math.random());
+            colors[i3]     = c.r;
+            colors[i3 + 1] = c.g;
+            colors[i3 + 2] = c.b;
+        }
+
+        const pGeo = new THREE.BufferGeometry();
+        pGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        pGeo.setAttribute('color',    new THREE.BufferAttribute(colors,    3));
+
+        const pMat = new THREE.PointsMaterial({
+            size: 0.08,
+            vertexColors: true,
+            transparent: true,
+            opacity: 0.9,
+            sizeAttenuation: true,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false
+        });
+        const points = new THREE.Points(pGeo, pMat);
+        scene.add(points);
+
+        /* ----- Interaction: mouse parallax ----- */
+        const target = { x: 0, y: 0 };
+        const current = { x: 0, y: 0 };
+
+        container.parentElement.addEventListener('mousemove', (e) => {
+            const rect = container.getBoundingClientRect();
+            target.x = ((e.clientX - rect.left) / rect.width  - 0.5) * 2;
+            target.y = ((e.clientY - rect.top)  / rect.height - 0.5) * 2;
+        });
+
+        /* ----- Resize ----- */
+        function onResize() {
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            camera.aspect = w / h;
+            camera.updateProjectionMatrix();
+            renderer.setSize(w, h);
+        }
+        window.addEventListener('resize', onResize);
+
+        /* ----- Animate ----- */
+        let rafId;
+        const clock = new THREE.Clock();
+        function animate() {
+            const t = clock.getElapsedTime();
+
+            // Smooth mouse lerp
+            current.x += (target.x - current.x) * 0.05;
+            current.y += (target.y - current.y) * 0.05;
+
+            // Rotate knots
+            knot.rotation.x  = t * 0.15 + current.y * 0.4;
+            knot.rotation.y  = t * 0.22 + current.x * 0.4;
+            knot2.rotation.x = -t * 0.10 + current.y * 0.25;
+            knot2.rotation.y = -t * 0.17 + current.x * 0.25;
+
+            // Rotate particle field slowly
+            points.rotation.y = t * 0.03 + current.x * 0.15;
+            points.rotation.x = current.y * 0.15;
+
+            // Subtle camera breathing
+            camera.position.z = 18 + Math.sin(t * 0.3) * 0.4;
+            camera.lookAt(0, 0, 0);
+
+            renderer.render(scene, camera);
+            rafId = requestAnimationFrame(animate);
+        }
+        animate();
+
+        // Pause when tab hidden
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) cancelAnimationFrame(rafId);
+            else animate();
+        });
+    }
+
+    /* ============================================================
+       2. TYPED ROTATOR
+       ============================================================ */
+    function initTyped() {
+        const el = $('#mx-typed');
+        if (!el) return;
+
+        const words = JSON.parse(el.dataset.words || '[]');
+        if (!words.length) return;
+
+        const cursor = document.createElement('span');
+        cursor.className = 'typed-cursor';
+        cursor.textContent = '|';
+
+        const textSpan = document.createElement('span');
+        el.appendChild(textSpan);
+        el.appendChild(cursor);
+
+        let i = 0, j = 0, deleting = false;
+
+        function tick() {
+            const word = words[i];
+            if (!deleting) {
+                textSpan.textContent = word.slice(0, ++j);
+                if (j === word.length) {
+                    deleting = true;
+                    return setTimeout(tick, 1600);
+                }
+            } else {
+                textSpan.textContent = word.slice(0, --j);
+                if (j === 0) {
+                    deleting = false;
+                    i = (i + 1) % words.length;
+                }
+            }
+            setTimeout(tick, deleting ? 40 : 70);
+        }
+        tick();
+    }
+
+    /* ============================================================
+       3. HEADER SHRINK + SCROLLSPY + SMOOTH SCROLL + BURGER
+       ============================================================ */
+    function initHeader() {
+        const header = $('.mx-header');
+        const navLinks = $$('.mx-nav-links a[href^="#"]');
+        const sections = navLinks
+            .map(a => document.getElementById(a.getAttribute('href').slice(1)))
+            .filter(Boolean);
+
+        function onScroll() {
+            if (window.scrollY > 30) header.classList.add('scrolled');
+            else header.classList.remove('scrolled');
+
+            // scrollspy
+            const scroll = window.scrollY + 120;
+            let activeId = null;
+            sections.forEach(sec => {
+                if (sec.offsetTop <= scroll) activeId = sec.id;
+            });
+            navLinks.forEach(a => {
+                a.classList.toggle('active', a.getAttribute('href') === '#' + activeId);
+            });
+        }
+        window.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+
+        // Smooth scroll for internal links
+        $$('a[href^="#"]').forEach(a => {
+            a.addEventListener('click', (e) => {
+                const id = a.getAttribute('href');
+                if (id === '#' || id.length < 2) return;
+                const target = document.querySelector(id);
+                if (!target) return;
+                e.preventDefault();
+                const y = target.getBoundingClientRect().top + window.scrollY - 70;
+                window.scrollTo({ top: y, behavior: 'smooth' });
+
+                // close mobile nav
+                const nav = $('.mx-nav-links');
+                const burger = $('.mx-burger');
+                if (nav && nav.classList.contains('mobile-open')) {
+                    nav.classList.remove('mobile-open');
+                    burger && burger.classList.remove('open');
+                }
+            });
+        });
+
+        // Burger
+        const burger = $('.mx-burger');
+        const nav = $('.mx-nav-links');
+        if (burger && nav) {
+            burger.addEventListener('click', () => {
+                burger.classList.toggle('open');
+                nav.classList.toggle('mobile-open');
+            });
+        }
+    }
+
+    /* ============================================================
+       4. SCROLL REVEAL
+       ============================================================ */
+    function initReveal() {
+        const els = $$('.reveal');
+        if (!('IntersectionObserver' in window)) {
+            els.forEach(el => el.classList.add('is-visible'));
+            return;
+        }
+        const io = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add('is-visible');
+                    io.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });
+        els.forEach(el => io.observe(el));
+    }
+
+    /* ============================================================
+       5. SPOTLIGHT HOVER (service cards)
+       ============================================================ */
+    function initSpotlight() {
+        $$('.mx-service-card').forEach(card => {
+            card.addEventListener('mousemove', (e) => {
+                const r = card.getBoundingClientRect();
+                card.style.setProperty('--mx', ((e.clientX - r.left) / r.width  * 100) + '%');
+                card.style.setProperty('--my', ((e.clientY - r.top)  / r.height * 100) + '%');
+            });
+        });
+    }
+
+    /* ============================================================
+       6. TILT on cards (subtle 3D)
+       ============================================================ */
+    function initTilt() {
+        if (prefersReducedMotion) return;
+        $$('[data-tilt]').forEach(el => {
+            const maxTilt = parseFloat(el.dataset.tilt) || 6;
+            el.style.transformStyle = 'preserve-3d';
+            el.addEventListener('mousemove', (e) => {
+                const r = el.getBoundingClientRect();
+                const px = (e.clientX - r.left) / r.width  - 0.5;
+                const py = (e.clientY - r.top)  / r.height - 0.5;
+                el.style.transform = `perspective(900px) rotateY(${px * maxTilt}deg) rotateX(${-py * maxTilt}deg) translateY(-6px)`;
+            });
+            el.addEventListener('mouseleave', () => {
+                el.style.transform = '';
+            });
+        });
+    }
+
+    /* ============================================================
+       7. MAGNETIC buttons
+       ============================================================ */
+    function initMagnetic() {
+        if (prefersReducedMotion) return;
+        $$('[data-magnetic]').forEach(el => {
+            const strength = parseFloat(el.dataset.magnetic) || 0.3;
+            el.addEventListener('mousemove', (e) => {
+                const r = el.getBoundingClientRect();
+                const mx = e.clientX - (r.left + r.width / 2);
+                const my = e.clientY - (r.top  + r.height / 2);
+                el.style.transform = `translate(${mx * strength}px, ${my * strength}px)`;
+            });
+            el.addEventListener('mouseleave', () => {
+                el.style.transform = '';
+            });
+        });
+    }
+
+    /* ============================================================
+       8. COUNTER UP + SKILL BARS (on reveal)
+       ============================================================ */
+    function initCounters() {
+        if (!('IntersectionObserver' in window)) return;
+
+        // Numbers
+        $$('[data-count]').forEach(el => {
+            const target = parseFloat(el.dataset.count);
+            const duration = parseInt(el.dataset.duration || '1800', 10);
+            const suffix = el.dataset.suffix || '';
+            const prefix = el.dataset.prefix || '';
+            let started = false;
+
+            const io = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting && !started) {
+                        started = true;
+                        const start = performance.now();
+                        function step(now) {
+                            const t = Math.min(1, (now - start) / duration);
+                            const eased = 1 - Math.pow(1 - t, 3);
+                            const val = target * eased;
+                            const display = Number.isInteger(target)
+                                ? Math.round(val)
+                                : val.toFixed(1);
+                            el.textContent = prefix + display + suffix;
+                            if (t < 1) requestAnimationFrame(step);
+                        }
+                        requestAnimationFrame(step);
+                        io.unobserve(el);
+                    }
+                });
+            }, { threshold: 0.5 });
+            io.observe(el);
+        });
+
+        // Skill bars
+        $$('.mx-skill-bar').forEach(bar => {
+            const pct = parseFloat(bar.dataset.value || '0');
+            const io = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        bar.style.width = pct + '%';
+                        io.unobserve(bar);
+                    }
+                });
+            }, { threshold: 0.3 });
+            io.observe(bar);
+        });
+    }
+
+    /* ============================================================
+       9. MARQUEE DUPLICATION (seamless loop)
+       ============================================================ */
+    function initMarquee() {
+        $$('.mx-marquee-track').forEach(track => {
+            const clone = track.innerHTML;
+            track.innerHTML = clone + clone;
+        });
+    }
+
+    /* ============================================================
+       BOOT
+       ============================================================ */
+    document.addEventListener('DOMContentLoaded', () => {
+        initHeader();
+        initReveal();
+        initSpotlight();
+        initTilt();
+        initMagnetic();
+        initCounters();
+        initMarquee();
+        initTyped();
+        initWebGLHero();
+    });
+})();

index.html

@@ -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">
+<!-- =============== 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>
+<!-- =============== 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>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>
-
-    <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>
-<!-- /#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> -->
 
+    <div class="mx-scroll-indicator" aria-hidden="true">
+        <span>Scroll</span>
+        <span class="line"></span>
     </div>
-            <!-- /.col-lg-12 -->
-        </div>
-        <!-- /.row -->
-    </div>
-    <!-- /.container-fluid -->
 </section>
-<!-- /.hero-section-2 -->
 
+<!-- =============== 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>
 
+<!-- =============== 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>
 
-
-<!-- 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.
-                        
+            <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-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>
+            <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>
-            <!-- /.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>
-            <!-- /.col-md-12 -->
-        </div>
-        <!-- /.row -->
-    </div>
-    <!-- /.container -->
-</section>
-<!-- /.call-to-section -->
-
-<!-- Skills Section
-================================================== -->
-<section id="skills" class="skills-section">
-
-    <div class="container">
-
-        <div class="row">
-
-            <div class="col-md-12">
-                <div class="skills-headline">
-                    <h4 class="wow fadeIn animated"> <span>Onze Skills</span></h4>
-                    <p class="wow fadeIn animated">
+<!-- =============== 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>
-            <!-- /.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>
-                        <div class="col-md-1 col-sm-1 col-xs-1">
-                            <span class="counter">90</span><span>%</span>
+        <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>
+
+            <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>
+
+            <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>
-                    <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>
-                        </div>
-                        <div class="col-md-1 col-sm-1 col-xs-1">
-                            <span class="counter">85</span><span>%</span>
-                        </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 -->
-            </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 -->
+<!-- =============== 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>
-        <!-- /.row -->
     </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>
+<!-- =============== 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="bottom-info">
-                            <h4 class="wow fadeIn animated"><span>Connect</span> with us</h4>
+        <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>
 
-                            <ul class="list-inline social-icons wow fadeIn animated">
-                                <li>
-                                    <a href="https://www.linkedin.com/in/thijsstobbelaar/">
+<!-- =============== 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>
+
+            <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>
+                    </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>
+                    </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-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>
                     </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 =============== -->
+<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>
 </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>