added details

index.html

@@ -16,6 +16,7 @@
 		<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet">
 		<link href="./styles/elements/infos.css" type="text/css" rel="stylesheet">
+		<link href="./styles/elements/test.css" type="text/css" rel="stylesheet">
 	</head>
 
 	<!--
@@ -71,13 +72,27 @@
 
 
 
-
-
-
 		<!--
 			ROLE TITLE
 		-->
-		<figure id="role_title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
+		<section id="role_title">
+			<figure id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
+<pre>
+         
+                
+           
+               
+      
+</pre>
+<pre>
+               
+              
+             
+                 
+             
+</pre>
+			</figure>
+			<figure id="title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
 <pre>
                          
                                          
@@ -92,7 +107,8 @@
                                                   
                                  
 </pre>
-		</figure>
+			</figure>
+		</section>
 		<!--
 			END ROLE TITLE
 		-->
@@ -101,38 +117,58 @@
 		<!--
 			CV INFOS
 		-->
-		<section style="display:none;" id="cv_infos" data-flex="vertical left">
+		<section id="cv_infos" data-flex="vertical left">
-			<h1>Informatique</h1>
+			<details>
-			<ul>
+				<summary>
-				<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
+					<h2>Informatique</h2>
-				<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
+				</summary>
-				<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
+				<ul>
-				<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
+					<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
-				<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
+					<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
-			</ul>
+					<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
-			<h1>Bénévolat</h1>
+					<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
-			<ul>
+					<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
-				<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
+				</ul>
-				<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
+			</details>
-				<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
+			<details>
-			</ul>
+				<summary>
-			<h1>Outils informatiques</h1>
+					<h2>Bénévolat</h2>
-			<ul>
+				</summary>
-				<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
+				<ul>
-				<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
+					<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
-				<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
+					<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
-			</ul>
+					<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
-			<h1>Études d’architecture</h1>
+				</ul>
-			<ul>
+			</details>
-				<li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
+			<details>
-				<li>Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)</li>
+				<summary>
-			</ul>
+					<h2>Outils informatiques</h2>
-			<h1>Centres d'intérêts</h1>
+				</summary>
-			<ul>
+				<ul>
-				<li>Vélo : longs voyages à vélo, construction de vélos retro-directs</li>
+					<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
-				<li>Magie : cartes, pièces, scène</li>
+					<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
-				<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
+					<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
-			</ul>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Études d’architecture</h2>
+				</summary>
+				<ul>
+					<li>Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014</li>
+					<li>Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)</li>
+				</ul>
+			</details>
+			<details>
+				<summary>
+					<h2>Centres d'intérêts</h2>
+				</summary>
+				<ul>
+					<li>Vélo : longs voyages à vélo, construction de vélos retro-directs</li>
+					<li>Magie : cartes, pièces, scène</li>
+					<li>Autonomie : recherche des moyens de vivre avec le minimum d'affaires</li>
+				</ul>
+			</details>
 		</section>
 		<!--
 			END CV INFOS

styles/elements/cv.css

@@ -1,2 +1,33 @@
+
 #cv_infos {
+	margin: 10px 10px 30px 10px;
+}
+#cv_infos h1,
+#cv_infos h2,
+#cv_infos h3,
+#cv_infos h4,
+#cv_infos h5,
+#cv_infos h6 {
+	/*
+	place-self: center;
+	margin-left: var(--list-padding);
+	*/
+}
+#cv_infos details {
+	margin: 10px 0px;
+}
+#cv_infos summary {
+	/*
+	*/
+	margin-left: var(--list-padding);
+}
+#cv_infos summary + * {
+	margin-top: 10px;
+}
+
+details summary {
+	/*
+	list-style-type: none;
+	*/
+	list-style-position: outside;
 }

styles/elements/mouses.css

@@ -1,7 +1,7 @@
 
 .mouse {
 	position: relative;
-	margin: 20px 0px 0px 0px;
+	margin: 0px;
 }
 .frames_container {
 	display: grid;

styles/elements/test.css

@@ -0,0 +1,24 @@
+
+#test::after {
+	content: "              \a                 \a                \a              \a     \a         \a          \a          \a      \a         \a         \a    \a         \a        \a   \a       ";
+	white-space: pre-wrap;
+/*
+
+              
+                
+               
+             
+    
+        
+         
+         
+     
+        
+        
+   
+        
+       
+  
+      
+*/
+}

styles/elements/title.css

@@ -1,2 +1,8 @@
-#role_title {	
+
+#role_title #name {	
+	margin:30px 0px 40px 0px;
 }
+#role_title #title {	
+	margin:30px 0px 40px 0px;
+}
+

styles/reset.css

@@ -1,3 +1,29 @@
 body * {
 	margin: 0px;
 }
+input, button, textarea, select {
+	/* Remove built-in form typography styles */
+  font: inherit;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+}
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+li, p, h1, h2, h3, h4, h5, h6 {
+	/* Avoid text overflows
+  overflow-wrap: break-word;
+	*/
+  overflow-wrap: anywhere;
+}
+
+/* style details elements */
+details summary { 
+	cursor: pointer;
+}
+details summary > * {
+	/* allow to put h1 or anything inside the summary without breaking the line */
+	display: inline;
+}

styles/style.css

@@ -5,6 +5,7 @@ html {
 	--small-space: 10px;
 	--medium-space: calc(var(--small-space) * 3);
 	--big-space: calc(var(--small-space) * 10);
+	--list-padding: 40px;
 }
 body {
 	overflow-x: hidden;
@@ -44,16 +45,16 @@ body {
 	display: grid;
 	grid:
     ' title    ' auto
+    ' banner_1 ' auto
+    ' mouse_1  ' auto
     ' banner_2 ' auto
     ' cv       ' auto
-    ' mouse_1  ' auto
     ' banner_3 ' auto
-    ' mouse_2  ' auto
     ' banner_4 ' auto
+    ' mouse_2  ' auto
     ' mouse_3  ' auto
     ' banner_5 ' auto
     ' mouse_4  ' auto
-    ' banner_1 ' auto
     ' infos    ' auto
 	  / 1fr      ;
 }

styles/text.css

@@ -19,6 +19,7 @@ ul {
 	*/
 	display: block;
 	list-style-type: "• ";
+	padding-left: var(--list-padding);
 }
 li {
 	display: list-item;
@@ -29,9 +30,12 @@ li::marker {
 a::after {
 	content: attr(href);
 }
-h1 {
+h1 { margin: 30px 0px; font-size: 2.25rem; }
-	margin: 30px 0px;
+h2 { margin: 30px 0px; font-size: 2.0rem; }
-}
+h3 { margin: 20px 0px; font-size: 1.75rem; }
+h4 { margin: 20px 0px; font-size: 1.5rem; }
+h5 { margin: 10px 0px; font-size: 1.25rem; }
+h6 { margin: 10px 0px; font-size: 1.0rem; }
 pre {
 	line-height: 0.8;
 	font-size: min(2.2vw, 1.0rem);

temp.txt

@@ -309,3 +309,17 @@
 •   • ••••• •      •• • •   • •••••   •   •••••   •    • •  •   •   •   ••••• 
 
 
+
+                              
+                                                         
+                                         
+                                                          
+                                  
+
+                                   
+                                                      
+                                                
+                                                       
+                                           
+
+