Actualiser .woodpecker/maintenance.yaml

Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8.
- [Release notes](https://github.com/ai/nanoid/releases)
- [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ai/nanoid/compare/3.3.7...3.3.8)

---
updated-dependencies:
- dependency-name: nanoid
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015-ie"]
+  "presets": ["@babel/preset-env"]
 }

.gitignore

@@ -1,14 +1,24 @@
-# Files
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
-.ruby-version
-npm-debug.log
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
-# Folders
-
-.idea/
-.sass-cache
-_gh_pages
-_site
-node_modules
-.vscode/settings.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.eslintcache

.gitlab-ci.yml

@@ -0,0 +1,17 @@
+# Official framework image. Look for the different tagged releases at:
+# https://hub.docker.com/r/library/node/tags/
+image: node:latest
+
+# This folder is cached between builds
+# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
+cache:
+  paths:
+    - node_modules/
+
+test_async:
+  script:
+    - npm install
+
+test_db:
+  script:
+    - npm install

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: npm install && npm run build
+    command: npm run start
+
+

.reactgenerator

@@ -0,0 +1,18 @@
+{
+  "componentDestination": "./src/components/",
+  "styledComponentDestination": "./src/components/",
+  "tscomponentDestination": "./components/",
+  "viewDestination": "./src/view/",
+  "storeDestination": "./src/store/",
+  "pageDestination": "./pages/",
+  "tspageDestination": "./pages/",
+  "reduxDestination": "./src/",
+  "setupDestination": "./src/",
+  "reduxModuleDestination": "./src/store/",
+  "serviceModuleDestination": "./src/services/",
+  "servicesDestination": "./src/",
+  "configDestination": "./src/services/",
+  "requestDestination": "./src/services/config/",
+  "storageDestination": "./src/services/config/",
+  "templatePath": ""
+}

.travis.yml

@@ -1,10 +0,0 @@
-sudo: false
-language: node_js
-node_js:
-  - "11"
-before_script:
-  - npm install
-script: 
-  - npm test
-after_success:
-  - npm run report-coverage

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
+    // Pointez pour afficher la description des attributs existants.
+    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch localhost",
+            "type": "firefox",
+            "request": "launch",
+            "reAttach": true,
+            "url": "http://192.168.0.3:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

.woodpecker/maintenance.yaml

@@ -0,0 +1,19 @@
+when:
+  - event: cron
+    cron: update browserlist
+
+steps:
+  - name: update browserlist
+    image: node:20-slim
+    commands:
+      - npm ci
+      - npx update-browserslist-db@latest
+      - npm run test
+  - name: push commit
+    image: appleboy/drone-git-push
+    settings:
+        branch: master
+        remote: git@forge.adm.ink:adamas/curriculum.git
+        force: false
+        commit: true
+        commit_message: "dep: updatebrowserslist"

.woodpecker/workflow.yaml

@@ -0,0 +1,28 @@
+when:
+  - event: push
+    branch: master
+  - event: manual
+
+steps:
+  - name: test
+    image: node:20-slim
+    commands:
+      - npm ci
+      - npm run test
+      
+  - name: build
+    image: node:20-slim
+    commands:
+      - npm run build
+
+  - name: publish
+    image: woodpeckerci/plugin-docker-buildx:5.2.2
+    settings:
+      username: adamas
+      registry: https://forge.adm.ink
+      password:
+        from_secret: DOCKER_PASSWORD
+      repo: forge.adm.ink/adamas/curriculum
+      purge: true
+      compress: true
+      tags: ${CI_COMMIT_TAG}

CODEOWNERS

@@ -0,0 +1 @@
+* @AdamasFR

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:20-slim
+
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install --silent
+RUN npm install react-scripts@5.0.1 -g --silent
+
+# add app
+COPY . ./
+
+# start app
+CMD ["npm", "start"]

INSTRUCTIONS.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

README.md

@@ -1,10 +1,11 @@
-# Portfolio Anthony Dumas
+# anthony-dumas.fr
 
-Je met a disposition le code de mon portfolio pour review et également garder une trace de l'évolution de la qualité de mon code.
+Bonjour,
 
-La monture 2019 de mon site ce veux être simple. Je veux un site pratique a utiliser, a développer mais je veux également qu'il soit **accessible** par tous.
+Vous trouverez ci-joint le code source de mon portefolio en ligne.
 
-## Développement
+Je vous souhaite une excellente journée,
 
-- yarn start ou npm start
-> Watcher de fichier & serveur Browsersync
+**Anthony Yvon Dumas**
+
+Senior Engineer @ Sopra Steria

_javascript/main.js

@@ -1,16 +0,0 @@
-var $btnMail = $("#btn-mail");
-
-$btnMail.removeAttr("disabled");
-
-$btnMail.click(function (evt) {
-  evt.preventDefault();
-  Swal.fire({
-    title: 'Email',
-    html: "Vous pouvez m'envoyer un mail à <strong><a href='mailto:anthony@dumas.cc'>anthony@dumas.cc</a></strong> !",
-    imageUrl: './images/mail.jpg',
-    imageWidth: 400,
-    imageHeight: 200,
-    imageAlt: 'Custom image',
-    animation: false
-  })
-});

_sass/icon.scss

@@ -1,47 +0,0 @@
-@font-face {
-    font-family: "icomoon";
-    src: url("../font/fonts/icomoon.eot");
-    src: url("../font/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../font/fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../font/fonts/icomoon.svg#icomoon") format("svg");
-    font-weight: normal;
-    font-style: normal;
-}
-
-.icon .fab {
-    font-family: "icomoon";
-    content: attr(data-icon);
-    speak: none;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    -webkit-font-smoothing: antialiased;
-    font-style: normal;
-}
-
-.icon-github-alt:before {
-    content: "\e903";
-}
-
-.icon-linke-square:before {
-    content: "\e902";
-}
-
-.icon-envelope-open:before {
-    content: "\e901";
-}
-
-.icon-twit:before {
-    content: "\e904";
-}
-
-.icon-teleg:before {
-    content: "\e900";
-}
-
-.icon-file-pdf-o:before {
-    content: "\e905";
-}
-
-.icon-print:before {
-    content: "\e906";
-}

_sass/main.scss

