283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html prefix="schema: http://schema.org/ foaf: https://xmlns.com/foaf/0.1/ og: http://ogp.me/ns#"
|
|
typeof="schema:WebPage"
|
|
lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="light dark">
|
|
|
|
<title>Tibo De Peuter</title>
|
|
<meta name="description" content="Computer Science student. Personal portfolio">
|
|
<link rel="alternate" type="application/n-quads" href="https://tibo.depeuter.dev/tdpeuter.ttl">
|
|
|
|
<meta property="og:title" content="Tibo De Peuter">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://tibo.depeuter.dev/assets/owl_circuit.png">
|
|
<meta property="og:url" content="https://tibo.depeuter.dev/">
|
|
<meta property="og:description" content="Computer Science student. Personal portfolio">
|
|
<meta property="og:locale" content="en_GB">
|
|
|
|
<meta property="foaf:name" content="Tibo De Peuter">
|
|
<meta property="foaf:givenName" content="Tibo">
|
|
<meta property="foaf:familyName" content="De Peuter">
|
|
<meta property="foaf:img" content="https://tibo.depeuter.dev/assets/owl_circuit.png">
|
|
<meta property="foaf:homepage" content="https://tibo.depeuter.dev/">
|
|
<meta property="foaf:gender" content="male">
|
|
<link rel="foaf:maker" content="https://tibo.depeuter.dev/">
|
|
|
|
<link rel="stylesheet" type="text/css" href="/style.css">
|
|
<link rel="shortcut icon" type="image/png" href="/assets/images/owl_circuit.png">
|
|
<link rel="apple-touch-icon" href="/assets/images/owl_circuit.png">
|
|
</head>
|
|
<body>
|
|
<nav-bar></nav-bar>
|
|
|
|
<div class="hero">
|
|
<div class="hero-content">
|
|
<header class="dictionary-entry">
|
|
<h1 class="word">Tibo De Peuter</h1>
|
|
<p class="ipa">/'tibo də 'pøtər/</p>
|
|
<ol class="definitions">
|
|
<li data-i18n="landing.hero.student">Computer science student</li>
|
|
<li data-i18n="landing.hero.passionate">
|
|
Lifelong learner, passionate about building <strong>secure, high-performance systems</strong> with
|
|
<strong>clean, maintainable code</strong>
|
|
</li>
|
|
<li data-i18n="landing.hero.enthusiast">
|
|
Dedicated to software architecture, DevSecOps, infrastructure & automation
|
|
</li>
|
|
</ol>
|
|
</header>
|
|
|
|
<div class="badges">
|
|
<a href="mailto:tibo@depeuter.dev" title="Mail me" data-i18n="contact.email">
|
|
<img src="/assets/images/icons/mail.svg" alt="" class="icon"/>
|
|
</a>
|
|
<a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account"
|
|
data-i18n="contact.linkedin">
|
|
<img src="/assets/images/icons/linkedin.svg" alt="" class="icon"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<main>
|
|
<section id="my-pillars">
|
|
<h2 class="hidden">Pillars</h2>
|
|
<p data-i18n="landing.pillars.intro">
|
|
As a computer science student, my work is grounded in three core pillars:
|
|
</p>
|
|
|
|
<div id="pillars" class="cards">
|
|
<article class="card">
|
|
<header>
|
|
<img src="/assets/images/icons/maintenance.svg" alt="" class="icon"/>
|
|
<h3 data-i18n="landing.pillars.maintainability.header">Maintainability</h3>
|
|
<p data-i18n="landing.pillars.maintainability.intro">Readable, maintainable code that lasts</p>
|
|
</header>
|
|
|
|
<ul>
|
|
<li data-i18n="landing.pillars.maintainability.1_tested">Well-tested and thoroughly documented</li>
|
|
<li data-i18n="landing.pillars.maintainability.2_clean">
|
|
Clean architecture, best practices, & code reviews
|
|
</li>
|
|
<li data-i18n="landing.pillars.maintainability.3_cicd">
|
|
Automated <abbr title="Continuous Integration / Continuous Deployment">CI/CD</abbr> and testing
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
<article class="card">
|
|
<header>
|
|
<img src="/assets/images/icons/security.svg" alt="" class="icon"/>
|
|
<h3 data-i18n="landing.pillars.security.header">Security</h3>
|
|
<p data-i18n="landing.pillars.security.intro">Security by design — not as an afterthought</p>
|
|
</header>
|
|
|
|
<ul>
|
|
<li data-i18n="landing.pillars.security.1_hardening">Secrets management & system hardening</li>
|
|
<li data-i18n="landing.pillars.security.2_coding">Secure coding practices & timely updates</li>
|
|
<li data-i18n="landing.pillars.security.3_monitoring">Continuous monitoring</li>
|
|
</ul>
|
|
</article>
|
|
<article class="card">
|
|
<header>
|
|
<img src="/assets/images/icons/performance.svg" alt="" class="icon"/>
|
|
<h3 data-i18n="landing.pillars.performance.header">Performance</h3>
|
|
<p data-i18n="landing.pillars.performance.intro">Efficient and scalable systems</p>
|
|
</header>
|
|
|
|
<ul>
|
|
<li data-i18n="landing.pillars.performance.1_algorithms">Optimized algorithms & data structures</li>
|
|
<li data-i18n="landing.pillars.performance.2_benchmarks">Profiling, benchmarking and optimization</li>
|
|
<li data-i18n="landing.pillars.performance.3_architecture">Scalable architecture design</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="projects">
|
|
<h2 data-i18n="nav.projects">Projects</h2>
|
|
|
|
<div class="cards">
|
|
<article class="card">
|
|
<h3>Dwengo-1</h3>
|
|
|
|
<div class="body">
|
|
<p data-i18n="landing.projects.dwengo-1">
|
|
Interactive online platform, using <a href="https://dwengo.org/">Dwengo vzw</a>'s API to
|
|
teach children STEM-related topics.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="badges">
|
|
<img src="/assets/images/icons/typescript.svg" alt="" class="icon" title="TypeScript"/>
|
|
<a href="https://github.com/SELab-2/Dwengo-1" title="Dwengo-1 source code">
|
|
<img src="/assets/images/icons/github.svg" alt="" class="icon"/>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Studeez</h3>
|
|
|
|
<div class="body">
|
|
<p data-i18n="landing.projects.studeez">
|
|
Mobile productivity app that allows students to study collaboratively and efficiently through
|
|
shared sessions and motivational features.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="badges">
|
|
<img src="/assets/images/icons/kotlin.svg" alt="" class="icon" title="Kotlin"/>
|
|
<a href="https://github.com/lbarraga/Studeez" title="Studeez source code" data-i18n="contact.github">
|
|
<img src="/assets/images/icons/github.svg" alt="" class="icon"/>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<article class="card">
|
|
<h3>Homelab</h3>
|
|
|
|
<div class="body">
|
|
<p data-i18n="landing.projects.homelab">
|
|
My personal microdatacenter hosting various services. Focused on automation, security, and
|
|
scalability.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="badges">
|
|
<img src="/assets/images/icons/nix.svg" alt="" class="icon" title="Nix"/>
|
|
<a href="https://git.depeuter.dev/Bos55/nix-config" title="Homelab configuration source code">
|
|
<img src="/assets/images/icons/git.svg" alt="" class="icon"/>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<p data-i18n="landing.projects.more">
|
|
More projects can be found on my
|
|
<a href="https://git.depeuter.dev/tdpeuter" title="Visit my personal git" data-i18n="landing.git">
|
|
personal git</a>.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<h2 data-i18n="landing.contact.header">Get in touch</h2>
|
|
<p data-i18n="landing.contact.intro">
|
|
I'm open to <strong>internships</strong>, collaborations, and new opportunities.
|
|
View my <a href="/pages/cv.html" title="View my CV">CV</a>, or connect with me via:
|
|
</p>
|
|
|
|
<ul class="links">
|
|
<li>
|
|
<a href="mailto:tibo@depeuter.dev" title="Mail me" data-i18n="contact.email">
|
|
<img src="/assets/images/icons/mail.svg" alt="" class="icon"/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://git.depeuter.dev/tdpeuter" title="Visit my personal git" data-i18n="landing.git">
|
|
<img src="/assets/images/icons/git.svg" alt="" class="icon"/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://github.com/tdpeuter" title="My GitHub account" data-i18n="contact.github">
|
|
<img src="/assets/images/icons/github.svg" alt="" class="icon"/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.linkedin.com/in/tdpeuter/" title="My LinkedIn account"
|
|
data-i18n="contact.linkedin">
|
|
<img src="/assets/images/icons/linkedin.svg" alt="" class="icon"/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<!-- TODO Turn footer into a reusable component -->
|
|
<noscript>
|
|
<div class="quote">
|
|
<h2>JavaScript is disabled</h2>
|
|
<p>
|
|
I totally support your decision to disable JavaScript.
|
|
However, as of right now, this website does not completely work without JavaScript.
|
|
I am working on improving that.
|
|
</p>
|
|
<p>
|
|
Please consider allowing JavaScript for this website.
|
|
There is no tracking or ads.
|
|
</p>
|
|
<p>
|
|
Kind regards
|
|
</p>
|
|
<p class="signature">Tibo De Peuter</p>
|
|
</div>
|
|
</noscript>
|
|
<p>
|
|
<a href="/key.asc" title="Get my public PGP key" data-i18n="footer.key">
|
|
08A9 C1C8 CF91 59C9 172A BA12 9B11 F524 3089 DB5B</a>
|
|
(<a href="https://keys.openpgp.org/vks/v1/by-fingerprint/08A9C1C8CF9159C9172ABA129B11F5243089DB5B"
|
|
title="Get my public PGP key (alternative link)"
|
|
data-i18n="footer.key_alternative">alternative link</a>)
|
|
|
|
<a href="https://en.wikipedia.org/wiki/Public-key_cryptography"
|
|
title="What is public key cryptography?"
|
|
data-i18n="footer.key_help">
|
|
<img src="/assets/images/icons/question-mark.svg" alt="" class="icon inline-icon"/></a>
|
|
</p>
|
|
<p>
|
|
<span data-i18n="footer.made_with">Made with</span> <span class="heart">♥</span>.
|
|
<a href="https://git.depeuter.dev/tdpeuter/tdpeuter"
|
|
about="source code of this webpage"
|
|
data-i18n="footer.source_code">
|
|
Source code
|
|
</a>
|
|
</p>
|
|
|
|
<!-- TODO Keep a list of links so they can also be used in print -->
|
|
<!-- <ol class="save-links">-->
|
|
<!-- <li id=""></li>-->
|
|
<!-- </ol>-->
|
|
</footer>
|
|
</body>
|
|
<script src="script.js"></script>
|
|
<script>
|
|
function updatePodium(containerElement) {
|
|
const style = getComputedStyle(containerElement);
|
|
const columnCount = style.gridTemplateColumns.split(' ').length;
|
|
|
|
console.debug(`Detected column count: ${columnCount}`);
|
|
|
|
if (columnCount < 3) {
|
|
containerElement.classList.remove('podium');
|
|
} else {
|
|
containerElement.classList.add('podium');
|
|
}
|
|
}
|
|
|
|
const pillars = document.getElementById('pillars');
|
|
|
|
window.addEventListener('resize', () => updatePodium(pillars));
|
|
updatePodium(pillars);
|
|
</script>
|
|
</html>
|