diff --git a/README.md b/README.md index 96e525e..c333345 100644 --- a/README.md +++ b/README.md @@ -1,232 +1,33 @@ - html validator : https://validator.w3.org/nu --- -start it with a server, like : `alive-server` -- https://www.npmjs.com/package/alive-server -- install : `npm install -g alive-server` +- start server with php, and nodemon for auto reload : + - `npm run dev` + +- setup : + - install apps : `sudo apt update && sudo apt install php-cli nodejs npm` + - verify : `php -v` & `node -v` & `npm -v` + - -> only for info, at project creation setup : + - run : `npm init -y && npm install --save-dev nodemon` + - add in package.jsons > scripts : `"dev": "nodemon --exec 'php -S localhost:8000' --ext php,html"` + - install dependencies : `npm ci` --- difficulties : - [accessibility with ascii art titles](https://stackoverflow.com/questions/77537096/make-text-in-ascii-art-more-accessible) - - I finally decided to go with a structure like this : - ```html -

- - -

- ``` + - I finally decided to go with a structure like this : + ```html +

+ + +

+ ``` - [links accessibility](https://webaim.org/techniques/hypertext/) - [accessibility gone wild](https://webaim.org/articles/gonewild/) - [don't use title attribute](https://stackoverflow.com/questions/11161915/simple-tooltip-title-attribute/11163133#11163133) - [I thought title text improved accessibility. I was wrong.](https://silktide.com/blog/i-thought-title-text-improved-accessibility-i-was-wrong/) - [Things I learned by pretending to be blind for a week](https://medium.com/silktide/things-i-learned-by-pretending-to-be-blind-for-a-week-bf7b09f33eb4) - [create the full screen hero section with the navbar under the title](https://stackoverflow.com/questions/77596781/in-css-how-to-make-a-sticky-navbar-after-the-header-in-an-hero-section/) - ---- - -projects : - -- [/] ljdp -- [ ] tchat transcendance - - setup docker without sudo on server - - remove authentification from project -- [ ] cube3d -- [ ] minishell - ---- - - 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.php b/index.php new file mode 100644 index 0000000..20f8f40 --- /dev/null +++ b/index.php @@ -0,0 +1,33 @@ + + + + + + + + hugulumu.fr + + + + + + + + + + + + + + + + + + diff --git a/alphabet.txt b/notes.md similarity index 50% rename from alphabet.txt rename to notes.md index f70c098..725f8ce 100644 --- a/alphabet.txt +++ b/notes.md @@ -1,11 +1,23 @@ +# projects + +- [/] ljdp +- [ ] tchat transcendance + - setup docker without sudo on server + - remove authentification from project +- [ ] cube3d +- [ ] minishell + +--- + +# dots ·•◦●∘⬤ -- 183 : · -- 8226 : • -- 8729 : ∙ -- 9679 : ● -- 9899 : ⚫ +- 183 : · +- 8226 : • +- 8729 : ∙ +- 9679 : ● +- 9899 : ⚫ - 11044 : ⬤ - 57352 @@ -28,327 +40,443 @@ - 57446 (0xe066) U+E066 "uniE066" -  - 57447 (0xe067) U+E067 "uniE067" -  +1229 \* (1638 + 410) -1229 * (1638 + 410) +--- +# dots texts - - - - - - - ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- - - -•••• •••• ••••• ••••• •••• ••• • • • • ••••• • • •••• -• • • • • • • • • • • •• •• •• •• • • • • • -•••• •••• • • • •• •••• ••••• • • • • • • •••• • • •••• -• • • • • • • • • • • • • • • • • • • • -• • • ••••• ••••• • • • • • • • • ••••• ••••• • • +``` +•••• •••• ••••• ••••• •••• ••• • • • • ••••• • • •••• +• • • • • • • • • • • •• •• •• •• • • • • • +•••• •••• • • • •• •••• ••••• • • • • • • •••• • • •••• +• • • • • • • • • • • • • • • • • • • • +• • • ••••• ••••• • • • • • • • • ••••• ••••• • • ••••• • • ••••• ••••• •••• • • ••• ••••• ••••• ••• • • ••••• - • •• • • • • • • •• •• • • • • • • • • • - • • • • •••• • • •••• • • • ••••• • • • • • • •••• - • • •• • • • • • • • • • • • • • • • • • + • •• • • • • • • •• •• • • • • • • • • • + • • • • •••• • • •••• • • • ••••• • • • • • • •••• + • • •• • • • • • • • • • • • • • • • • • ••••• • • • ••••• • • • • • • • ••••• ••• ••••• ••••• - -              -                    -                  -                    -                 +              +                    +                  +                    +                                -                    -                    -                     +                    +                    +                                     +``` ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- - - +``` •••• •••• ••••• ••••• •••• ••• • • • • ••••• • • •••• ••••• • • ••••• ••••• •••• • • ••• ••••• ••••• ••• • • ••••• -• • • • • • • • • • • •• •• •• •• • • • • • • •• • • • • • • •• •• • • • • • • • • • -•••• •••• • • • •• •••• ••••• • • • • • • •••• • • •••• • • • • •••• • • •••• • • • ••••• • • • • • • •••• -• • • • • • • • • • • • • • • • • • • • • • •• • • • • • • • • • • • • • • • • • +• • • • • • • • • • • •• •• •• •• • • • • • • •• • • • • • • •• •• • • • • • • • • • +•••• •••• • • • •• •••• ••••• • • • • • • •••• • • •••• • • • • •••• • • •••• • • • ••••• • • • • • • •••• +• • • • • • • • • • • • • • • • • • • • • • •• • • • • • • • • • • • • • • • • • • • • ••••• ••••• • • • • • • • • ••••• ••••• • • ••••• • • • ••••• • • • • • • • ••••• ••• ••••• •••••                              -                                       -                                     -                                        +                                       +                                     +                                                                         +``` ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- - - - • - •• ••••• ••••• - ••• • • • • •• - •••• • •••• • • • • - •• •• • • • • • • • • - •• •• • • • ••• ••••• - •• •• • •• • - •• •• • •• • - •• ••••••••• • • • +``` + • + •• ••••• ••••• + ••• • • • • •• + •••• • •••• • • • • + •• •• • • • • • • • • + •• •• • • • ••• ••••• + •• •• • •• • + •• •• • •• • + •• ••••••••• • • • •• •• • •••• ••••• • •• •• • • • • • • • •• •• • • • • •• • • •••• • •• •• •• • - ••• • ••••••• • • ••• - •• • • ••••• - •••••••• • • • + ••• • ••••••• • • ••• + •• • • ••••• + •••••••• • • • - -  -    -       -        -           -        -      -      -      +  +    +       +        +           +        +      +      +                                    -       -     -     +       +     +     +``` ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- - - • - • - •• • - • • ••••••• - • •• • • - ••••• • • • • +``` + • + • + •• • + • • ••••••• + • •• • • + ••••• • • • • • • • • • • • • • •• • - • • • • - • • •• - ••• • • - • ••••• • - • • -•• • + • • • • + • • •• + ••• • • + • ••••• • + • • +•• • -  -  -   -    -     -      +  +  +   +    +     +                 -     -    -    -    -   -  - - ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- +     +    +    +    +   +  +``` +``` •••• • • • • - • • • - • ••• - ••••• - • • - • • - • • - ••• ••• - • • • • - • • • • - •••• •••• - • • • • • -••• • • • - •••••••• - • + • • • + • ••• + ••••• + • • + • • + • • + ••• ••• + • • • • + • • • • + •••• •••• + • • • • • +••• • • • + •••••••• + •      -    -   -  -   -   -   -   -     -     -   -      -    -  -  +    +   +  +   +   +   +   +     +     +   +      +    +  +  +``` ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- - - - • - •• • - • • • - ••••••••• - • • •• - • • • +``` + • + •• • + • • • + ••••••••• + • • •• + • • • ••••• • • • • • •• • - • • -• • •• -• • • • - • •• • - ••• •••• + • • +• • •• +• • • • + • •• • + ••• •••• -  -   -    -  -    -    +  +   +    +  +    +            -   -   -    -    -   - - ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- +   +   +    +    +   +``` +``` • • • • ••••• ••••• • ••• • • • • -• • • • • • • • • • •• •• • • -••••• • • • •• • • • ••••• • • • • -• • • • • • • • • • • • • • -• • ••••• ••••• ••••• ••••• • • • • • +• • • • • • • • • • •• •• • • +••••• • • • •• • • • ••••• • • • • +• • • • • • • • • • • • • • +• • ••••• ••••• ••••• ••••• • • • • •             -              -             -              -           +              +             +              +           ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- +``` + +``` +•••• •••• ••••• ••••• ••••• ••••• ••••• ••••• +• • • • • • • • • • • +•••• •••• • • • •••• • • ••••• +• • • • • • • • • • +• • • ••••• •• ••••• ••••• • ••••• + + +        +           +         +          +         + +``` + +``` + ••• •••• ••••• •••• ••••• ••••• ••••• • • ••••• ••••• • • • • • +• • • • • • • • • • • • • • • • • •• •• +••••• •••• • • • •••• •••• • •• ••••• • • ••• • • • • +• • • • • • • • • • • • • • • • • • • • +• • •••• ••••• •••• ••••• • ••••• • • ••••• •• • • ••••• • • + +• • ••••• •••• ••• •••• ••••• ••••• • • • • • • • • • • ••••• +•• • • • • • • • • • • • • • • • • • • • • • • +• • • • • •••• • • •••• ••••• • • • • • • • • • • +• •• • • • • • • • • • • • • • • • • • • • • +• • ••••• • •• • • • ••••• • ••••• • • • • • • ••••• ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- +                 +                   +                 +                    +                 +                   +                       +                    +                      +                  -•••• •••• ••••• ••••• ••••• ••••• ••••• ••••• -• • • • • • • • • • • -•••• •••• • • • •••• • • ••••• -• • • • • • • • • • -• • • ••••• •• ••••• ••••• • ••••• +``` +--- -        -           -         -          -         +# CSS framework ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- ------------------------------------------------------------- +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/package-lock.json b/package-lock.json new file mode 100644 index 0000000..707101b --- /dev/null +++ b/package-lock.json @@ -0,0 +1,390 @@ +{ + "name": "website_hugulumu", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "website_hugulumu", + "version": "1.0.0", + "license": "ISC", + "devDependencies": { + "nodemon": "^3.1.14" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/balanced-match": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz", + "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/brace-expansion": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz", + "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==", + "dev": true, + "license": "ISC" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/minimatch": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz", + "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, + "node_modules/nodemon": { + "version": "3.1.14", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.14.tgz", + "integrity": "sha512-jakjZi93UtB3jHMWsXL68FXSAosbLfY0In5gtKq3niLSkrWznrVBzXFNOEMJUfc9+Ke7SHWoAZsiMkNP3vq6Jw==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^3.5.2", + "debug": "^4", + "ignore-by-default": "^1.0.1", + "minimatch": "^10.2.1", + "pstree.remy": "^1.1.8", + "semver": "^7.5.3", + "simple-update-notifier": "^2.0.0", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.5" + }, + "bin": { + "nodemon": "bin/nodemon.js" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nodemon" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pstree.remy": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", + "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==", + "dev": true, + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/semver": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz", + "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/simple-update-notifier": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz", + "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/touch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz", + "integrity": "sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==", + "dev": true, + "license": "ISC", + "bin": { + "nodetouch": "bin/nodetouch.js" + } + }, + "node_modules/undefsafe": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==", + "dev": true, + "license": "MIT" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..d308bbb --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "website_hugulumu", + "version": "1.0.0", + "description": "html validator : https://validator.w3.org/nu", + "main": "index.js", + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "dev": "nodemon --exec 'php -S localhost:8000' --ext php,html" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "nodemon": "^3.1.14" + } +} diff --git a/index.html b/src/body.php similarity index 85% rename from index.html rename to src/body.php index 0d3c0ba..c74af6d 100644 --- a/index.html +++ b/src/body.php @@ -1,84 +1,31 @@ - - - - - - - - hugulumu.fr - - - - - - - - - - - - - - - + + + + - - - - - - - - -
-
- -

+ +
+
+ +

-

- -

+

+ + +

-

+

-

- - Bonjour, je suis un développeur inventif, méthodique, et passionné - par l'informatique, et plus particulièrement le libre et l'open - source. J'aime explorer de nouvelles solutions techniques et - comprendre les systèmes en profondeur :-] - - - Hello, I am a creative, methodical developer with a passion for - computer science, particularly free and open-source software. I - enjoy exploring new technical solutions and gaining a deep - understanding of systems :-] - -

-
+

+ + Bonjour, je suis un développeur inventif, méthodique, et passionné par + l'informatique, et plus particulièrement le libre et l'open source. + J'aime explorer de nouvelles solutions techniques et comprendre les + systèmes en profondeur :-] + + + Hello, I am a creative, methodical developer with a passion for computer + science, particularly free and open-source software. I enjoy exploring + new technical solutions and gaining a deep understanding of systems :-] + +

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

+ + +
+
+ +

@@ -622,7 +570,7 @@

-
+

code-sources de tous les projets : source code for all projects : @@ -635,7 +583,7 @@ >

-

+

quelques exemples de projets réalisés : some examples of completed projects :

@@ -775,5 +723,3 @@
- - diff --git a/docs/banners/banner_0.svg b/src/docs/banners/banner_0.svg similarity index 100% rename from docs/banners/banner_0.svg rename to src/docs/banners/banner_0.svg diff --git a/docs/banners/banner_00.svg b/src/docs/banners/banner_00.svg similarity index 100% rename from docs/banners/banner_00.svg rename to src/docs/banners/banner_00.svg diff --git a/docs/banners/banner_1.svg b/src/docs/banners/banner_1.svg similarity index 100% rename from docs/banners/banner_1.svg rename to src/docs/banners/banner_1.svg diff --git a/docs/banners/banner_2.svg b/src/docs/banners/banner_2.svg similarity index 100% rename from docs/banners/banner_2.svg rename to src/docs/banners/banner_2.svg diff --git a/docs/banners/banner_3.svg b/src/docs/banners/banner_3.svg similarity index 100% rename from docs/banners/banner_3.svg rename to src/docs/banners/banner_3.svg diff --git a/docs/banners/banner_4.svg b/src/docs/banners/banner_4.svg similarity index 100% rename from docs/banners/banner_4.svg rename to src/docs/banners/banner_4.svg diff --git a/docs/banners/banner_5.svg b/src/docs/banners/banner_5.svg similarity index 100% rename from docs/banners/banner_5.svg rename to src/docs/banners/banner_5.svg diff --git a/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer.pdf b/src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer.pdf similarity index 100% rename from docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer.pdf rename to src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer.pdf diff --git a/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf b/src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf similarity index 100% rename from docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf rename to src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_EN.pdf diff --git a/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf b/src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf similarity index 100% rename from docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf rename to src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_Ats_FR.pdf diff --git a/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf b/src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf similarity index 100% rename from docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf rename to src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_EN.pdf diff --git a/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf b/src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf similarity index 100% rename from docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf rename to src/docs/cvs/CV_Hugo_Lamy_Backend_Embedded_Developer_FR.pdf diff --git a/docs/flags/fr.svg b/src/docs/flags/fr.svg similarity index 100% rename from docs/flags/fr.svg rename to src/docs/flags/fr.svg diff --git a/docs/flags/fr_bnw.svg b/src/docs/flags/fr_bnw.svg similarity index 100% rename from docs/flags/fr_bnw.svg rename to src/docs/flags/fr_bnw.svg diff --git a/docs/flags/gb.svg b/src/docs/flags/gb.svg similarity index 100% rename from docs/flags/gb.svg rename to src/docs/flags/gb.svg diff --git a/docs/flags/gb_bnw.svg b/src/docs/flags/gb_bnw.svg similarity index 100% rename from docs/flags/gb_bnw.svg rename to src/docs/flags/gb_bnw.svg diff --git a/docs/projects/cube3d_tour_with_map_square.gif b/src/docs/projects/cube3d_tour_with_map_square.gif similarity index 100% rename from docs/projects/cube3d_tour_with_map_square.gif rename to src/docs/projects/cube3d_tour_with_map_square.gif diff --git a/docs/projects/fdf_pyramide_loop_square_2_light.gif b/src/docs/projects/fdf_pyramide_loop_square_2_light.gif similarity index 100% rename from docs/projects/fdf_pyramide_loop_square_2_light.gif rename to src/docs/projects/fdf_pyramide_loop_square_2_light.gif diff --git a/docs/projects/kosmopolit_square.gif b/src/docs/projects/kosmopolit_square.gif similarity index 100% rename from docs/projects/kosmopolit_square.gif rename to src/docs/projects/kosmopolit_square.gif diff --git a/docs/projects/ljdp_map_clusters_square_light.gif b/src/docs/projects/ljdp_map_clusters_square_light.gif similarity index 100% rename from docs/projects/ljdp_map_clusters_square_light.gif rename to src/docs/projects/ljdp_map_clusters_square_light.gif diff --git a/src/modules/hero.html b/src/modules/hero.html new file mode 100644 index 0000000..6f8feba --- /dev/null +++ b/src/modules/hero.html @@ -0,0 +1,61 @@ +
+
+ +

+ + +

+ + +

+ +

+ +

+ + Bonjour, je suis un développeur inventif, méthodique, et passionné par + l'informatique, et plus particulièrement le libre et l'open source. + J'aime explorer de nouvelles solutions techniques et comprendre les + systèmes en profondeur :-] + + + Hello, I am a creative, methodical developer with a passion for computer + science, particularly free and open-source software. I enjoy exploring + new technical solutions and gaining a deep understanding of systems :-] + +

+
+ +
+ +
diff --git a/src/styles/banners.css b/src/styles/banners.css new file mode 100644 index 0000000..7444776 --- /dev/null +++ b/src/styles/banners.css @@ -0,0 +1,101 @@ +.banner { + width: 100%; + --base_banner_height: 24px; + --banner_height: var(--base_banner_height); /*default*/ + --base_dot_size: 4.2vw; + --dot_size: var(--base_dot_size); /*default*/ + height: min(var(--dot_size), var(--banner_height)); + + background-image: url(../docs/banners/banner_1.svg); /*default*/ + background-size: contain; + background-repeat: repeat; + background-position-x: 0%; + + animation-duration: 10s; /*default*/ + animation-name: slide_svg; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: normal; +} +@keyframes slide_svg { + from { + background-position-x: 0%; + } + to { + background-position-x: 100%; + } +} + +/* +* speeds +* +*/ +.banner_pause { + animation-play-state: paused; +} +.banner_reverse { + animation-direction: reverse; +} +.banner_speed_10 { + animation-duration: 10s; +} +.banner_speed_20 { + animation-duration: 20s; +} +.banner_speed_30 { + animation-duration: 30s; +} +.banner_speed_40 { + animation-duration: 40s; +} +.banner_speed_50 { + animation-duration: 50s; +} + +/* +* sizes +* +*/ +.banner_size_0 { + background-image: url(../docs/banners/banner_0.svg); + --banner_height: calc(var(--base_banner_height) * 1); + --dot_size: calc(var(--base_dot_size) * 1); +} +.banner_size_00 { + background-image: url(../docs/banners/banner_00.svg); + --banner_height: calc(var(--base_banner_height) * 1); + --dot_size: calc(var(--base_dot_size) * 1); +} +.banner_size_1 { + background-image: url(../docs/banners/banner_1.svg); + --banner_height: calc(var(--base_banner_height) * 1); + --dot_size: calc(var(--base_dot_size) * 1); +} +.banner_size_2 { + background-image: url(../docs/banners/banner_2.svg); + --banner_height: calc(var(--base_banner_height) * 2); + --dot_size: calc(var(--base_dot_size) * 2); +} +.banner_size_3 { + background-image: url(../docs/banners/banner_3.svg); + --banner_height: calc(var(--base_banner_height) * 3); + --dot_size: calc(var(--base_dot_size) * 3); +} +.banner_size_4 { + background-image: url(../docs/banners/banner_4.svg); + --banner_height: calc(var(--base_banner_height) * 4); + --dot_size: calc(var(--base_dot_size) * 4); +} +.banner_size_5 { + background-image: url(../docs/banners/banner_5.svg); + --banner_height: calc(var(--base_banner_height) * 5); + --dot_size: calc(var(--base_dot_size) * 5); +} + +/* specific banners */ +#top_banner { + position: absolute; + top: 0px; + left: 0px; + width: 100%; +} diff --git a/styles/elements/cv.css b/src/styles/elements/cv.css similarity index 100% rename from styles/elements/cv.css rename to src/styles/elements/cv.css diff --git a/src/styles/elements/hero.css b/src/styles/elements/hero.css new file mode 100644 index 0000000..a1a28d8 --- /dev/null +++ b/src/styles/elements/hero.css @@ -0,0 +1,48 @@ +#hero { + min-height: 100vh; + grid-template-columns: 1fr auto 1fr; + /* + * WIP : trying to find a solution to have both qualities : + * - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top) + * - the details element 'voir le cv' don't jump when we unroll it + * + grid-template-rows: 1fr auto 1fr; + grid-template-rows: auto auto 1fr; + */ + grid-template-rows: 50vh 1fr; + + .title { + /* + older safari doesn't not support flex gap + I could use a workaround : + https://stackoverflow.com/questions/65452057/flexbox-gap-workaround-for-safari + but it doesn't work with wrap + so instead I make them in columns and add a margin + + gap: 10px 30px; + */ + + display: flex; + flex-direction: column; + align-items: center; + + > *:first-child { + margin-bottom: 10px; + } + + &#name { + margin: 30px 0px 20px 0px; + } + + &#title { + margin: 20px 0px 20px 0px; + } + } + + .subtitle { + text-align: center; + display: inline-block; + max-width: 700px; + margin: 0px auto; + } +} diff --git a/styles/elements/infos.css b/src/styles/elements/infos.css similarity index 100% rename from styles/elements/infos.css rename to src/styles/elements/infos.css diff --git a/styles/elements/projects.css b/src/styles/elements/projects.css similarity index 100% rename from styles/elements/projects.css rename to src/styles/elements/projects.css diff --git a/styles/fonts/notomono/NotoMono-Dot.ttf b/src/styles/fonts/notomono/NotoMono-Dot.ttf similarity index 100% rename from styles/fonts/notomono/NotoMono-Dot.ttf rename to src/styles/fonts/notomono/NotoMono-Dot.ttf diff --git a/styles/fonts/notomono/NotoMono-Dot.woff b/src/styles/fonts/notomono/NotoMono-Dot.woff similarity index 100% rename from styles/fonts/notomono/NotoMono-Dot.woff rename to src/styles/fonts/notomono/NotoMono-Dot.woff diff --git a/styles/fonts/notomono/NotoMono.sfd b/src/styles/fonts/notomono/NotoMono.sfd similarity index 100% rename from styles/fonts/notomono/NotoMono.sfd rename to src/styles/fonts/notomono/NotoMono.sfd diff --git a/styles/fonts/notomono/dot_1.sla b/src/styles/fonts/notomono/dot_1.sla similarity index 100% rename from styles/fonts/notomono/dot_1.sla rename to src/styles/fonts/notomono/dot_1.sla diff --git a/styles/fonts/notomono/dot_1.svg b/src/styles/fonts/notomono/dot_1.svg similarity index 100% rename from styles/fonts/notomono/dot_1.svg rename to src/styles/fonts/notomono/dot_1.svg diff --git a/styles/fonts/notomono/dot_2.sla b/src/styles/fonts/notomono/dot_2.sla similarity index 100% rename from styles/fonts/notomono/dot_2.sla rename to src/styles/fonts/notomono/dot_2.sla diff --git a/styles/fonts/notomono/dot_2.svg b/src/styles/fonts/notomono/dot_2.svg similarity index 100% rename from styles/fonts/notomono/dot_2.svg rename to src/styles/fonts/notomono/dot_2.svg diff --git a/styles/fonts/notomono/dot_3.sla b/src/styles/fonts/notomono/dot_3.sla similarity index 100% rename from styles/fonts/notomono/dot_3.sla rename to src/styles/fonts/notomono/dot_3.sla diff --git a/styles/fonts/notomono/dot_3.svg b/src/styles/fonts/notomono/dot_3.svg similarity index 100% rename from styles/fonts/notomono/dot_3.svg rename to src/styles/fonts/notomono/dot_3.svg diff --git a/styles/fonts/notomono/dot_4.sla b/src/styles/fonts/notomono/dot_4.sla similarity index 100% rename from styles/fonts/notomono/dot_4.sla rename to src/styles/fonts/notomono/dot_4.sla diff --git a/styles/fonts/notomono/dot_4.svg b/src/styles/fonts/notomono/dot_4.svg similarity index 100% rename from styles/fonts/notomono/dot_4.svg rename to src/styles/fonts/notomono/dot_4.svg diff --git a/styles/fonts/notomono/dot_5.sla b/src/styles/fonts/notomono/dot_5.sla similarity index 100% rename from styles/fonts/notomono/dot_5.sla rename to src/styles/fonts/notomono/dot_5.sla diff --git a/styles/fonts/notomono/dot_5.svg b/src/styles/fonts/notomono/dot_5.svg similarity index 100% rename from styles/fonts/notomono/dot_5.svg rename to src/styles/fonts/notomono/dot_5.svg diff --git a/styles/fonts/notomono/dot_6.sla b/src/styles/fonts/notomono/dot_6.sla similarity index 100% rename from styles/fonts/notomono/dot_6.sla rename to src/styles/fonts/notomono/dot_6.sla diff --git a/styles/fonts/notomono/dot_6.svg b/src/styles/fonts/notomono/dot_6.svg similarity index 100% rename from styles/fonts/notomono/dot_6.svg rename to src/styles/fonts/notomono/dot_6.svg diff --git a/styles/fonts/notomono/dot_7.sla b/src/styles/fonts/notomono/dot_7.sla similarity index 100% rename from styles/fonts/notomono/dot_7.sla rename to src/styles/fonts/notomono/dot_7.sla diff --git a/styles/fonts/notomono/dot_7.svg b/src/styles/fonts/notomono/dot_7.svg similarity index 100% rename from styles/fonts/notomono/dot_7.svg rename to src/styles/fonts/notomono/dot_7.svg diff --git a/src/styles/global_style.css b/src/styles/global_style.css new file mode 100644 index 0000000..27e2a9a --- /dev/null +++ b/src/styles/global_style.css @@ -0,0 +1,248 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * * + * * + * * + * * + * * + * RESET CSS * + * * + * * + * * + * * + * * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +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; +} +script, +style { + display: none; +} + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * * + * * + * * + * * + * * + * GLOBAL CSS * + * * + * * + * * + * * + * * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +:root { + --base_font_size: 62.5%; +} +html { + font-size: var(--base_font_size); +} +body { + overflow-x: clip; + margin: auto; + width: fit-content; + background-color: #f6f6f6; +} + +/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */ +/* Animate scrolling only if users don’t prefer reduced motion */ +@media (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } + + /* Add some spacing between the target and the top of the viewport */ + :target { + scroll-margin-top: 0px; + } +} + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * * + * * + * * + * * + * * + * TEXT CSS * + * * + * * + * * + * * + * * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +@font-face { + font-family: "notomono"; + src: url("./fonts/notomono/NotoMono-Dot.woff") format("woff"); + font-weight: normal; + font-style: normal; +} +body, +pre { + font-family: "notomono", monospace; + font-size: 1.5rem; + font-weight: normal; + font-style: normal; +} +@media screen and (min-width: 500px) { + html { + font-size: calc(var(--base_font_size) * 1.2); + } +} +ul { + display: block; + list-style-type: "• "; + padding-left: 25px; + /* + list-style-position: inside; + */ + list-style-position: outside; +} +li { + display: list-item; +} +li::marker { + font-size: 1.8rem; +} + +a:empty::after { + content: attr(href); +} +h1 { + margin: 30px 0px; + font-size: 2.25rem; +} +h2 { + margin: 30px 0px; + font-size: 2rem; +} +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: 1rem; +} + +.pre, +pre { + display: flex; + white-space: pre; + line-height: 0.8; + font-size: min(2.1vw, 1rem); +} +.pre_small { + font-size: min(1.5vw, 0.7rem); +} + +a { + word-break: break-all; +} + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * * + * * + * * + * * + * * + * SECTIONS GLOBAL CSS * + * * + * * + * * + * * + * * + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +section { + display: grid; + margin: 0px; + width: 100vw; + grid-template-columns: auto auto auto; + grid-auto-rows: auto; + grid-gap: 10px; + gap: 10px; + min-height: 100vh; + justify-items: center; + text-align: center; + + > * { + grid-column: 2 / span 1; + } + + > .grid_full_width { + grid-column: 1 / span 3; + } + + header { + display: flex; + flex-direction: column; + place-content: center; + + h1 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + } + + article { + text-align: left; + } + + .banner { + overflow-x: hidden; + } +} diff --git a/styles/global.css b/src/styles/global_variables.css similarity index 100% rename from styles/global.css rename to src/styles/global_variables.css diff --git a/styles/elements/language.css b/src/styles/language.css similarity index 100% rename from styles/elements/language.css rename to src/styles/language.css diff --git a/styles/elements/mouses.css b/src/styles/mouses.css similarity index 100% rename from styles/elements/mouses.css rename to src/styles/mouses.css diff --git a/styles/elements/mouses/mouse_1.css b/src/styles/mouses/mouse_1.css similarity index 100% rename from styles/elements/mouses/mouse_1.css rename to src/styles/mouses/mouse_1.css diff --git a/styles/elements/mouses/mouse_2.css b/src/styles/mouses/mouse_2.css similarity index 100% rename from styles/elements/mouses/mouse_2.css rename to src/styles/mouses/mouse_2.css diff --git a/styles/elements/mouses/mouse_3.css b/src/styles/mouses/mouse_3.css similarity index 100% rename from styles/elements/mouses/mouse_3.css rename to src/styles/mouses/mouse_3.css diff --git a/styles/elements/mouses/mouse_4.css b/src/styles/mouses/mouse_4.css similarity index 100% rename from styles/elements/mouses/mouse_4.css rename to src/styles/mouses/mouse_4.css diff --git a/styles/elements/banners.css b/styles/elements/banners.css deleted file mode 100644 index 4092b07..0000000 --- a/styles/elements/banners.css +++ /dev/null @@ -1,102 +0,0 @@ -.banner { - width: 100%; - --base_banner_height: 24px; - --banner_height: var(--base_banner_height); /*default*/ - --base_dot_size: 4.2vw; - --dot_size: var(--base_dot_size); /*default*/ - height: min(var(--dot_size), var(--banner_height)); - - background-image: url(../../docs/banners/banner_1.svg); /*default*/ - background-size: contain; - background-repeat: repeat; - background-position-x: 0%; - - animation-duration: 10s; /*default*/ - animation-name: slide_svg; - animation-iteration-count: infinite; - animation-timing-function: linear; - animation-direction: normal; -} -@keyframes slide_svg { - from {background-position-x: 0%;} - to {background-position-x: 100%;} -} - - - -/* -* speeds -* -*/ -.banner_pause { - animation-play-state: paused; -} -.banner_reverse { - animation-direction: reverse; -} -.banner_speed_10 { - animation-duration: 10s; -} -.banner_speed_20 { - animation-duration: 20s; -} -.banner_speed_30 { - animation-duration: 30s; -} -.banner_speed_40 { - animation-duration: 40s; -} -.banner_speed_50 { - animation-duration: 50s; -} - - - -/* -* sizes -* -*/ -.banner_size_0 { - background-image: url(../../docs/banners/banner_0.svg); - --banner_height: calc(var(--base_banner_height) * 1); - --dot_size: calc(var(--base_dot_size) * 1); -} -.banner_size_00 { - background-image: url(../../docs/banners/banner_00.svg); - --banner_height: calc(var(--base_banner_height) * 1); - --dot_size: calc(var(--base_dot_size) * 1); -} -.banner_size_1 { - background-image: url(../../docs/banners/banner_1.svg); - --banner_height: calc(var(--base_banner_height) * 1); - --dot_size: calc(var(--base_dot_size) * 1); -} -.banner_size_2 { - background-image: url(../../docs/banners/banner_2.svg); - --banner_height: calc(var(--base_banner_height) * 2); - --dot_size: calc(var(--base_dot_size) * 2); -} -.banner_size_3 { - background-image: url(../../docs/banners/banner_3.svg); - --banner_height: calc(var(--base_banner_height) * 3); - --dot_size: calc(var(--base_dot_size) * 3); -} -.banner_size_4 { - background-image: url(../../docs/banners/banner_4.svg); - --banner_height: calc(var(--base_banner_height) * 4); - --dot_size: calc(var(--base_dot_size) * 4); -} -.banner_size_5 { - background-image: url(../../docs/banners/banner_5.svg); - --banner_height: calc(var(--base_banner_height) * 5); - --dot_size: calc(var(--base_dot_size) * 5); -} - - -/* specific banners */ -#top_banner { - position: absolute; - top: 0px; - left: 0px; - width: 100%; -} diff --git a/styles/elements/hero.css b/styles/elements/hero.css deleted file mode 100644 index 4f3e930..0000000 --- a/styles/elements/hero.css +++ /dev/null @@ -1,19 +0,0 @@ -#hero { - min-height: 100vh; - grid-template-columns: 1fr auto 1fr; - /* - * WIP : trying to find a solution to have both qualities : - * - elements are spread across the page vertically ('hugo lamy developpeur' is not compacted on top) - * - the details element 'voir le cv' don't jump when we unroll it - * - grid-template-rows: 1fr auto 1fr; - grid-template-rows: auto auto 1fr; - */ - grid-template-rows: 50vh 1fr; -} -#hero .subtitle { - text-align: center; - display: inline-block; - max-width: 700px; - margin: 0px auto; -} diff --git a/styles/elements/title.css b/styles/elements/title.css deleted file mode 100644 index 56b291b..0000000 --- a/styles/elements/title.css +++ /dev/null @@ -1,26 +0,0 @@ - -#name { - margin:30px 0px 20px 0px; -} -#title { - margin:20px 0px 20px 0px; -} -.title { -/* - older safari doesn't not support flex gap - I could use a workaround : - https://stackoverflow.com/questions/65452057/flexbox-gap-workaround-for-safari - but it doesn't work with wrap - so instead I make them in columns and add a margin - - gap: 10px 30px; -*/ - display: flex; - flex-direction: column; - align-items: center; -} - -.title > *:first-child { - margin-bottom: 10px; -} - diff --git a/styles/reset.css b/styles/reset.css deleted file mode 100644 index 4a46aa9..0000000 --- a/styles/reset.css +++ /dev/null @@ -1,29 +0,0 @@ -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; -} diff --git a/styles/sections.css b/styles/sections.css deleted file mode 100644 index afbd7cd..0000000 --- a/styles/sections.css +++ /dev/null @@ -1,38 +0,0 @@ -section { - display: grid; - margin: 0px; - width: 100vw; - grid-template-columns: auto auto auto; - grid-auto-rows: auto; - grid-gap: 10px; - gap: 10px; - min-height: 100vh; - justify-items: center; - text-align: center; -} -section header { - display: flex; - flex-direction: column; - place-content: center; -} -section header h1 { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; -} - -section article { - text-align: left; -} - -section > * { - grid-column: 2 / span 1; -} -section > .grid_full_width { - grid-column: 1 / span 3; -} - -section .banner { - overflow-x: hidden; -} diff --git a/styles/style.css b/styles/style.css deleted file mode 100644 index d02ef02..0000000 --- a/styles/style.css +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --base_font_size: 62.5%; -} -html { - font-size: var(--base_font_size); -} -body { - overflow-x: clip; - margin: auto; - width: fit-content; - background-color: #f6f6f6; -} -script, style { - display: none; -} -pre { - margin: 10px 0px; -} - -/* https://css-tricks.com/slow-movement/#h-you-can-implement-native-smooth-scrolling-in-css */ -/* Animate scrolling only if users don’t prefer reduced motion */ -@media (prefers-reduced-motion: no-preference) { - html { - scroll-behavior: smooth; - } - - /* Add some spacing between the target and the top of the viewport */ - :target { - scroll-margin-top: 0px; - } -} diff --git a/styles/text.css b/styles/text.css deleted file mode 100644 index adf6270..0000000 --- a/styles/text.css +++ /dev/null @@ -1,60 +0,0 @@ - -@font-face { - font-family: "notomono"; - src: - url("./fonts/notomono/NotoMono-Dot.woff") format("woff"); - font-weight: normal; - font-style: normal; -} -body, pre { - font-family: "notomono", monospace; - font-size: 1.5rem; - font-weight: normal; - font-style: normal; -} -/* -*/ -@media screen and (min-width: 500px) { - html { - font-size: calc(var(--base_font_size) * 1.2); - } -} -ul { - display: block; - list-style-type: "• "; - padding-left: 25px; - /* - list-style-position: inside; - */ - list-style-position: outside; -} -li { - display: list-item; -} -li::marker { - font-size: 1.8rem; -} - -a:empty::after { - content: attr(href); -} -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, pre { - display: flex; - white-space: pre; - line-height: 0.8; - font-size: min(2.1vw, 1.0rem); -} -.pre_small { - font-size: min(1.5vw, 0.7rem); -} - -a { - word-break: break-all; -}