@@ -1,119 +0,0 @@
-@charset "utf-8";
-
-// Customization
-
-// You can easily customize Bulma with your own variables.
-// Just uncomment the following block to see the result.
-
-/*
-// 1. Import the initial variables
-@import "../node_modules/bulma/sass/utilities/initial-variables";
-
-// 2. Set your own initial variables
-// Update the blue shade, used for links
-$blue: #06bcef;
-// Add pink and its invert
-$pink: #ff8080;
-$pink-invert: #fff;
-// Update the sans-serif font family
-$family-sans-serif: "Helvetica", "Arial", sans-serif;
-
-// 3. Set the derived variables
-// Use the new pink as the primary color
-$primary: $pink;
-$primary-invert: $pink-invert;
-
-// 4. Import the rest of Bulma
-*/
-
-/**
-    Thème
-**/
-$deep-koamaru:#2b4162;
-$myrtle-green:#326273;
-$cadet-blue:#5c9ead;
-$neon-carrot:#fa9f42;
-$white:#ffffff;
-
-/**
-    Variables Bulma
-**/
-$primary:$cadet-blue;
-$primary-invert:#fff;
-$info:$myrtle-green;
-$info-invert:#fff;
-$footer-color:$deep-koamaru;
-$link:$neon-carrot;
-$link-hover:"";
-
-html {
-    background-color: $primary;
-}
-
-@import "../node_modules/bulma/bulma";
-@import "icon";
-
-#idCard {
-
-    .hero-body {
-        padding-bottom: 2rem;
-        padding-top: 2rem;
-    }
-
-    // permet de re-aligner les tags avec les subtitles
-    .tags {
-        margin-top: -1.25rem;
-    }
-}
-
-// retire les barres de scroll des panneaux experience/education
-#experiences .media-content {
-    overflow: hidden;
-}
-
-footer {
-    background-color: $footer-color !important;
-    color: #fff;
-}
-
-footer strong {
-    color: #fff;
-}
-
-.media-content {
-    margin-top: -6px;
-}
-
-// Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem)
-div.hero-body {
-    margin-left: env(safe-area-inset-left);
-    margin-right: env(safe-area-inset-right);
-}
-
-section#contact .button {
-    min-width: 155px;
-}
-
-@media screen and (max-width: 768px) {
-    .button.is-fullw-mobile {
-        display: flex;
-        width: 100%;
-    }
-}
-
-.displayOnlyOnPrint {
-    display:none;
-}
-
-#buttonsUnderPhoto a {
-	padding-left: 16px;
-	padding-bottom:0;
-}
-
-#photosAndButtons .media-content p + p {
-	margin-top:-16px;
-}
-
-.tile p.title{
-font-size: 25px;
-}

css/print.css

@@ -1,9 +0,0 @@
-.dontPrint,
-a.button,
-p.buttons {
-    display: none;
-}
-
-.displayOnlyOnPrint {
-    display: inline-block;
-}

docker-compose.yml

@@ -0,0 +1,30 @@
+version: '2'
+services:
+  server:
+    image: forge.adm.ink/adamas/curriculum:latest
+    container_name: anthony-dumas.fr-server
+    networks:
+      - traefik_default
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.portfolio.rule=Host(`anthony-dumas.fr`)"
+      - "traefik.http.routers.portfolio.entrypoints=websecure"
+      - "traefik.http.routers.portfolio.tls.certresolver=myresolver"
+      - "traefik.http.services.portfolio.loadbalancer.server.port=3000"
+      - "traefik.http.middlewares.redirect-to-non-www.redirectregex.regex=^https?://www.anthony-dumas.fr/(.*)"
+      - "traefik.http.middlewares.redirect-to-non-www.redirectregex.replacement=https://anthony-dumas.fr/$${1}"
+      - "traefik.http.middlewares.redirect-to-non-www.redirectregex.permanent=true"
+      - "traefik.http.routers.portfolio.rule=Host(`anthony-dumas.fr`) || Host(`www.anthony-dumas.fr`)"
+      - "traefik.http.routers.portfolio.middlewares=redirect-to-non-www"
+
+  watchtower:
+    image: containrrr/watchtower
+    container_name: watchtower-anthony-dumas.fr
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    command: --interval 30 anthony-dumas.fr-server
+
+networks:
+  traefik_default:
+    external: true
+

font/Read Me.txt

@@ -1,7 +0,0 @@
-Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
-
-To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
-
-You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
-
-You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

