added on all sections

.vscode/settings.json

@@ -1,10 +0,0 @@
-{
-  // Use Prettier as the default formatter for HTML and CSS
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
-}

README.md

@@ -1,8 +1,4 @@
 
-html validator : https://validator.w3.org/nu
-
----
-
 start it with a server, like : `alive-server`                                                                      
 - https://www.npmjs.com/package/alive-server                                                                       
 - install : `npm install -g alive-server`

styles/elements/cv.css

@@ -1,38 +1,15 @@
-#cv {
-  header {
-    height: 300px;
-  }
-}
-
 .cv {
-  display: flex;
+	display: flex;
-  flex-direction: column;
+	flex-direction: column;
-  text-align: left;
+	width: auto;
-  width: auto;
+	max-width: 900px;
-  max-width: 900px;
+	margin-bottom: 100px;
-
+	text-align: left;
-  > *:last-child {
+}
-    margin-bottom: 100px;
+
-  }
+.cv .cv_download {
-
+	display: inline-block;
-  .cv_download {
+	width: 100%;
-    display: flex;
+	margin-top: 30px;
-    flex-wrap: wrap;
+	text-align: center;
-    gap: 10px;
-    margin-top: 30px;
-  }
-
-  .banner {
-    margin: 0px 0px 50px;
-  }
-
-  h2 {
-    margin-top: 100px;
-  }
-
-  ul {
-    border: 1px dashed black;
-    padding: 20px;
-    padding-left: 40px;
-  }
 }

styles/elements/hero.css

@@ -1,19 +1,15 @@
 #hero {
-  min-height: 100vh;
+	min-height: 100vh;
-  grid-template-columns: 1fr auto 1fr;
+	grid-template-columns: 1fr auto 1fr;
-  /*
+	/*
 	* WIP : trying to find a solution to have both qualities :
 	* - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top)
-	* - the details element 'voir le cv' don't jump when we unroll it
+	* - the details element 'voir le cv' dont jump when we unroll it
 	*
 	grid-template-rows: 1fr auto 1fr;
-	grid-template-rows: auto auto 1fr;
 	*/
-  grid-template-rows: 50vh 1fr;
+	grid-template-rows: 1fr 1fr auto;
 }
 #hero .subtitle {
-  text-align: center;
+	text-align: center;
-  display: inline-block;
-  max-width: 700px;
-  margin: 0px auto;
 }

styles/elements/language.css

@@ -1,59 +1,51 @@
 input#language {
-  display: none;
+	display: none;
+}
+.language_label {
+	position: absolute;
+	grid-column: end;
+	top: 20px;
+	right: 20px;
+	padding: 10px;
+	cursor: pointer;
+	z-index: 1;
+}
+.language_label .flag {
+	width: 20px;
 }
-label#language_label {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  padding: 10px;
-  cursor: pointer;
-  z-index: 1;
 
-  .flag {
+
-    width: 20px;
-  }
-}
 
 /*
-* SWITCH FLAG
+* FR
 */
-#language {
+input#language:not(:checked) ~ * .language_label #fr {
-  &:not(:checked) + #language_label {
+	display: inline;
-    #fr {
-      display: inline;
-    }
-
-    #en {
-      display: none;
-    }
-  }
-
-  &:checked + #language_label {
-    #fr {
-      display: none;
-    }
-
-    #en {
-      display: inline;
-    }
-  }
 }
+input#language:checked ~ * .language_label #fr {
+	display: none;
+}
+input#language:not(:checked) ~ * span.fr {
+	display: none;
+}
+input#language:checked ~ * span.fr {
+	display: inline;
+}
+
+
 
 /*
-* SWITCH LANGUAGE
+* EN
 */
-
+input#language:not(:checked) ~ * .language_label #en {
-#language {
+	display: none;
-  ~ * .fr,
+}
-  ~ * .en {
+input#language:checked ~ * .language_label #en {
-    display: none;
+	display: inline;
-  }
+}
-
+input#language:not(:checked) ~ * span.en {
-  &:not(:checked) ~ * .en {
+	display: inline;
-    display: inline;
+}
-  }
+input#language:checked ~ * span.en {
-
+	display: none;
-  &:checked ~ * .fr {
-    display: inline;
-  }
 }

styles/sections.css

@@ -1,5 +1,6 @@
 section {
 	display: grid;
+	position: relative;
 	margin: 0px;
 	width: 100vw;
 	grid-template-columns: auto auto auto;