- added readme
- added functionnal css for flexbox positionning - changed cv infos order according to real cv
This commit is contained in:
asus
189
README.md
Normal file
189
README.md
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
direction | width | child | child | child
|
||||
| | position | main axis | second axis
|
||||
................................................................
|
||||
horizontal | content | left |-pack |-fit
|
||||
vertical |-parent | right | grow | stretch
|
||||
| | top | space |
|
||||
| | bottom | spread |
|
||||
| |-center | |
|
||||
|
||||
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
||||
|
||||
position :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left-top . . top . . right-top . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left . .-center . . right . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left-bottom . . bottom . . right-bottom. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
width :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . .
|
||||
. . . . . . . . . . . . .
|
||||
. . . . . . . . parent . .
|
||||
. . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . .
|
||||
. . . . . . . . . . . . .
|
||||
. . . . . . . . . content .
|
||||
. . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
main axis :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . space . . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . spread. . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .-pack . . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . grow . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
second axis :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . .
|
||||
. .-fit . . . . . .stretch. . . .
|
||||
. . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
|
||||
|
||||
|
||||
----------------------------------------------------------------
|
||||
|
||||
**v2 :**
|
||||
|
||||
|
||||
direction | width | child | child | child
|
||||
| | position | main axis | second axis
|
||||
................................................................
|
||||
horizontal | fit | left |-pack | begin
|
||||
vertical | large | right | grow | end
|
||||
| | top | space |-middle
|
||||
| | bottom | spread | equal
|
||||
| |-center | | stretch
|
||||
|
||||
.<direction>-<width>-<position-[position]>-<main-axis>-<second-axis>
|
||||
|
||||
position :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left-top . . top . . right-top . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left . .-center . . right . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . left-bottom . . bottom . . right-bottom. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
main axis :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . space . . . . . . justify-content
|
||||
. . . . . . . . . . . . . . . . . : space-around
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . spread. . . . . . justify-content
|
||||
. . . . . . . . . . . . . . . . . : space-between
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .-pack . . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . grow . . . . . . child :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . grow: 1;
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
|
||||
second axis :
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . begin . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . .
|
||||
. .-middle. . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . equal . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . .
|
||||
. . end . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . .
|
||||
. . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . .
|
||||
. .stretch. . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . .
|
||||
|
||||
|
||||
159
index.html
159
index.html
@@ -42,130 +42,45 @@
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<style>
|
||||
/*
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . top-large . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . left-top . . . . top . . top-right . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . left . . . . center . . right . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .left-large . . right-large. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . center-large . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . . . left-bottom . . . . bottom . . right-bottom . . . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. . bottom-large . .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
. .
|
||||
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
|
||||
*/
|
||||
|
||||
.test1 {
|
||||
flex-direction: column;
|
||||
}
|
||||
.test2 {
|
||||
flex-direction: row;
|
||||
}
|
||||
.test {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
/*
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
*/
|
||||
gap: 10px;
|
||||
}
|
||||
.test > * {
|
||||
/*
|
||||
*/
|
||||
margin: auto 0px;
|
||||
margin: 0px auto 0px 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.test > *:first-child {
|
||||
/*
|
||||
margin: 0px;
|
||||
margin: auto;
|
||||
*/
|
||||
border: 2px solid blue;
|
||||
}
|
||||
.test > *:last-child {
|
||||
/*
|
||||
margin: auto;
|
||||
margin: 0px;
|
||||
*/
|
||||
border: 2px solid red;
|
||||
}
|
||||
</style>
|
||||
<section style="height: 200px;" class="test test1">
|
||||
<p style="background-color:lightblue;">+33 (0)7 67 04 11 14</p>
|
||||
<p style="background-color:orange;">www.hugulumu.fr</p>
|
||||
<p style="background-color:lightgreen;">hugogogo@protonmail.com</p>
|
||||
</section>
|
||||
<section style="height: 200px;" class="test test2">
|
||||
<p style="background-color:lightblue;">+33 (0)7 67 04 11 14</p>
|
||||
<p style="background-color:orange;">www.hugulumu.fr</p>
|
||||
<p style="background-color:lightgreen;">hugogogo@protonmail.com</p>
|
||||
<section class="vertical-left">
|
||||
<p>+33 (0)7 67 04 11 14</p>
|
||||
<p>www.hugulumu.fr</p>
|
||||
<p>hugogogo@protonmail.com</p>
|
||||
</section>
|
||||
|
||||
<h1>Informatique</h1>
|
||||
|
||||
<ul>
|
||||
<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
|
||||
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
|
||||
<li>Full-stack, reprise d’un site d’artistes en php, https://www.bloc-house.org, 2021</li>
|
||||
<li>Site vitrine, association Kosmopolit, https://kosmopolit.bitbucket.io, 2021</li>
|
||||
<li>Backend, plugin WordPress avec API Google Maps, https://2022.lejourdesprofs.org/#programme, 2022</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>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>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 class="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">https://2022.lejourdesprofs.org/#programme</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">https://www.bloc-house.org</a>, 2021</li>
|
||||
<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer">https://kosmopolit.bitbucket.io</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>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,32 +5,47 @@
|
||||
}
|
||||
|
||||
|
||||
[class*="child-"] {
|
||||
display: flex;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
[class*="child-"] > *, [class*="child-"][class*="-center"] > * {
|
||||
margin: auto;
|
||||
}
|
||||
[class*="child-"][class*="-left"] > * {
|
||||
margin-left: 0px;
|
||||
}
|
||||
[class*="child-"][class*="-right"] > * {
|
||||
margin-right: 0px;
|
||||
}
|
||||
[class*="child-"][class*="-top"] > * {
|
||||
margin-top: 0px;
|
||||
}
|
||||
[class*="child-"][class*="-bottom"] > * {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[class*="child-"][class*="-compact"] > * {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[class*="child-"][class*="-large"] > * {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
/*
|
||||
|
||||
[-] horizontal [/] content [/] left [/]-pack [ ]-fit
|
||||
[-] vertical [/]-parent [/] right [/] grow [ ] stretch
|
||||
[/] top [/] space
|
||||
[/] bottom [/] spread
|
||||
[/]-center
|
||||
*/
|
||||
|
||||
[class*="child-"] { border: 1px solid blue; }
|
||||
|
||||
[class*="horizontal"], [class*="vertical"] { display: flex; justify-content: center; align-items: center; width: auto; }
|
||||
[class*="horizontal"] { flex-direction: row; }
|
||||
[class*="vertical"] { flex-direction: column; }
|
||||
[class*="horizontal"] > *, [class*="vertical"] > * { margin: 0px; flex-grow: 0; }
|
||||
|
||||
[class*="-parent"] { width: auto; }
|
||||
[class*="-content"] { width: fit-content; }
|
||||
|
||||
[class*="horizontal"][class*="-left"] { justify-content: flex-start; }
|
||||
[class*="horizontal"][class*="-center"] { }
|
||||
[class*="horizontal"][class*="-right"] { justify-content: flex-end; }
|
||||
[class*="horizontal"][class*="-top"] { align-items: flex-start; }
|
||||
[class*="horizontal"][class*="-bottom"] { align-items: flex-end; }
|
||||
[class*="vertical"][class*="-left"] { align-items: flex-start; }
|
||||
[class*="vertical"][class*="-center"] { align-items: center; }
|
||||
[class*="vertical"][class*="-right"] { align-items: flex-end; }
|
||||
[class*="vertical"][class*="-top"] { justify-content: flex-start; }
|
||||
[class*="vertical"][class*="-bottom"] { justify-content: flex-end; }
|
||||
|
||||
[class*="horizontal"][class*="-pack"] > * { flex-grow: 0; }
|
||||
[class*="horizontal"][class*="-space"] { justify-content: space-around; }
|
||||
[class*="horizontal"][class*="-spread"] { justify-content: space-between; }
|
||||
[class*="horizontal"][class*="-grow"] > * { flex-grow: 1; }
|
||||
[class*="vertical"][class*="-pack"] > * { flex-grow: 0; }
|
||||
[class*="vertical"][class*="-space"] { justify-content: space-around; }
|
||||
[class*="vertical"][class*="-spread"] { justify-content: space-between; }
|
||||
[class*="vertical"][class*="-grow"] > * { flex-grow: 1; }
|
||||
|
||||
[class*="horizontal"][class*="-fit"], [class*="vertical"][class*="-fit"] { }
|
||||
[class*="horizontal"][class*="-stretch"], [class*="vertical"][class*="-stretch"] { align-items: stretch; }
|
||||
|
||||
|
||||
.horizontal {
|
||||
|
||||
Reference in New Issue
Block a user