Files
WEBSITE_hugulumu/index.html
2026-03-04 15:57:24 +01:00

768 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<!-- create "fake" favicon : https://stackoverflow.com/questions/1321878/how-to-prevent-favicon-ico-requests -->
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<title>hugulumu.fr</title>
<meta name="description" content="site web de hugo lamy, developpeur" />
<link href="./styles/reset.css" type="text/css" rel="stylesheet" />
<link href="./styles/style.css" type="text/css" rel="stylesheet" />
<link href="./styles/global.css" type="text/css" rel="stylesheet" />
<link href="./styles/text.css" type="text/css" rel="stylesheet" />
<link href="./styles/sections.css" type="text/css" rel="stylesheet" />
<link
href="./styles/elements/mouses.css"
type="text/css"
rel="stylesheet"
/>
<link
href="./styles/elements/banners.css"
type="text/css"
rel="stylesheet"
/>
<link href="./styles/elements/title.css" type="text/css" rel="stylesheet" />
<link href="./styles/elements/hero.css" type="text/css" rel="stylesheet" />
<link
href="./styles/elements/projects.css"
type="text/css"
rel="stylesheet"
/>
<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet" />
<link href="./styles/elements/infos.css" type="text/css" rel="stylesheet" />
<link
href="./styles/elements/language.css"
type="text/css"
rel="stylesheet"
/>
</head>
<!--
original : • 8226 U+2022
:  57442 U+E062
:  57443 U+E063
:  57444 U+E064
:  57445 U+E065
actual :  57446 U+E066
:  57447 U+E067
-->
<body id="body">
<input type="checkbox" id="language" />
<label id="language_label" for="language">
<span id="fr"
><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"
/></span>
<span id="en"
><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"
/></span>
</label>
<!--
I moved this outside the hero section,
so that i can change my mind to put it or not without having to change the grid rows height
-->
<div
id="top_banner"
class="banner banner_size_0 banner_speed_50 banner_reverse grid_full_width"
aria-label="banner delimitation in ASCII art"
></div>
<!--
HERO SECTION
-->
<section class="section hero" id="hero">
<header>
<!-- prettier-ignore -->
<h1 aria-label="hugo lamy" id="name" class="title">
<span aria-hidden="true" class="pre pre_small">
     
      
      
       
    
</span>
<span aria-hidden="true" class="pre pre_small">
     
      
     
     
     
</span>
</h1>
<!-- prettier-ignore -->
<h1 aria-label="programmeur informatique" id="title" class="title">
<span aria-hidden="true" class="pre">
<span class="fr">
            
                 
              
               
           
</span>
<span class="en">
         
             
           
            
         
</span>
</span>
</h1>
<p class="subtitle">
<span class="fr">méthodique, inventif, curieux</span>
<span class="en">methodical, inventive, curious</span>
</p>
</header>
<div class="mouse"><div class="frames mouse_1 pre"></div></div>
<div
class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small"
aria-label="banner delimitation in ASCII art"
></div>
</section>
<!--
CV
-->
<section id="cv" class="section">
<header>
<!-- prettier-ignore -->
<h1 aria-label="curriculum vitae">
<span aria-hidden="true" class="pre">
<span class="fr">
  
  
  
  
 
</span>
<span class="en">
  
  
  
  
 
