commit 72ef74c7befeea00dee0dea275ade03e211661de
Author: Maethik <116798690+Maethik@users.noreply.github.com>
Date:   Fri May 26 10:17:23 2023 +0200

    26/05/2023-1

diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..9e2d081
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,114 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-image: url('../img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+}
+
+body #a {
+    text-decoration: none;
+    color: rgb(100, 100, 100);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+    cursor: default;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    position: absolute;
+    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    filter: blur(10px);
+    
+    transition: opacity 2s ease-in-out, filter 2s ease-in-out;
+}
+
+header {
+    width: 100%;
+    min-height: 35%;
+    padding-top: 10%;
+    padding-bottom: 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+header img {
+    width: 125px;
+    border: 2px solid white;
+    border-radius: 50%;
+}
+
+header h2 {
+    background-color: rgb(30, 30, 30);
+    border: 1px solid white;
+    border-radius: 30px;
+    padding: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    color: white;
+    font-size: 1.25rem;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.links-container {
+    width: 100%;
+    min-height: 65%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.links-container a {
+    display: flex;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    width: 90%;
+    margin-top: 20px;
+    padding: 5px;
+    border-radius: 30px;
+    text-decoration: none;
+    color: black;
+    font-size: 1.15rem;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.links-container a img {
+    width: 50px;
+    margin-left: 20px;
+}
+
+.links-container a p {
+    margin-left: 10%;
+}
+
+#vanta {
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    height: 100vh;
+}
+
+@media screen and (width > 425px) {
+    .links-container a {
+        width: 60%;
+    }
+}
\ No newline at end of file
diff --git a/img/background.jpg b/img/background.jpg
new file mode 100644
index 0000000..8876f23
Binary files /dev/null and b/img/background.jpg differ
diff --git a/img/github.svg b/img/github.svg
new file mode 100644
index 0000000..890f617
--- /dev/null
+++ b/img/github.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css"><![CDATA[
+	.st0{fill-rule:evenodd;clip-rule:evenodd;}
+]]></style><g><path class="st0" d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   C480,134.8,379.7,32,256,32z"/></g></svg>
\ No newline at end of file
diff --git a/img/instagram.svg b/img/instagram.svg
new file mode 100644
index 0000000..3a5279d
--- /dev/null
+++ b/img/instagram.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:url(#SVGID_1_);}
+	.st1{fill:#FFFFFF;}
+</style><g><linearGradient gradientTransform="matrix(16.0027 -27.7174 27.7174 16.0027 -878.9595 -482.2268)" gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="-1.206969e-06" x2="1" y1="32" y2="32"><stop offset="0" style="stop-color:#FEC053"/><stop offset="0.327" style="stop-color:#F2203E"/><stop offset="0.648" style="stop-color:#B729A8"/><stop offset="1" style="stop-color:#5342D6"/></linearGradient><path class="st0" d="M16,0L16,0c8.8,0,16,7.2,16,16c0,8.8-7.2,16-16,16C7.2,32,0,24.8,0,16C0,7.2,7.2,0,16,0z"/><path class="st1" d="M20.7,6h-9.5C8.3,6,6,8.4,6,11.4v9.2c0,2.9,2.3,5.3,5.3,5.4h9.5c2.9,0,5.3-2.4,5.3-5.4v-9.2   C26,8.4,23.7,6,20.7,6z M24.2,20.5c0,2-1.6,3.7-3.7,3.7h-9.1c-2,0-3.7-1.7-3.6-3.7v-9c0-2,1.6-3.7,3.6-3.7h9.1c2,0,3.7,1.7,3.7,3.7   V20.5z"/><path class="st1" d="M16,10.9c-2.8-0.1-5.2,2.2-5.2,5c-0.1,2.8,2.2,5.2,5,5.2s5.2-2.2,5.2-5l0-0.1C21.1,13.2,18.8,10.9,16,10.9z    M16,19.3c-1.8,0-3.3-1.4-3.4-3.2c0-1.8,1.4-3.3,3.2-3.4s3.3,1.4,3.4,3.2l0,0.1C19.3,17.8,17.8,19.3,16,19.3z"/><path class="st1" d="M21.3,9.4c0.6,0,1.1,0.5,1.1,1.2s-0.5,1.2-1.1,1.2s-1.1-0.5-1.1-1.2S20.7,9.4,21.3,9.4z"/></g></svg>
\ No newline at end of file
diff --git a/img/linkedin.svg b/img/linkedin.svg
new file mode 100644
index 0000000..396bcb7
--- /dev/null
+++ b/img/linkedin.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#0078B5;}
+	.st1{fill:#FFFFFF;}
+</style><title/><g><path class="st0" d="M500,1000L500,1000C223.9,1000,0,776.1,0,500l0,0C0,223.9,223.9,0,500,0l0,0c276.1,0,500,223.9,500,500l0,0   C1000,776.1,776.1,1000,500,1000z"/><g><g><path class="st1" d="M184.2,387.3h132.9v427.7H184.2V387.3z M250.7,174.7c42.5,0,77,34.5,77,77.1s-34.5,77.1-77,77.1     c-42.6,0-77.1-34.5-77.1-77.1C173.5,209.3,208,174.7,250.7,174.7"/><path class="st1" d="M400.5,387.3H528v58.4h1.8c17.7-33.6,61-69.1,125.8-69.1c134.6,0,159.5,88.6,159.5,203.7v234.7H682.2V607.1     c0-49.7-0.9-113.4-69.1-113.4c-69.2,0-79.8,54-79.8,109.8v211.6H400.5V387.3z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/img/logo.jpg b/img/logo.jpg
new file mode 100644
index 0000000..93b7f44
Binary files /dev/null and b/img/logo.jpg differ
diff --git a/img/personal_website.svg b/img/personal_website.svg
new file mode 100644
index 0000000..a93c46d
--- /dev/null
+++ b/img/personal_website.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#101820;}</style></defs><title/><g data-name="Layer 40" id="Layer_40"><path class="cls-1" d="M28,24H4a3,3,0,0,1-3-3V5A3,3,0,0,1,4,2H28a3,3,0,0,1,3,3V21A3,3,0,0,1,28,24ZM4,4A1,1,0,0,0,3,5V21a1,1,0,0,0,1,1H28a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1Z"/><path class="cls-1" d="M21,30H11a1,1,0,0,1-1-1.16l1-6A1,1,0,0,1,12,22h8a1,1,0,0,1,1,.84l1,6A1,1,0,0,1,21,30Zm-8.82-2h7.64l-.67-4h-6.3Z"/><path class="cls-1" d="M24,30H8a1,1,0,0,1,0-2H24a1,1,0,0,1,0,2Z"/><path class="cls-1" d="M30,19H2a1,1,0,0,1,0-2H30a1,1,0,0,1,0,2Z"/></g></svg>
\ No newline at end of file
diff --git a/img/youtube.svg b/img/youtube.svg
new file mode 100644
index 0000000..910a877
--- /dev/null
+++ b/img/youtube.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#FF0000;}
+	.st1{fill:#FFFFFF;}
+</style><title/><g><path class="st0" d="M500,1000L500,1000C223.9,1000,0,776.1,0,500v0C0,223.9,223.9,0,500,0h0c276.1,0,500,223.9,500,500v0   C1000,776.1,776.1,1000,500,1000z"/><path class="st1" d="M818.2,339.1c-7.6-28.8-30.1-51.4-58.7-59.1c-51.8-14-259.4-14-259.4-14s-207.7,0-259.4,14   c-28.6,7.7-51.1,30.3-58.7,59.1C168,391.2,168,500,168,500s0,108.8,13.9,160.9c7.6,28.8,30.1,51.4,58.7,59.1   c51.8,14,259.4,14,259.4,14s207.7,0,259.4-14c28.6-7.7,51.1-30.3,58.7-59.1C832,608.8,832,500,832,500S832,391.2,818.2,339.1z    M432.1,598.7V401.3L605.6,500L432.1,598.7z"/></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ca5d109
--- /dev/null
+++ b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/index.css">
+    <title>@matheoguilbert</title>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            VANTA.BIRDS({
+                el: "#vanta",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                colorMode: "lerpGradient",
+                wingSpan: 10.00,
+                speedLimit: 3.00,
+                separation: 100.00,
+                alignment: 70.00,
+                cohesion: 5.00,
+                quantity: 1.00,
+                backgroundAlpha: 0
+            });
+
+            setTimeout(() => {
+                const main = document.querySelector('main');
+                main.style.opacity = 1;
+                main.style.filter = 'blur(0px)';
+            }, 1000);
+            
+        });
+    </script>
+</head>
+
+<body>
+    <div id="vanta"></div>
+    <main>
+        <header>
+            <img src="img/logo.jpg" />
+            <h2>@matheo.guilbert</h2>
+        </header>
+        <div class="links-container">
+            <a id="website" href="https://matheoguilbert.fr/" target="_blank">
+                <img src="img/personal_website.svg" />
+                <p>Personal website</p>
+            </a>
+            <a id="instagram" href="https://www.instagram.com/matheo.guilbert/" target="_blank">
+                <img src="img/instagram.svg" />
+                <p>Instagram</p>
+            </a>
+            <a id="youtube" href="https://www.youtube.com/@maethik3673" target="_blank">
+                <img src="img/youtube.svg" />
+                <p>Youtube</p>
+            </a>
+            <a id="linkedin" href="https://www.linkedin.com/in/math%C3%A9o-guilbert-26a209258/" target="_blank">
+                <img src="img/linkedin.svg" />
+                <p>LinkedIn</p>
+            </a>
+            <a id="github" href="https://github.com/Maethik" target="_blank">
+                <img src="img/github.svg" />
+                <p>GitHub</p>
+            </a>
+        </div>
+    </main>
+    <a id="a" href="https://www.pexels.com/fr-fr/photo/paysage-foret-parc-paix-3632931/" target="_blank"><p>Photo de Sean Valentine</p></a>
+</body>
+
+</html>