-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (170 loc) · 16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leonekmi</title>
<script type="module" src="/main.ts"></script>
<!-- Ça va, vous ? Moi, je suis toujours à l'écoute des opportunités sur
prenez.moi {arobase} leonekmi.fr
Le code source du site est disponible sur GitHub : https://github.com/leonekmi/leonekmi.fr -->
</head>
<body>
<div class="menu" id="menu">
<button data-link="head">🏠 Leon</button>
<button data-link="activites">Domaines d'activité</button>
<button data-link="creations">Créations</button>
<button data-link="passions">Passions</button>
</div>
<div class="modal" id="modal">
<div class="dimmer"></div>
<img>
</div>
<div class="welcome-header" id="head">
<div>
<h1>leonekmi</h1>
<h2>Leon Lozahic</h2>
<p>20 ans, Développeur Web</p>
</div>
</div>
<div class="bio" id="bio">
<p>Titulaire d'un <strong>Baccalauréat général</strong> spécialité <strong>Mathématiques / Numérique et Sciences Informatiques</strong> (spécialité SES en Première)</p>
<p>En 3<sup title="Troisième">ème</sup> année de <strong title="Nouveau nom du DUT MMI, lui-même nouveau nom du DUT SRC">BUT Métiers du multimédia et de l'Internet</strong> (parcours <strong>Développement Web et dispositifs interactifs</strong>).</p>
<p>Apprenti depuis <strong>septembre 2022</strong>.</p>
<p>Utilisateur d'<strong>Arch Linux</strong> sur bureau.</p>
<p><strong>Langues :</strong> <img class="icon" src="icons/gb.svg" alt="🇬🇧"> Anglais (courant), <img class="icon" src="icons/pl.svg" alt="🇵🇱"> Polonais (conversationnel), <img class="icon" src="icons/de.svg" alt="🇩🇪"> Allemand (basique)</p>
<p>
<strong>Contact :</strong>
<a href="https://t.me/leonekmi" target="_blank">Telegram</a>,
<a href="https://www.linkedin.com/in/leon-l/">LinkedIn</a>,
<a href="https://twitter.com/leonekmi" target="_blank">Twitter</a>,
<a href="https://github.com/leonekmi" target="_blank">GitHub</a>
</p>
</div>
<h2 class="skills" id="activites">Domaines d'activité</h2>
<div class="skills grid align-center">
<div class="card large">
<div class="grid">
<ul>
<li><strong>Web</strong> <em>(HTML5, CSS3, JavaScript, TypeScript)</em></li>
<li class="spacing"><strong>Technologies frontend :</strong> Vue.js (2.x, 3.x, Nuxt), React (Next.js), WebExtension</li>
<li class="spacing"><strong>UI/UX Design :</strong> Figma, Canva, Fomantic UI, Bootstrap, Bulma</li>
<li class="spacing"><strong>Technologies backend :</strong> Node.js (Express, Electron), Django, PHP 7/8 (WordPress, Laravel)</li>
<li class="spacing"><strong>Serveurs web :</strong> nginx, Apache2</li>
</ul>
<ul>
<li><strong>Développement</strong></li>
<li class="spacing"><strong>Algorithmique :</strong> Python 3</li>
<li class="spacing"><strong>Base de données :</strong> PostgreSQL, MySQL, SQLite</li>
<li class="spacing"><strong>Gestion de versions :</strong> Git</li>
<li class="spacing"><strong>Forge logicielles :</strong> GitHub, GitLab, Gitea, Gogs</li>
</ul>
<ul>
<li><strong>Administration système</strong></li>
<li class="spacing"><strong>Surveillance :</strong> Zabbix, SNMP</li>
<li class="spacing"><strong>Systèmes d'exploitation :</strong> Ubuntu/Debian, Arch Linux, Fedora</li>
</ul>
<ul>
<li><strong>Création numérique et audiovisuelle</strong></li>
<li class="spacing"><strong>Mise en page, maquettes :</strong> InDesign, Canva</li>
<li class="spacing"><strong>Imagerie :</strong> GIMP, Photoshop</li>
<li class="spacing"><strong>Montage vidéo :</strong> Kdenlive, Sony Vegas Pro</li>
<li class="spacing"><strong>Dessin vectoriel :</strong> Illustrator</li>
</ul>
</div>
</div>
</div>
<h2 class="projects" id="creations">Créations</h2>
<div class="projects grid">
<div class="card">
<div class="header">
<img src="img/banner-mugen.png" srcset="img/banner-mugen.webp, img/banner-mugen.png" alt="">
<div class="title">
<a href="https://karaokes.moe/" target="_blank">Karaoke Mugen</a>
<p class="sub-header">
Le karaoké infini
</p>
</div>
</div>
<p class="justified"><a href="https://karaokes.moe/" target="_blank"><strong>Karaoke Mugen</strong></a> est une suite d'outils open-source tournant autour du karaoké : il y a une <a href="https://kara.moe/base" target="_blank">base de données collaborative</a> et des <a href="https://karaokes.moe/" target="_blank">applications</a> pour pouvoir organiser ou jouer les dits karaokés. C'est une application qui existe depuis 2017 et qui a été utilisée avec succès à de nombreuses conventions à thème pop culture (Jonetsu, Japan Expo, etc.), mais également dans des <a href="https://www.twitch.tv/videos/989319685" target="_blank"><em>streams</em> sur la plateforme de diffusion en direct Twitch</a>.</p>
<p class="justified">J'ai découvert ce projet en mars 2020 et vite rejoint l'équipe de développement afin de pouvoir apporter mon aide. Le projet vit de ses nombreuses collaborations et d'une base très riche pour de nombreux goûts.</p>
<h3>Interface publique</h3>
<p class="justified"><a href="https://mugen.karaokes.moe/" target="_blank"><strong>L'application Karaoke Mugen</strong></a> est pensée pour être utilisée dans des contextes évènementiels. Nous avons ainsi une interface publique pour permettre aux invités, avec leur smartphone, de suggérer des chansons et pour permettre à l'organisateur de récupérer les souhaits des utilisateurs. Dans le cycle de développement de la 5ème version majeure de l'application, l'idée de recréer une nouvelle interface publique, l'ancienne étant héritée des premières versions de l'application, avait commencée à être traitée. J'ai conçu une <a href="https://www.figma.com/file/445IJozxlXm8FgNnC2cqvE/New-Public-interface?node-id=0%3A1" target="_blank">maquette avec Figma</a> avec le soutien des autres développeurs. Le travail avait débuté en septembre 2020 pour une sortie en avril 2021, avec la version 5.0 <a href="https://mugen.karaokes.moe/fr/2021/04/14/KM50.html#nouvelle-interface-publique-804-739-551" target="_blank">qui est exposée sur le blog de l'application</a>. Avec les autres membres de l'équipe, nous avons donc implémenté cette interface avec le framework qui était déjà utilisé, React. Récemment, en janvier 2022, <a href="https://mugen.karaokes.moe/fr/2022/01/12/KM60.html#nouveaut%C3%A9s-de-cette-version" target="_blank">la version 6.0 est sortie</a> qui améliore encore l'interface et ajoute de nouvelles fonctionnalités. Par exemple l'application est désormais capable de pousser de nouvelles chansons dans la base de données de chanson en ligne (gérée via Git), directement depuis le logiciel, ce qui simplifie le travail pour les bénévoles qui sont en charge de cette base.</p>
<img tabindex="0" src="img/screen-mugen.png" srcset="img/screen-mugen.webp, img/screen-mugen.png" alt="Capture d'écran de la nouvelle interface">
<h3><a href="https://kara.moe/base" target="_blank">KMExplorer</a> : Explorer la base</h3>
<p class="justified">Au-delà de l'application, il est possible de naviguer dans la base à travers le <a href="https://kara.moe/base">site Internet de la base</a>. L'interface a été entièrement refaite durant l'été 2020 pour remplacer l'ancienne qui manquait de fonctionnalités. J'ai créé l'architecture de l'application qui est une <a href="https://lab.shelter.moe/karaokemugen/karaokemugen-server/-/tree/master/kmexplorer" target="_blank">application Nuxt.js</a> universelle, en utilisant donc le framework Vue.js. En collaboration avec d'autres développeurs, j'ai également créé l'interface avec <a href="https://bulma.io/" target="_blank">Bulma</a>, elle est pensée pour afficher un maximum de détails tout en affichant un grand nombre de chansons.</p>
<img tabindex="0" src="img/screen-mugen2.png" srcset="img/screen-mugen2.webp, img/screen-mugen2.png" alt="Explorateur de base">
<p><em>Crédit de l'image d'illustration : © Sedeto 2021-2024</em></p>
</div>
<div class="card">
<div class="header">
<img tabindex="0" src="img/banner-anjara.png" srcset="img/banner-anjara.webp, img/banner-anjara.png" alt="">
<div class="title">
<a href="https://anjara.eu/" target="_blank">Anjara</a>
<p class="sub-header">
Promouvoir et créer des logiciels libres
</p>
</div>
</div>
<p class="justified"><a href="https://anjara.eu/" target="_blank"><strong>Anjara</strong></a> est une association loi 1901 établie en Île-de-France ayant pour but de promouvoir le logiciel libre à travers l'hébergement et le développement de ceux-ci. Créée en janvier 2019, nous sommes composés de 6 personnes poursuivant tous le même but : apprendre en servant à la fois une cause.</p>
<p class="justified">J'ai été dès le début de l'aventure et je suis trésorier de l'association depuis sa création. Nous avons des plans pour acheter et mettre en centre de données notre propre infrastructure serveur. En attendant, nous louons des serveurs chez des hébergeurs (Hetzner, Vultr, OVH) pour héberger nos projets.</p>
<h3><a href="https://files.anjara.eu/" target="_blank">AnjaraFiles</a> : Partage de fichiers</h3>
<p class="justified">J'ai créé de toutes pièces grâce à Laravel et Fomantic UI une solution de partage de fichiers nommée Raki, elle a pour but de rendre possible le partage de fichiers d'une façon simple, sans nécessiter de compte ni d'inscription. Le tout en permettant de garder ses fichiers pendant 1 an maximum, de les chiffrer avec un mot de passe, de les supprimer automatiquement ou manuellement tout ou partie des fichiers. Le code source est <a href="https://github.com/anjaraeu/Raki" target="_blank">disponible sur GitHub</a>.</p>
<img tabindex="0" src="img/screen-anjarafiles.png" srcset="img/screen-anjarafiles.webp, img/screen-anjarafiles.png" alt="Capture d'écran de Raki">
<h3><a href="https://l.anjara.eu/" target="_blank">AnjaraLink</a> : Raccourcisseur de lien</h3>
<p class="justified">Anjara propose un service de raccourcissement de liens simple à utiliser, là encore ne nécessitant aucun compte ni inscription. Toujours réalisé avec Laravel, j'ai décidé pour le coup de créer ma propre feuille de style CSS. L'interface qui en résulte est sobre et épurée.</p>
<img tabindex="0" src="img/screen-anjaralink.png" srcset="img/screen-anjaralink.webp, img/screen-anjaralink.png" alt="Capture d'écran de Link">
<p><em>Crédit de l'image d'illustration : © Volnix 2019-2024</em></p>
</div>
<div class="card">
<div class="header">
<img src="img/banner-mangactu.png" srcset="img/banner-mangactu.webp, img/banner-mangactu.png" alt="Capture d'écran du site Internet du MangActu">
<div class="title">
<a href="https://mangactu.fr/" target="_blank">MangActu</a>
<p class="sub-header">
Magazine lycéen Pop Culture
</p>
</div>
</div>
<p class="justified"><a href="https://mangactu.fr/"><strong>MangActu</strong></a> est un magazine lycéen débuté en 2019 au sein du Club Manga du lycée Louis Armand à Mulhouse. À la base une double page résumant les actualités, le MangActu a su se développer en un magazine mensuel de 20 pages distribués dans les librairies mulhousiennes, dont l'un des numéros est lauréat du <a href="https://www.ac-strasbourg.fr/fileadmin/pedagogie/clemi/Operations_concours/mediatiks/Palmares_mediatiks_2020.pdf" target="_blank"><strong>prix académique Médiatiks</strong> Strasbourg</a>. <em>Malheuresement, des suites de la pandémie et suite à une charge de travail qui s'est avérée trop importante, spécialement pour les terminales, la publication en a été suspendue.</em></p>
<p class="justified">J'ai intégré l'équipe à la rentrée 2019 pour débuter en tant que rédacteur. Rapidement, j'ai su m'expérimenter avec la suite Adobe (InDesign, Photoshop) pour réaliser des maquettes et mettre en page une partie du magazine tous les mois. Également pour les besoins du magazine, j'ai su créé, là encore avec Laravel et Fomantic UI, le <a href="https://mangactu.fr/" target="_blank">site Internet</a> qui distribue le MangActu encore à ce jour.</p>
<div class="grid">
<span><img tabindex="0" src="img/mangactu1.png" srcset="img/mangactu1.webp, img/mangactu1.png" alt="Exemple de mise en page réalisée : Coin Nippon et Figurines"></span>
<span><img tabindex="0" src="img/mangactu2.png" srcset="img/mangactu2.webp, img/mangactu2.png" alt="Exemple de mise en page réalisée : Mangas"></span>
<span><img tabindex="0" src="img/mangactu3.png" srcset="img/mangactu3.webp, img/mangactu3.png" alt="Exemple de mise en page réalisée : Interview Caly"></span>
<span><img tabindex="0" src="img/mangactu4.png" srcset="img/mangactu4.webp, img/mangactu4.png" alt="Exemple de mise en page réalisée : Animés"></span>
</div>
</div>
</div>
<h2 class="passions" id="passions">Ce qui m'anime</h2>
<div class="passions grid">
<div class="card">
<div class="header">
<img src="img/banner-anime.png" srcset="img/banner-anime.webp, img/banner-anime.png" alt="Bannière de Brand New Animal">
<div class="title">
<a href="https://anilist.co/user/leonekmi" target="_blank">Animation japonaise</a>
<p class="sub-header">
Pour occuper son week-end quand on découvre pas le nouvel outil JS à la mode...
</p>
</div>
</div>
<p><em>Crédit de l'image d'illustration : Brand New Animal © Netflix Worldwide Entertainment, TRIGGER 2020-2022</em></p>
</div>
<div class="card">
<div class="header">
<img src="img/banner-videogames.png" srcset="img/banner-videogames.webp, img/banner-videogames.png" alt="Bannière de Portal 2">
<div class="title">
<a href="https://steamcommunity.com/id/leonekmi" target="_blank">Jeux vidéos</a>
<p class="sub-header">
Un peu de tout mais surtout puzzle et gestion...
</p>
</div>
</div>
<p><em>Crédit de l'image d'illustration : <span title="Le 19 avril ça fera 10 ans !">Portal 2 © Valve 2011-2024</span></em></p>
</div>
</div>
<section class="footer">
<em>Le code source de ce site est <a href="https://github.com/leonekmi/leonekmi.fr" target="_blank">disponible sur GitHub</a>, il est déployé automatiquement à chaque modification. Crédit des drapeaux : Twemoji © Twitter 2014-2024</em>
</section>
</body>
</html>