From 4f5cd77c810380beb9267b0c8fdbd2ff8fbfe3f2 Mon Sep 17 00:00:00 2001 From: asus Date: Wed, 15 May 2024 19:28:57 +0200 Subject: [PATCH] - removed nav - moved cv to the hero section - also changed it to collapse all at once instead of by sub titles - and changed grid to auto flow instead of using named areas --- index.html | 116 ++++++++++++++--------------------- styles/elements/cv.css | 66 ++++++++++---------- styles/elements/hero.css | 17 ++--- styles/elements/sections.css | 55 ++++++++--------- styles/style.css | 2 +- styles/text.css | 14 +---- 6 files changed, 106 insertions(+), 164 deletions(-) diff --git a/index.html b/index.html index af5ed82..629d945 100644 --- a/index.html +++ b/index.html @@ -33,14 +33,6 @@ --> -
- - @@ -48,7 +40,7 @@ -
+

+
+ +

voir le CV

+

cacher le CV

+ +

télécharger en pdf

+

Outils informatiques

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

Projets informatique

+
    +
  • Full-stack, reprise d’un site d’artistes en php, , 2021
    • +
  • Backend, plugin WordPress avec API Google Maps, , 2022
    • +
  • Site vitrine, association Kosmopolit, , 2021
    • +
+

Formations informatique

+
    +
  • École 42, Paris, 2021-2022, tronc commun - niveau 10 (C, C++, système, algorithime, réseaux)
    • +
  • SIMPLON, développeur full-stack JavaScript, 2018 (Javascript, Node.js, React.js, HTML, CSS)
    • +
+

Bénévolat

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

É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
    • +
+
+
- +
@@ -138,7 +172,6 @@
@@ -154,71 +187,13 @@
-

version pdf

-
- -

Outils informatiques

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

Projets informatique

- -
    -
  • Full-stack, reprise d’un site d’artistes en php, , 2021
    • -
  • Backend, plugin WordPress avec API Google Maps, , 2022
    • -
  • Site vitrine, association Kosmopolit, , 2021
    • -
-
-
- -

Formations informatique

- -
    -
  • École 42, Paris, 2021-2022, tronc commun - niveau 10 (C, C++, système, algorithime, réseaux)
    • -
  • SIMPLON, développeur full-stack JavaScript, 2018 (Javascript, Node.js, React.js, HTML, CSS)
    • -
-
-
- -

Bénévolat

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

É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
    • -
-
+ --> @@ -242,6 +217,5 @@ -
diff --git a/styles/elements/cv.css b/styles/elements/cv.css index 2d19c99..8bd7718 100644 --- a/styles/elements/cv.css +++ b/styles/elements/cv.css @@ -1,38 +1,34 @@ - -#cv { - /* - place-items: center; - place-self: stretch; - */ - grid-template-columns: 1fr minmax(auto, 900px) 1fr; -} -#cv header { - height: 300px; -} -#cv article { - /* +.cv { + width: auto; max-width: 900px; - */ } -#cv article h2 { - text-align: center; -} -#cv #cv_ascii { - /* - place-self: center; - */ -} -#cv #cv_download { - /* - place-self: center; - */ -} -#cv details { - margin: 0px 0px 0px 25px; -} -#cv summary { - padding: 10px 0px; -} -#cv .mouse { - margin-top: 100px; + +details.cv { + display: flex; + summary { + position: relative; + list-style-position: outside; + list-style-type: "▸ "; + font-size: 1.8rem; + margin: auto; + width: fit-content; + .open { + display: none; + } + .close { + display: inline; + } + } + &[open] summary { + list-style-type: "▾ "; + .open { + display: inline; + } + .close { + display: none; + } + } + > *:last-child { + margin-bottom: 100px; + } } diff --git a/styles/elements/hero.css b/styles/elements/hero.css index 1d0ba65..2ba558b 100644 --- a/styles/elements/hero.css +++ b/styles/elements/hero.css @@ -1,16 +1,7 @@ - #hero { - grid-template-rows: 1fr auto auto; min-height: 100vh; -/* - grid-template-rows: 1fr 50px auto auto; -*/ + grid-template-rows: auto auto 1fr; + header { + padding-top: 50px; + } } -#hero header { - padding-top: 50px; -} -#hero .mouse { -} -#hero .banner { -} - diff --git a/styles/elements/sections.css b/styles/elements/sections.css index ea95c05..de713a3 100644 --- a/styles/elements/sections.css +++ b/styles/elements/sections.css @@ -1,41 +1,34 @@ - -section header { grid-area: header; } -section article { grid-area: article; } -section .mouse { grid-area: mouse; } -section .banner { grid-area: banner; } - section { display: grid; margin: 0px; width: 100vw; - grid: - ' . header . ' auto - ' . article . ' auto - ' . mouse . ' auto - ' banner banner banner ' auto - / 1fr auto 1fr ; + grid: 1fr auto 1fr / auto; grid-gap: 10px; gap: 10px; min-height: 100vh; -} + justify-items: center; -section header { - display: flex; - flex-direction: column; - place-content: center; -} -section footer { - display: flex; - flex-direction: column; -} -section header h1 { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; -} + header { + display: flex; + flex-direction: column; + place-content: center; -section .banner { - overflow-x: hidden; -} + h1 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + } + > * { + grid-column: 2 / span 1; + } + > .full_width { + grid-column: 1 / span 3; + } + + .banner { + overflow-x: hidden; + } +} diff --git a/styles/style.css b/styles/style.css index 6bf9418..d02ef02 100644 --- a/styles/style.css +++ b/styles/style.css @@ -4,7 +4,7 @@ html { font-size: var(--base_font_size); } -body, main { +body { overflow-x: clip; margin: auto; width: fit-content; diff --git a/styles/text.css b/styles/text.css index e4ca716..51f4642 100644 --- a/styles/text.css +++ b/styles/text.css @@ -34,19 +34,7 @@ li { li::marker { font-size: 1.8rem; } -details summary { - /* - list-style-position: inside; - */ - list-style-position: outside; -} -details summary { - font-size: 1.8rem; - list-style-type: "▸ "; -} -details[open] summary { - list-style-type: "▾ "; -} + a:empty::after { content: attr(href); }