https://haythamnikolaidis.github.io//

1<!DOCTYPE html> <html lang=" en "><head> <meta charset="utf-8" /> <title> Ivan Rudolph Whitlock Kruger - A Portfolio </title> <meta http-equip="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="keywords" content="Ivan Rudolph Whitlock Kruger, ,"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" /> <meta content="" property="fb:app_id" /> <meta content="Ivan Rudolph Whitlock Kruger" property="og:site_name" /> <meta content="Ivan Rudolph Whitlock Kruger" property="og:title" /> <meta content="website" property="og:type" /> <meta content="Ivan is a multi-skilled developer, with over 10 years experience, in C#, Java, Python and multiple frameworks. " property="og:description" /> <meta content="https://haythamnikolaidis.github.io//" property="og:url" /> <!-- Twitter Cards --> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:creator" content="@" /> <meta name="twitter:title" content="Ivan Rudolph Whitlock Kruger" /> <meta name="twitter:url" content="https://haythamnikolaidis.github.io//" /> <meta name="twitter:description" content="Ivan is a multi-skilled developer, with over 10 years experience, in C#, Java, Python and multiple frameworks. " /> <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/css/main.css" /> <!-- <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/css/custom-style.css" /> --> <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/bower_components/lightgallery/dist/css/lightgallery.min.css" /> <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.css" /> <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/bower_components/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/bower_components/font-awesome/web-fonts-with-css/css/fontawesome-all.min.css" /> <link rel="stylesheet" href="https://haythamnikolaidis.github.io//assets/bower_components/icono/dist/icono.min.css" /> <!-- Fonts--> <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" /> <!-- Favicon --> <link rel="icon" href="https://haythamnikolaidis.github.io//assets/img/favicon.ico" type="image/gif" sizes="16x16" /> 

1<script> var base_url = 'https://haythamnikolaidis.github.io/' ; </script>

1 <!-- Jquery --> 

1<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous" ></script>

1 <!-- 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/jquery/dist/jquery.min.js"></script>

1 --> 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/jquery.easing/jquery.easing.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/jquery-mousewheel/jquery.mousewheel.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/ghosthunter/dist/jquery.ghostHunter.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/lightgallery/dist/js/lightgallery-all.min.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/nanobar/nanobar.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/bower_components/typewrite/dist/typewrite.min.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/js/search.js"></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/js/on-scroll-progress.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

1 

1<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

1 <!-- for Mathjax support --> <!-- Github Button --> 

1<script async defer src="https://buttons.github.io/buttons.js"></script>

1 

1<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" ></script>

1 <!-- Global site tag (gtag.js) - Google Analytics -->

1 <script async src="https://www.googletagmanager.com/gtag/js?id=

1G-LBGNRY2H1K

1"></script> 

1<script> 

1window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '

1G-LBGNRY2H1K

1'); 

1</script>

1 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> </head> <body> <nav class="navbar navbar-expand-lg fixed-top navbar-dark" id="topNav"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="icono-hamburger" id="navbar-hamburger"> </span> </button> <a class="navbar-brand" href="/">Ivan Rudolph Whitlock Kruger</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="https://haythamnikolaidis.github.io//" >Home</a > </li> <li class="nav-item"> <a class="nav-link" href="https://haythamnikolaidis.github.io//about" >About</a > </li> <li class="nav-item"> <a class="nav-link" href="https://haythamnikolaidis.github.io//contact" >Contact</a > </li> </ul> </div> <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link toggle-search-button" href="#search"> <i class="fa fa-search search-icon" aria-hidden="true"></i> </a> </li> <!-- <li class="nav-item"> <input class="nav-link switch" id="theme-toggle" onclick="modeSwitcher()" type="checkbox" name="checkbox" /> </li> --> </ul> </nav> <div id="progress-bar"></div> <!-- Search Form --> <div class="search-form-container"> <form class="search-form"> <fieldset class="search-form__fieldset"> <div class="row"> <div class="col-lg-8 offset-md-2"> <input class="search-form__field" placeholder="Type to Search..." autofocus> <input class="search-form__submit" type="submit" value="search"> </div> </div> </fieldset> </form> <div class="row"> <div class="col-lg-8 offset-md-2 search-results"> <div class="card search-results"></div> </div> </div> <div class="close-search-button search-form-container__close"> <i class="fa fa-times icon"></i> </div> </div><div class="container-fluid"> 

1<script> $(document).ready(function() { $("#typewriteText").typewrite({ actions: [{ type: "A multi-skilled developer from South Africa, with over 10 years development experience." }] }); }); </script>