font/fonts/icomoon.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe900;" glyph-name="telegram" d="M679.429 204l84 396c7.429 34.857-12.571 48.571-35.429 40l-493.714-190.286c-33.714-13.143-33.143-32-5.714-40.571l126.286-39.429 293.143 184.571c13.714 9.143 26.286 4 16-5.143l-237.143-214.286-9.143-130.286c13.143 0 18.857 5.714 25.714 12.571l61.714 59.429 128-94.286c23.429-13.143 40-6.286 46.286 21.714zM1024 438.857c0-282.857-229.143-512-512-512s-512 229.143-512 512 229.143 512 512 512 512-229.143 512-512z" />
-<glyph unicode="&#xe901;" glyph-name="envelope-open" d="M1024 577.143v-558.857c0-50.286-41.143-91.429-91.429-91.429h-841.143c-50.286 0-91.429 41.143-91.429 91.429v558.857c0 5.143 2.286 10.286 6.286 13.714 60 52.571 60.571 58.857 358.857 276.571 36 26.286 99.429 83.429 146.857 83.429s111.429-57.714 146.857-83.429c298.286-217.714 298.857-224 358.857-276.571 4-3.429 6.286-8.571 6.286-13.714zM701.714 242.857c89.143 64.571 151.429 109.714 197.143 144 8 5.714 9.714 17.143 3.429 25.143l-21.714 29.714c-6.286 8-17.714 9.714-25.714 3.429-45.143-33.143-106.857-78.857-196-142.857-35.429-25.714-99.429-82.857-146.857-82.857s-111.429 57.143-146.857 82.857c-89.143 64.571-150.857 109.714-196 142.857-8 6.286-19.429 4.571-25.714-3.429l-21.714-29.714c-6.286-8-4.571-19.429 3.429-25.143 45.714-34.286 108-79.429 197.143-144 44.571-32 114.857-96.571 189.714-96.571 75.429 0 147.429 65.714 189.714 96.571z" />
-<glyph unicode="&#xe902;" glyph-name="linkedin-square" horiz-adv-x="878" d="M135.429 142.857h132v396.571h-132v-396.571zM276 661.714c-0.571 38.857-28.571 68.571-73.714 68.571s-74.857-29.714-74.857-68.571c0-37.714 28.571-68.571 73.143-68.571h0.571c46.286 0 74.857 30.857 74.857 68.571zM610.286 142.857h132v227.429c0 121.714-65.143 178.286-152 178.286-70.857 0-102.286-39.429-119.429-66.857h1.143v57.714h-132s1.714-37.143 0-396.571v0h132v221.714c0 11.429 0.571 23.429 4 32 9.714 23.429 31.429 48 68 48 47.429 0 66.286-36 66.286-89.714v-212zM877.714 713.143v-548.571c0-90.857-73.714-164.571-164.571-164.571h-548.571c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571c90.857 0 164.571-73.714 164.571-164.571z" />
-<glyph unicode="&#xe903;" glyph-name="github-alt" horiz-adv-x="951" d="M365.714 256c0-41.714-21.714-109.714-73.143-109.714s-73.143 68-73.143 109.714 21.714 109.714 73.143 109.714 73.143-68 73.143-109.714zM731.429 256c0-41.714-21.714-109.714-73.143-109.714s-73.143 68-73.143 109.714 21.714 109.714 73.143 109.714 73.143-68 73.143-109.714zM822.857 256c0 87.429-53.143 164.571-146.286 164.571-37.714 0-73.714-6.857-111.429-12-29.714-4.571-59.429-6.286-89.714-6.286s-60 1.714-89.714 6.286c-37.143 5.143-73.714 12-111.429 12-93.143 0-146.286-77.143-146.286-164.571 0-174.857 160-201.714 299.429-201.714h96c139.429 0 299.429 26.857 299.429 201.714zM950.857 356.571c0-63.429-6.286-130.857-34.857-189.143-75.429-152.571-282.857-167.429-431.429-167.429-150.857 0-370.857 13.143-449.143 167.429-29.143 57.714-35.429 125.714-35.429 189.143 0 83.429 22.857 162.286 77.714 226.286-10.286 31.429-15.429 64.571-15.429 97.143 0 42.857 9.714 85.714 29.143 124.571 90.286 0 148-39.429 216.571-93.143 57.714 13.714 117.143 20 176.571 20 53.714 0 108-5.714 160-18.286 68 53.143 125.714 91.429 214.857 91.429 19.429-38.857 29.143-81.714 29.143-124.571 0-32.571-5.143-65.143-15.429-96 54.857-64.571 77.714-144 77.714-227.429z" />
-<glyph unicode="&#xe904;" glyph-name="twitter" horiz-adv-x="951" d="M925.714 717.714c-25.143-36.571-56.571-69.143-92.571-95.429 0.571-8 0.571-16 0.571-24 0-244-185.714-525.143-525.143-525.143-104.571 0-201.714 30.286-283.429 82.857 14.857-1.714 29.143-2.286 44.571-2.286 86.286 0 165.714 29.143 229.143 78.857-81.143 1.714-149.143 54.857-172.571 128 11.429-1.714 22.857-2.857 34.857-2.857 16.571 0 33.143 2.286 48.571 6.286-84.571 17.143-148 91.429-148 181.143v2.286c24.571-13.714 53.143-22.286 83.429-23.429-49.714 33.143-82.286 89.714-82.286 153.714 0 34.286 9.143 65.714 25.143 93.143 90.857-112 227.429-185.143 380.571-193.143-2.857 13.714-4.571 28-4.571 42.286 0 101.714 82.286 184.571 184.571 184.571 53.143 0 101.143-22.286 134.857-58.286 41.714 8 81.714 23.429 117.143 44.571-13.714-42.857-42.857-78.857-81.143-101.714 37.143 4 73.143 14.286 106.286 28.571z" />
-<glyph unicode="&#xe905;" glyph-name="file-pdf-o" horiz-adv-x="878" d="M838.857 733.714c21.143-21.143 38.857-63.429 38.857-93.714v-658.286c0-30.286-24.571-54.857-54.857-54.857h-768c-30.286 0-54.857 24.571-54.857 54.857v914.286c0 30.286 24.571 54.857 54.857 54.857h512c30.286 0 72.571-17.714 93.714-38.857zM585.143 873.143v-214.857h214.857c-3.429 9.714-8.571 19.429-12.571 23.429l-178.857 178.857c-4 4-13.714 9.143-23.429 12.571zM804.571 0v585.143h-237.714c-30.286 0-54.857 24.571-54.857 54.857v237.714h-438.857v-877.714h731.429zM510.857 338.857c14.286-11.429 30.286-21.714 48-32 24 2.857 46.286 4 66.857 4 38.286 0 86.857-4.571 101.143-28 4-5.714 7.429-16 1.143-29.714-0.571-0.571-1.143-1.714-1.714-2.286v-0.571c-1.714-10.286-10.286-21.714-40.571-21.714-36.571 0-92 16.571-140 41.714-79.429-8.571-162.857-26.286-224-47.429-58.857-100.571-104-149.714-138.286-149.714-5.714 0-10.857 1.143-16 4l-13.714 6.857c-1.714 0.571-2.286 1.714-3.429 2.857-2.857 2.857-5.143 9.143-3.429 20.571 5.714 26.286 36.571 70.286 107.429 107.429 4.571 2.857 10.286 1.143 13.143-3.429 0.571-0.571 1.143-1.714 1.143-2.286 17.714 29.143 38.286 66.286 61.143 112.571 25.714 51.429 45.714 101.714 59.429 149.714-18.286 62.286-24 126.286-13.714 164 4 14.286 12.571 22.857 24 22.857h12.571c8.571 0 15.429-2.857 20-8.571 6.857-8 8.571-20.571 5.143-38.857-0.571-1.714-1.143-3.429-2.286-4.571 0.571-1.714 0.571-2.857 0.571-4.571v-17.143c-0.571-36-1.143-70.286-8-109.714 20-60 49.714-108.571 83.429-136zM181.714 104c17.143 8 41.714 32.571 78.286 90.286-42.857-33.143-69.714-70.857-78.286-90.286zM409.143 629.714c-5.714-16-5.714-43.429-1.143-75.429 1.714 9.143 2.857 17.714 4 25.143 1.143 9.714 2.857 17.714 4 24.571 0.571 1.714 1.143 2.857 2.286 4.571-0.571 0.571-0.571 1.714-1.143 2.857-0.571 10.286-4 16.571-7.429 20.571 0-1.143-0.571-1.714-0.571-2.286zM338.286 252c50.286 20 106.286 36 162.286 46.286-5.714 4.571-11.429 8.571-16.571 13.143-28 24.571-53.143 58.857-72.571 100.571-10.857-34.857-26.857-72-47.429-112.571-8.571-16-17.143-32-25.714-47.429zM707.429 261.143c-2.857 2.857-17.714 13.714-80 13.714 28-10.286 53.714-16 70.857-16 5.143 0 8 0 10.286 0.571 0 0.571-0.571 1.143-1.143 1.714z" />
-<glyph unicode="&#xe906;" glyph-name="print" horiz-adv-x="951" d="M219.429 73.143h512v146.286h-512v-146.286zM219.429 438.857h512v219.429h-91.429c-30.286 0-54.857 24.571-54.857 54.857v91.429h-365.714v-365.714zM877.714 402.286c0 20-16.571 36.571-36.571 36.571s-36.571-16.571-36.571-36.571 16.571-36.571 36.571-36.571 36.571 16.571 36.571 36.571zM950.857 402.286v-237.714c0-9.714-8.571-18.286-18.286-18.286h-128v-91.429c0-30.286-24.571-54.857-54.857-54.857h-548.571c-30.286 0-54.857 24.571-54.857 54.857v91.429h-128c-9.714 0-18.286 8.571-18.286 18.286v237.714c0 60 49.714 109.714 109.714 109.714h36.571v310.857c0 30.286 24.571 54.857 54.857 54.857h384c30.286 0 72-17.143 93.714-38.857l86.857-86.857c21.714-21.714 38.857-63.429 38.857-93.714v-146.286h36.571c60 0 109.714-49.714 109.714-109.714z" />
-</font></defs></svg>

font/style.css

