1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta property="og:title" content="Marcel Dempers" /> 7 <meta property="og:description" content="Software Engineering, Architecture, Technology" /> 8 <meta property="og:image" content="/content/img/og-logo.png" /> 9 <meta property="" content="" /> 10 <meta property="" content="" /> 11 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 12 <link rel="icon" href="/favicon.ico" type="image/x-icon"> 13 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" 14 crossorigin="anonymous"> 15 <title>Marcel Dempers</title> 16 17 <!-- Custom fonts for this template --> 18 <link href="fonts.css" rel="stylesheet" type="text/css"> 19 <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 20 <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' 21 rel='stylesheet' type='text/css'> 22 23 <!-- Custom styles for this template --> 24 <link href="theme.css" rel="stylesheet"> 25</head> 26 27<body> 28 29 <!-- Navigation --> 30<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"> 31 <div class="container"> 32 <a class="navbar-brand" style="font-size: 1.1rem;" href="/">Marcel Dempers</a> 33 34 <!-- <ul class="nav navbar-nav navbar-collapse ml-auto"> --> 35 <a class="navbar-brand navbar-social " href="https://youtube.com/c/marceldempers" target="_blank"><i class="fab fa-youtube"></i></a> 36 <a class="navbar-brand navbar-social "href="https://instagram.com/marceldempers" target="_blank"><i class="fab fa-instagram"></i></a> 37 <a class="navbar-brand navbar-social "href="https://facebook.com/thatdevopsguy" target="_blank"><i class="fab fa-facebook"></i></a> 38 <a class="navbar-brand navbar-social " href="https://x.com/marceldempers" target="_blank"><i class="fab fa-x-twitter"></i></a> 39 <a class="navbar-brand navbar-social " href="https://github.com/marcel-dempers" target="_blank"><i class="fab fa-github"></i></a> 40 41 42 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" 43 aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 44 <i class="fas fa-bars"></i> 45 </button> 46 <div class="collapse navbar-collapse" id="navbarResponsive"> 47 <ul class="navbar-nav ml-auto"> 48 49 <li class="nav-item"> 50 <a class="nav-link" href="/">Home</a> 51 </li> 52 53 <!-- <li class="nav-item"> 54 <a class="nav-link" href=/toolbox>Engineer Toolbox</a> 55 </li> --> 56 57 58 <!-- <li class="nav-item dropdown"> 59 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 60 Guides & Tutorials 61 </a> 62 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 63 <a class="dropdown-item" href=/videos>My Videos</a> 64 <div class="dropdown-divider"></div> 65 <a class="dropdown-item" href=/videos/guides/docker-getting-started>Docker Learning | Developer Guide</a> 66 <div class="dropdown-divider"></div> 67 <a class="dropdown-item" href=/videos/guides/kubernetes-getting-started>Kubernetes Learning | Getting Started</a> 68 <div class="dropdown-divider"></div> 69 <a class="dropdown-item" href=/videos/guides/kubernetes-monitoring>Kubernetes Learning | Monitoring</a> 70 </div> 71 </li> --> 72 <li class="nav-item"> 73 <a class="nav-link" href=/community>Community</a> 74 </li> 75 76 <!-- <li class="nav-item dropdown"> 77 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 78 Posts 79 </a> 80 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 81 <a class="nav-link" href=/posts/architecture>My Website Architecture</a> 82 <div class="dropdown-divider"></div> 83 <a class="nav-link" href=/posts/my-desktop>My Desktop</a> 84 </div> 85 </li> --> 86 </ul> 87 </div> 88 </div> 89</nav> 90 91<!-- Page Header --> 92<header class="masthead" style="background-image: url('/header/img/banner.jpg')"> 93 <div class="overlay"></div> 94 <div class="container"> 95 96 <div class="row"> 97 <div class="col-lg-10"> 98 <div class="site-heading"> 99 <h1 style="font-size:0"></h1> 100 </div> 101 102 </div> 103 </div> 104 105 <div class="row"> 106 <div class="col-5" style="position:absolute; bottom:0;"> 107 </div> 108 <div class="col-2"> 109 <button type="button" class="btn btn-yt" style="background-color: #c4302b;color: #ffff;"><i class="fab fa-youtube pr-1"></i> <a style="color: #fff;" target="_blank" href="https://goo.gl/1Ty1Q2">Subscribe on YouTube</a></button></div> 110 </div> 111 </div> 112 </div> 113 114 </div> 115</header> 116 117 118 <noscript>You need to enable JavaScript to run this app.</noscript> 119 <div class="container"> 120 <div class="row"> 121 <h3>About me</h3> 122 <p> 123 I'm a Solutions Architect driven by a passion for platform engineering and building resilient, cloud-native 124 systems. <br /> 125 My expertise lies in architecting distributed systems, applying DevOps methodologies, and promoting open-source 126 adoption. <br /> 127 I specialize in leveraging Docker and Kubernetes to design and deploy scalable, containerized solutions. 128 </p> 129 </div> 130 131 <hr /> 132 133 <div class="row"> 134 <h3>Architect. Creator. Building the Ultimate DevOps Roadmap</h3> 135 <p> 136 I don't just architect systems; I architect a world-class educational resource. 137 Every line of code, every video, and every course module is a purposeful step toward building the Ultimate DevOps 138 Roadmap. 139 </p> 140 </div> 141 142 <div class="row"> 143 <a href="https://instagram.com/marceldempers" target="_blank">
144 <span class="fa-stack fa-lg"> 145 <i class="fas fa-circle fa-stack-2x"></i> 146 <i class="fab fa-instagram fa-stack-1x fa-inverse"></i> 147 </span> 148 ðð½ Follow me for development updates! 149 </a> 150 </div> 151 152 <hr /> 153 154 <div class="row mb-3"> 155 <div class="col text-center"> 156 <a href="https://learn.marceldempers.dev/p/the-ultimate-devops-course-for-beginners" target="_blank" class="btn btn-primary btn-lg">Join the School</a> 157 </div> 158 </div> 159 160 <div class="row"> 161 <object class="img-fluid" id="myInteractiveSVG" data="/content/img/course.drawio.svg" type="image/svg+xml"> 162 Your browser does not support SVG via the object tag. 163 </object> 164 </div> 165 166 <div class="row my-4"> 167 <div class="col text-center"> 168 <h3>Start Your DevOps Journey</h3> 169 <p>Join the school to access the course, view pricing, and get everything you need to kickstart your DevOps career.</p> 170 <a href="https://learn.marceldempers.dev/p/the-ultimate-devops-course-for-beginners" target="_blank" class="btn btn-primary btn-lg">Join the School</a> 171 </div> 172 </div> 173 174 <hr /> 175 176 <div id="modal-object" class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" 177 aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> 178 <div class="modal-dialog modal-dialog-centered" role="document"> 179 <div class="modal-content"> 180 <div class="modal-header"> 181 <h3 id="modal-title" class="modal-title" id="exampleModalLongTitle">Modal title</h3> 182 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 183 <h3 aria-hidden="true">×</h3> 184 </button> 185 </div> 186 <div id="modal-body" class="modal-body"> 187 ... 188 </div> 189 <div class="modal-footer"> 190 <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> --> 191 <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 192 </div> 193 </div> 194 </div> 195 </div> 196 197
197<script> 198 199 const REGION_BASE = '/content/regions/'; 200 const regionCache = {}; 201 202 async function loadRegion(region) { 203 if (regionCache[region]) { 204 return regionCache[region]; 205 } 206 207 const response = await fetch(`${REGION_BASE}${region}.html`); 208 if (!response.ok) { 209 throw new Error(`Failed to load region "${region}": ${response.status}`); 210 } 211 212 const raw = await response.text(); 213 const titleMatch = raw.match(/<!--\s*title:\s*(.*?)\s*-->/); 214 const title = titleMatch ? titleMatch[1].trim() : region; 215 const body = raw.replace(/<!--\s*title:[\s\S]*?-->/, '').trim(); 216 217 const data = { title, body }; 218 regionCache[region] = data; 219 return data; 220 } 221 const svgObject = document.getElementById('myInteractiveSVG'); 222 const ATTRIBUTE_KEY = 'data-region'; 223 224 const attachListener = function () { 225 try { 226 const svgDoc = svgObject.contentDocument; 227 228 const allRegionElements = svgDoc.querySelectorAll(`[${ATTRIBUTE_KEY}]`); 229 if (allRegionElements.length > 0) { 230 allRegionElements.forEach(element => { 231 element.addEventListener('click', async function (event) { 232 event.stopPropagation(); 233 const regionValue = this.getAttribute(ATTRIBUTE_KEY); 234 235 const modalTitle = document.getElementById('modal-title'); 236 const modalBody = document.getElementById('modal-body'); 237 238 try { 239 const content = await loadRegion(regionValue); 240 modalTitle.textContent = content.title; 241 modalBody.innerHTML = content.body; 242 } catch (e) { 243 console.error(`Error loading region "${regionValue}":`, e); 244 modalTitle.textContent = 'Oops!'; 245 modalBody.innerHTML = '<p>Error loading content. Please try again later.</p>'; 246 } 247 248 $('#modal-object').modal('show'); 249 }); 250 251 // Optional: Add a subtle visual hint on hover 252 element.addEventListener('mouseover', function () { 253 this.style.cursor = 'pointer'; // This sets the hand/pointer icon 254 this.style.opacity = '0.7'; 255 }); 256 element.addEventListener('mouseout', function () { 257 this.style.opacity = '1.0'; 258 }); 259 }); 260 } 261 262 } catch (e) { 263 console.error("Error accessing SVG contentDocument:", e); 264 } 265 }; 266 267 // 1. Attach the listener for when the content loads later 268 svgObject.addEventListener('load', attachListener); 269 270 // 2. Check if the content is ALREADY loaded (e.g., from cache) 271 // The contentDocument property will be null until the external resource is ready. 272 if (svgObject.contentDocument) { 273 attachListener(); 274 } 275 </script>
275 276 277 <hr /> 278 279 <div class="row"> 280
280<script src="https://apis.google.com/js/platform.js"></script>
280 281 <div class="g-ytsubscribe" data-channelid="UCFe9-V_rN9nLqVNiI8Yof3w" data-layout="full" data-count="hidden"> 282 </div> 283 </div> 284 285 <hr /> 286 287</div> 288 289 <hr> 290 291 <!-- Footer --> 292 <footer> 293 <div class="container"> 294 <div class="row"> 295 <div class="col-lg-8 col-md-10 mx-auto"> 296 <ul class="list-inline text-center"> 297 <li class="list-inline-item"> 298 <a href="https://youtube.com/c/marceldempers" target="_blank"> 299 <span class="fa-stack fa-lg"> 300 <i class="fas fa-circle fa-stack-2x"></i> 301 <i class="fab fa-youtube fa-stack-1x fa-inverse"></i> 302 </span> 303 </a> 304 </li> 305 306 <li class="list-inline-item"> 307 <a href="https://instagram.com/marceldempers" target="_blank"> 308 <span class="fa-stack fa-lg"> 309 <i class="fas fa-circle fa-stack-2x"></i> 310 <i class="fab fa-instagram fa-stack-1x fa-inverse"></i> 311 </span> 312 </a> 313 </li> 314 315 <li class="list-inline-item"> 316 <a href="https://x.com/marceldempers" target="_blank"> 317 <span class="fa-stack fa-lg"> 318 <i class="fas fa-circle fa-stack-2x"></i> 319 <i class="fab fa-x-twitter fa-stack-1x fa-inverse"></i> 320 </span> 321 </a> 322 </li> 323 <li class="list-inline-item"> 324 <a href="https://facebook.com/thatdevopsguy" target="_blank"> 325 <span class="fa-stack fa-lg"> 326 <i class="fas fa-circle fa-stack-2x"></i> 327 <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i> 328 </span> 329 </a> 330 </li> 331 <li class="list-inline-item"> 332 <a href="https://github.com/marcel-dempers" target="_blank"> 333 <span class="fa-stack fa-lg"> 334 <i class="fas fa-circle fa-stack-2x"></i> 335 <i class="fab fa-github fa-stack-1x fa-inverse"></i> 336 </span> 337 </a> 338 </li> 339 </ul> 340 <p class="copyright text-muted">Copyright © Marcel Dempers</p> 341 </div> 342 </div> 343 </div> 344 </footer> 345 346 347
347<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 348 crossorigin="anonymous"></script>
348 349 350
350<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 351 crossorigin="anonymous"></script>
351 352 353
353<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 354 crossorigin="anonymous"></script>
354 355 356 <!-- Custom scripts for this template --> 357
357<script src="theme.js"></script>
357 358 359</body> 360 361</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.