perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added details

Browse Source
This commit is contained in:
asus
2023-11-19 15:54:04 +01:00
parent 41ba9a3e52
commit f80c7608b2
9 changed files with 187 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
index.html
View File

@@ -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">
<h1>Informatique</h1>
<ul>
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
<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>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
</ul>
<h1>Bénévolat</h1>
<ul>
<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
</ul>
<h1>Outils informatiques</h1>
<ul>
<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
</ul>
<h1>Études d’architecture</h1>
<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>
<h1>Centres d'intérêts</h1>
<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>
<section id="cv_infos" data-flex="vertical left">
<details>
<summary>
<h2>Informatique</h2>
</summary>
<ul>
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
<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>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
</ul>
</details>
<details>
<summary>
<h2>Bénévolat</h2>
</summary>
<ul>
<li>Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016</li>
<li>Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023</li>
<li>Distribution de nourriture (Migrants-Wilson & Secours Populaire)</li>
</ul>
</details>
<details>
<summary>
<h2>Outils informatiques</h2>
</summary>
<ul>
<li>C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript</li>
<li>Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm</li>
<li>Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)</li>
</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

31
styles/elements/cv.css
View File

@@ -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;
}

2
styles/elements/mouses.css
View File

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

24
styles/elements/test.css Normal file
View File

@@ -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;
/*
 
  
  
 

 
 
 
 
   
   
 
    
   
 
*/
}

8
styles/elements/title.css
View File

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

26
styles/reset.css
View File

@@ -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;
}

7
styles/style.css
View File

@@ -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 ;
}

10
styles/text.css
View File

@@ -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 {
margin: 30px 0px;
}
h1 { margin: 30px 0px; font-size: 2.25rem; }
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);

14
temp.txt
View File

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