@@ -1,47 +0,0 @@
-@font-face {
-  font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?uh9w96');
-  src:  url('fonts/icomoon.eot?uh9w96#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?uh9w96') format('truetype'),
-    url('fonts/icomoon.woff?uh9w96') format('woff'),
-    url('fonts/icomoon.svg?uh9w96#icomoon') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-file-pdf-o:before {
-  content: "\e905";
-}
-.icon-twitter:before {
-  content: "\e904";
-}
-.icon-telegram:before {
-  content: "\e900";
-}
-.icon-envelope-open:before {
-  content: "\e901";
-}
-.icon-linkedin-square:before {
-  content: "\e902";
-}
-.icon-github-alt:before {
-  content: "\e903";
-}
-.icon-print:before {
-  content: "\e906";
-}

generate-react-cli.json

@@ -0,0 +1,14 @@
+{
+  "usesTypeScript": false,
+  "usesStyledComponents": true,
+  "testLibrary": "None",
+  "component": {
+    "default": {
+      "path": "src/components",
+      "withStyle": true,
+      "withTest": false,
+      "withStory": false,
+      "withLazy": false
+    }
+  }
+}

index.html

@@ -1,342 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
-    <title>Anthony Dumas - Portfolio</title>
-    <meta name="description" content="Anthony Dumas - Portfolio">
-    <meta name="keywords" content="Anthony,Dumas,Portfolio,Developpeur,Clermont-Ferrand,Auvergne,Web,Javascript">
-    <meta name="author" content="Anthony Dumas">
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="css/main.css">
-    <link rel="stylesheet" href="css/print.css" media="print">
-</head>
-
-<body>
-    <section id="menu" class="hero is-primary dontPrint is-bold">
-        <div class="hero-body">
-            <div class="container">
-                <h1 class="title">
-                    Anthony Dumas
-                </h1>
-                <h2 class="subtitle">
-                    Développeur sur les internets
-                </h2>
-            </div>
-        </div>
-    </section>
-    <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
-        <div class="hero-body">
-            <div class="container">
-                <div class="columns">
-                    <div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
-                    <div id="photosAndButtons" class="column is-3-widescreen is-3-tablet">
-                        <div class="card">
-                            <div class="card-image">
-                                <figure id="photoProfil" class="image">
-                                    <img src="images/profile_opt.jpg" alt="Une Photo de moi">
-                                </figure>
-                            </div>
-                            <div class="card-content">
-                                <div class="media">
-                                    <div class="media-content">
-                                        <p id="buttonsUnderPhoto" class="buttons are-large ">
-                                            <a class="button" rel="noopener" href="https://github.com/AdamasFR"
-                                                target="_blank" aria-label="Profil Github">
-                                                <span class="icon is-large">
-                                                    <i class="fab icon-github-alt"></i>
-                                                </span>
-                                            </a>
-                                            <a class="button" rel="noopener"
-                                                href="https://www.linkedin.com/in/anthonyyvondumas/" target="_blank">
-                                                <span class="icon" aria-label="Profil LinkedIn">
-                                                    <i class="fab icon-linke-square"></i>
-                                                </span>
-                                            </a>
-                                            <a class="button" rel="noopener"
-                                                href="https://www.twitter.com/anthony__dumas"
-                                                aria-label="Profil Twitter" target="_blank">
-                                                <span class="icon">
-                                                    <i class="fab icon-twit"></i>
-                                                </span>
-                                            </a>
-                                        </p>
-                                        <p id="boutonCV" class="buttons are-large">
-                                            <a class="button is-fullwidth" rel="noopener"
-                                                href="./asset/anthony-dumas-cv.pdf" target="_blank">
-                                                <span class="icon">
-                                                    <i class="fab icon-file-pdf-o"></i>
-                                                </span>
-                                                <span>CV</span>
-                                            </a>
-                                        </p>
-                                        <p>
-                                            <p class="displayOnlyOnPrint">Anthony Dumas</p>
-                                            <p class="displayOnlyOnPrint">anthony[arobase]dumas.cc</p>
-                                            <p class="dontPrint"><noscript>anthony[arobase]dumas.cc</noscript></p>
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div class="content">
-
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="column is-7" id="experiences">
-                        <span class="title">Experience</span>
-                        <div class="card-content" id="harvest">
-                            <div class="media">
-                                <div class="media-left">
-                                    <figure class="image is-48x48">
-                                        <img src="images/logos/harvest.fr.png" alt="Logo Harvest">
-                                    </figure>
-                                </div>
-                                <div class="media-content">
-                                    <p class="title is-4">Développeur Web</p>
-                                    <p class="subtitle is-6">Harvest - Clermont-Ferrand - (2016 - Actuel)</p>
-                                    <div class="tags">
-                                        <span class="tag">Java</span>
-                                        <span class="tag">JQuery</span>
-                                        <span class="tag">Spring</span>
-                                        <span class="tag">Jira</span>
-                                        <span class="tag">Excel</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="content">
-                                Développement de simulateurs bancaires responsives.
-                            </div>
-                        </div>
-                        <div class="card-content" id="michelin">
-                            <div class="media">
-                                <div class="media-left">
-                                    <figure class="image is-48x48">
-                                        <img src="images/logos/michelin.png" alt="Logo Michelin">
-                                    </figure>
-                                </div>
-                                <div class="media-content">
-                                    <p class="title is-4">Développeur Internet des Objets</p>
-                                    <p class="subtitle is-6">Michelin - Clermont-Ferrand - (Ete 2015)</p>
-                                    <div class="tags">
-                                        <span class="tag">MongoDB</span>
-                                        <span class="tag">Node.JS</span>
-                                        <span class="tag">Word</span>
-                                        <span class="tag">Powerpoint</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="content">
-                                Etude du marché des objets connectés, création d'un prototype.
-                            </div>
-                        </div>
-                        <span class="title">Education</span>
-                        <div class="card-content" id="dutInformatique">
-                            <div class="media">
-                                <div class="media-left">
-                                    <figure class="image is-48x48">
-                                        <img src="images/logos/www.iut-clermont.png" alt="Logo IUT Puy en Velay">
-                                    </figure>
-                                </div>
-                                <div class="media-content">
-                                    <p class="title is-4">DUT Informatique - Imagerie Numérique</p>
-                                    <p class="subtitle is-6">IUT du Puy en Velay - (2013 - 2015)</p>
-                                    <div class="tags">
-                                        <span class="tag">Unity</span>
-                                        <span class="tag">3DSMax</span>
-                                        <span class="tag">Visual Studio</span>
-                                        <span class="tag">Photoshop</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="content">
-                                Programmation 3D temps réel, Web, infographie 3D, retouche d'image.
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-    </section>
-    <section id="projets" class="hero is-primary">
-        <div class="hero-body">
-            <div class="container">
-                <div class="tile is-ancestor">
-                    <div class="tile is-vertical is-4">
-                        <div class="tile">
-                            <div class="tile is-parent">
-                                <article class="tile is-child notification is-info">
-                                    <a href="//adamas.dev" target="_blank" rel="noopener">
-                                        <p class="title">adamas.dev</p>
-                                        <figure class="image is-4by3">
-                                            <img src="./images/portfolio/vinyls.jpg"
-                                                alt="Des mains parcourant des vinyles sur un étalage"
-                                                title="Photo by Florencia Viadana on Unsplash" />
-                                        </figure>
-                                    </a>
-                                </article>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="tile is-vertical is-4">
-                        <div class="tile">
-                            <div class="tile is-parent">
-                                <article class="tile is-child notification is-info">
-                                    <a href="https://prezi.com/m/o8ey8mmpnkvp/" target="_blank" rel="noopener">
-                                        <p class="title">IOT@Michelin</p>
-                                        <figure class="image is-4by3">
-                                            <img alt="Une photo d'un micro ordinateur dans ma main"
-                                                src="./images/portfolio/computerNonSense.jpg" />
-                                        </figure>
-                                    </a>
-                                </article>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="tile is-vertical is-4">
-                        <div class="tile">
-                            <div class="tile is-parent">
-                                <article class="tile is-child notification is-info">
-                                    <a href="//adm.photos" target="_blank" rel="noopener">
-                                        <p class="title">adm.photos</p>
-                                        <figure class="image is-4by3">
-                                            <img alt="Une photo du village de mon enfance"
-                                                src="./images/portfolio/admPhotos.jpg" />
-                                        </figure>
-                                    </a>
-                                </article>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <section class="hero is-info dontPrint" id="contact">
-        <div class="hero-body">
-            <div class="container">
-                <h1 class="title">
-                    Contact
-                </h1>
-                <h2 class="subtitle">
-                    Vous pouvez me contacter de nombreuses façons !
-                </h2>
-                <div class="columns">
-                    <div class="column is-3 is-offset-2-widescreen">
-                        <a id="btn-mail" disabled class="button is-large is-fullw-mobile"
-                            alt="Contactez moi par mail a anthony arobase dumas point cc !">
-                            <span class="icon">
-                                <i class="fab icon-envelope-open"></i>
-                            </span>
-                            <span>Email</span>
-                        </a>
-                    </div>
-                    <div class="column is-3">
-                        <a class="button is-large is-fullw-mobile" rel="noopener"
-                            href="https://www.linkedin.com/in/anthonyyvondumas/" target="_blank" alt="Profil LinkedIn">
-                            <span class="icon">
-                                <i class="fab icon-linke-square"></i>
-                            </span>
-                            <span>LinkedIn</span>
-                        </a>
-                    </div>
-                    <div class="column is-3">
-                        <a class="button is-large is-fullw-mobile" rel="noopener" href="https://t.me/adamas_FR"
-                            target="_blank" alt="Profil Telegram.me">
-                            <span class="icon">
-                                <i class="fab icon-teleg"></i>
-                            </span>
-                            <span>Telegram</span>
-                        </a>
-                    </div>
-                    <div class="column is-3">
-                        <a class="button is-large is-fullw-mobile is-hidden-tablet" rel="noopener"
-                            href="https://github.com/AdamasFR" target="_blank" alt="Profil Github">
-                            <span class="icon">
-                                <i class="fab icon-github-alt"></i>
-                            </span>
-                            <span>Github</span>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="footer has-text-centered dontPrint">
-        <div class="container">
-            <div class="columns">
-                <div class="column is-8-desktop is-offset-2-desktop">
-                    <p>
-                        <strong class="has-text-weight-semibold">
-                            <a rel="noopener" href="https://anthony-dumas.fr">anthony-dumas.fr</a>
-                        </strong>
-                    </p>
-                    <p>
-                        <small>
-                            Auteur : <strong>Anthony Dumas</strong>
-                        </small>
-                    </p>
-                    <p>
-                        <small>
-                            Source code licensed <a rel="noopener" href="http://opensource.org/licenses/mit-license.php"
-                                target="_blank">MIT</a>
-                        </small>
-                    </p>
-                    <p style="margin-top: 1rem;">
-                        <a rel="noopener" href="http://bulma.io" target="_blank">
-                            <img src="images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
-                        </a>
-                        <a rel="noopener" href="https://www.infomaniak.com/fr" target="_blank">
-                            <img src="images/poweredByInfomaniak.bmp" alt="Powered By Infomaniak.com" width="70">
-                        </a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </footer>
-    <!-- Matomo -->
-    <script type="text/javascript">
-        var trackingIsOkay = true;
-        if (window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack || 'msTrackingProtectionEnabled' in
-            window.external) {
-            // The browser supports Do Not Track!
-            if (window.doNotTrack == "1" || navigator.doNotTrack == "yes" || navigator.doNotTrack == "1" || navigator
-                .msDoNotTrack == "1" || window.external.msTrackingProtectionEnabled()) {
-                // Do Not Track is enabled!
-                trackingIsOkay = false;
-            }
-        }
-        if (trackingIsOkay) {
-            var _paq = window._paq || [];
-            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            var _paq = window._paq || [];
-            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-            _paq.push(['trackPageView']);
-            _paq.push(['enableLinkTracking']);
-            (function () {
-                var u = "//adm.ink/statistiques/";
-                _paq.push(['setTrackerUrl', u + 'matomo.php']);
-                _paq.push(['setSiteId', '3']);
-                var d = document,
-                    g = d.createElement('script'),
-                    s = d.getElementsByTagName('script')[0];
-                g.type = 'text/javascript';
-                g.async = true;
-                g.defer = true;
-                g.src = u + 'matomo.js';
-                s.parentNode.insertBefore(g, s);
-            })();
-        }
-    </script>
-    <!-- End Matomo Code -->
-    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
-    <script type="text/javascript" src="lib/main.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
-</body>
-
-</html>

index.php

@@ -1 +0,0 @@
-<?php header( 'Location: /index.html' ) ;  ?>

lib/main.js

@@ -1,18 +0,0 @@
-"use strict";
-
-var $btnMail = $("#btn-mail");
-
-$btnMail.removeAttr("disabled");
-
-$btnMail.click(function (evt) {
-  evt.preventDefault();
-  Swal.fire({
-    title: 'Email',
-    html: "Vous pouvez m'envoyer un mail à <strong><a href='mailto:anthony@dumas.cc'>anthony@dumas.cc</a></strong> !",
-    imageUrl: './images/mail.jpg',
-    imageWidth: 400,
-    imageHeight: 200,
-    imageAlt: 'Custom image',
-    animation: false
-  });
-});

package.json

@@ -1,58 +1,44 @@
 {
-  "name": "anthony-dumas-portfolio",
-  "version": "2.0.0-SNAPSHOT",
-  "description": "anthony-dumas-portfolio",
-  "keywords": [
-    "sass",
-    "bulma",
-    "css",
-    "start"
-  ],
-  "author": "Anthony Dumas <anthony@dumas.css>",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/AdamasFR/CV_Web_Dumas.git"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "autoprefixer": "^9.5.1",
-    "ava": "^1.4.1",
-    "babel-cli": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015-ie": "^6.7.0",
-    "bulma": "^0.7.2",
-    "co-exec": "^1.0",
-    "codecov": "^1.0.1",
-    "ghooks": "^1.2.4",
-    "node-sass": "^4.12.0",
-    "npm-run-all": "^4.1.5",
-    "nyc": "^14.1.0",
-    "postcss-cli": "^6.1.1",
-    "standard": "^8.4.0"
+  "name": "anthony-dumas.fr",
+  "version": "2023.1.001",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
+    "bulma": "^1.0.0",
+    "powerglitch": "^2.3.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-intl": "^5.10.9",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.71.1",
+    "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "css-deploy": "npm run css-build && npm run css-postcss",
-    "css-build": "node-sass _sass/main.scss css/main.css",
-    "css-postcss": "postcss --use autoprefixer --output css/main.css css/main.css",
-    "css-watch": "npm run css-build -- --watch",
-    "deploy": "npm run css-deploy && npm run js-build",
-    "js-build": "babel _javascript --out-dir lib",
-    "js-watch": "npm run js-build -- --watch",
-    "auto-loading": "npx browser-sync start --server --files '*.html' --files 'css/*.css'",
-    "start": "npm-run-all --parallel css-watch js-watch auto-loading",
-    "report-coverage": "nyc report --reporter=lcov > coverage.lcov && codecov",
-    "standard": "standard index.js",
-    "test": "nyc ./node_modules/.bin/ava -v"
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "prod": "forever start $(which npx) serve -l 80 -s build",
+    "jetstart": "rm -r node_* && npm i && clear && npm run start"
   },
-  "dependencies": {
-    "browser-sync": "^2.26.5",
-    "global": "^4.3.2",
-    "jquery": "^3.4.1",
-    "npx": "^10.2.0"
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
-  "config": {
-    "ghooks": {
-      "pre-commit": "npm run standard"
-    }
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

public/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#326273" />
+    <meta
+      name="description"
+      content="Anthony Dumas - Programmeur de les Internet."
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Anthony Dumas - Portfolio</title>
+    <!-- Matomo -->
+    <script>
+      var _paq = (window._paq = window._paq || []);
+      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        var u = "//matomo.adm.ink/";
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", "1"]);
+        var d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = u + "matomo.js";
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
+    <!-- End Matomo Code -->
+  </head>
+  <body>
+    <noscript>
+      <h1>Ce site requiert Javascript (désolé !)</h1>
+      Dirigez vous vers
+      <a
+        href="https://adamas-cdn.s3.fr-par.scw.cloud/portfolio/anthony-dumas-cv.pdf"
+        >ce lien</a
+      >
+      pour une version PDF. Pour me parler directement, n'hésitez pas à
+      m'envoyer un message sur
+      <a rel="me" href="https://social.adm.ink/@adamas">Mastodon</a>!
+    </noscript>
+    <div id="root"></div>
+    <script src="https://unpkg.com/ionicons@7.4.0/dist/ionicons.js"></script>
+    <a style="display: none" rel="me" href="https://social.adm.ink/@adamas"
+      >Mastodon</a
+    >
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

robots.txt

@@ -0,0 +1,5 @@
+User-agent: GPTBot
+Disallow: /
+
+User-agent: ClaudeBot
+Disallow: /

src/App.js

@@ -0,0 +1,31 @@
+import './App.css';
+import './_sass/index.scss';
+
+import { lazy, Suspense } from 'react';
+
+
+const MenuComponent = lazy(() => import('./components/MenuComponent/index'));
+const MainCard = lazy(() => import('./components/MainCard/MainCard'));
+const ProjectsCard = lazy(() => import('./components/ProjectsCard'));
+const ContactCard = lazy(() => import('./components/ContactCard'));
+const FooterCard = lazy(() => import('./components/FooterCard'));
+
+const renderLoader = () => <p>Loading</p>;
+
+function App() {
+  return (
+    <div className="App">
+      <Suspense className="topNavigation" fallback={renderLoader()}>
+        <MenuComponent />
+        <MainCard />
+      </Suspense>
+      <Suspense fallback={renderLoader()}>
+        <ProjectsCard />
+        <ContactCard />
+        <FooterCard />
+      </Suspense>
+    </div>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { render, screen } from '@testing-library/react';
+
+import MenuComponent from './App';
+import { getTexts } from './services/message.service';
+
+
+test('renders Anthony Yvon Dumas', async () => {
+  render(<IntlProvider locale={"fr"}
+    defaultLocale={"fr"}
+    messages={getTexts("fr")}>
+    <MenuComponent />
+  </IntlProvider>);
+  expect(await screen.findByText("Anthony Yvon Dumas")).toBeInTheDocument();
+});
+

src/_sass/index.scss

@@ -0,0 +1 @@
+@use "main.scss";

src/_sass/main.scss

@@ -0,0 +1,106 @@
+@charset "utf-8";
+
+/**
+    Thème
+**/
+$deep-koamaru: #152528;
+$myrtle-green: #1d353a;
+$cadet-blue: #25444b;
+$neon-carrot: #142225;
+$admink-brand: #f38d68;
+
+@use "bulma/sass" with (
+  $primary: $cadet-blue,
+  $info: $myrtle-green,
+  $footer-color: $deep-koamaru,
+  $success: $deep-koamaru,
+  $link: $neon-carrot
+);
+
+html {
+  background-color: $myrtle-green;
+}
+
+body {
+  overflow-x: hidden;
+}
+
+#idCard {
+  .hero-body {
+    padding-bottom: 2rem;
+    padding-top: 2rem;
+  }
+}
+
+// retire les barres de scroll des panneaux experience/education
+#experiences .media-content {
+  overflow: hidden;
+}
+
+footer {
+  background-color: $deep-koamaru !important;
+  color: #fff;
+}
+
+footer strong {
+  color: #fff;
+}
+
+.media-content {
+  margin-top: -6px;
+}
+
+// Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem)
+div.hero-body {
+  margin-left: env(safe-area-inset-left);
+  margin-right: env(safe-area-inset-right);
+}
+
+section#contact .button {
+  min-width: 155px;
+}
+
+@media screen and (max-width: 768px) {
+  .button.is-fullw-mobile {
+    display: flex;
+    width: 100%;
+  }
+}
+
+.displayOnlyOnPrint {
+  display: none;
+}
+
+.tile p.title {
+  font-size: 25px;
+}
+
+//
+footer small {
+  color: #fff;
+}
+
+// Photo de Profil
+#photoProfil {
+  background-color: $myrtle-green;
+}
+
+.tile.is-vertical {
+  background-color: unset;
+}
+
+// fix d'un affichage désagréable sur la carte Bulma
+#photosAndButtons .card {
+  border-radius: unset;
+  box-shadow: unset;
+  background-color: $deep-koamaru;
+}
+
+#mailWhenNoJavascript {
+  text-align: left;
+  font-size: 20px;
+}
+
+p.title a {
+  color: $admink-brand !important;
+}

