feat: Add additional pages
This commit is contained in:
parent
80301dae5b
commit
9a498022f3
GPG key ID:
38297DE43F75FFE2
10 changed files with 465 additions and 96 deletions
42
i18n/en.json
42
i18n/en.json
|
|
@ -1,4 +1,15 @@
|
|||
{
|
||||
"about_me": {
|
||||
"hobbies": {
|
||||
"homelab": "Programming and computers are my passion, so a lot of my free time is spent working on various projects. The project I am most proud of is my homelab. I love learning about new technologies and applying that knowledge in my homelab setup. More information about my homelab is available on its <a href=\"/pages/homelab.html\">dedicated page</a>.",
|
||||
"horses": "When I am not behind a screen, I am busy with my other hobby, which is horseback riding. I love taking care of horses and focussing on dressage riding. At the moment, I only ride for fun.",
|
||||
"passion": "My passion for computers started when I decided to learn how to create my own website at the age of 13. Many websites followed after that first one. Since then, I pursued this interest by studying Computer Science.",
|
||||
"summer": "During the summer, I often take a hard break from screens. I enjoy hiking, especially in the mountains. I can often be found in front of a group of children, as I am a youth leader since 2018. Creating fun activities and seeing children have a great time is very rewarding for me.",
|
||||
"title": "Hobbies"
|
||||
},
|
||||
"subtitle": "A less formal introduction",
|
||||
"title": "About me"
|
||||
},
|
||||
"contact": {
|
||||
"email": {
|
||||
"title": "Mail me"
|
||||
|
|
@ -91,6 +102,34 @@
|
|||
"made_with": "Made with",
|
||||
"source_code": "Source code"
|
||||
},
|
||||
"homelab": {
|
||||
"history": {
|
||||
"2020": "TrueNAS Core (FreeBSD) on an old laptop, dual drive. TrueNAS apps running in jails.",
|
||||
"2021": "Upgrading to TrueNAS SCALE (Debian), adding external drives. TrueNAS apps running in K3s.",
|
||||
"2022": "Migrating from TrueNAS apps to <a href=\"https://truecharts.org/\">TrueCharts</a> (no longer maintained for TrueNAS). Focus on reverse proxying and VPN. Adding a simple backup server. Automated backups using TrueNAS with custom script to send ZFS snapshots to a non-ZFS system.",
|
||||
"2023": "Building a custom enclosure for the homelab hardware, so the disk aren't just sitting on a shelf anymore, they are cooled better and better cable management.",
|
||||
"2024": "Adding a Proxmox VE node, migrating (all) my services to it. Most important ones run in their own dedicated VM. Focus on Infrastructure as Code. Increased stability.",
|
||||
"2025": "Automating deployment of VMs and containers. Moving towards platform engineering to streamline development.",
|
||||
"header": "History"
|
||||
},
|
||||
"learn": "My homelab has allowed me to learn and experiment with virtualisation, containerization, networking, storage solutions, backups, automation, security practices, monitoring, <abbr title=\"Infrastructure as Code\">IaC</abbr>, and more.",
|
||||
"passion_project": "My passion project is my homelab. Started in 2020 with <a href=\"https://www.truenas.com/truenas-core/\">TrueNAS Core</a> on an old laptop, it has now turned into a multi-node setup. It serves as a playground for me to learn about various technologies, as well as hosting my personal services.",
|
||||
"self-hosted": {
|
||||
"forgejo": "<a href=\"https://forgejo.org/\">Forgejo</a> as a GitHub alternative, including actions runners for CI/CD and <a href=\"https://docs.renovatebot.com/\">Renovate bot</a> for dependency updates",
|
||||
"home_assistant": "<a href=\"https://www.home-assistant.io/\">Home Assistant</a> for home automation",
|
||||
"intro": "My homelab is used to self-host several critical and non-critical services. They consist of services that I and/or my family and friends use on a daily basis. Others are just for fun, are nice-to-haves, to learn new things, or to experiment with.",
|
||||
"jellyfin": "<a href=\"https://jellyfin.org/\">Jellyfin</a> for media streaming",
|
||||
"most": "The most used services are:",
|
||||
"nextcloud": "<a href=\"https://nextcloud.com/\">Nextcloud</a> as a Microsoft 365/Google Drive alternative",
|
||||
"vaultwarden": "<a href=\"https://www.vaultwarden.ca/\">Vaultwarden</a> as a password manager"
|
||||
},
|
||||
"setup": {
|
||||
"backup": "A simple backup server",
|
||||
"code": "The written configuration of (part of) my homelab is available on <a href=\"https://git.depeuter.dev/Bos55/nix-config\">Bos55/nix-config</a>.",
|
||||
"intro": "Currently, the core of my homelab consists of:",
|
||||
"truenas": "TrueNAS SCALE (now called <a href=\"https://www.truenas.com/truenas-community-edition/\">TrueNAS Community Edition</a>)"
|
||||
}
|
||||
},
|
||||
"kind_regards": "Kind regards",
|
||||
"landing": {
|
||||
"git": {
|
||||
|
|
@ -125,7 +164,8 @@
|
|||
"menu_close": {
|
||||
"aria-label": "Close menu",
|
||||
"innerHTML": "[-] close"
|
||||
}
|
||||
},
|
||||
"projects": "Projects"
|
||||
},
|
||||
"time": {
|
||||
"present": "present",
|
||||
|
|
|
|||
48
i18n/nl.json
48
i18n/nl.json
|
|
@ -1,4 +1,15 @@
|
|||
{
|
||||
"about_me": {
|
||||
"hobbies": {
|
||||
"homelab": "Programmeren en computers zijn mijn passie, dus veel van mijn vrije tijd gaat naar het werken aan verschillende projecten. Het project waar ik het meest trots op ben is mijn homelab. Ik hou van nieuwe technologieën ontdekken en die kennis toe te passen in mijn homelab setup. Meer informatie over mijn homelab staat op de <a href=\"/pages/homelab.html\">speciale pagina</a>.",
|
||||
"horses": "Als ik niet achter een scherm zit, ben ik bezig met mijn andere hobby: paardrijden. Ik hou ervan voor paarden te zorgen en op dressuur te focussen. Momenteel rijd ik alleen recreatief.",
|
||||
"passion": "Mijn passie voor computers begon toen ik op 13-jarige leeftijd besloot te leren hoe ik mijn eigen website kon maken. Op die eerste website volgde vele andere. Sindsdien heb ik die interesse achtervolgd door informatica the studeren.",
|
||||
"summer": "Tijdens de zomer neem ik vaak een harde pauze, weg van schermen. Ik geniet van wandelen, zeker in de bergen. Je vindt me vaak voor een groep kinderen, omdat ik sinds 2018 animator in het jeugdwerk ben. Leuke speelactiviteiten maken en kinderen plezier zien hebben geeft me voldoening.",
|
||||
"title": "Hobby's"
|
||||
},
|
||||
"subtitle": "Een minder formele kennismaking",
|
||||
"title": "Over mij"
|
||||
},
|
||||
"contact": {
|
||||
"email": {
|
||||
"title": "Stuur mij een e-mail"
|
||||
|
|
@ -24,10 +35,10 @@
|
|||
"bsc_computer_science": {
|
||||
"1_insights": "Solide theoretische basis in informatica, met inzicht in fundamentele concepten, principes en design patterns, ondersteund door praktische toepassingen in projecten.",
|
||||
"2_background": "Sterke algoritmische achtergrond, inclusief complexiteitsanalyse, geavanceerde datastructuren, algoritmische paradigma's, hashing, compressie en automaten.",
|
||||
"3_knowledge": "Grondige kennis van veilige systemen en netwerken: RESTful API's, semantisch web, netwerkbeveiliging, cryptografie, besturingssystemen, en zowel relationele als NoSQL-databanken.",
|
||||
"3_knowledge": "Grondige kennis van veilige systemen en netwerken: RESTful API's, semantische web, netwerkbeveiliging, cryptografie, besturingssystemen, relationele- en NoSQL-databanken.",
|
||||
"4_ai": "Inzicht in ethische en duurzame Artificiële Intelligentie, <abbr title=\"Explainable AI\">XAI</abbr>, neurale netwerken, <abbr title=\"Constraint Satisfaction Problem\">CSP</abbr>'s, <abbr title=\"Hidden Markov Model\">HMM</abbr>'s en computer visie.",
|
||||
"5_learning": "Levenslang leren en snel zelfstandig nieuwe technologieën en methodologieën eigen maken.",
|
||||
"description": "Minor beveiliging & parallele systemen",
|
||||
"description": "Minor beveiliging & parallelle systemen",
|
||||
"title": {
|
||||
"href": "https://studiekiezer.ugent.be/2021/bachelor-of-science-in-de-informatica",
|
||||
"innerHTML": "BSc informatica"
|
||||
|
|
@ -56,7 +67,7 @@
|
|||
},
|
||||
"languages": "Talenkennis",
|
||||
"msc_computer_science": {
|
||||
"description": "Keuzevakken met een focus op performante systemen en beveiliging",
|
||||
"description": "Keuzevakken met focus op performante systemen en beveiliging",
|
||||
"title": {
|
||||
"href": "https://studiekiezer.ugent.be/2024/master-of-science-in-de-informatica",
|
||||
"innerHTML": "MSc informatica"
|
||||
|
|
@ -91,6 +102,34 @@
|
|||
"made_with": "Gemaakt met",
|
||||
"source_code": "Broncode"
|
||||
},
|
||||
"homelab": {
|
||||
"history": {
|
||||
"2020": "TrueNAS Core (FreeBSD) op een oude laptop, twee schijven. TrueNAS apps in jails.",
|
||||
"2021": "Upgrade naar TrueNAS SCALE (Debian), extra externe schijven. TrueNAS apps in K3s.",
|
||||
"2022": "Migratie van TrueNAS apps naar <a href=\"https://truecharts.org/\">TrueCharts</a> (intussen niet meer ondersteund voor TrueNAS). Focus op reverse proxying en VPN. Simpele backup server toegevoegd. Geautomatiseerde backups via TrueNAS met eigen script om ZFS snapshots naar een non-ZFS systeem te sturen.",
|
||||
"2023": "Custom behuizing voor de homelab hardware, zodat de schijven niet meer gewoon op een plank liggen, ze beter gekoeld worden en verbeterde cable management.",
|
||||
"2024": "Extra Proxmox VE node, al mijn services ernaar gemigreerd. De meest belangrijke draaien in hun eigen VM. Focus op Infrastructure as Code. Verbeterde stabiliteit.",
|
||||
"2025": "Geautomatiseerde deployment van VMs en containers. Shift naar platform engineering om ontwikkeling te stroomlijnen.",
|
||||
"header": "Geschiedenis"
|
||||
},
|
||||
"learn": "Mijn homelab heeft me doen leren over en experimenteren met virtualisatie, containerisatie, netwerken, opslag, backups, automatisatie, beveiliging, monitoring, <abbr title=\"Infrastructure as Code\">IaC</abbr> en meer.",
|
||||
"passion_project": "Mijn passieproject is mijn homelab. Wat begon in 2020 met <a href=\"https://www.truenas.com/truenas-core/\">TrueNAS Core</a> op een oude laptop, is nu een multi-node setup geworden. Het is mijn speeltuin om nieuwe technologieën te leren en persoonlijke services te hosten.",
|
||||
"self-hosted": {
|
||||
"forgejo": "<a href=\"https://forgejo.org/\">Forgejo</a> als een GitHub alternatief, inclusief actions runners voor CI/CD en <a href=\"https://docs.renovatebot.com/\">Renovate bot</a> voor dependency updates",
|
||||
"home_assistant": "<a href=\"https://www.home-assistant.io/\">Home Assistant</a> voor home automation",
|
||||
"intro": "Mijn homelab wordt gebruikt om verschillende kritieke en niet-kritieke services te self-hosten. Ze bestaan uit services die ik en/of mijn familie en vrienden dagelijks gebruiken. Andere zijn gewoon voor het plezier, voor het gemak, om nieuwe dingen te leren of om te experimenteren.",
|
||||
"jellyfin": "<a href=\"https://jellyfin.org/\">Jellyfin</a> voor media streaming",
|
||||
"most": "De meestgebruikte services zijn:",
|
||||
"nextcloud": " <a href=\"https://nextcloud.com/\">Nextcloud</a> als een Microsoft 365/Google Drive alternatief",
|
||||
"vaultwarden": "<a href=\"https://www.vaultwarden.ca/\">Vaultwarden</a> als een password manager"
|
||||
},
|
||||
"setup": {
|
||||
"backup": "Een simpele backup server",
|
||||
"code": "De geschreven configuratie van (deel van) mijn homelab is terug te vinden op <a href=\"https://git.depeuter.dev/Bos55/nix-config\">Bos55/nix-config</a>.",
|
||||
"intro": "Momenteel bestaat de kern van mijn homelab uit:",
|
||||
"truenas": "TrueNAS SCALE (nu <a href=\"https://www.truenas.com/truenas-community-edition/\">TrueNAS Community Edition</a>)"
|
||||
}
|
||||
},
|
||||
"kind_regards": "Met vriendelijke groeten",
|
||||
"landing": {
|
||||
"git": {
|
||||
|
|
@ -125,7 +164,8 @@
|
|||
"menu_close": {
|
||||
"aria-label": "Menu sluiten",
|
||||
"innerHTML": "[-] sluiten"
|
||||
}
|
||||
},
|
||||
"projects": "Projecten"
|
||||
},
|
||||
"time": {
|
||||
"present": "heden",
|
||||
|
|
|
|||
14
index.html
14
index.html
|
|
@ -26,9 +26,9 @@
|
|||
<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">
|
||||
<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>
|
||||
|
|
@ -43,22 +43,22 @@
|
|||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<img src="/assets/images/icons/linkedin.svg" alt="" class="icon"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
101
pages/about_me.html
Normal file
101
pages/about_me.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html 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>About me</title>
|
||||
|
||||
<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>
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1 data-i18n="about_me.title">About me</h1>
|
||||
<p data-i18n="about_me.subtitle">A less formal introduction</p>
|
||||
</header>
|
||||
|
||||
<h2 data-i18n="about_me.hobbies.title">Hobbies</h2>
|
||||
<p data-i18n="about_me.hobbies.passion">
|
||||
My passion for computers started when I decided to learn how to create my own website at the age of 13.
|
||||
Many websites followed after that first one.
|
||||
Since then, I pursued this interest in studying Computer Science.
|
||||
</p>
|
||||
<p data-i18n="about_me.hobbies.homelab">
|
||||
Programming and computers is my passion, so a lot of my free time is spent working on various projects.
|
||||
The project I am most proud of is my homelab.
|
||||
I love learning about new technologies and applying that knowledge in my homelab setup.
|
||||
More information about my homelab is available on its <a href="/pages/homelab.html">dedicated page</a>.
|
||||
</p>
|
||||
<p data-i18n="about_me.hobbies.horses">
|
||||
When I am not behind a screen, I am busy with my other hobby, which is horseback riding.
|
||||
I love taking care of horses and focussing on dressage riding.
|
||||
At the moment, I only ride for fun.
|
||||
</p>
|
||||
<p data-i18n="about_me.hobbies.summer">
|
||||
During the summer, I often take a hard break from screens.
|
||||
I enjoy hiking, especially in the mountains.
|
||||
I can often be found in front of a group of children, as I am a youth leader since 2018.
|
||||
Creating fun activities and seeing children have a great time is very rewarding for me.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<button-collection></button-collection>
|
||||
|
||||
<footer>
|
||||
<!-- TODO Turn footer into a reusable component -->
|
||||
<noscript>
|
||||
<div class="quote">
|
||||
<h2 data-i18n="noscript.disabled">JavaScript is disabled</h2>
|
||||
<p data-i18n="noscript.support">
|
||||
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 data-i18n="noscript.enable">
|
||||
Please consider allowing JavaScript for this website.
|
||||
There is no tracking or ads.
|
||||
</p>
|
||||
<p data-i18n="kind_regards">
|
||||
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"
|
||||
class="hidden"
|
||||
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>
|
||||
<script src="../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,18 +7,11 @@
|
|||
|
||||
<title>Curriculum Vitae - Tibo De Peuter</title>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<style>
|
||||
main {
|
||||
max-width: 320mm;
|
||||
padding: 2rem;
|
||||
|
||||
counter-reset: link;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -67,10 +60,6 @@
|
|||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#profile {
|
||||
text-align: justify;
|
||||
}
|
||||
|
|
@ -87,27 +76,6 @@
|
|||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
font-size: 10pt;
|
||||
line-height: 1.1em;
|
||||
|
||||
color: black;
|
||||
background: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none; /* Remove link styling */
|
||||
color: black; /* Ensure links are printed in black */
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
section {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
|
@ -173,7 +141,7 @@
|
|||
}
|
||||
</style>
|
||||
<body>
|
||||
<nav-bar class="interactive"></nav-bar>
|
||||
<nav-bar></nav-bar>
|
||||
<main class="wrapper">
|
||||
<header>
|
||||
<h1>Tibo De Peuter</h1>
|
||||
|
|
@ -225,7 +193,7 @@
|
|||
</div>
|
||||
<button id="reveal-contact" class="reveal-btn interactive" aria-label="Show contact information"
|
||||
onclick="reveal()">
|
||||
<img style="width: 1.2em; height: 1.2em;" src="assets/images/icons/eye.svg"
|
||||
<img style="width: 1.2em; height: 1.2em;" src="/assets/images/icons/eye.svg"
|
||||
alt="Show contact info" class="icon"/>
|
||||
<span data-i18n="contact.reveal">Show contact information</span>
|
||||
</button>
|
||||
|
|
@ -270,7 +238,7 @@
|
|||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
<img src="/assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
</td>
|
||||
<td>
|
||||
<a class="save-link"
|
||||
|
|
@ -280,7 +248,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
<img src="/assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
</td>
|
||||
<td>2024</td>
|
||||
</tr>
|
||||
|
|
@ -293,7 +261,7 @@
|
|||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
<img src="/assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.joetz.be/over-joetz">Joetz vzw</a>
|
||||
|
|
@ -301,7 +269,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
<img src="/assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
</td>
|
||||
<td>2022</td>
|
||||
</tr>
|
||||
|
|
@ -314,7 +282,7 @@
|
|||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
<img src="/assets/images/icons/school.svg" alt="Institution" class="badge icon"/>
|
||||
</td>
|
||||
<td>
|
||||
<a href="https://www.joetz.be/over-joetz">Joetz vzw</a>
|
||||
|
|
@ -322,7 +290,7 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
<img src="/assets/images/icons/calendar.svg" alt="Year" class="badge icon"/>
|
||||
</td>
|
||||
<td>2018</td>
|
||||
</tr>
|
||||
|
|
@ -509,9 +477,9 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<p>
|
||||
<button class="interactive" onclick="window.print()">
|
||||
<img style="width: 1lh; height: 1lh;" src="assets/images/icons/printer.svg" alt="" class="icon"/>
|
||||
<p class="interactive">
|
||||
<button onclick="window.print()">
|
||||
<img style="width: 1lh; height: 1lh;" src="/assets/images/icons/printer.svg" alt="" class="icon"/>
|
||||
Print CV
|
||||
</button>
|
||||
</p>
|
||||
|
|
@ -537,7 +505,7 @@
|
|||
</div>
|
||||
</noscript>
|
||||
<p>
|
||||
<a href="./key.asc" title="Get my public PGP key" data-i18n="footer.key">
|
||||
<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"
|
||||
|
|
@ -620,6 +588,6 @@
|
|||
reveal();
|
||||
}
|
||||
</script>
|
||||
<script src="script.js"></script>
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
167
pages/homelab.html
Normal file
167
pages/homelab.html
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<html 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>Homelab</title>
|
||||
|
||||
<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>
|
||||
|
||||
<main>
|
||||
<h1>Homelab</h1>
|
||||
|
||||
<p data-i18n="homelab.passion_project">
|
||||
My passion project is my homelab.
|
||||
Started in 2020 with <a href="https://www.truenas.com/truenas-core/">TrueNAS Core</a> on an old laptop, it has now turned into a multi-node setup.
|
||||
It serves as a playground for me to learn about various technologies, as well as hosting my personal services.
|
||||
</p>
|
||||
<p data-i18n="homelab.learn">
|
||||
My homelab has allowed me to learn and experiment with virtualization, containerization, networking,
|
||||
storage solutions, backups, automation, security practices, monitoring, infrastructure as code, ...
|
||||
</p>
|
||||
|
||||
<h2>Setup</h2>
|
||||
<p data-i18n="homelab.setup.intro">
|
||||
Currently, the core of my homelab consists of:
|
||||
</p>
|
||||
<ul>
|
||||
<li data-i18n="homelab.setup.truenas">TrueNAS SCALE (now called <a href="https://www.truenas.com/truenas-community-edition/">TrueNAS Community Edition</a>)</li>
|
||||
<li><a href="https://www.proxmox.com/en/proxmox-ve">Proxmox VE</a></li>
|
||||
<li data-i18n="homelab.setup.backup">A simple backup server</li>
|
||||
</ul>
|
||||
<p data-i18n="homelab.setup.code">
|
||||
The written configuration of (part of) my homelab is available on
|
||||
<a href="https://git.depeuter.dev/Bos55/nix-config">Bos55/nix-config</a>.
|
||||
</p>
|
||||
|
||||
<h2>Self-hosted services</h2>
|
||||
<p data-i18n="homelab.self-hosted.intro">
|
||||
My homelab is used to self-host several critical and non-critical services.
|
||||
They consist of services that I and/or my family and friends use on a daily basis.
|
||||
Others are just for fun, are nice-to-haves, to learn new things, or to experiment with.
|
||||
</p>
|
||||
<p data-i18n="homelab.self-hosted.most">The most used services are:</p>
|
||||
<ul>
|
||||
<li data-i18n="homelab.self-hosted.nextcloud">
|
||||
<a href="https://nextcloud.com/">Nextcloud</a> as a Microsoft 365/Google Drive alternative
|
||||
</li>
|
||||
<li data-i18n="homelab.self-hosted.forgejo">
|
||||
<a href="https://forgejo.org/">Forgejo</a> as a GitHub alternative, including actions runners for CI/CD and
|
||||
<a href="https://docs.renovatebot.com/">Renovate bot</a> for dependency updates
|
||||
</li>
|
||||
<li data-i18n="homelab.self-hosted.vaultwarden">
|
||||
<a href="https://www.vaultwarden.ca/">Vaultwarden</a> as a password manager
|
||||
</li>
|
||||
<li data-i18n="homelab.self-hosted.home_assistant">
|
||||
<a href="https://www.home-assistant.io/">Home Assistant</a> for home automation
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://jellyfin.org/">Jellyfin</a> for media streaming
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 data-i18n="homelab.history.header">History</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<time datetime="2020">2020</time>
|
||||
<p data-i18n="homelab.history.2020">
|
||||
TrueNAS Core (FreeBSD) on an old laptop, dual drive. TrueNAS apps running in jails.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2021">2021</time>
|
||||
<p data-i18n="homelab.history.2021">
|
||||
Upgrading to TrueNAS SCALE (Debian), adding external drives. TrueNAS apps running in K3s.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2022">2022</time>
|
||||
<p data-i18n="homelab.history.2022">
|
||||
Migrating from TrueNAS apps to <a href="https://truecharts.org/">TrueCharts</a> (no longer maintained
|
||||
for TrueNAS). Focus on reverse proxying and VPN. Adding a simple backup server. Automated backups using
|
||||
TrueNAS with custom script to send ZFS snapshots to a non-ZFS system.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2023">2023</time>
|
||||
<p data-i18n="homelab.history.2023">
|
||||
Building a custom enclosure for the homelab hardware, so the disk aren't just sitting on a shelf
|
||||
anymore, they are cooled better and better cable management.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2024">2024</time>
|
||||
<p data-i18n="homelab.history.2024">
|
||||
Adding a Proxmox VE node, migrating (all) my services to it. Most important ones run in their own
|
||||
dedicated VM. Focus on Infrastructure as Code. Increased stability.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<time datetime="2025">2025</time>
|
||||
<p data-i18n="homelab.history.2025">
|
||||
Automating deployment of VMs and containers. Moving towards platform engineering to streamline
|
||||
development.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<!-- TODO Turn footer into a reusable component -->
|
||||
<noscript>
|
||||
<div class="quote">
|
||||
<h2 data-i18n="noscript.disabled">JavaScript is disabled</h2>
|
||||
<p data-i18n="noscript.support">
|
||||
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 data-i18n="noscript.enable">
|
||||
Please consider allowing JavaScript for this website.
|
||||
There is no tracking or ads.
|
||||
</p>
|
||||
<p data-i18n="kind_regards">
|
||||
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"
|
||||
class="hidden"
|
||||
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>
|
||||
<script src="../script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,76 +2,82 @@ function getButtons() {
|
|||
const buttons = document.createElement('template');
|
||||
buttons.id = 'button-collection-template';
|
||||
buttons.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<my-marquee speed="50" direction="left">
|
||||
<!-- Socials -->
|
||||
<button-8831 href="mailto:tibo@depeuter.dev"
|
||||
src="assets/images/88x31/email.gif"
|
||||
src="/assets/images/88x31/email.gif"
|
||||
hint="Mail Me"></button-8831>
|
||||
<button-8831 href="./key.asc"
|
||||
src="assets/images/88x31/privacy-now.gif"
|
||||
<button-8831 href="/key.asc"
|
||||
src="/assets/images/88x31/privacy-now.gif"
|
||||
hint="My GPG key"></button-8831>
|
||||
<!-- Operating Systems -->
|
||||
<button-8831 href="https://www.gnu.org/gnu/linux.html"
|
||||
src="assets/images/88x31/gnu-linux.gif"
|
||||
src="/assets/images/88x31/gnu-linux.gif"
|
||||
hint="Made on GNU/Linux"></button-8831>
|
||||
<!-- Editors -->
|
||||
<!-- Services -->
|
||||
<button-8831 href="https://www.proxmox.com/"
|
||||
src="assets/images/88x31/proxmox.gif"
|
||||
src="/assets/images/88x31/proxmox.gif"
|
||||
hint="Proxmox VE"></button-8831>
|
||||
<button-8831 href="https://cloud.depeuter.dev/"
|
||||
src="assets/images/88x31/nextcloud.gif"
|
||||
src="/assets/images/88x31/nextcloud.gif"
|
||||
hint="Nextcloud"></button-8831>
|
||||
<button-8831 href="https://ublockorigin.com/"
|
||||
src="assets/images/88x31/ublock-now.png"
|
||||
src="/assets/images/88x31/ublock-now.png"
|
||||
hint="uBlock Origin Now!"></button-8831>
|
||||
<!-- Movements -->
|
||||
<button-8831 href="https://home.cern/news/opinion/computing/open-internet-and-free-web"
|
||||
src="assets/images/88x31/firefox-take-back-the-web.gif"
|
||||
src="/assets/images/88x31/firefox-take-back-the-web.gif"
|
||||
hint="Take back the web (Firefox)"></button-8831>
|
||||
<button-8831 href="https://www.ifixit.com/"
|
||||
src="assets/images/88x31/right-to-repair.png"
|
||||
src="/assets/images/88x31/right-to-repair.png"
|
||||
hint="I Support Right To Repair"></button-8831>
|
||||
<!-- Compatibility -->
|
||||
<button-8831 href="https://www.mozilla.org/firefox/"
|
||||
src="assets/images/88x31/firefox.gif"
|
||||
src="/assets/images/88x31/firefox.gif"
|
||||
hint="Tested on Firefox"></button-8831>
|
||||
<!-- Web -->
|
||||
<button-8831 href="https://www.depeuter.dev"
|
||||
src="assets/images/88x31/graphic-design-is-my-passion.gif"
|
||||
src="/assets/images/88x31/graphic-design-is-my-passion.gif"
|
||||
hint="Graphic Design Is My Passion"></button-8831>
|
||||
<button-8831 href="https://developer.mozilla.org/en-US/docs/Web/CSS"
|
||||
src="assets/images/88x31/made-with-css.gif"
|
||||
src="/assets/images/88x31/made-with-css.gif"
|
||||
hint="CSS is awesome"></button-8831>
|
||||
<!-- Media -->
|
||||
<button-8831 href="https://last.fm/user/fortemfiducia"
|
||||
src="assets/images/88x31/3dot5mm-jack.gif"
|
||||
src="/assets/images/88x31/3dot5mm-jack.gif"
|
||||
hint="My Last.fm account"></button-8831>
|
||||
<button-8831 href="https://open.spotify.com/user/deyoloboy?si=3bca31169a434d4a"
|
||||
src="assets/images/88x31/spotify.gif"
|
||||
src="/assets/images/88x31/spotify.gif"
|
||||
hint="My Spotify account"></button-8831>
|
||||
<button-8831 href="https://www.blankbanshee.com/"
|
||||
src="assets/images/88x31/blank-banshee.gif"
|
||||
src="/assets/images/88x31/blank-banshee.gif"
|
||||
hint="Blank Banshee"></button-8831>
|
||||
<button-8831 href="https://fmskyline.bandcamp.com/"
|
||||
src="assets/images/88x31/fm-skyline.gif"
|
||||
src="/assets/images/88x31/fm-skyline.gif"
|
||||
hint="FMSkyline"></button-8831>
|
||||
<button-8831 href="https://luxuryelite.bandcamp.com/"
|
||||
src="assets/images/88x31/luxury-elite.png"
|
||||
src="/assets/images/88x31/luxury-elite.png"
|
||||
hint="Luxury Elite"></button-8831>
|
||||
<button-8831 href="https://nmesh.bandcamp.com/"
|
||||
src="assets/images/88x31/nmesh.png"
|
||||
src="/assets/images/88x31/nmesh.png"
|
||||
hint="nmesh"></button-8831>
|
||||
<!-- Fun -->
|
||||
<button-8831 href="https://www.depeuter.dev"
|
||||
src="assets/images/88x31/the-digital-me.gif"
|
||||
src="/assets/images/88x31/the-digital-me.gif"
|
||||
hint="The Digital Me"></button-8831>
|
||||
<!-- Other -->
|
||||
<button-8831 href="https://88x31.nl/history.html"
|
||||
src="assets/images/88x31/88x31.gif"
|
||||
src="/assets/images/88x31/88x31.gif"
|
||||
hint="88x31?"></button-8831>
|
||||
<button-8831 href="https://www.youtube.com/watch?v=vTBQm9zmw8Y"
|
||||
src="assets/images/88x31/thanks-for-looking.gif"
|
||||
src="/assets/images/88x31/thanks-for-looking.gif"
|
||||
hint="Thanks for looking!"></button-8831>
|
||||
</my-marquee>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -79,8 +79,13 @@ function getNavBar() {
|
|||
</div>
|
||||
<div class="menu">
|
||||
<ul>
|
||||
<li><a href="index.html" data-i18n="nav.home">Home</a></li>
|
||||
<li><a href="cv.html">Curriculum Vitae</a></li>
|
||||
<li><a href="/" data-i18n="nav.home">Home</a></li>
|
||||
<li><a href="/pages/cv.html">Curriculum Vitae</a></li>
|
||||
<li><a href="https://git.depeuter.dev/tdpeuter" data-i18n="nav.projects">Projects</a></li>
|
||||
<ul>
|
||||
<li><a href="/pages/homelab.html">Homelab</a></li>
|
||||
</ul>
|
||||
<li><a href="/pages/about_me.html" data-i18n="about_me.title">About me</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,16 @@ class Translator {
|
|||
setPreferredLanguage(language) {
|
||||
if (!language) return;
|
||||
|
||||
if (language === this.prefferedLanguage) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.prefferedLanguage = language;
|
||||
|
||||
// Add language as query parameter
|
||||
const url = new URL(location.href);
|
||||
url.searchParams.set('lang', language);
|
||||
history.pushState({}, '', url.toString());
|
||||
history.replaceState({}, '', url.toString());
|
||||
|
||||
// Load language
|
||||
localStorage.setItem('preferredLanguage', language);
|
||||
|
|
|
|||
62
style.css
62
style.css
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
/* Main styling */
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
font-family: var(--font-family), monospace;
|
||||
|
||||
line-height: 1.4rem;
|
||||
|
||||
|
|
@ -119,6 +119,28 @@ button {
|
|||
vertical-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
max-width: 80%;
|
||||
bottom: 2vh;
|
||||
padding-bottom: 5%;
|
||||
|
||||
opacity: 0.6;
|
||||
font-size: small;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 320mm;
|
||||
padding: 2rem;
|
||||
|
||||
counter-reset: link;
|
||||
}
|
||||
|
||||
.badge {
|
||||
max-height: 1em;
|
||||
|
||||
|
|
@ -140,17 +162,6 @@ button {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
max-width: 80%;
|
||||
bottom: 2vh;
|
||||
padding-bottom: 5%;
|
||||
|
||||
opacity: 0.6;
|
||||
font-size: small;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heart {
|
||||
color: #CD001A;
|
||||
/* Cherry red */
|
||||
|
|
@ -204,6 +215,27 @@ details[open] table td {
|
|||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
font-size: 10pt;
|
||||
line-height: 1.1em;
|
||||
|
||||
color: black;
|
||||
background: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none; /* Remove link styling */
|
||||
color: black; /* Ensure links are printed in black */
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
details,
|
||||
details summary::before {
|
||||
margin: initial;
|
||||
|
|
@ -215,6 +247,12 @@ details[open] table td {
|
|||
details[open] summary::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
footer,
|
||||
nav-bar {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show icons with links next to each other */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue