From c21df458571c591d4355863d401ba7b9dff3b742 Mon Sep 17 00:00:00 2001 From: asus Date: Sun, 3 Dec 2023 15:33:39 +0100 Subject: [PATCH] starting new design by section with home taking all screen height --- index.html | 676 ++++++++++++++--------------------- styles/elements/home.css | 3 + styles/elements/projects.css | 5 + styles/elements/sections.css | 33 ++ styles/elements/title.css | 4 +- styles/style.css | 45 --- styles/text.css | 5 +- 7 files changed, 315 insertions(+), 456 deletions(-) create mode 100644 styles/elements/home.css create mode 100644 styles/elements/sections.css diff --git a/index.html b/index.html index dffbb6d..bd9a8a3 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,11 @@ + + + - -
-

+
+ +
+

-

-

+

+

-

-
- +

+ +
+
- - - - - - - - -
-

- -

-

projets réalisés

-
-
-

extension worpress :

extension wordpress affichant les articles du site sur une carte, et permettant d'affiner la selection avec des critères

-
    -
  • lien du site :
    • -
  • lien du code :
    • -
  • technologies : wordpress backend, php, javascript, html, css, google maps javascript API, google maps geocoding API, google maps markerclusterer
    • -
-
- -
-
- - - - - - - - - - -
-

- -

-

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
    • -
-
-
- - - - - - - - - - -
-

hugogogo@protonmail.com

-
- - - - - - - - - - - - - + + + +
@@ -329,12 +200,45 @@ - - - + + + + @@ -417,10 +337,178 @@ + + + +
+ +
+

+ +

+
+ +
+

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
    • +
+
+
+ +
+ + +
+ +
+ + + + + + + + + - - - - - - - - +
+

hugogogo@protonmail.com

+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/styles/elements/home.css b/styles/elements/home.css new file mode 100644 index 0000000..68f610d --- /dev/null +++ b/styles/elements/home.css @@ -0,0 +1,3 @@ +.home { + height: 100vh; +} diff --git a/styles/elements/projects.css b/styles/elements/projects.css index e07b4b8..a9599ad 100644 --- a/styles/elements/projects.css +++ b/styles/elements/projects.css @@ -2,8 +2,13 @@ #projects .project_description { padding: 20px 0px; } +#projects article h2 { + text-align: center; +} #projects .project { max-width: 900px; + display: flex; + flex-direction: column; } #projects #ljdp iframe { height: 550px; diff --git a/styles/elements/sections.css b/styles/elements/sections.css new file mode 100644 index 0000000..02e2e2a --- /dev/null +++ b/styles/elements/sections.css @@ -0,0 +1,33 @@ + +section header { grid-area: header; } +section article { grid-area: article; } +section footer { grid-area: footer; } + +section { + display: grid; + margin: 0px; + width: 100vw; + grid: + ' . header . ' 1fr + ' . article . ' auto + ' footer footer footer ' auto + / 1fr auto 1fr ; + grid-gap: 10px; +} + +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; +} + diff --git a/styles/elements/title.css b/styles/elements/title.css index 7e8a0c9..07b3ccf 100644 --- a/styles/elements/title.css +++ b/styles/elements/title.css @@ -1,9 +1,9 @@ #name { - margin:30px 0px 40px 0px; + margin:30px 0px 20px 0px; } #title { - margin:30px 0px 20px 0px; + margin:20px 0px 20px 0px; } .title { gap:10px 30px; diff --git a/styles/style.css b/styles/style.css index 7e82d3a..30de4be 100644 --- a/styles/style.css +++ b/styles/style.css @@ -16,49 +16,4 @@ script, style { pre { margin: 10px 0px; } -.section { - justify-self: center; - margin: 50px 20px; -} - - -/* - grid -*/ - -#infos { grid-area: infos; } -#title_area { grid-area: title; } -#cv { grid-area: cv; } -#projects { grid-area: projects;} -#mouse_1 { grid-area: mouse_1; } -#mouse_2 { grid-area: mouse_2; } -#mouse_3 { grid-area: mouse_3; } -#mouse_4 { grid-area: mouse_4; } -#banner_1 { grid-area: banner_1;} -#banner_2 { grid-area: banner_2;} -#banner_3 { grid-area: banner_3;} -#banner_4 { grid-area: banner_4; display: none;} -#banner_5 { grid-area: banner_5; display: none;} -#banner_6 { grid-area: banner_6; display: none;} -#banner_7 { grid-area: banner_7; display: none;} -#banner_8 { grid-area: banner_8; display: none;} - -main { - /* - */ - display: grid; - grid: - ' . title . ' auto - ' . mouse_1 . ' auto - ' banner_1 banner_1 banner_1 ' auto - ' . projects . ' auto - ' . mouse_2 . ' auto - ' banner_2 banner_2 banner_2 ' auto - ' . cv . ' auto - ' . mouse_4 . ' auto - ' banner_3 banner_3 banner_3 ' auto - ' . infos . ' auto - ' . mouse_3 . ' auto - / 1fr auto 1fr ; -} diff --git a/styles/text.css b/styles/text.css index 9bba349..a117218 100644 --- a/styles/text.css +++ b/styles/text.css @@ -57,10 +57,9 @@ 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 { - white-space: pre; -} .pre, pre { + display: flex; + white-space: pre; line-height: 0.8; font-size: min(2.1vw, 1.0rem); }