src/components/ButtonIcon/ButtonIcon.js

@@ -0,0 +1,21 @@
+import './ButtonIcon.scss';
+
+import React, { Component } from 'react';
+
+
+export default class ButtonIcon extends Component {
+  // constructor(props) {
+  //     super(props);
+  //     this.state = {};
+  // }
+  render() {
+    return <a rel="noopener noreferrer me" href={this.props.lien} target="_blank">
+      <button className="button" aria-label="Bouton {this.props.aria-label}">
+        <span className="icon">
+          <ion-icon name={this.props.icon}></ion-icon>
+        </span>
+      </button>
+    </a>;
+
+  }
+}

src/components/ButtonIcon/index.js

@@ -0,0 +1,2 @@
+import ButtonIcon from "./ButtonIcon"
+export default ButtonIcon;

src/components/ContactButton/ContactButton.js

@@ -0,0 +1,30 @@
+import './ContactButton.scss';
+
+import React, { Component } from 'react';
+
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as contactButtonActions from "../../store/contactButton/actions";
+export default class ContactButton extends Component {
+  // constructor(props) {
+  //     super(props);
+  //     this.state = {};
+  // }
+  render() {
+    const data = this.props.data;
+    return <div className="column is-3">
+      <a target="_blank" rel="noreferrer noopener" href={data.url} className="hide button is-large is-fullw-mobile"
+        title={`Go to ${data.title}`}>
+        <span className="icon">
+          <ion-icon name={data.icon}></ion-icon>
+        </span>
+        <span>{data.title}</span>
+      </a>
+    </div>;
+  }
+}
+// export default connect(
+//     ({ contactButton }) => ({ ...contactButton }),
+//     dispatch => bindActionCreators({ ...contactButtonActions }, dispatch)
+//   )( contactButton );

