orthographe

README.md

@@ -1,4 +1,4 @@
-# Portfotlio basique, studio variable
+# Portfolio basique, studio variable
 
 
 ## Contenus

assets/style.css

@@ -322,6 +322,8 @@ footer{
 
 .portfolio-group figure img{
     width: 100%;
+    height: 100%;
+    object-fit: cover;
     display: flex;
 
 }

index.html

@@ -55,14 +55,14 @@
     <img src="images/studio-variable_Julie.jpg" alt="." />
     <figcaption aria-hidden="true">.</figcaption>
     </figure>
-    <h1 id="julie-blanc-chef-de-projet">Julie Blanc, chef de projet</h1>
+    <h1 id="julie-blanc">Julie Blanc</h1>
-    <p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc le
+    <p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera
-    <strong>design</strong> et le <strong>développement
+    le <strong>design</strong> et le <strong>développement
-    front-end</strong>.</p>
+    front-end</strong> du projet.</p>
     <p>Julie est designer, développeuse et chercheuse. Elle a co-fondé
     le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
-    Sa thèse, soutenue en 2023, porte sur l’utilisation des
+    Sa thèse, soutenue en 2023, porte sur l’utilisation des technologies
-    techonologies du web par les designers graphique.</p>
+    du web par les designers graphiques.</p>
     </div>
     <div class="people">
     <figure>
@@ -72,7 +72,7 @@
     <h1 id="adrien-payet">Adrien Payet</h1>
     <p>Développeur full-stack, spécialisé en design et développement de
     back-office et d’interactions front-end, Adrien assurera le
-    <strong>développement bank-end et la maintenance</strong> du
+    <strong>développement back-end et la maintenance</strong> du
     projet.</p>
     <p>Adrien étudie, enseigne et pratique la philosophie, le design et
     le code. Il a co-fondé le studio Variable. Il enseigne à l’ENSCi et
@@ -84,7 +84,7 @@
     </section>
     <section id="wysiwyg" class="portfolio-group">
     <h1 id="wysiwyg">WYSIWYG</h1>
-    <p>Projet de recherche l’évolution des logiciels de graphisme en
+    <p>Projet de recherche sur l’évolution des logiciels de graphisme en
     Suisse et en France (1980 - aujourd’hui)</p>
     <figure>
     <img src="images/wysiwyg.png" alt="." />
@@ -195,8 +195,9 @@
     </section>
     <section id="medialab" class="portfolio-group">
     <h1 id="médialab">médialab</h1>
-    <p>Laboratoire interdisplinaire qui interroge les relations entre le
+    <p>Laboratoire interdisciplinaire qui interroge les relations entre
-    numérique et nos sociétés.</p>
+    le numérique et nos sociétés. Un site web sans images et sans
+    Javascript.</p>
     <figure>
     <img src="images/medialab.png" alt="." />
     <figcaption aria-hidden="true">.</figcaption>
@@ -304,10 +305,114 @@
     </dl>
     </div>
     </section>
+    <section id="gms" class="portfolio-group">
+    <h1 id="game-management-system">Game Management System</h1>
+    <p>Back-office sur-mesure dédié à la conception et à la
+    planification de parties de divers jeux en ligne.</p>
+    <figure>
+    <img src="images/gms.png" alt="." />
+    <figcaption aria-hidden="true">.</figcaption>
+    </figure>
+    <div class="details">
+    <dl>
+    <dt>
+    URL
+    </dt>
+    <dd>
+    Plateforme privée
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Secteur
+    </dt>
+    <dd>
+    Divertissement
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Client
+    </dt>
+    <dd>
+    <a href="https://www.world.game/">World Game</a>
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Prestation(s)
+    </dt>
+    <dd>
+    Design et développement full-stack
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Date
+    </dt>
+    <dd>
+    En cours
+    </dd>
+    </dl>
+    </div>
+    </section>
+    <section id="design-to-pack" class="portfolio-group">
+    <h1 id="design-to-pack">Design to Pack</h1>
+    <p>Plateforme complète de gestion de projets de création de flacons
+    de parfum. L’interface permet de collaborer du brief aux produits
+    finis, en passant par les vues 3D interactives.</p>
+    <figure>
+    <img src="images/design-to-pack.png" alt="." />
+    <figcaption aria-hidden="true">.</figcaption>
+    </figure>
+    <div class="details">
+    <dl>
+    <dt>
+    URL
+    </dt>
+    <dd>
+    Plateforme privée
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Secteur
+    </dt>
+    <dd>
+    Luxe
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Client
+    </dt>
+    <dd>
+    Groupe Pochet
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Prestation(s)
+    </dt>
+    <dd>
+    Développement du back-end, de la logique applicative et des
+    interactions.
+    </dd>
+    </dl>
+    <dl>
+    <dt>
+    Date
+    </dt>
+    <dd>
+    2025
+    </dd>
+    </dl>
+    </div>
+    </section>
     <section id="cultures-visuelles" class="portfolio-group">
     <h1 id="cultures-visuelles">Cultures visuelles</h1>
     <p>Plateforme pour le programme de recherche, intégrant une
-    interface graphique an front-end pour l’édition du contenu.</p>
+    interface graphique en front-end pour l’édition du contenu.</p>
     <figure>
     <img src="images/cultures-visuelles.png" alt="." />
     <figcaption aria-hidden="true">.</figcaption>
@@ -342,7 +447,7 @@
     Prestation(s)
     </dt>
     <dd>
-    Design, éveloppement full-stack
+    Design et développement full-stack
     </dd>
     </dl>
     <dl>
@@ -400,7 +505,7 @@
     Prestation(s)
     </dt>
     <dd>
-    Design, éveloppement full-stack
+    Design et développement full-stack
     </dd>
     </dl>
     <dl>
@@ -456,7 +561,7 @@
     </dl>
     <!-- <dl>
     <dt>Partenaire(s)</dt>
-    <dd>en collaboration avec Benjamin Benjamin Gremillon et l’éauipe du médialab</dd>
+    <dd>en collaboration avec Benjamin Benjamin Gremillon et l’équipe du médialab</dd>
     </dl> -->
     <dl>
     <dt>
@@ -468,65 +573,6 @@
     </dl>
     </div>
     </section>
-    <section id="acau" class="portfolio-group">
-    <h1 id="acau">ACAU</h1>
-    <p>Site vitrine pour l’Agence Coopérative Architectes
-    Urbanistes.</p>
-    <figure>
-    <img src="images/acau.png" alt="." />
-    <figcaption aria-hidden="true">.</figcaption>
-    </figure>
-    <div class="details">
-    <dl>
-    <dt>
-    URL
-    </dt>
-    <dd>
-    <a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr/</a>
-    </dd>
-    </dl>
-    <dl>
-    <dt>
-    Secteur
-    </dt>
-    <dd>
-    Communication
-    </dd>
-    </dl>
-    <dl>
-    <dt>
-    Client
-    </dt>
-    <dd>
-    Agence Coopérative Architectes Urbanistes
-    </dd>
-    </dl>
-    <dl>
-    <dt>
-    Prestation(s)
-    </dt>
-    <dd>
-    Développement full-stack
-    </dd>
-    </dl>
-    <dl>
-    <dt>
-    Partenaire(s)
-    </dt>
-    <dd>
-    Plastac (design)
-    </dd>
-    </dl>
-    <dl>
-    <dt>
-    Date
-    </dt>
-    <dd>
-    2024
-    </dd>
-    </dl>
-    </div>
-    </section>
     <section id="decarb-one" class="portfolio-group">
     <h1 id="decarb.one">Decarb.one</h1>
     <p>Site vitrine pour l’agence de relations presse et de

src/equipe.md

@@ -4,11 +4,11 @@
 
 ![.](images/studio-variable_Julie.jpg)
 
-# Julie Blanc, chef de projet
+# Julie Blanc
 
-Docteur en ergonomie et spécialiste de CSS, Julie Blanc le **design** et le **développement front-end**.
+Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera le **design** et le **développement front-end** du projet.
 
-Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Variable. Elle est chercheuse associée à la HEAD (Genève). Sa thèse, soutenue en 2023, porte sur l’utilisation des techonologies du web par les designers graphique.
+Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Variable. Elle est chercheuse associée à la HEAD (Genève). Sa thèse, soutenue en 2023, porte sur l’utilisation des technologies du web par les designers graphiques.
 
 </div>
 
@@ -18,7 +18,7 @@ Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Vari
 
 # Adrien Payet
 
-Développeur full-stack, spécialisé en design et développement de back-office et d'interactions front-end, Adrien assurera le **développement bank-end et la maintenance** du projet.
+Développeur full-stack, spécialisé en design et développement de back-office et d'interactions front-end, Adrien assurera le **développement back-end et la maintenance** du projet.
 
 Adrien étudie, enseigne et pratique la philosophie, le design et le code. Il a co-fondé le studio Variable. Il enseigne à l’ENSCi et à Paris 1.
 

src/files.yaml

@@ -15,6 +15,6 @@ input-files:
   - src/portfolio-1img/cultures-visuelles.md
   - src/portfolio-1img/actuel-inactuel.md
   - src/portfolio-1img/heroines.md
-  - src/portfolio-1img/acau.md
+  # - src/portfolio-1img/acau.md
   - src/portfolio-1img/decarb-one.md
   - src/details.md

src/note-intention.md

@@ -4,7 +4,7 @@ Notre intervention se concentre sur une double approche, à la fois graphique et
 
 **Sur le plan graphique**, nous portons une attention particulière à la lisibilité et à l’harmonisation des contenus. L’hétérogénéité des profils proposés dans l’annuaire (parfois très succincts, parfois très denses) sera prise en compte pour construire des pages qui restent esthétiques et équilibrées. Nous privilégions **une esthétique sobre, sur mesure, où la typographie et les contrastes assurent une hiérarchie claire**, afin d’éviter les ruptures visuelles dans l’annuaire. L’arbre des compétences, qui constitue un outil central de navigation et de recherche, fera l’objet d’une refonte spécifique : nous souhaitons en améliorer la lisibilité et l’exploration, en le rendant plus visible et plus interactif, tout en veillant à une utilisation fluide sur mobile comme sur ordinateur. Notre objectif est de concevoir une interface qui mette en valeur les compétences et facilite réellement la recherche dans l’annuaire, sans surcharge graphique inutile.
 
-**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et JavaScript vanilla**, complétés si nécessaire par une librairie légère comme Alpine.js pour la recherche réactive. Cette sobriété garantit la compatibilité avec la licence libre du projet, facilite la maintenance et limite l’empreinte écologique du site. Nous travaillerons à partir de l’existant, que ce soit le code ou l’image Docker déjà utilisée, et nous engageons à adapter nos développements à vos contraintes sans surcomplexification. En fonction de vos préférence, nous travaillerons soit sur une branch du répôt Git existant soit sur une copie de ce repo.
+**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et JavaScript vanilla**, complétés si nécessaire par une librairie légère comme Alpine.js pour la recherche réactive. Cette sobriété garantit la compatibilité avec la licence libre du projet, facilite la maintenance et limite l’empreinte écologique du site. Nous travaillerons à partir de l’existant, que ce soit le code ou l’image Docker déjà utilisée, et nous engageons à adapter nos développements à vos contraintes sans surcomplexification. En fonction de vos préférence, nous travaillerons soit sur une branch du dépôt Git existant soit sur une copie de ce repo.
 
 Notre façon de travailler repose sur des **allers-retours réguliers** avec vous : nous définirons des étapes intermédiaires pour valider les choix au fur et à mesure, plutôt que de tout livrer en une fois. Cela permet d’ajuster le projet en fonction de vos retours et des contraintes qui pourraient émerger. 
 
@@ -13,7 +13,7 @@ Notre force réside dans la complémentarité de nos profils : designers et&nbsp
 
 ### Les forces de notre proposition
 
-- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet d’adopter une « mentalité wev » dès le maquettage. Elle garantie la faisabilité technique du design, la fidélité des maquettes par rapport au résultat final, réduit les allers-retours entre design et développement et accélère nettement l’intégration.
+- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet d’adopter une « mentalité web » dès le maquettage. Elle garantit la faisabilité technique du design, la fidélité des maquettes par rapport au résultat final, réduit les allers-retours entre design et développement et accélère nettement l’intégration.
 - **Un travail mené au plus près du code existant**, afin de faciliter l’intégration de nos développements, d’assurer la continuité technique et de favoriser des échanges simples et efficaces avec vous.
-- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utlisation de variable fonts et des fallback bien pensé. Bref, une attention constante à la performance et à la sobriété des ressources.
+- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utilisation de variable fonts et des fallback bien pensés. Bref, une attention constante à la performance et à la sobriété des ressources.
 - **Une refonte graphique pensée autour de l’arbre des compétences**, conçu comme un élément central et progressif de navigation : il sera placé visuellement à proximité du moteur de recherche sur desktop, déployé en&nbsp;accordéon sur mobile, et enrichi de fonctions de multi-filtrage. <br>Selon la pertinence, un fil d’Ariane (breadcrumb) pour contextualiser <br>les profils affichés.

src/planning.md

@@ -11,8 +11,8 @@
 - Semaine 2–3 (20–31 oct.) : Proposition d’identité sur maquette HTML/CSS statique (1 page type), avec UI arbre de compétences. Inclus palette de couleur + proposition logo
 - **4 novembre : validation de l’identité proposée**
 - Semaine 4–6 (3–21 nov.) : Développement front avec sprints
-    - Sprint 1 — Copie du dèpôt, pipeline parallèle, audit HTML, mise en place SASS
+    - Sprint 1 — Copie du dépôt, pipeline parallèle, audit HTML, mise en place SASS
-    - Sprint 2 — Intégration arbre de compétence, développement de la page d’acceuil et de la liste filtrables
+    - Sprint 2 — Intégration arbre de compétence, développement de la page d’accueil et de la liste filtrables
     - Sprint 3 — Développement et intégration des pages individuelles et des pages de contenus
     - Sprint 4 — Recherche plein texte réactive et affinement de l’affichage filtrage multi-sélection
 - Semaine 7 (24–28 nov.) : Révisions UI et petits ajustements. Validation définitive du logo.

src/portfolio-1img/actuel-inactuel.md

@@ -20,7 +20,7 @@ Plateforme pour une critique des arts et des techniques.
 </dl>
 <dl>
 <dt>Prestation(s)</dt>
-<dd>Design, éveloppement full-stack</dd>
+<dd>Design et développement full-stack</dd>
 </dl>
 <dl>
 <dt>Date</dt>

src/portfolio-1img/design-to-pack.md

@@ -1,6 +1,6 @@
 # Design to Pack
 
-Plateforme complète de gestion de projets de création de flacons de parfum. L'interface permet de collaborer du brief aux produits finis, en passant par les vue 3D interactives.
+Plateforme complète de gestion de projets de création de flacons de parfum. L'interface permet de collaborer du brief aux produits finis, en passant par les vues 3D interactives.
 
 ![.](images/design-to-pack.png)
 

src/portfolio-1img/gms.md

@@ -20,7 +20,7 @@ Back-office sur-mesure dédié à la conception et à la planification de partie
 </dl>
 <dl>
 <dt>Prestation(s)</dt>
-<dd>Design et développement fullstacket</dd>
+<dd>Design et développement full-stack</dd>
 </dl>
 <dl>
 <dt>Date</dt>

src/portfolio-1img/heroines.md

@@ -24,7 +24,7 @@ Publication du groupe de recherche de La Fémis à propos de la figure du héros
 </dl>
 <!-- <dl>
 <dt>Partenaire(s)</dt>
-<dd>en collaboration avec Benjamin Benjamin Gremillon et l’éauipe du médialab</dd>
+<dd>en collaboration avec Benjamin Benjamin Gremillon et l’équipe du médialab</dd>
 </dl> -->
 <dl>
 <dt>Date</dt>

src/portfolio-1img/medialab.md

@@ -1,6 +1,6 @@
 # médialab
 
-Laboratoire interdisplinaire qui interroge les relations entre le numérique et nos sociétés.
+Laboratoire interdisciplinaire qui interroge les relations entre le numérique et nos sociétés. Un site web sans images et sans Javascript.
 
 ![.](images/medialab.png)
 

src/portfolio-1img/wysiwyg.md

@@ -1,6 +1,6 @@
 # WYSIWYG
 
-Projet de recherche l’évolution des logiciels de graphisme en Suisse et en France (1980 - aujourd'hui)
+Projet de recherche sur l’évolution des logiciels de graphisme en Suisse et en France (1980 - aujourd'hui)
 
 ![.](images/wysiwyg.png)