243 lines
17 KiB
HTML
243 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
PAGE CODED BY :
|
|
__ _____ __ __ ______ ____ __ __ ______ __ __ ______ ______
|
|
/\ \ /\ __`\/\ \/\ \/\__ _\/\ _`\ /\ \/\ \/\ _ \/\ \ /\ \ /\ _ \/\__ _\
|
|
\ \ \ \ \ \/\ \ \ \ \ \/_/\ \/\ \,\L\_\ \ \ \ \ \ \ \L\ \ \ \ \ \ \ \ \ \L\ \/_/\ \/
|
|
\ \ \ __\ \ \ \ \ \ \ \ \ \ \ \ \/_\__ \ \ \ \ \ \ \ __ \ \ \ __\ \ \ __\ \ __ \ \ \ \
|
|
\ \ \L\ \\ \ \_\ \ \ \_\ \ \_\ \__/\ \L\ \ \ \ \_/ \ \ \/\ \ \ \L\ \\ \ \L\ \\ \ \/\ \ \ \ \
|
|
\ \____/ \ \_____\ \_____\/\_____\ `\____\ \ `\___/\ \_\ \_\ \____/ \ \____/ \ \_\ \_\ \ \_\
|
|
\/___/ \/_____/\/_____/\/_____/\/_____/ `\/__/ \/_/\/_/\/___/ \/___/ \/_/\/_/ \/_/
|
|
-->
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Louis Vallat</title>
|
|
<!-- SEO -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Un étudiant développeur, passionné de technologies, quelles qu'elles soient.">
|
|
<meta name="image" content="https://louis-vallat.xyz/assets/image/square_pp.jpg">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="Louis Vallat">
|
|
<meta name="twitter:description" content="Un étudiant développeur, passionné de technologies, quelles qu'elles soient.">
|
|
<meta name="twitter:site" content="@VallatLouis">
|
|
<meta name="twitter:creator" content="@VallatLouis">
|
|
<meta name="twitter:image:src" content="https://louis-vallat.xyz/assets/images/square_pp.jpg">
|
|
<meta name="og:title" content="Louis Vallat">
|
|
<meta name="og:description" content="Un étudiant développeur, passionné de technologies, quelles qu'elles soient.">
|
|
<meta name="og:image" content="https://louis-vallat.xyz/assets/images/square_pp.jpg">
|
|
<meta name="og:url" content="https://louis-vallat.xyz/">
|
|
<meta name="og:locale" content="fr_FR">
|
|
<meta name="og:type" content="website">
|
|
<link rel="icon" href="/assets/images/favicon.ico">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="assets/css/reset.css">
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
<div id="landing-zone">
|
|
<div>
|
|
<div class="center-align-inline">
|
|
<img src="assets/images/square_pp.jpg" id="profile-picture" alt="Ma photo de profil">
|
|
<h4 class="white bold">Louis Vallat</h4>
|
|
<div class="center-align-inline">
|
|
<a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icon" alt="Gitlab RGB logo"/></a>
|
|
<a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icon" alt="Twitter blue logo"/></a>
|
|
<a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icon" alt="LinkedIN small blue logo"/></a>
|
|
</div>
|
|
</div>
|
|
<h1 class="white bold" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1>
|
|
<div class="center-align-inline lightgrey" id="additional-information">
|
|
<img src="/assets/images/work.svg" alt="Logo travail valise"/><h6>Étudiant ingénieur en informatique</h6>
|
|
<img src="/assets/images/location.svg" alt="Logo localisation"/><h6>Bordeaux — France</h6>
|
|
</div>
|
|
<div id="call-to-action">
|
|
<a class="button-style" href="mailto:contact@louis-vallat.xyz">Me contacter</a>
|
|
<a class="button-style" href="#about">En savoir plus</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="about">
|
|
<div id="skills" class="section">
|
|
<h3 class="white bold">Compétences</h3>
|
|
<h5 class="grey">Des technologies que j'utilise souvent</h5>
|
|
<div id="skills-logos" class="flex-sb section-content">
|
|
<img alt="Logo Docker" title="Docker" src="/assets/images/docker-monochromatic.png"/>
|
|
<img alt="Logo Git" title="Git" src="/assets/images/git-logo-orange.png"/>
|
|
<img alt="Logo Tux" title="Linux" src="/assets/images/tux.svg"/>
|
|
<img alt="Logo Rust" title="Rust" src="/assets/images/rust-logo.png"/>
|
|
<img alt="Logo Java" title="Java" src="/assets/images/java-logo.png"/>
|
|
<img alt="Logo PostgreSQL" title="PostgreSQL" src="/assets/images/postgresql-logo.svg"/>
|
|
<img alt="Logo PHP" title="PHP" src="/assets/images/php-logo.svg"/>
|
|
<img alt="Logo Android" title="Android" src="/assets/images/android-logo.svg"/>
|
|
<img alt="Logo HTML5" title="HTML5" src="/assets/images/html5-logo.svg"/>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3 class="white bold">Projet personnel en cours</h3>
|
|
<h5 class="grey">Le projet sur lequel je travaille le plus sur mon temps libre</h5>
|
|
<div class="flex-sb section-content align-items-center">
|
|
<img class="width-10 sm-width-45 sm-center" src="assets/images/grid_icon.png" alt="Icône inspirée d'un Launchpad" title="Launchpad Mini"/>
|
|
<p class="white center justify width-85">
|
|
J'avais dans mes affaires un Launchpad Mini de chez Novation,
|
|
qui était inutilisé. C'est un instrument de musique utilisé
|
|
avec des logiciels tels que Ableton Live. L'instrument se
|
|
présente comme une grille de cases pouvant être pressées et
|
|
allumées dans différentes couleurs. On peut utiliser cet
|
|
instrument pour lancer des boucles musicales à la simple
|
|
pression d'une case.
|
|
<br>
|
|
Étant un "simple" instrument interfacé en MIDI, il peut être
|
|
utilisé de différentes manières, véritable bonheur pour un
|
|
développeur inventif.
|
|
<br><br>
|
|
Le but est ici d'afficher le statut de pipelines Gitlab sur
|
|
le Launchpad en temps réel, et de pouvoir relancer les pipelines
|
|
à la simple pression d'un bouton. Ainsi, on peut avoir une
|
|
vue globale du statut de ses derniers pipelines sur un lot
|
|
de projets.
|
|
Le code peut être trouvé <a href="https://gitlab.com/lovallat/gitlab-ci-launchpad-mini-controller" target="_blank">ici</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3 class="white bold">Précédents projets personnels</h3>
|
|
<h5 class="grey">Les projets sur lesquels j'ai précédemment travaillé</h5>
|
|
<div class="flex-sb section-content align-items-center">
|
|
<img class="width-10 sm-width-45 sm-center" src="assets/images/ovh-logo-square.png" alt="Logo OVH Cloud" title="OVH"/>
|
|
<p class="white center justify width-85">
|
|
Les enregistrements DNS TLSA sont très utiles mais très peu
|
|
connus ou utilisés en pratique. Ils sont notamment pratiques
|
|
pour mettre en application la <a href="https://datatracker.ietf.org/doc/html/rfc6698" target="_blank">RFC 6698</a>.
|
|
Le DANE (DNS-Based Authentication of Named Entities) permet
|
|
en utilisant les enregistrements TLSA et avec le DNSSEC
|
|
(Domain Name System Security Extensions, <a href="https://datatracker.ietf.org/doc/html/rfc4033" target="_blank">RFC 4033</a>)
|
|
d'ajouter une sécurité supplémentaire, en ajoutant l'empreinte
|
|
des certificats de sécurité utilisés pour un site ou une application
|
|
donnés, aux enregistrements DNS. Cela permet de vérifier que
|
|
le certificat fourni est bien celui annoncé par le serveur
|
|
DNS. Ce projet permet de mettre à jour automatiquement et immédiatement,
|
|
en utilisant l'API de OVHCloud sans passer par une librairie,
|
|
les enregistrements DNS TLSA de mon infrastructure, en surveillant
|
|
les certificats générés par mon reverse-proxy (NGINX).
|
|
<br><br>
|
|
Ce projet a été fait en une semaine en Rust. Le but étant
|
|
la rapidité, aucun test unitaire n'est fourni. Le code se trouve
|
|
<a href="https://gitlab.com/lovallat/ovh-dane-companion" target="_blank">ici</a>.
|
|
</p>
|
|
</div>
|
|
<div class="flex-sb section-content align-items-center">
|
|
<img class="width-10 sm-width-45 sm-center" src="assets/images/aoc2021.webp" alt="Logo AoC" title="Défi Advent of Code"/>
|
|
<p class="white center justify width-85">
|
|
J'ai participé au challenge "Advent Of Code" dans
|
|
son édition 2021, trouvable <a href="https://adventofcode.com/2021" target="_blank">
|
|
ici</a>, et j'ai obtenu toutes les étoiles de cette année.
|
|
<br><br>
|
|
Tous les jours, à la manière d'un calendrier de l'Avent un peu
|
|
particulier, un défi en deux parties est publié, et ce du premier
|
|
au 25 décembre. Le but est de faire les deux parties des défis.<br>
|
|
De manière simplifiée, nous suivons une histoire globale,
|
|
véritable fil rouge du calendrier. Le site dispense un sujet,
|
|
une consigne, un jeu de données en général assez fourni,
|
|
et pour aider au développement et à comprendre le sujet,
|
|
un jeu de données réduites est aussi fourni pour tester nos
|
|
algorithmes et hypothèses.<br>
|
|
Ce projet est fait en Rust, et est trouvable <a href="https://gitlab.com/lovallat/advent-of-code-2021" target="_blank">ici</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3 class="white bold">Matériel</h3>
|
|
<h5 class="grey">Là où mes projets voient le jour et évoluent</h5>
|
|
<div class="flex-sb section-content">
|
|
<p class="white justify width-45">
|
|
<img src="/assets/images/neofetch-belphegor.png" class="width-100" alt="neofetch affiché sur mon serveur"/>
|
|
Mon serveur principal est actuellement une tour, issue de
|
|
nombreuses mises à niveau au fil du temps. Tout d'abord constitué
|
|
de pièces d'occasion obtenues au fil du temps, il est désormais
|
|
composé d'une majorité de pièces neuves. Il héberge grand nombre
|
|
de mes services et projets, en plus de servir pour d'autres
|
|
tâches annexes, telles que servir à faire fonctionner des jeux
|
|
vidéos à distance, ou encore exécuter différentes tâches pour
|
|
mes pipelines CI/CD.<br/>
|
|
En ce moment, il a pour processeur un
|
|
<a href="https://www.amd.com/fr/products/cpu/amd-ryzen-5-3600" target="_blank">AMD Ryzen 5 3600</a>,
|
|
ainsi que 32 Go de RAM, cadencés à 3200 MHz. Pour le stockage,
|
|
ce serveur a pour média de démarrage un SSD NVMe (PCIe3x4)
|
|
de 512 Go. Il est aussi doté d'une carte graphique NVIDIA GTX 970
|
|
disposant de 4 Go de VRAM.<br/>
|
|
À son arrivée dans cette configuration,
|
|
elle me servait pour faire de l'encodage et du transcodage de
|
|
fichiers multimédias à la volée, mais dernièrement elle me
|
|
sert surtout pour faire fonctionner des applications qui ont
|
|
de forts besoins en ressources graphiques, telles que des jeux
|
|
vidéos, dans une machine virtuelle.<br/>
|
|
Il dispose aussi d'un SSD 1 To de chez Crucial au format
|
|
SATA pour héberger la machine virtuelle à qui est passée la
|
|
carte graphique. Cette carte graphique n'est indisponible pour
|
|
l'hôte que le temps que la machine virtuelle est allumée. En
|
|
effet, à l'amorçage de cette VM, la carte graphique est automatiquement
|
|
détachée, puis rattachée à son arrêt.<br/>
|
|
Enfin, ce serveur dispose aussi d'un RAID de différents
|
|
disques pour du stockage supplémentaire.
|
|
</p>
|
|
<p class="white justify width-45">
|
|
<img src="/assets/images/neofetch-abigor.png" class="width-100" alt="neofetch affiché sur mon ordinateur portable"/>
|
|
Actuellement, la machine qui me sert à donner vie aux différentes
|
|
idées qui pourraient me venir en tête est un Lenovo ThinkPad T14s
|
|
de première génération, dans sa variante AMD.<br/>
|
|
En terme de spécifications, cet ordinateur portable est
|
|
équipé d'un processeur <a href="https://www.amd.com/fr/products/apu/amd-ryzen-7-pro-4750u" target="_blank">AMD Ryzen 7 4750U</a>,
|
|
étant développeur, il n'est pas rare que je doive compiler des
|
|
projets de taille et de langage variés, et les 8 coeurs de ce
|
|
processeur font très bien ce travail.<br/>
|
|
Concernant la RAM, j'ai choisi de doter mon ordinateur de
|
|
32 Go de RAM, au format DDR4, cadencés à 3200 MHz. Il m'arrive souvent
|
|
de manipuler des machines virtuelles et cette quantité de RAM devrait
|
|
pouvoir couvrir mes besoins pendant un moment.<br/>
|
|
En terme d'écran, j'ai choisi une dalle 1080p basse consommation
|
|
avec une surface matte, et une luminosité de 400 nits. Le T14s étant
|
|
un 14 pouces, 1080p suffisent largement pour mon cas d'utilisation,
|
|
et les 400 nits de luminosité me permettent d'utiliser cette
|
|
machine en conditions de forte luminosité ambiante. Le clavier
|
|
rétroéclairé me permet de travailler dans des conditions de
|
|
basse luminosité. Un ordinateur parfait pour rester productif
|
|
et mobile.<br/>
|
|
Pour le stockage, il est équipé de 512 Go fournis par un
|
|
SSD NVMe (PCIe3x4). Je suis très loin de les utiliser dans leur
|
|
totalité mais cette taille me permet de manipuler et
|
|
travailler localement sur des projets parfois lourds, et je
|
|
ne souhaite pas que ma machine de travail soit l'élément limitant
|
|
de mon flot de travail.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- dotfiles -->
|
|
<!-- featured projects-->
|
|
</div>
|
|
<footer>
|
|
<h3 class="white bold">À propos</h3>
|
|
<div class="flex-sb">
|
|
<p class="grey justify">
|
|
Véritable factotum du développement, j'aime mettre les mains dans le cambouis.<br/>Je gère ma propre infrastructure, qui ne cesse d'évoluer au fil des ans, qui héberge nombre de mes projets informatiques. J'aime aussi régler des problèmes avec du code, l'automatisation me fascine et le devops me passionne.<br/>Je suis aussi passionné de 👨💻, 📸, 🚄 et de 👨🔧.
|
|
</p>
|
|
<div class="flex-sb" id="additional-links">
|
|
<a class="button-style" href="mailto:contact@louis-vallat.xyz" target="_blank"><img src="/assets/images/send.svg" alt="Logo envoi"/>M@il</a>
|
|
<a class="button-style" href="/key.pgp"><img src="/assets/images/key.svg" alt="Logo de clef"/>Ma clef PGP</a>
|
|
<a class="button-style" href="https://matrix.to/#/@louis:louis-vallat.xyz" target="_blank"><img src="/assets/images/message.svg" alt="Logo de messagerie"/>Matrix</a>
|
|
<a class="button-style" href="https://gallery.louis-vallat.xyz" target="_blank"><img src="/assets/images/camera.svg" alt="Logo d'appareil photo"/>Gallerie photo</a>
|
|
<a class="button-style" href="https://blog.louis-vallat.xyz" target="_blank"><img src="/assets/images/article.svg" alt="Logo d'article"/>Blog</a>
|
|
</div>
|
|
</div>
|
|
<p id="inspiration" class="grey">
|
|
Design inspiré par <a href="https://louisgrasset.fr/" target="_blank">ceci</a> et <a href="https://dribbble.com/shots/6672981-Personal-Website-Idea-V2/attachments/6672981-Personal-Website-Idea-V2?mode=media" target="_blank">ceci</a>.
|
|
</p>
|
|
<p class="lightgrey" id="copyright">
|
|
Louis Vallat — 2022 — Made with ❤ and <a href="https://gitlab.com/lovallat/louis-vallat.xyz" target="_blank">Open Source</a>.
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|