src/components/ContactButton/ContactButton.scss

@@ -0,0 +1,4 @@
+
+.component-contact-button{
+    
+}

src/components/ContactButton/index.js

@@ -0,0 +1,2 @@
+import ContactButton from "./ContactButton"
+export default ContactButton;

src/components/ContactCard/ContactCard.js

@@ -0,0 +1,40 @@
+import './ContactCard.scss';
+
+import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
+
+import ContactButton from '../ContactButton/index';
+
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as contactCardActions from "../../store/contactCard/actions";
+class ContactCard extends Component {
+  // constructor(props) {
+  //     super(props);
+  //     this.state = {};
+  // }
+  render() {
+    const contactCardMessage = this.props.intl.messages.contactCard;
+    return <section className="hero is-info dontPrint" id="contact">
+      <div className="hero-body">
+        <div className="container">
+          <h1 className="title">
+            {contactCardMessage.title}
+          </h1>
+          <h2 className="subtitle">
+            {contactCardMessage.subtitle}
+          </h2>
+          <div className="columns">
+            {contactCardMessage.ways.map(function (button, index) {
+              return <ContactButton key={index}
+                data={button} />;
+            })}
+          </div>
+        </div>
+      </div>
+    </section>;
+  }
+}
+
+export default injectIntl(ContactCard)

