Added some links and turned the buttons into proper links

Signed-off-by: Louis Vallat <louis@louis-vallat.xyz>

assets/css/main.css

@@ -16,24 +16,24 @@ body {
     margin-top: 8vh;
 }
 
-#call-to-action > button {
+#call-to-action > a {
-    width: 150px;
+    text-decoration: none;
-    height: 45px;
+    color: black;
+    font-family: 'Roboto', sans-serif;
+    padding: 13px 32px;
     font-size: 1em;
     border-radius: 8px;
     background-color: white;
-    border: none;
     transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms;
 }
 
-#call-to-action > button:hover {
+#call-to-action > a:hover {
     background-color: lightgrey;
     box-shadow: 0px 0px 6px 0px lightblue;
 }
 
-#call-to-action > button:first-child {
+#call-to-action > a:first-child {
     margin-right: 10px;
-
 }
 
 button:hover {
@@ -45,7 +45,10 @@ button:hover {
     padding: 0px 10% 0px 10%;
     height: 100vh;
     display: flex;
-    align-items: center;
+}
+
+#presentation {
+    align-self: center;
 }
 
 .white {
@@ -102,3 +105,13 @@ h1 {
 #additional-information > p {
     margin-right: 50px;
 }
+
+.icons {
+    height: 1.8rem;
+    transition: cubic-bezier(.65,.05,.36,1) 100ms;
+    margin-left: 10px;
+}
+
+.icons:hover {
+    transform: translateY(-3px);
+}

assets/images/gitlab-icon-rgb.svg

@@ -0,0 +1,61 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 586 559;" xml:space="preserve" viewBox="124.22 124.02 337.67 310.98">
+<style type="text/css">
+	.st0{fill:#FAFAFA;}
+	.st1{fill:#F0F0F0;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#E24329;}
+	.st4{fill:#FCA326;}
+	.st5{fill:#FC6D26;}
+	.st6{fill:#8C929D;}
+	.st7{fill:#2E2E2E;}
+	.st8{fill:none;stroke:#FCA326;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st9{fill:none;stroke:#FC6D26;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st10{fill:none;stroke:#E24329;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st11{fill:none;stroke:#F0F0F0;stroke-miterlimit:10;}
+	.st12{fill:#231F20;}
+	.st13{fill:none;stroke:#231F20;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st14{display:none;}
+	.st15{display:inline;opacity:0.1;fill:#E828E3;}
+	.st16{display:inline;}
+	.st17{opacity:0.1;fill:#E828E3;}
+	.st18{font-family:'SourceSansPro-Semibold';}
+	.st19{font-size:24px;}
+	.st20{display:inline;fill:#DB3B21;}
+	.st21{display:inline;fill:#FC6D26;}
+	.st22{display:inline;fill:#2E2E2E;}
+	.st23{display:inline;fill:#6E49CB;}
+	.st24{display:inline;fill:#380D75;}
+	.st25{display:inline;fill:#FCA121;}
+	.st26{opacity:0.6;fill:none;stroke:#231F20;stroke-width:2;stroke-miterlimit:10;stroke-dasharray:12,6;}
+	.st27{fill:none;stroke:#444444;stroke-width:1.5339;stroke-miterlimit:10;}
+</style>
+<g id="logo_art">
+	<g>
+		<path id="path50_2_" class="st3" d="M293.026,434.983L293.026,434.983l62.199-191.322H230.918L293.026,434.983L293.026,434.983z"/>
+		<path id="path66_6_" class="st4" d="M143.798,243.662L143.798,243.662l-18.941,58.126c-1.714,5.278,0.137,11.104,4.661,14.394    l163.509,118.801L143.798,243.662L143.798,243.662z"/>
+		<path id="path74_2_" class="st3" d="M143.798,243.662h87.12l-37.494-115.224c-1.919-5.895-10.282-5.895-12.27,0L143.798,243.662    L143.798,243.662z"/>
+		<path id="path82_6_" class="st4" d="M442.346,243.662L442.346,243.662l18.873,58.126c1.714,5.278-0.137,11.104-4.661,14.394    L293.026,434.983L442.346,243.662L442.346,243.662z"/>
+		<path id="path86_2_" class="st3" d="M442.346,243.662h-87.12l37.425-115.224c1.919-5.895,10.282-5.895,12.27,0L442.346,243.662    L442.346,243.662z"/>
+		<polygon class="st5" points="293.026,434.983 355.225,243.662 442.346,243.662   "/>
+		<polygon class="st5" points="293.026,434.983 143.798,243.662 230.918,243.662   "/>
+	</g>
+</g>
+<g id="spacing_guides" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" class="st14">
+	<path id="path40_18_" sketch:type="MSShapeGroup" class="st15" d="M0,0.5v124h586V0.5H0L0,0.5z"/>
+	<path id="path40_16_" sketch:type="MSShapeGroup" class="st15" d="M0,435.5v124h586v-124H0L0,435.5z"/>
+	<path id="path40_15_" sketch:type="MSShapeGroup" class="st15" d="M462.2,560h124V0h-124V560L462.2,560z"/>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 511.2881 283.3319)" class="st18 st19">1x</text>
+	</g>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 281.2881 500.9978)" class="st18 st19">1x</text>
+	</g>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 281.2881 65.998)" class="st18 st19">1x</text>
+	</g>
+	<path id="path40_5_" sketch:type="MSShapeGroup" class="st15" d="M0,560h124V0H0V560L0,560z"/>
+	<g class="st16">
+		<text transform="matrix(1 0 0 1 51.2881 283.3319)" class="st18 st19">1x</text>
+	</g>
+</g>
+</svg>

assets/images/twitter-logo-blue.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1D9BF0;}
+</style>
+<g id="Logo_1_">
+	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
+</g>
+</svg>

index.html

@@ -14,6 +14,11 @@
             <div class="center-align-inline">
                 <img src="assets/images/square_pp.jpg" id="profile-picture">
                 <h2 class="white" id="name">Louis Vallat</h2>
+                <div class="center-align-inline">
+                    <a href="https://gitlab.com/lovallat" target="_blank" title="Gitlab"><img src="/assets/images/gitlab-icon-rgb.svg" class="icons" alt="Gitlab RGB logo"/></a>
+                    <a href="https://twitter.com/VallatLouis" target="_blank" title="Twitter"><img src="/assets/images/twitter-logo-blue.svg" class="icons" alt="Twitter blue logo"/></a>
+                    <a href="https://www.linkedin.com/in/louis-vallat/" target="_blank" title="LinkedIN"><img src="/assets/images/LI-In-Bug.png" class="icons" alt="LinkedIN small blue logo"/></a>
+                </div>
             </div>
             <h1 class="white" id="subtitle">Un étudiant développeur, passionné de technologies, quelles qu'elles soient.</h1>
             <div class="center-align-inline" id="additional-information">
@@ -22,9 +27,9 @@
                 <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z"/></svg>
                 <p>Bordeaux &mdash; France</p>
             </div>
-            <div id="call-to-action">
+            <div id="call-to-action" class="center-align-inline">
-                <button>Me contacter</button>
+                <a href="mailto:contact@louis-vallat.xyz">Me contacter</a>
-                <button>En savoir plus</button>
+                <a>En savoir plus</a>
             </div>
         </div>
     </div>