1 <!-- hero section--><style> /* change cover_img in config.yml */ .jumbotron { background-color: var(--main-background-color) !important; background-image: url('/assets/img/'); text-align: center; background-attachment: fixed; background-size: cover; background-position: center; } .jumbotron-btns { display: block; margin-top: 50px; } .jumbotron-heading, .lead { color: #fff; } </style> <!-- home hero section --> <div class="jumbotron"> <img class="author-profile-img" src="https://haythamnikolaidis.github.io//assets/img/profile.jpg" /> <p class="jumbotron-heading">Hi, I am Ivan Rudolph Whitlock Kruger !</p> <p class="lead" id="typewriteText"></p> <!-- uncomment/modify buttons as you want --> <div class="jumbotron-btns"> <a href="https://haythamnikolaidis.github.io//about"> <button class="btn btn-md btn-warning"> <strong>About</strong> </button> </a> <a href="https://haythamnikolaidis.github.io//contact"> <button class="btn btn-md btn-default"> <strong>Contact</strong> </button> </a> </div> </div> <div class="col-lg-8 offset-md-2"><section id="recent-articles"> <div id="recent-articles-header"> <div id="recent-articles-title"> <h1 class="card-title">Creative Coding</h1> </div> </div> <br /> <ul style="display: flex; justify-content: flex-start; gap: 1em; flex-wrap: wrap;"> <li class="article-card"> <a href="https://openprocessing.org/sketch/1466442/"> <video width=300px height=300px title="An optical illution that is created by turning concentric segmented cicles" poster="https://haythamnikolaidis.github.io//assets/img/sketches/opticalIllution_tumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/opticalIllution_vid.webm" type="video/webm"/> </video> </a> </li> <li class="article-card"> <a href="https://openprocessing.org/sketch/1447607/"> <video width=300px height=300px title="An attempt to recreate the iconic VHS scan lines effect from the late 80's and early 90's" poster="https://haythamnikolaidis.github.io//assets/img/sketches/scanLines_thumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/" type="video/webm"/> </video> </a> </li> <li class="article-card"> <a href="https://openprocessing.org/sketch/1446100/"> <video width=300px height=300px title="A visual experiment inspired by foobar with Google" poster="https://haythamnikolaidis.github.io//assets/img/sketches/bifrication_tumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/bifrication_vid.webm" type="video/webm"/> </video> </a> </li> <li class="article-card"> <a href="https://openprocessing.org/sketch/1423254/"> <video width=300px height=300px title="Rhythm in Patterns Coding Challenge entry" poster="https://haythamnikolaidis.github.io//assets/img/sketches/theBeach_tumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/" type="video/webm"/> </video> </a> </li> <li class="article-card"> <a href="https://openprocessing.org/sketch/1392746/">

1 <video width=300px height=300px title="An attampt to recreate the effect of back spin on a ball using vector math." poster="https://haythamnikolaidis.github.io//assets/img/sketches/backSpin_thumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/backSpin_vid.webm" type="video/webm"/> </video> </a> </li> <li class="article-card"> <a href="https://openprocessing.org/sketch/1329811/"> <video width=300px height=300px title="A grid of quater circle segments that rotate at random times to create patterns." poster="https://haythamnikolaidis.github.io//assets/img/sketches/circleBoard_thumb.jpeg" autoplay loop muted> <source src="https://haythamnikolaidis.github.io//assets/img/sketches/" type="video/webm"/> </video> </a> </li> </ul> <ul> </ul> </section> <section id="games"> <div id="games-header"> <div id="games-title"> <h1 class="card-title">Game Projects</h1> </div> </div> <br /> <ul style="display: flex; justify-content: flex-start; gap: 1em; flex-wrap: wrap;"> <li class="article-card"> <p>CyberDROP</p> <a href="https://haythamnikolaidis.itch.io/cyberdrop"> <img src="https://haythamnikolaidis.github.io//assets/img/cyberDrop.jpg" alt="" /> </a> </li> <li class="article-card"> <p>The back-up plan</p> <a href="https://haythamnikolaidis.itch.io/the-back-up-plan"> <img src="https://haythamnikolaidis.github.io//assets/img/the-back-up-plan.jpg" alt="" /> </a> </li> </ul> </div> </div><footer class="card"> <p> Powered by<a href="https://github.com/sujaykundu777/devlopr-jekyll"> devlopr jekyll</a>. Hosted at <a href="https://pages.github.com">Github</a>.</p> </footer> 

1<script> var options = { classname: 'progressline', id: 'my-id' }; var nanobar = new Nanobar( options ); nanobar.go( 30 ); nanobar.go( 76 ); nanobar.go(100); </script>

1 <div hidden id="snipcart" data-api-key="Y2I1NTAyNWYtMTNkMy00ODg0LWE4NDItNTZhYzUxNzJkZTI5NjM3MDI4NTUzNzYyMjQ4NzU0"></div> 

1<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js" defer></script>

1 

1<script src="https://haythamnikolaidis.github.io//assets/js/mode-switcher.js"></script>

1 

1<script> if (window.netlifyIdentity) { window.netlifyIdentity.on("init", user => { if (!user) { window.netlifyIdentity.on("login", () => { document.location.href = "/admin/"; }); } }); } </script>

1 <!-- what's new --> 

1<script> var OlvyConfig = { organisation: "", target: "#olvy-target", type: "", view: { showSearch: true, compact: true, showHeader: true, /* only applies when widget type is embed. you cannot hide header for modal and sidebar widgets */ showUnreadIndicator: true, unreadIndicatorColor: "#FF8528FF", unreadIndicatorPosition: "top-right" } }; </script>

1 

1<script type="text/javascript" src="https://app.olvy.co/script.js" defer="defer"></script>

1 </body> </html>