Files
ward-truyen-network-site/src/index.html
2025-07-27 17:52:55 +02:00

332 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ward Truyen's CV</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="description" content="Op zoek naar een Java developer job.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://ward.truyen.network/">
<meta property="og:type" content="website">
<meta property="og:title" content="Ward Truyen's CV">
<meta property="og:description" content="Op zoek naar een Java developer job.">
<meta property="og:image" content="https://ward.truyen.network/img/me.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="ward.truyen.network">
<meta property="twitter:url" content="https://ward.truyen.network/">
<meta name="twitter:title" content="Ward Truyen's CV">
<meta name="twitter:description" content="Op zoek naar een Java developer job.">
<meta name="twitter:image" content="https://ward.truyen.network/img/me.jpg">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body class="text-bg-dark bg-dark">
<header>
<nav class="navbar navbar-expand-md fixed-top navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Ward Truyen</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#skills">Vaardigheden</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#werk">Werkervaring</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#studies">Studies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<h1 class="visually-hidden">Ward Truyen's CV</h1>
<section id="intro">
<div class="p-2 my-5">
<div class="note">
<h2 class="d-inline">Introductie</h2>
<img class="my-picture d-none d-md-block" src="img/me.jpg" alt="[my picture]" />
<p>Ik ben een computer liefhebber met een gedreven, hulpvaardig karakter en een zeer technisch geinformeerde
achtergrond. Bijleren doe ik graag. Werk met structuur en orde. Ik ben geduldig,
zal met volle concentratie problemen aanpakken en streven naar afwerking. Je kan me vinden voor een
aangename babbel of een luisterend oor.</p>
<a href="docs/cv-wardtruyen-2025-Java.pdf" class="btn btn-primary" download>Download mijn CV</a>
</div>
</div>
</section>
<div id="skills" class="divider"></div>
<section>
<div class="px-4 py-4">
<h2>Vaardigheden</h2>
<div class="row">
<div class="col-4">
<h4>Back-end</h4>
<ul>
<li>Java EE</li>
<li>Spring &amp; REST</li>
<li>SQL &amp; Hibernate</li>
<li>Lombok</li>
<li>Maven &amp; Gradle</li>
<li>JSP</li>
<li>JUnit</li>
<li>Multithreading &amp; Concurrency</li>
</ul>
</div>
<div class="col-4">
<h4>Front-end</h4>
<ul>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Angular</li>
<li>HTML &amp; CSS</li>
<li>NPM</li>
<li>JQuery</li>
<li>Bootstrap</li>
<li>async &amp; wait</li>
</ul>
</div>
<div class="col-4">
<h4>Tools</h4>
<ul>
<li>Git</li>
<li>Scrutm &amp; Agile</li>
<li>VS code &amp; IntelliJ &amp; vim</li>
<li>Docker &amp; Virtualisatie</li>
<li>CI/CD</li>
<li>Powershell &amp; bash</li>
<li>Terminal &amp; SSH</li>
</ul>
</div>
</div>
<div class="row justify-content-center">
<img class="img-icon" src="img/tux.png" alt="Linux" title="Tux, the linux mascot" />
<img class="img-icon" src="img/arch.png" alt="Arch linux" title="Arch linux" />
<img class="img-icon" src="img/windows.png" alt="Windows" title="MS Windows" />
<img class="img-icon" src="img/traefik.png" alt="Traefik" title="Traefik: a reverse proxy" />
<img class="img-icon" src="img/docker.png" alt="Docker" title="Docker" />
<img class="img-icon" src="img/lua.png" alt="Lua" title="Lua script" />
<img class="img-icon" src="img/neovim.png" alt="Neovim" title="Neovim editor" />
<img class="img-icon" src="img/nginx.png" alt="Nginx" title="Nginx a reverse proxy" />
</div>
</div>
</section>
<div id="werk" class="divider"></div>
<section>
<div class="px-4 py-4">
<h2>Werkervaring</h2>
<ul class="rowlines">
<li class="row attention">
<span class="col-5">Opleiding Java Enterprise</span>
<span class="col-4">/</span>
<span class="col-3">2025 - Nu</span>
</li>
<li class="row text-secondary">
<span class="col-5">Tijdelijke Interim jobs</span>
<span class="col-4">Verscheidene werkplaatsen</span>
<span class="col-3">2025 - Nu</span>
</li>
<li class="row">
<span class="col-5">Zelfstudie Angular en docker</span>
<span class="col-4">/</span>
<span class="col-3">2023 - 2025</span>
</li>
<li class="row">
<span class="col-5">Allround ICT-er</span>
<span class="col-4">Nelissen computers</span>
<span class="col-3">2022 - 2022</span>
</li>
<li class="row attention">
<span class="col-5">ICT Trainer Java</span>
<span class="col-4">Multimedi</span>
<span class="col-3">2018 - 2021</span>
</li>
<li class="row">
<span class="col-5">Zelfstudie Java en Linux</span>
<span class="col-4">/</span>
<span class="col-3">2016 - 2017</span>
</li>
<li class="row">
<span class="col-5">Helpdesk technische dienst</span>
<span class="col-4">KUL</span>
<span class="col-3">2015 - 2016</span>
</li>
<li class="row">
<span class="col-5">Vrijwillig programmeur</span>
<span class="col-4">KUL</span>
<span class="col-3">2013 - 2014</span>
</li>
<li class="row text-secondary">
<span class="col-5">Tijdelijke Interim jobs</span>
<span class="col-4">Verscheidene werkplaatsen</span>
<span class="col-3">2007 - 2013</span>
</li>
<li class="row attention">
<span class="col-5">Programmeur C++</span>
<span class="col-4">Zetes</span>
<span class="col-3">2007 - 2007</span>
</li>
<li class="row">
<span class="col-5">Computer dokter</span>
<span class="col-4">Compudoc</span>
<span class="col-3">2006 - 2007</span>
</li>
</ul>
</div>
</section>
<div id="studies" class="divider"></div>
<section>
<div class="px-4 py-4">
<h2>Studies</h2>
<ul class="rowlines-short">
<li class="row">
<span class="col-6">Multimedi Java Enterprise ontwikkelaar</span>
<span class="col-6">2025 - nu</span>
</li>
<li class="row">
<span class="col-6">Multimedi Systeembeheer</span>
<span class="col-6">2017 - 2018</span>
</li>
<li class="row">
<span class="col-6">Cevora Java Enterprise ontwikkelaar</span>
<span class="col-6">2008 - 2009</span>
</li>
<li class="row">
<span class="col-6">A2: Elektrische installatietechnieken</span>
<span class="col-6">1998 - 2004</span>
</li>
</ul>
</div>
</section>
<div id="portfolio" class="divider"></div>
<section>
<div class="px-4 py-4">
<h2>Portfolio</h2>
<h4>Huidig project:</h4>
<a target="_blank" href="https://tds.truyen.network">TDS Family website</a>
<p>Full stack Java &amp; Angular website.</p>
<div id="carouselExampleIndicators" class="carousel carousel-dark slide carousel-fade mx-auto">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/tds1.png" class="d-block w-100" alt="Screenshot 1">
<div class="carousel-caption d-none d-md-block">
<h5>1</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/tds2.png" class="d-block w-100" alt="Screenshot 2">
<div class="carousel-caption d-none d-md-block">
<h5>2</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/tds3.png" class="d-block w-100" alt="Screenshot 3">
<div class="carousel-caption d-none d-md-block">
<h5>3</h5>
</div>
</div>
<div class="carousel-item">
<img src="img/tds4.png" class="d-block w-100" alt="Screenshot 4">
<div class="carousel-caption d-none d-md-block">
<h5>4</h5>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<h4>Websites:</h4>
<ul>
<li><a target="_blank" href="https://ward.truyen.network">Ward(this one)</a></li>
<li><a target="_blank" href="https://willem.truyen.network">Willem games</a></li>
<li><a target="_blank" href="https://git.truyen.network">Gitea</a></li>
<!-- <li><a target="_blank" href="https://wterminal.truyen.network">WTerminal</a></li> -->
</ul>
<br>
<h4>Oudere projecten:</h4>
<div class="row">
<div class="card">
<a target="_blank" href="https://wterminal.truyen.network">
<h3>WTerminal</h3>
</a>
<p>JavaScript 2023-2024<br>
Kan gebruikt worden in websites en als browser-addon</p>
<h5>Screenshot:</h5>
<img style="width: 100%" src="img/wterminal.png" />
</div>
<div class="card">
<h3>Ronny</h3>
<p>VB.net 2004-2006<br>Game met Direct draw rendering</p>
<h5>Youtube video:</h5>
<iframe src="https://www.youtube.com/embed/m7tgDUc2jXs">
</iframe>
</div>
<div class="card">
<h3>Minesweeper</h3>
<p>C/C++ 2006-2013<br>Game met OpenGL rendering</p>
<h5>Youtube video:</h5>
<iframe src="https://www.youtube.com/embed/Rejp6cVRxfc">
</iframe>
</div>
</div>
</section>
<footer class="text-end">
<p class="text-secondary my-0 me-1">Life is a long lesson in humility.</p>
</footer>
</main>
<script src="js/bootstrap.min.js"></script>
<script src="js/starback.js"></script>
<canvas id="canvas"></canvas>
<script src="js/main.js"> </script>
<script src="js/oneko.js"> </script>
</body>
</html>