edited readme

README.md

@@ -1,4 +1,30 @@
 
+difficulties :
+
+- [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible)
+  - I finally decided to go with a structure like this :
+		```
+		<h1 aria-label="hugo lamy">
+			<span aria-hidden="true" class="pre">
+				         
+				                
+				           
+				               
+				      
+			</span>
+			<span aria-hidden="true" class="pre">
+				               
+				              
+				             
+				                 
+				             
+			</span>
+		</h1>
+		```
+- [create the full screen hero section with the navbar under the title](https://stackoverflow.com/questions/77596781/in-css-how-to-make-a-sticky-navbar-after-the-header-in-an-hero-section/)
+
+---
+
 projects :
 
 - [/] ljdp

index.html

@@ -14,6 +14,7 @@
 		<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
+		<link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/home.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet">
@@ -41,20 +42,8 @@
 	<main>
 
 
-
-
-
-
-
-
-
-		<!--
-			HOME
-		-->
-		<section class="section home">
-
-			<header>
-				<h1 aria-label="hugo lamy" id="name" class="title">
+		<header>
+			<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre">
          
                 
@@ -69,8 +58,8 @@
                  
              
 </span>
-				</h1>
-				<h1 aria-label="programmeur informatique" id="title" class="title">
+			</h1>
+			<h1 aria-label="programmeur informatique" id="title" class="title">
 <span aria-hidden="true" class="pre">
                          
                                          
@@ -85,9 +74,33 @@
                                                   
                                  
 </span>
-				</h1>
+			</h1>
+		</header>
+		<nav>
+			<a href="#home">accueil</a>
+			<a href="#projects">projets</a>
+			<a href="#cv">cv</a>
+			<a href="#infos">contacte</a>
+		</nav>
+
+
+
+
+
+
+
+
+		<!--
+			HOME
+		-->
+		<section class="section home" id="home">
+
+			<header>
 			</header>
 
+			<article>
+			</article>
+
 			<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
 <pre class="frame f1" aria-hidden="true">
        

styles/elements/cv.css

@@ -34,5 +34,5 @@
 	padding: 10px 0px;
 }
 #cv .mouse {
-	margin-top: 150px;
+	margin-top: 100px;
 }

styles/elements/home.css

@@ -1,3 +1,14 @@
-.home {
+
+#home {
 	height: 100vh;
+	grid-template-rows: 1fr 1fr auto auto;
+/*
+	grid-template-rows: 1fr 50px auto auto;
+*/
 }
+#home article {
+/*
+	height: 10000vh;
+*/
+}
+

styles/elements/infos.css

@@ -3,5 +3,5 @@
 	display: flex;
 	flex-direction: column;
 	place-content: center;
-	height: 400px;
+	height: 200px;
 }

styles/elements/nav.css

@@ -0,0 +1,29 @@
+
+nav {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+	background-color: #f6f6f6;
+	z-index: 1;
+}
+nav a {
+	position: relative;
+	padding: 10px 20px;
+	height: fit-content;
+	text-decoration: none;
+	color: inherit;
+}
+nav a:before {
+	content: "•";
+	position: absolute;
+	left: 0px;
+}
+nav a:after {
+	content: "•";
+	position: absolute;
+	right: 0px;
+}
+

styles/elements/projects.css

@@ -27,5 +27,5 @@
 	margin: 0px 0px 10px 0px;
 }
 #projects .mouse {
-	margin-top: 150px;
+	margin-top: 100px;
 }

styles/frames.css

@@ -1,2 +0,0 @@
-
-

styles/style.css

@@ -6,7 +6,7 @@ html {
 	font-size: var(--base_font_size);
 }
 body, main {
-	overflow-x: hidden;
+	overflow-x: clip;
 	margin: auto;
 	width: fit-content;
 	background-color: #f6f6f6;
@@ -18,3 +18,15 @@ pre {
 	margin: 10px 0px;
 }
 
+/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */
+/* Animate scrolling only if users don’t prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+
+	/* Add some spacing between the target and the top of the viewport */
+	:target {
+		scroll-margin-top: 0px;
+	}
+}