better design featuring a first slide
This commit is contained in:
parent
d6726e7d1b
commit
b6f2e850b3
4 changed files with 306 additions and 195 deletions
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
# Monsieur Louis, le site web
|
||||||
|
|
||||||
|
Site web de https://monsieurlouis.se/.
|
||||||
195
index.html
195
index.html
|
|
@ -1,195 +0,0 @@
|
||||||
<!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>
|
|
||||||
303
src/index.html
Normal file
303
src/index.html
Normal file
|
|
@ -0,0 +1,303 @@
|
||||||
|
<!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 {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1em;
|
||||||
|
min-height: 200vh;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hello_slide {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
background: url("./louis_guidez_besseggen.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: bottom;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: -1em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
#hello_slide::after {
|
||||||
|
content: " ";
|
||||||
|
border-bottom: 1em solid #9DC4EB;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1em;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#hello_slide h1 {
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
max-width: 50rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 50rem) {
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-rows: repeat(3, auto);
|
||||||
|
column-gap: 1em;
|
||||||
|
}
|
||||||
|
.small-screens-only {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 50rem) {
|
||||||
|
.columns:not(ul.contact) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 30rem) {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1,
|
||||||
|
header h2 {
|
||||||
|
text-shadow: .1em .1em 0 #d9e9f9,
|
||||||
|
-.05em -.05em 0 #d9e9f9,
|
||||||
|
.05em -.05em 0 #d9e9f9,
|
||||||
|
-.05em .05em 0 #d9e9f9,
|
||||||
|
.05em .05em 0 #d9e9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
header p.bubble,
|
||||||
|
header .p-link {
|
||||||
|
background: #ffffff88;
|
||||||
|
padding: .5em;
|
||||||
|
border-radius: .5em;
|
||||||
|
transition: all .1s ease-in;
|
||||||
|
display: block;
|
||||||
|
color: inherit;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
header p.bubble:hover,
|
||||||
|
header .p-link:hover {
|
||||||
|
background: #ffffffcc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
p.bubble[data-language="fr"] {
|
||||||
|
background: #9DC4EBaa;
|
||||||
|
}
|
||||||
|
p.bubble[data-language="fr"]:hover {
|
||||||
|
background: #9DC4EBDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 50rem) {
|
||||||
|
p.bubble {
|
||||||
|
background: #ffffffcc;
|
||||||
|
}
|
||||||
|
p.bubble[data-language="fr"] {
|
||||||
|
background: #9DC4EBDD;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.contact a {
|
||||||
|
background: #9DC4EBDD;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #4899ea;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-link {
|
||||||
|
display: block;
|
||||||
|
font-size: 2em;
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #324B6F;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2em;
|
||||||
|
margin: auto;
|
||||||
|
color: white;
|
||||||
|
transition: all .1s ease-in;
|
||||||
|
}
|
||||||
|
.bubble-link:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #445874;
|
||||||
|
}
|
||||||
|
.back_to_top {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1em;
|
||||||
|
right: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="hello_slide">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Louis Guidez</h1>
|
||||||
|
<div class="columns">
|
||||||
|
<p class="bubble" data-language="en">
|
||||||
|
Hej! Thank you for stopping on my website.
|
||||||
|
</p>
|
||||||
|
<p class="bubble" data-language="fr">
|
||||||
|
Bienvenue ! Merci de vous être arrêté·e sur mon site.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<a class="bubble-link" href="#about">↓</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns">
|
||||||
|
<p data-language="en" class="bubble">Want to get to know me better?</p>
|
||||||
|
<p data-language="fr" class="bubble">Vous souhaitez en savoir plus ? Contactez-moi.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="contact columns">
|
||||||
|
<li><a href="mailto:hello@monsieurlouis.se">hello@monsieurlouis.se</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>
|
||||||
|
</header>
|
||||||
|
<div class="grid" id="about">
|
||||||
|
<h2 data-language="en">About</h2>
|
||||||
|
<p data-language="en">
|
||||||
|
I am a young engineer specialised in mechanical design with an interest in digital technologies and automation.
|
||||||
|
</p>
|
||||||
|
<p data-language="en">
|
||||||
|
In my spare time, I like to fly, go on hikes, play board games, prototype small things... and much more.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 data-language="fr">À propos de moi</h2>
|
||||||
|
<p data-language="fr">
|
||||||
|
Je suis un jeune ingénieur en conception mécanique, particulièrement intéressé par les nouvelles technologies.
|
||||||
|
</p>
|
||||||
|
<p data-language="fr">
|
||||||
|
Quand je ne travaille pas, j'aime : piloter, faire des randonnées, les jeux de société, bidouiller des petits projets...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="#" role="button" class="back_to_top bubble-link">↑</a>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// If debug_language is empty / unset, autodetect the language
|
||||||
|
debug_language = "";
|
||||||
|
|
||||||
|
function show_only_french() {
|
||||||
|
// Hiding the other languages (just English)
|
||||||
|
document.querySelectorAll("[data-language=\"en\"]").forEach(function(el) {
|
||||||
|
el.style.display = "none";
|
||||||
|
});
|
||||||
|
// So the styling is consistent
|
||||||
|
document.querySelectorAll("[data-language=\"fr\"]").forEach(function(el) {
|
||||||
|
el.removeAttribute("data-language");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function show_only_english() {
|
||||||
|
// Hiding the other languages (just French)
|
||||||
|
document.querySelectorAll("[data-language=\"fr\"]").forEach(function(el) {
|
||||||
|
el.style.display = "none";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function autodetect_language() {
|
||||||
|
navigator.languages.some(function(language) {
|
||||||
|
console.log(language);
|
||||||
|
if(["en", "en-GB", "en-US"].includes(language)) {
|
||||||
|
show_only_english();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else if(["fr"].includes(language)) {
|
||||||
|
show_only_french();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(typeof debug_language == "undefined") {
|
||||||
|
autodetect_language();
|
||||||
|
}
|
||||||
|
else if(debug_language == "fr") {
|
||||||
|
show_only_french();
|
||||||
|
}
|
||||||
|
else if(debug_language == "en") {
|
||||||
|
show_only_english();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
Before Width: | Height: | Size: 624 KiB After Width: | Height: | Size: 624 KiB |
Loading…
Reference in a new issue