195 lines
7.3 KiB
HTML
195 lines
7.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Louis Guidez</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html, body {min-height: 100%;}
|
||
|
|
body {
|
||
|
|
background: url("./louis_guidez_besseggen.jpg");
|
||
|
|
background-size: cover;
|
||
|
|
background-position: bottom;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-attachment: fixed;
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 1em;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
font-family: sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
max-width: 55rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 55rem) {
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-auto-flow: column;
|
||
|
|
grid-template-rows: repeat(4, auto);
|
||
|
|
column-gap: 1em;
|
||
|
|
}
|
||
|
|
.small-screens-only {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.columns {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: stretch;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 1em;
|
||
|
|
}
|
||
|
|
.columns > * {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 55rem) {
|
||
|
|
.columns {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.contact {
|
||
|
|
list-style-type: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
line-height: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.contact svg {
|
||
|
|
height: 2em;
|
||
|
|
vertical-align: middle;
|
||
|
|
margin: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.contact a {
|
||
|
|
display: inline-block;
|
||
|
|
padding: .5em;
|
||
|
|
background: #9DC4EBaa;
|
||
|
|
color: #ffffff;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
ul.contact a:hover {
|
||
|
|
background: #9DC4EBDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2 {
|
||
|
|
text-shadow: .1em .1em 0 #d9e9f9,
|
||
|
|
-.05em -.05em 0 #d9e9f9,
|
||
|
|
.05em -.05em 0 #d9e9f9,
|
||
|
|
-.05em .05em 0 #d9e9f9,
|
||
|
|
.05em .05em 0 #d9e9f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
background: #ffffff88;
|
||
|
|
padding: .5em;
|
||
|
|
border-radius: .5em;
|
||
|
|
transition: all .1s ease-in;
|
||
|
|
}
|
||
|
|
p:hover {
|
||
|
|
background: #ffffffcc;
|
||
|
|
}
|
||
|
|
p.fr {
|
||
|
|
background: #9DC4EBaa;
|
||
|
|
}
|
||
|
|
p.fr:hover {
|
||
|
|
background: #9DC4EBDD;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 55rem) {
|
||
|
|
p {
|
||
|
|
background: #ffffffcc;
|
||
|
|
}
|
||
|
|
p.fr {
|
||
|
|
background: #9DC4EBDD;
|
||
|
|
}
|
||
|
|
ul.contact a {
|
||
|
|
background: #9DC4EBDD;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #4899ea;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Louis Guidez</h1>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
<p class="small-screens-only">
|
||
|
|
<a href="#fr">⬇️🇫🇷 En français 🇫🇷⬇️</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Hi! Thanks for stopping on my website.
|
||
|
|
</p>
|
||
|
|
<h2>About</h2>
|
||
|
|
<p>
|
||
|
|
I am a young engineer specialised in mechanical design with an interest in digital technologies and automation.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
In my spare time, I like to fly, go on hikes, play board games, prototype small things... and much more.
|
||
|
|
</p>
|
||
|
|
<p id="fr" class="fr">
|
||
|
|
Bienvenue ! Merci de vous être arrêté·e sur mon site.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>À propos de moi</h2>
|
||
|
|
<p class="fr">
|
||
|
|
Je suis un jeune ingénieur en conception mécanique, particulièrement intéressé par les nouvelles technologies.
|
||
|
|
</p>
|
||
|
|
<p class="fr">
|
||
|
|
Quand je ne travaille pas, j'aime : piloter, faire des randonnées, les jeux de société, bidouiller des petits projets...
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<h2>Contact</h2>
|
||
|
|
|
||
|
|
<div class="columns">
|
||
|
|
<p>Want to get to know me better? Let's talk!</p>
|
||
|
|
<p class="fr">Vous souhaitez en savoir plus ? Contactez-moi.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="contact columns">
|
||
|
|
<li><a href="mailto:louis@hostux.fr">louis@hostux.fr</a></li>
|
||
|
|
<li>
|
||
|
|
<a href="https://www.linkedin.com/in/louis-guidez-42a4a0170/" target="_blank" title="LinkedIn">
|
||
|
|
<svg data-icon="linkedin" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://www.instagram.com/wingsofxiv/" target="_blank" title="Instagram">
|
||
|
|
<svg data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://louis.hostux.fr/blog" target="_blank" title="Blog">
|
||
|
|
<svg data-icon="pen-nib" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M136.6 138.79a64.003 64.003 0 0 0-43.31 41.35L0 460l14.69 14.69L164.8 324.58c-2.99-6.26-4.8-13.18-4.8-20.58 0-26.51 21.49-48 48-48s48 21.49 48 48-21.49 48-48 48c-7.4 0-14.32-1.81-20.58-4.8L37.31 497.31 52 512l279.86-93.29a64.003 64.003 0 0 0 41.35-43.31L416 224 288 96l-151.4 42.79zm361.34-64.62l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.75 18.75-49.15 0-67.91z"></path></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|