### instructions

- start server with php, and browser-sync for auto reload :
  - `npm run dev`
- setup instructions :
  - install apps : `sudo apt update && sudo apt install php-cli nodejs npm`
  - verify : `php -v` & `node -v` & `npm -v`
  - install dependencies : `npm ci`
- -> only for info, at project creation setup :
  - run : `npm init -y && npm install --save-dev browser-sync`
  - add in package.jsons > scripts : `php -S localhost:8000 & browser-sync start --proxy localhost:8000 --files "**/*.php,**/*.css,**/*.js" --port 3000`
    - `php -S localhost:8000` → starts PHP built-in server
    - `&` → runs PHP server in the background (Linux/macOS)
    - `browser-sync start --proxy localhost:8000` → proxies PHP server
    - `--files "**/*.php,**/*.css,**/*.js"` → watches files for changes
    - `--port 3000` → BrowserSync UI accessible at http://localhost:3000

---

### ressources

html validator : https://validator.w3.org/nu

---

### 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
    <h1 aria-label="hugo lamy">
      <span aria-hidden="true" class="pre"> hugo (ascii) </span>
      <span aria-hidden="true" class="pre"> lamy (ascii) </span>
    </h1>
    ```
- [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/)