</span>
</span>
</h1>
</header>
<div class="cv margin_top_big">
<span class="fr"
><a
class="cv_download margin_bottom_big"
href="docs/cvs/hugo_lamy_cv_2026_FR.pdf"
target="_blank"
rel="noopener noreferrer"
title="link to a pdf version of this section CV"
>télécharger en pdf</a
></span
>
<span class="en"
><a
class="cv_download margin_bottom_big"
href="docs/cvs/hugo_lamy_cv_2026_EN.pdf"
target="_blank"
rel="noopener noreferrer"
title="link to a pdf version of this section CV"
>download as pdf</a
></span
>
<p class="subtitle">
<span class="fr"
>Bonjour, je suis un développeur inventif, méthodique, et passionné
par l'informatique, et plus spécialement le libre et l'open source.
jaime explorer de nouvelles solutions techniques et je suis prêt à
relever de nouveaux défis avec vous :)</span
>
<span class="en"
>Hello, I am an inventive, methodical developer with a passion for
IT, especially free and open source software. I enjoy exploring new
technical solutions and am ready to take on new challenges with you
:)</span
>
</p>
<h2>
<span class="fr">EXPÉRIENCES</span>
<span class="en">WORK EXPERIENCES</span>
</h2>
<div
class="banner banner_size_0 banner_pause"
aria-label="banner delimitation in ASCII art"
></div>
<h4>
<span class="fr">web full-stack</span>
<span class="en">web full-stack</span>
</h4>
<ul>
<li>
<span class="fr"
>BLOC-HOUSE: reprise du site d'une association d'artistes
(fullstack, php, javascript, html, css), 2023</span
>
<span class="en"
>BLOC-HOUSE: takeover of an artists' association website
(fullstack, php, javascript, html, css), 2023</span
>
</li>
<li>
<span class="fr"
>TRANSCENDENCE: chat en ligne avec gestions des comptes et
notifications (fullstack, node.js, nest.js, websocket, svelte,
PostgreSQL)</span
>
<span class="en"
>TRANSCENDENCE: online chat with account management and
notifications (fullstack, node.js, nest.js, websocket, svelte,
PostgreSQL)</span
>
</li>
<li>
<span class="fr"
>FIPF: plugin qui gère les paiements, les roles, corrige les
autres plugins et des actions front-end (fullstack, js, php, bdd),
2024</span
>
<span class="en"
>FIPF: plugin that manages payments, roles, corrects other plugins
and front-end actions (fullstack, js, php, bdd), 2024</span
>
</li>
<li>
<span class="fr"
>JIPF: utilise les API GoogleMaps pour afficher des données
dynamiques sur une carte avec des filtres, 2022</span
>
<span class="en"
>JIPF: uses GoogleMaps APIs to display dynamic data on a map, with
interactive filters</span
>
</li>
<li>
<span class="fr"
>KOSMOPOLIT: front-end, integration d'un site statique pour une
association de litterature, (html, css atomique), 2022</span
>
<span class="en"
>KOSMOPOLIT: front-end, integration of a static site for a
literature association, (html, atomic css), 2022</span
>
</li>
</ul>
<h4>
<span class="fr">devops</span>
<span class="en">devops</span>
</h4>
<ul>
<li>
<span class="fr"
>WEBSERV: création d'un serveur web non-bloquant en multiplexage,
capable de gérer des requetes http et envoyer du contenu (c++,
linux sockets)</span
>
<span class="en"
>WEBSERV: creation of a non-blocking multiplexing web server
capable of managing http requests and sending content (c++, linux
sockets)</span
>
</li>
<li>
<span class="fr"
>MINITALK: utiliser les signaux système de linux pour creer une
communication en code ascii entre deux processus</span
>
<span class="en"
>MINITALK: using linux system signals to create ascii code
communication between two processes</span
>
</li>
<li>
<span class="fr"
>INCEPTION: création de zéro d'ima-ges docker pour deployer
wordpress avec encription SSL (docker compose, mariaDB, NGINX,
Wordpress)</span
>
<span class="en"
>INCEPTION: creating docker images from scratch to deploy
wordpress with SSL encription (docker compose, mariaDB, NGINX,
Wordpress)</span
>
</li>
</ul>
<h4>
<span class="fr">game</span>
<span class="en">game</span>
</h4>
<ul>
<li>
<span class="fr"
>CUBE 3D: jeu à la premiere personne utilisant le raycasting pour
la 3d et les textures, et le clavier pour bouger (c,
trigonométrie, inputs)</span
>
<span class="en"
>CUBE 3D: first-person game using raycasting for 3d and textures,
and the keyboard for movement (c, trigonometry, inputs)</span
>
</li>
<li>
<span class="fr"
>FDF: modélisation spatiale de formes en courbes de niveau à
partir de cartes (c, trigonometrie, inputs)</span
>
<span class="en"
>FDF: spatial modelling of contour lines from maps with keyboard
control (c, trigonometrie, inputs)</span
>
</li>
</ul>
<h4>
<span class="fr">system</span>
<span class="en">system</span>
</h4>
<ul>
<li>
<span class="fr"
>MINISHELL: créer un shell capable de parser des prompts, exécuter
des programmes, et réagir aux signaux (c, bash, signals, fork,
pipe, readline)</span
>
<span class="en"
>MINISHELL: creating a shell capable of parsing prompts, executing
programs, and listening to signals (c, bash, signals, fork, pipe,
readline)</span
>
</li>
<li>
<span class="fr"
>CONTAINERS: recoder 3 conteneurs c++ avec les iterateurs,
surcharges, et templates : map, vector, stack</span
>
<span class="en"
>CONTAINERS: recoding c++ containers with iterators, overloads and
templates : map, vector, stack</span
>
</li>
<li>
<span class="fr"
>PUSHSWAP: algorithmes de tris avec deux piles et des mouvements
limités aux extrémités des piles (c)</span
>
<span class="en"
>PUSHSWAP: sorting algorithms with two stacks and limited movement
at the ends of the stacks (c)</span
>
</li>
</ul>
<h2>
<span class="fr">COMPÉTENCES</span>
<span class="en">SKILLS</span>
</h2>
<div
class="banner banner_size_0 banner_pause"
aria-label="banner delimitation in ASCII art"
></div>
<h4>
<span class="fr">hard skills</span>
<span class="en">hard skills</span>
</h4>
<ul>
<li>
<span class="fr"
>Langages : C, C++, bash, JavaScript, PHP, CSS, HTML</span
>
<span class="en"
>Languages : C, C++, bash, JavaScript, PHP, CSS, HTML</span
>
</li>
<li>
<span class="fr"
>Technologies : Node.js, Git, Gitaction, Docker, Wordpress, Nginx,
MariaDB, Nest.js, Svelte, WebSocket, Express, npm, react</span
>
<span class="en"
>Technologies : Node.js, Git, Gitaction, Docker, Wordpress, Nginx,
MariaDB, Nest.js, Svelte, WebSocket, Express, npm, react</span
>
</li>
<li>
<span class="fr"
>Plus : emails, sending emails, receiving emails, deleting emails
(the it crowd S01E01)</span
>
<span class="en"
>Plus : emails, sending emails, receiving emails, deleting emails
(the it crowd S01E01)</span
>
</li>
</ul>
<h4>
<span class="fr">soft skills</span>
<span class="en">soft skills</span>
</h4>
<ul>
<li>
<span class="fr">capacité d'apprentissage et autonomie</span>
<span class="en">learning ability, and autonomy</span>
</li>
<li>
<span class="fr">attention aux détails, patience</span>
<span class="en">attention to details, patience</span>
</li>
<li>
<span class="fr">adaptabilité et resolution de problemes</span>
<span class="en">adaptability and problem-solving</span>
</li>
<li>
<span class="fr">recevoir des feedbacks</span>
<span class="en">receiving feedback</span>
</li>
</ul>
<h2>
<span class="fr">FORMATIONS</span>
<span class="en">EDUCATIONS</span>
</h2>
<div
class="banner banner_size_0 banner_pause"
aria-label="banner delimitation in ASCII art"
></div>
<h4>
<span class="fr">informatique</span>
<span class="en">computer science</span>
</h4>
<ul>
<li>
<span class="fr"
>École 42, Paris, 2021-2022, tronc commun - niveau 10 (C, C++,
système, algorithmie, réseaux)</span
>
<span class="en"
>42 school, Paris, 2021-2022, common core - level 10 (C, C++,
system, algorithms, networks)</span
>
</li>
<li>
<span class="fr"
>SIMPLON, développeur full-stack JavaScript, 2018 (Javascript,
Node.js, React.js, HTML, CSS)</span
>
<span class="en"
>SIMPLON, developer full-stack JavaScript, 2018 (Javascript,
Node.js, React.js, HTML, CSS)</span
>
</li>
</ul>
<h4>
<span class="fr">architecture</span>
<span class="en">architecture</span>
</h4>
<ul>
<li>
<span class="fr"
>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France,
2008-2014</span
>
<span class="en"
>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France,
2008-2014</span
>
</li>
<li>
<span class="fr"
>3 stages : PERSPECTIVA (Houston, Texas, 2009, 3 mois), AS (Paris,
2012, 6 mois), JC QUINTON (Paris 2014, 6 mois)</span
>
<span class="en"
>3 internships : PERSPECTIVA (Houston, Texas, 2009, 3 months), AS
(Paris, 2012, 6 months), JC QUINTON (Paris 2014, 6 months)</span
>
</li>
</ul>
<h2>
<span class="fr">PERSONNEL</span>
<span class="en">PERSONAL</span>
</h2>
<div
class="banner banner_size_0 banner_pause"
aria-label="banner delimitation in ASCII art"
></div>
<h4>
<span class="fr">engagement associatif</span>
<span class="en">volunteer work</span>
</h4>
<ul>
<li>
<span class="fr"
>Vulgarisation et recherche contraception testiculaire,
ZEROMILLIONS, Paris, France, 2021-2024</span
>
<span class="en"
>Popularisation and research into testicular contraception,
ZEROMILLIONS, Paris, France, 2021-2024</span
>
</li>
<li>
<span class="fr"
>Aide au logement, travail, administratif, et projets de vie de
personnes précaires, 2018-2024</span
>
<span class="en"
>Help with housing, work, administration and life projects for
people on the margins of society, 2018-2024</span
>
</li>
<li>
<span class="fr"
>Distribution de nourriture, MIGRANTS-WILSON & SECOURS POPULAIRE,
2020-2022</span
>
<span class="en"
>Food distribution, MIGRANTS-WILSON & SECOURS POPULAIRE,
2020-2022</span
>
</li>
<li>
<span class="fr"
>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56,
Grande-Synthe, France, 2016</span
>
<span class="en"
>Co-management of volunteers in a refugee camp, UTOPIA 56,
Grande-Synthe, France, 2016</span
>
</li>
</ul>
<h4>
<span class="fr">centre d'intérêts</span>
<span class="en">interests</span>
</h4>
<ul>
<li>
<span class="fr">vélo</span>
<span class="en">bicycle</span>
</li>
<li>
<span class="fr">magie</span>
<span class="en">magic tricks</span>
</li>
<li>
<span class="fr">noeuds</span>
<span class="en">knots</span>
</li>
<li>
<span class="fr">mathématiques et physiques</span>
<span class="en">mathematics and physics</span>
</li>
<li>
<span class="fr">politique</span>
<span class="en">politic</span>
</li>
</ul>
</div>
<div class="mouse"><div class="frames mouse_3 pre"></div></div>
<div
class="banner banner_size_2 banner_reverse banner_speed_40 grid_full_width margin_bottom_small"
aria-label="banner delimitation in ASCII art"
></div>
</section>
<!--
PROJECTS
-->
<section id="projects" class="section">
<header>
<!-- prettier-ignore -->
<h1 aria-label="projets">
<span aria-hidden="true" class="pre">
<span class="fr">
      
         
       
        
       