src/components/ContactCard/ContactCard.scss

@@ -0,0 +1,4 @@
+
+.component-contact-card{
+    
+}

src/components/ContactCard/index.js

@@ -0,0 +1,2 @@
+import ContactCard from "./ContactCard"
+export default ContactCard;

src/components/ExperienceCard/ExperienceCard.js

@@ -0,0 +1,51 @@
+import './ExperienceCard.scss';
+
+import React, { Component } from 'react';
+
+import ExperienceSlimSpanWrapper from '../ExperienceSlimSpan/ExperienceSlimSpan';
+
+
+export default class ExperienceCard extends Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {};
+    // }
+    render() {
+        var data = this.props.data;
+        var imgSrc = data.logo;
+        return <div className="card-content">
+            <div className="media">
+                <div className="media-left">
+                    <a href={data.url} target="_blank" rel="noreferrer">
+                        <figure className="image is-48x48">
+                            <img src={imgSrc} alt="Logo Entreprise" />
+                        </figure>
+                    </a>
+                </div>
+                <div className="media-content">
+                    <p className="title is-4">{data.occupation}</p>
+                    <p className="subtitle is-6"><strong>{data.entreprise}</strong> - {data.location} - {data.duration}</p>
+                    <div className="tags">
+                        {data.tags.map(function (name, index) {
+                            return <span key={index} className="tag">{name}</span>;
+                        })}
+                    </div>
+                    <div className='description content'>
+                        <div dangerouslySetInnerHTML={{ __html: data.description }} />
+                    </div>
+                    {data.missions ?
+                        data.missions.map(function (mission, index) {
+                            return <ExperienceSlimSpanWrapper key={index}
+                                data={mission} />;
+                        }) : ''
+
+                    }
+                    {data.commentaire ? <div className="comment">
+                        {data.commentaire}
+                    </div> : ''}
+                </div>
+            </div>
+
+        </div>
+    }
+}

src/components/ExperienceCard/ExperienceCard.scss

@@ -0,0 +1,28 @@
+.comment {
+  font-style: italic;
+  margin-top: -25px;
+}
+
+// permet de re-aligner les tags avec les subtitles
+.tags,
+.description,
+.comment {
+  margin-top: -1.25rem;
+}
+
+.card-content {
+  margin-top: 1rem;
+}
+
+.mission.card-content {
+  margin-top: 0;
+}
+
+.mission .media {
+  border-top-style: none;
+  align-items: self-end;
+}
+
+.mission div.media {
+  padding-top: 2px;
+}

src/components/ExperienceCard/index.js

@@ -0,0 +1,2 @@
+import ExperienceCard from "./ExperienceCard"
+export default ExperienceCard;

src/components/ExperienceSlimSpan/ExperienceSlimSpan.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+
+export default class ExperienceSlimSpan extends Component {
+   render() {
+      var data = this.props.data;
+      var imgSrc = data.logo;
+      return <div className="mission card-content">
+         <div className="media">
+            <div className="media-left">
+               <a href={data.url} target="_blank" rel="noreferrer">
+                  <figure className="image is-24x24">
+                     <img src={imgSrc} alt="Logo Entreprise" />
+                  </figure>
+               </a>
+            </div>
+            <div className="media-content">
+               <p className="subtitle is-6">{data.occupation} {data.situation} <strong>{data.entreprise}</strong> - {data.duration}</p>
+            </div>
+         </div>
+      </div>
+   }
+};

src/components/FooterCard/FooterCard.js

@@ -0,0 +1,52 @@
+import './FooterCard.scss';
+
+import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
+
+import bulmaLogo from '../../images/made-with-bulma.webp';
+import scalewayLogo from '../../images/scaleway_logo.webp';
+
+
+// import { connect } from "react-redux";
+// import { bindActionCreators } from "redux";
+// import * as FooterCardActions from "../../store/FooterCard/actions";
+class FooterCard extends Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {};
+    // }
+    render() {
+        const footerMessage = this.props.intl.messages.footer;
+        return <footer className="footer has-text-centered dontPrint">
+            <div className="container">
+                <div className="columns">
+                    <div className="column is-8-desktop is-offset-2-desktop">
+                        <p>
+                            <strong className="has-text-weight-semibold">
+                                anthony-dumas.fr
+                            </strong>
+                        </p>
+                        <p>
+                            <small className="sosumi">
+                                {footerMessage.legalNotice}
+                            </small>
+                        </p>
+                        <p id="footer-credits">
+                            <small>powered by</small>
+                            <br />
+                            <a rel="noopener noreferrer" href="http://bulma.io" alt="Framework used on this website" target="_blank">
+                                <img src={bulmaLogo} alt="Made with Bulma" width="128" height="24" />
+                            </a>
+                            <br />
+                            <a rel="noopener noreferrer" href="https://www.scaleway.com/fr/" aria-label="Link to scaleway.com" id="scaleway-logo" target="_blank">
+                                <img src={scalewayLogo} alt="Powered by Scaleway" width="128" height="24" />
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </footer>;
+    }
+}
+
+export default injectIntl(FooterCard)

src/components/FooterCard/FooterCard.scss

@@ -0,0 +1,3 @@
+#footer-credits{
+    margin-top: 1rem;
+}

src/components/FooterCard/index.js

@@ -0,0 +1,2 @@
+import FooterCard from "./FooterCard"
+export default FooterCard;

src/components/MainCard/MainCard.js

