opzekerIT/index.html
2026-05-08 10:46:13 +02:00

436 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<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="">
<title>Opzeker IT</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 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]-->
</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">
<!-- Navigation Menu
================================================== -->
<header>
<div id="st-logo">
<a href="#0">
<img src="assets/images/OpzekerIT_Logo_Final_Diapositief_CMYK_small.png" alt="Logo">
</a>
</div>
</header>
<div id="st-nav">
<a href="#0" class="st-nav-trigger">
Menu<span></span>
</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>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.hero-section-2 -->
<!-- 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>
</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">
</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">
</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>
</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 -->
</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>
</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>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/libraries/bootstrap.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>
</body>
</html>