</span>
<span class="en">
       
          
        
         
        
</span>
</span>
</h1>
</header>
<div class="margin_bottom_big">
<p>
<span class="fr">code-sources de tous les projets : </span>
<span class="en">source code for all projects : </span>
</p>
<a
href="https://bitbucket.org/hugogogo"
target="_blank"
rel="noopener noreferrer"
title="link to git repositories on bitbucket"
></a>
</div>
<h2 class="margin_bottom_big">
<span class="fr">quelques exemples de projets réalisés :</span>
<span class="en">some examples of completed projects :</span>
</h2>
<div class="projects_grid">
<figure class="project">
<a
href="https://bitbucket.org/hugogogo/int_04_fdf"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
>
<img src="./docs/projects/fdf_pyramide_loop_square_2_light.gif" />
</a>
<figcaption>
<p>
<span class="fr"
>programme qui creer une representation 3D filaire d'une carte
avec des points a differentes altitudes</span
>
<span class="en"
>program that creates a 3D wireframe representation of a map
with points at different altitudes</span
>
</p>
<a
href="https://bitbucket.org/hugogogo/int_04_fdf"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
></a>
</figcaption>
</figure>
<figure class="project">
<a
href="https://bitbucket.org/hugogogo/int_10_cube3d"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
>
<img src="./docs/projects/cube3d_tour_with_map_square.gif" />
</a>
<figcaption>
<p>
<span class="fr"
>mini jeu video utilisant le raycasting pour creer une
impression de deplacement dans un environnement 3D</span
>
<span class="en"
>mini video game using raycasting to create the impression of
movement in a 3D environment</span
>
</p>
<a
href="https://bitbucket.org/hugogogo/int_10_cube3d"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
></a>
</figcaption>
</figure>
<figure class="project">
<a
href="https://bitbucket.org/hugogogo/2023_website_jipf"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
>
<img src="./docs/projects/ljdp_map_clusters_square_light.gif" />
</a>
<figcaption>
<p>
<span class="fr"
>plugin wordpress representant des evenements sur une carte avec
des marqueurs et des filtres de tris</span
>
<span class="en"
>wordpress plugin showing events on a map with markers and
sorting filters</span
>
</p>
<a
href="https://bitbucket.org/hugogogo/2023_website_jipf"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
></a>
</figcaption>
</figure>
<figure class="project">
<a
href="https://bitbucket.org/hugogogo/2022_website_kosmopolit"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
>
<img src="./docs/projects/kosmopolit_square.gif" />
</a>
<figcaption>
<p>
<span class="fr"
>site internet statique utilisant une structure uniquement en
html et css</span
>
<span class="en"
>static website using a structure based solely on html and
css</span
>
</p>
<a
href="https://bitbucket.org/hugogogo/2022_website_kosmopolit"
target="_blank"
rel="noopener noreferrer"
title="link to the source code on bitbucket"
></a>
</figcaption>
</figure>
</div>
<div class="mouse"><div class="frames mouse_2 pre"></div></div>
<div
class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width"
aria-label="banner delimitation in ASCII art"
></div>
</section>
<!--
INFOS
-->
<section id="infos" class="footer section">
<article>
<a href="mailto:hugogogo@protonmail.com">hugogogo@protonmail.com</a>
</article>
<div class="mouse"><div class="frames mouse_4 pre"></div></div>
</section>
</body>
</html>