@@ -0,0 +1,128 @@
+import './MainCard.scss';
+
+import { PowerGlitch } from 'powerglitch';
+import React, { Component } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import headshotFond from '../../images/headshot_fond.webp';
+import headshotMain from '../../images/headshot_main.webp';
+import ButtonIcon from '../ButtonIcon/index';
+import ExperienceCard from '../ExperienceCard/index';
+
+
+class MainCard extends Component {
+
+    componentDidMount() {
+        PowerGlitch.glitch('#photoProfil img',
+            {
+                playMode: 'hover',
+                hideOverflow: true,
+                timing: {
+                    duration: 1000,
+                    iterations: 15,
+                    easing: 'ease-in-out',
+                },
+                glitchTimeSpan: {
+                    start: 0.0,
+                    end: 0.7,
+                },
+                shake: {
+                    velocity: 10,
+                    amplitudeX: 0.4,
+                    amplitudeY: 0.4,
+                },
+                slice: {
+                    count: 4,
+                    velocity: 10,
+                    minHeight: 0.02,
+                    maxHeight: 0.40,
+                    hueRotate: true,
+                },
+            }
+        );
+    }
+    render() {
+        var metaThemeColor = document.querySelector("meta[name=theme-color]");
+        if (metaThemeColor !== null) {
+            metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead");
+        }
+        const experienceCardMessage = this.props.intl.messages.experienceCard;
+
+        return <section id="idCard" className="hero is-medium is-info">
+            <div className="hero-body">
+                <div className="container">
+                    <div className="columns">
+                        <div className="column is-1 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
+                        <div id="photosAndButtons" className="column is-3-widescreen is-4-tablet is-success">
+                            <div className="card">
+                                <div className="card-image">
+                                    <figure id="photoProfil" className="image" onMouseOver={this.glitching} >
+                                        <img fetchpriority="high" className="background" src={headshotFond} alt="Anthony Dumas" />
+                                        <img fetchpriority="high" className="actor" src={headshotMain} alt="Anthony Dumas" />
+                                    </figure>
+                                </div>
+                                <div className="card-content">
+                                    <div className="media">
+                                        <div className="media-content">
+                                            <div id="buttonsUnderPhoto" className="field is-grouped">
+                                                <p className="control">
+                                                    <ButtonIcon
+                                                        icon="logo-github"
+                                                        aria-label="Github"
+                                                        lien="https://github.com/AdamasFR" />
+                                                </p>
+                                                <p className="control">
+                                                    <ButtonIcon
+                                                        icon="logo-linkedin"
+                                                        aria-label="Linkedin"
+                                                        lien="https://www.linkedin.com/in/anthonyyvondumas/" />
+                                                </p>
+                                                <p className="control">
+                                                    <ButtonIcon
+                                                        icon="logo-mastodon"
+                                                        aria-label="Mastodon"
+                                                        lien="https://social.adm.ink/@adamas" />
+                                                </p>
+                                            </div>
+                                            <p id="boutonCV" className="field">
+                                                <a rel="noreferrer noopener" target="_blank"
+                                                    href="https://adamas-cdn.s3.fr-par.scw.cloud/portfolio/anthony-dumas-cv.pdf" >
+                                                    <button className="button is-fullwidth" aria-label="Bouton Curriculum Vitæ">
+                                                        <span className="icon">
+                                                            <ion-icon name="document-attach-outline"></ion-icon>
+                                                        </span>
+                                                        <span><FormattedMessage id="curriculumVitaeLink" /></span>
+                                                    </button>
+                                                </a>
+                                            </p>
+                                        </div>
+                                    </div>
+
+                                    <div className="content">
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="column is-9-tablet is-7-widescreen" id="experiences">
+                            <span className="title">{experienceCardMessage.title.experience}</span>
+                            {experienceCardMessage.experiences.map(function (experience, index) {
+                                return <ExperienceCard key={index}
+                                    data={experience} />;
+                            })}
+                            <span className="title">{experienceCardMessage.title.education}</span>
+                            {experienceCardMessage.education.map(function (education, index) {
+                                return <ExperienceCard key={index}
+                                    data={education} />;
+                            })}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>;
+    }
+}
+
+
+export default injectIntl(MainCard)

src/components/MainCard/MainCard.scss

@@ -0,0 +1,13 @@
+#photoProfil {
+  overflow: clip;
+  border: 1px solid #3c3c3c;
+
+  .background {
+    position: absolute;
+    opacity: 0.5;
+  }
+}
+
+#boutonCV a {
+  display: flex;
+}

src/components/MainCard/index.js

@@ -0,0 +1,2 @@
+import mainCard from "./mainCard"
+export default mainCard;

src/components/MenuComponent/MenuComponent.js

@@ -0,0 +1,62 @@
+import './MenuComponent.scss';
+
+import React, { Component } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import { URL_add_parameter } from '../../services/parameters.service';
+
+
+class MenuComponent extends Component {
+  // constructor(props) {
+  //     super(props);
+  //     this.state = {};
+  // }
+  honhonhon() {
+    window.location.href = URL_add_parameter(window.location.href, "lang", "fr");
+  }
+
+  heygovna() {
+    window.location.href = URL_add_parameter(window.location.href, "lang", "en");
+  }
+
+
+  render() {
+    const buttonsLanguagesMessage = this.props.intl.messages.global.buttons.languages;
+    const currentJob = this.props.intl.messages.experienceCard.experiences[0];
+    return <section id="menu" className="hero is-primary dontPrint">
+      <div className="hero-body">
+        <div className="container">
+          <div className="columns">
+            <div className="column">
+              <h1 className="title">
+                <FormattedMessage id="title" />
+              </h1>
+              <h2 className="subtitle">
+                {currentJob.occupation} @ {currentJob.entreprise}
+              </h2>
+            </div>
+            <div className="column is-hidden-touch">
+              <div id="langButtons">
+                <div className="buttons">
+                  <span className="button is-light" onClick={this.honhonhon} aria-label="Visiter le site en Français">
+                    {buttonsLanguagesMessage.fr}
+                  </span>
+                  <span className="button is-light" onClick={this.heygovna} aria-label="Visit the website in English">
+                    {buttonsLanguagesMessage.en}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>;
+  }
+}
+// export default connect(
+//     ({ MenuComponent }) => ({ ...MenuComponent }),
+//     dispatch => bindActionCreators({ ...MenuComponentActions }, dispatch)
+//   )( MenuComponent );
+
+export default injectIntl(MenuComponent)

src/components/MenuComponent/MenuComponent.scss

@@ -0,0 +1,5 @@
+
+#langButtons {
+    font-weight: bold;
+    float:right;
+}

src/components/MenuComponent/index.js

@@ -0,0 +1,2 @@
+import MenuComponent from "./MenuComponent"
+export default MenuComponent;

src/components/ProjectCard/ProjectCard.js

@@ -0,0 +1,29 @@
+import './ProjectCard.scss';
+
+import React, { Component } from 'react';
+
+
+export default class ProjectCard extends Component {
+
+    render() {
+        const data = this.props.data;
+        return <div className="tile is-vertical is-4">
+            <div className="tile">
+                <div className="cell">
+                    <article className="box notification is-info">
+                        <p className="title">
+                            <a href={data.url} rel="noopener noreferrer" target="_blank">{data.title}</a>
+                        </p>
+                        <a href={data.url} rel="noopener noreferrer" target="_blank">
+                            <figure className="image is-4by3">
+                                <img src={data.image}
+                                    alt={data.imgAlt}
+                                    title={data.imgTitle} />
+                            </figure>
+                        </a>
+                    </article>
+                </div>
+            </div>
+        </div>;
+    }
+}

src/components/ProjectCard/index.js

@@ -0,0 +1,2 @@
+import ProjectCard from "./ProjectCard"
+export default ProjectCard;

src/components/ProjectsCard/ProjectsCard.js

@@ -0,0 +1,28 @@
+import './ProjectsCard.scss';
+
+import React, { Component } from 'react';
+import { injectIntl } from 'react-intl';
+
+import ProjectCard from '../ProjectCard/index';
+
+
+class ProjectsCard extends Component {
+  render() {
+    const projectCardsMessage = this.props.intl.messages.projectCard;
+    return <section id="projets" className="hero is-success">
+      <div className="hero-body">
+        <div className="container">
+          <div className="grid">
+            {projectCardsMessage.projects.map(function (projects, index) {
+              return <ProjectCard key={index}
+                data={projects}
+              />;
+            })}
+          </div>
+        </div>
+      </div>
+    </section>;
+  }
+}
+
+export default injectIntl(ProjectsCard)

src/components/ProjectsCard/index.js

@@ -0,0 +1,2 @@
+import ProjectsCard from "./ProjectsCard"
+export default ProjectsCard;

src/components/Template/Template.js

@@ -0,0 +1,9 @@
+import React, {Component} from 'react';
+import './Template.scss'
+
+export default class Template extends Component {
+
+    render() {
+      return ;
+    }
+  }

src/components/Template/index.js

@@ -0,0 +1,2 @@
+import ProjectsCard from "./ProjectsCard"
+export default ProjectsCard;