diff --git a/README.md b/README.md
new file mode 100644
index 0000000..11487b6
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+# Monsieur Louis, le site web
+
+Site web de https://monsieurlouis.se/.
\ No newline at end of file
diff --git a/index.html b/index.html
deleted file mode 100644
index 7c00948..0000000
--- a/index.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..102cc55
--- /dev/null
+++ b/src/index.html
@@ -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>
\ No newline at end of file
diff --git a/louis_guidez_besseggen.jpg b/src/louis_guidez_besseggen.jpg
similarity index 100%
rename from louis_guidez_besseggen.jpg
rename to src/louis_guidez_besseggen.jpg
