diff --git a/README.md b/README.md new file mode 100644 index 0000000..219e702 --- /dev/null +++ b/README.md @@ -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 | | + + .---- + + 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 + + .---- + + 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. . . . . . + . . . . . . . . + . . . . . . . . + . . . . . . . . + . . . . . . . . . . . . . . . . . + . . + . . . . . . . . . . . . . . . . . . . + + diff --git a/index.html b/index.html index 649cb91..07398f0 100644 --- a/index.html +++ b/index.html @@ -42,130 +42,45 @@ - - -
-

+33 (0)7 67 04 11 14

-

www.hugulumu.fr

-

hugogogo@protonmail.com

-
-
-

+33 (0)7 67 04 11 14

-

www.hugulumu.fr

-

hugogogo@protonmail.com

+
+

+33 (0)7 67 04 11 14

+

www.hugulumu.fr

+

hugogogo@protonmail.com

-

Informatique

- -
    -
  • SIMPLON, développeur full-stack JavaScript, 2018
    • -
  • École 42, Paris, 2021-2022, tronc commun - niveau 10
    • -
  • Full-stack, reprise d’un site d’artistes en php, https://www.bloc-house.org, 2021
    • -
  • Site vitrine, association Kosmopolit, https://kosmopolit.bitbucket.io, 2021
    • -
  • Backend, plugin WordPress avec API Google Maps, https://2022.lejourdesprofs.org/#programme, 2022
    • -
- - -

Outils informatiques

- -
    -
  • C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript
    • -
  • Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm
    • -
  • Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)
    • -
- - -

Études d’architecture

- -
    -
  • Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014
    • -
  • Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)
    • -
- - -

Bénévolat

- -
    -
  • Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016
    • -
  • Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023
    • -
  • Distribution de nourriture (Migrants-Wilson & Secours Populaire)
    • -
- - -

Centres d'intérêts

- -
    -
  • Vélo : longs voyages à vélo, construction de vélos retro-directs
    • -
  • Magie : cartes, pièces, scène
    • -
  • Autonomie : recherche des moyens de vivre avec le minimum d'affaires
    • -
+
+

Informatique

+ +

Bénévolat

+
    +
  • Cogestion des bénévoles d'un camp de réfugiés, UTOPIA 56, Grande-Synthe, France, 2016
    • +
  • Formateur contraception testiculaire, ZEROMILLIONS, Paris, France, 2021-2023
    • +
  • Distribution de nourriture (Migrants-Wilson & Secours Populaire)
    • +
+

Outils informatiques

+
    +
  • C, HTML, CSS, C++, JavaScript, script bash, PHP, Svelte, TypeScript
    • +
  • Git, Docker, Nginx, MariaDB, Node.js, Nest.js, WebSocket, Express, npm
    • +
  • Emails, sending emails, receiving emails, deleting emails ("the it crowd", Jane Barber s01e01)
    • +
+

Études d’architecture

+
    +
  • Master 1, ENSAPM, ESA, ENSAV, île-de-france, France, 2008-2014
    • +
  • Stages : PERSPECTIVA (Houston, Texas, 2009), AS (Paris, 2012), JC QUINTON (Paris 2014)
    • +
+

Centres d'intérêts

+
    +
  • Vélo : longs voyages à vélo, construction de vélos retro-directs
    • +
  • Magie : cartes, pièces, scène
    • +
  • Autonomie : recherche des moyens de vivre avec le minimum d'affaires
    • +
+
diff --git a/styles/global.css b/styles/global.css index 1ac86ad..d0eb4d1 100644 --- a/styles/global.css +++ b/styles/global.css @@ -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 {