studio-variable/basic-portfolio_web-to-print
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: studio-variable:main
Branches Tags
studio-variable:main
studio-variable:2026-ceramiq
studio-variable:2025-direction-6e
studio-variable:2025-resin
..
compare: studio-variable:2025-resin
Branches Tags
studio-variable:main
studio-variable:2026-ceramiq
studio-variable:2025-direction-6e
studio-variable:2025-resin

No commits in common. "main" and "2025-resin" have entirely different histories.
main ... 2025-resin

31 changed files with 471 additions and 33782 deletions
Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -1,15 +1,5 @@
# Portfolio basique, studio variable
## Contenus
Les contenus sont à ajouter/modifier dans 'src'.
- `meta.yaml` → métadonnées (nom projet, client, date)
- `file.yaml` → les fichiers markdown à ajouter au PDF, dans l’ordre
## Générer le PDF
HTML paged.js

33251
assets/paged.polyfill.js
View file

File diff suppressed because it is too large Load diff

2
assets/style.css
View file

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

2
assets/template.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$title$</title>
<script src="/assets/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="assets/style.css">

BIN
images/TMNLab.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 470 KiB

BIN
images/design-to-pack.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 139 KiB

BIN
images/flaash-thematiques.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2 MiB

BIN
images/gms-analytics.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 445 KiB

BIN
images/gms.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 465 KiB

BIN
images/resin.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 640 KiB

BIN
images/studio-variable_Adrien_small.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
images/studio-variable_Julie_small.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 212 KiB

746
index.html
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio Variable</title>
<script src="/assets/paged.polyfill.js"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="assets/style.css">
@ -16,18 +16,18 @@
<body>
<aside class="infos">
<p>Portfolio CERAMIQ+</p>
<p>2 février 2026</p>
<p>contact@studio-variable.com</p>
<p>Proposition RésIn</p>
<p>6 octobre 2025</p>
<p>contact@studio-varible.com</p>
</aside>
<header>
<h1>Studio Variable</h1>
<h2>Design × code | studio-variable.com</h2>
<h2>Design × code</h2>
</header>
<footer>
<p><p>Studio Variable – Portfolio CERAMIQ+</p></p>
<p><p>Studio Variable – Proposition RésIn</p></p>
</footer>
@ -48,32 +48,271 @@
et engagés, avec une forte culture du logiciel libre et de l’open
source.</p>
</section>
<section id="note-intention">
<h2 id="note-intention">Note intention</h2>
<p>Notre intervention se concentre sur une double approche, à la
fois graphique et technique, pensée comme un tout cohérent. Nous
concevons le design non pas comme une couche séparée mais comme un
travail mené directement dans le code, afin que chaque choix
esthétique s’accompagne d’une réflexion technique et ergonomique.
Les premiers prototypes seront donc réalisés en HTML et CSS, pour
permettre de valider rapidement des maquettes fonctionnelles,
accessibles et déjà proches de la version finale. Cette méthode
réduit les écarts entre intention et réalisation, et permet
d’intégrer dès le départ nos principes d’écoconception et
d’accessibilité.</p>
<p><strong>Sur le plan graphique</strong>, 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 <strong>une esthétique sobre, sur mesure, où la
typographie et les contrastes assurent une hiérarchie
claire</strong>, 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.</p>
<p><strong>Sur le plan technique</strong>, nous proposons une
architecture simple : <strong>HTML, SCSS et JavaScript
vanilla</strong>, 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.</p>
<p>Notre façon de travailler repose sur des <strong>allers-retours
réguliers</strong> 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.</p>
<p>Notre force réside dans la complémentarité de nos profils :
designers et développeur·ses à la fois, nous avons l’habitude de
traverser les deux champs de compétences et de <strong>faire
dialoguer les logiques formelles et techniques</strong>. En tant que
studio, nous défendons une approche sur-mesure, attentive aux usages
concrets, à la sobriété des moyens employés et au respect de la vie
privée. Cette philosophie guidera l’ensemble de notre intervention :
un site léger, <br>lisible et durable, au service du réseau
RésIn.</p>
<h3 id="les-forces-de-notre-proposition">Les forces de notre
proposition</h3>
<ul>
<li><strong>Des maquettes directement codées en HTML et
CSS</strong>, 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.</li>
<li><strong>Un travail mené au plus près du code existant</strong>,
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.</li>
<li><strong>Une démarche d’écoconception et d’accessibilité
assumée</strong>, 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.</li>
<li><strong>Une refonte graphique pensée autour de l’arbre des
compétences</strong>, 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 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.</li>
</ul>
</section>
<section id="devis">
<h2 id="devis">Devis</h2>
<p>→ Taux journalier: 800€ HT</p>
<table>
<colgroup>
<col style="width: 75%" />
<col style="width: 11%" />
<col style="width: 12%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Tâche</strong></th>
<th><strong>Jours</strong></th>
<th><strong>€ (HT)</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>Création du logo</td>
<td>1</td>
<td>800</td>
</tr>
<tr class="even">
<td>Identité visuelle avec mockup d’une page responsive type
(maquettes HTML &amp; CSS)</td>
<td>2</td>
<td>1600</td>
</tr>
<tr class="odd">
<td>UI arbre de compétences (explorable, filtrage)</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="even">
<td>Développement front-end de toutes les pages responsives</td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Home page</td>
<td>1</td>
<td>800</td>
</tr>
<tr class="even">
<td><span class="indent"></span>→ Pages listes et de tri</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Pages individuelles</td>
<td>1.5</td>
<td>1200</td>
</tr>
<tr class="even">
<td><span class="indent"></span>→ Pages de contenu: présentation,
ressources, etc.</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td><span class="indent"></span>→ Intégration au code existant</td>
<td>30.00%</td>
<td>1080</td>
</tr>
<tr class="even">
<td>Mise en place de la recherche réactive</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td>Révisions UI et petits ajustements</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="even">
<td>Tests cross-device, optimisation HTML/CSS/JS et
accessibilité</td>
<td>0.5</td>
<td>400</td>
</tr>
<tr class="odd">
<td>Gestion de projet</td>
<td>10.00%</td>
<td>948</td>
</tr>
</tbody>
</table>
<div id="total">
<table>
<thead>
<tr class="header">
<th>Sous total HT</th>
<th>10428</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>TVA 20 %</td>
<td>2085.6</td>
</tr>
<tr class="even">
<td>Total TTC</td>
<td>12513.6</td>
</tr>
</tbody>
</table>
</div>
<p>Note : Si votre structure ne récupère pas la TVA et que cela
constitue une contrainte budgétaire, nous vous invitons à nous en
faire part afin d’en discuter.</p>
</section>
<section id="planning">
<h2 id="planning-phases">Planning &amp; phases</h2>
<ul>
<li>Démarrage : <strong>dès sélection</strong> (idéalement semaine
du 13 octobre 2025).</li>
<li>Rendu final : <strong>8 décembre 2025</strong>.</li>
<li>Mode : itérations de 1 à 2 semaines (sprints courts).</li>
</ul>
<h3 id="phases">Phases</h3>
<ul>
<li>Semaine 1 (13–17 oct.) : Échange pour le démarrage du projet,
accès API</li>
<li>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</li>
<li><strong>4 novembre : validation de l’identité
proposée</strong></li>
<li>Semaine 4–6 (3–21 nov.) : Développement front avec sprints
<ul>
<li>Sprint 1 — Copie du dèpôt, pipeline parallèle, audit HTML, mise
en place SASS</li>
<li>Sprint 2 — Intégration arbre de compétence, développement de la
page d’acceuil et de la liste filtrables</li>
<li>Sprint 3 — Développement et intégration des pages individuelles
et des pages de contenus</li>
<li>Sprint 4 — Recherche plein texte réactive et affinement de
l’affichage filtrage multi-sélection</li>
</ul></li>
<li>Semaine 7 (24–28 nov.) : Révisions UI et petits ajustements.
Validation définitive du logo.</li>
<li>Semaine 8 (1–5 déc.) : Tests &amp; optimisation.</li>
<li><strong>Livraison finale</strong> : au plus tard <strong>8
décembre 2025</strong>.</li>
</ul>
</section>
<section id="livrables">
<h2 id="livrables">Livrables</h2>
<ul>
<li>Copie du dépôt GitHub public (AGPLv3) avec : code,
Dockerfile</li>
<li>Pack logo (.svg / .png multi-résolution).</li>
<li>Maquettes codées (HTML/SCSS) si demandées</li>
</ul>
</section>
<section id="equipe">
<h2 id="équipe">Équipe</h2>
<div class="people">
<figure>
<img src="images/studio-variable_Julie_small.png" alt="." />
<img src="images/studio-variable_Julie.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="julie-blanc">Julie Blanc</h1>
<h1 id="julie-blanc-chef-de-projet">Julie Blanc, chef de projet</h1>
<p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera
le <strong>design</strong> et le <strong>développement
front-end</strong> du projet.</p>
la chefferie de projet, le <strong>design</strong> et le
<strong>développement front-end</strong>.</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 technologies
du web par les designers graphiques.</p>
Sa thèse, soutenue en 2023, porte sur l’utilisation des
techonologies du web par les designers graphique.</p>
</div>
<div class="people">
<figure>
<img src="images/studio-variable_Adrien_small.png" alt="." />
<img src="images/studio-variable_Adrien.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<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 back-end et la maintenance</strong> du
projet.</p>
back-office et d’interactions front-end, Adrien apportera son appui
pour garantir une <strong>intégration harmonieuse</strong> dans
l’architecture et l’écosystème technique existants.</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
à Paris 1.</p>
@ -82,13 +321,62 @@
<section id="portfolio-introduction" class="portfolio-group">
<h2 id="sélection-de-projets">Sélection de projets</h2>
</section>
<section id="wysiwyg" class="portfolio-group">
<h1 id="wysiwyg">WYSIWYG</h1>
<p>Projet de recherche l’évolution des logiciels de graphisme en
Suisse et en France (1980 - aujourd’hui)</p>
<figure>
<img src="images/wysiwyg.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://wysiwyg.ch/" target="_blank">wysiwyg.ch</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
HEAD – Genève, Haute école d’art et de design
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="chromobase" class="portfolio-group">
<h1 id="chromobase">Chromobase</h1>
<p><strong>Base de données</strong> du projet ERC Chromotope qui
explore l’impact culturel de l’apparition de la couleur dans
l’industrie dans les années 1850. Comprend des
<strong>fonctionnalités avancées de navigation, recherche et tri des
contenus</strong>.</p>
<p>Base de données du projet ERC Chromotope qui explore l’impact
culturel de l’apparition de la couleur dans l’industrie dans les
années 1850.</p>
<figure>
<img src="images/chromobase.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -144,277 +432,10 @@
</dl>
</div>
</section>
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau d’ingénieur·es dans la recherche, avec
<strong>système de filtres croisés</strong>.</p>
<figure>
<img src="images/resin.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
médialab, SciencesPo
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement front-end
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</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.jpg" 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="gms" class="portfolio-group">
<h1 id="game-management-system">Game Management System</h1>
<p>Plateforme 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="tmn-lab" class="portfolio-group">
<h1 id="tmn-lab-état-des-lieux-du-numérique-2021">TMN Lab, État des
lieux du numérique 2021</h1>
<p>Outil pour présenter les études du TMNlab avec système de
collecte des favoris et d’impression à la demande.</p>
<figure>
<img src="images/TMNlab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="hhttps://www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021" target="_blank">/www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
TMNlab
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Praticable
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2021
</dd>
</dl>
</div>
</section>
<section id="wysiwyg" class="portfolio-group">
<h1 id="wysiwyg">WYSIWYG</h1>
<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="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://wysiwyg.ch/" target="_blank">wysiwyg.ch</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
HEAD – Genève, Haute école d’art et de design
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</section>
<section id="medialab" class="portfolio-group">
<h1 id="médialab">médialab</h1>
<p>Laboratoire interdisciplinaire qui interroge les relations entre
le numérique et nos sociétés. Un site web sans images et sans
Javascript.</p>
<p>Laboratoire interdisplinaire qui interroge les relations entre le
numérique et nos sociétés.</p>
<figure>
<img src="images/medialab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -473,9 +494,8 @@
</section>
<section id="cultures-visuelles" class="portfolio-group">
<h1 id="cultures-visuelles">Cultures visuelles</h1>
<p>Plateforme collaborative pour le programme de recherche,
intégrant une interface graphique en front-end pour l’édition du
contenu.</p>
<p>Plateforme pour le programme de recherche, intégrant une
interface graphique an front-end pour l’édition du contenu.</p>
<figure>
<img src="images/cultures-visuelles.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -510,7 +530,7 @@
Prestation(s)
</dt>
<dd>
Design et développement full-stack
Design, éveloppement full-stack
</dd>
</dl>
<dl>
@ -531,11 +551,11 @@
</dl>
</div>
</section>
<section id="flaash" class="portfolio-group">
<h1 id="decarb.one">Decarb.one</h1>
<p>Site de la revue d’anticipation Flaash.</p>
<section id="actuel-inactuel" class="portfolio-group">
<h1 id="actuel-inactuel">actuel-inactuel</h1>
<p>Plateforme pour une critique des arts et des techniques.</p>
<figure>
<img src="images/flaash-thematiques.png" alt="." />
<img src="images/actuel-inactuel.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
@ -544,7 +564,7 @@
URL
</dt>
<dd>
<a href="https://www.flaash.fr" target="_blank">flaash.fr</a>
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.fr</a>
</dd>
</dl>
<dl>
@ -552,7 +572,7 @@
Secteur
</dt>
<dd>
Culture
Recherche
</dd>
</dl>
<dl>
@ -560,7 +580,7 @@
Client
</dt>
<dd>
Revue Flaash
Association époque
</dd>
</dl>
<dl>
@ -568,15 +588,7 @@
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Studio Plastac
Design, éveloppement full-stack
</dd>
</dl>
<dl>
@ -589,6 +601,61 @@
</dl>
</div>
</section>
<section id="heroines" class="portfolio-group">
<h1 id="héroïnes">Héro·ïne·s</h1>
<p>Publication du groupe de recherche de La Fémis à propos de la
figure du héros dans les œuvres et pratiques artistiques</p>
<figure>
<img src="images/repenser-les-heros.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://repenserlesheros.femis.fr/" target="_blank">repenserlesheros.femis.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
groupe de recherche de La Fémis / SACRe, PSL
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<!-- <dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Benjamin Benjamin Gremillon et l’éauipe du médialab</dd>
</dl> -->
<dl>
<dt>
Date
</dt>
<dd>
2021
</dd>
</dl>
</div>
</section>
<section id="acau" class="portfolio-group">
<h1 id="acau">ACAU</h1>
<p>Site vitrine pour l’Agence Coopérative Architectes
@ -648,6 +715,65 @@
</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
communication, decarb.one qui raconte un monde décarboné.</p>
<figure>
<img src="images/decarb-one.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://decarb.one/" target="_blank">decarb.one</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Communication
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
decarb.one
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Praticable
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2022
</dd>
</dl>
</div>
</section>
<section id="details">
<p>STUDIO VARIABLE<br />
SAS, société par actions simplifiée au capital social de 1 200,00

17
src/approche-studio.md
View file

@ -1,17 +0,0 @@
## Notre studio et son approche
Nos interventions se concentrent sur une double approche, à la fois graphique et technique, pensée comme un tout cohérent. Nous concevons le design non pas comme une couche séparée mais comme un travail mené directement dans le&nbsp;code, afin que chaque choix esthétique s’accompagne d’une réflexion technique et ergonomique. Les premiers prototypes seront donc réalisés en HTML et CSS, pour permettre de valider rapidement des maquettes fonctionnelles, accessibles et déjà proches de la version finale. Cette méthode réduit les écarts entre intention et réalisation, et permet d’intégrer dès le départ nos principes d’écoconception et d’accessibilité.
copie de ce repo.
Notre façon de travailler repose sur des **allers-retours réguliers** avec vous. Nous&nbsp;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&nbsp;fonction de&nbsp;vos retours et des contraintes qui pourraient émerger.
Notre force réside dans la complémentarité de nos profils : designers et&nbsp;développeur·ses à la fois, nous avons l’habitude de traverser les deux champs de&nbsp;compétences et de **faire dialoguer les logiques formelles et techniques**. En&nbsp;tant que studio, nous défendons une approche sur-mesure, attentive aux usages concrets, à la sobriété des moyens employés et au respect de la vie privée. Cette&nbsp;philosophie guidera l’ensemble de notre intervention : un site léger, <br>lisible et durable.
### 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é web » dès le maquettage. Elle garantit la&nbsp;faisabilité technique du design, la&nbsp;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&nbsp;faciliter l’intégration de&nbsp;nos développements, d’assurer la continuité technique et de favoriser des&nbsp;é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’utilisation de variable fonts et&nbsp;des fallback bien pensés. Bref, une attention constante à la performance et&nbsp;à&nbsp;la&nbsp;sobriété des ressources.

13
src/equipe.md
View file

@ -2,23 +2,24 @@
<div class="people">
![.](images/studio-variable_Julie_small.png)
![.](images/studio-variable_Julie.jpg)
# Julie Blanc
# Julie Blanc, chef de projet
Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera le **design** et le **développement front-end** du projet.
Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera la chefferie de projet, le **design** et le **développement front-end**.
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.
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.
</div>
<div class="people">
![.](images/studio-variable_Adrien_small.png)
![.](images/studio-variable_Adrien.jpg)
# 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 back-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 apportera son appui pour garantir une **intégration harmonieuse** dans l’architecture et l’écosystème technique existants.
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.

23
src/files.yaml
View file

@ -1,22 +1,17 @@
input-files:
- src/studio-variable.md
# - src/note-intention.md
# - src/devis.md
# - src/planning.md
# - src/livrables.md
- src/note-intention.md
- src/devis.md
- src/planning.md
- src/livrables.md
- src/equipe.md
- src/portfolio-introduction.md
- src/portfolio-1img/chromobase.md
- src/portfolio-1img/resin.md
- src/portfolio-1img/design-to-pack.md
- src/portfolio-1img/gms.md
- src/portfolio-1img/tmn-lab.md
- src/portfolio-1img/wysiwyg.md
- src/portfolio-1img/chromobase.md
- src/portfolio-1img/medialab.md
- src/portfolio-1img/cultures-visuelles.md
- src/portfolio-1img/flaash.md
# - src/portfolio-1img/actuel-inactuel.md
#- src/portfolio-1img/heroines.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/heroines.md
- src/portfolio-1img/acau.md
# - src/portfolio-1img/decarb-one.md
- src/details.md
- src/portfolio-1img/decarb-one.md
- src/details.md

10
src/meta.yaml
View file

@ -1,8 +1,8 @@
---
title: "Studio Variable"
baseline: "Design × code | studio-variable.com"
client: "Portfolio CERAMIQ+"
date: "2 février 2026"
contact: "contact@studio-variable.com"
footer: "Studio Variable – Portfolio CERAMIQ+"
baseline: "Design × code"
client: "Proposition RésIn"
date: "6 octobre 2025"
contact: "contact@studio-varible.com"
footer: "Studio Variable – Proposition RésIn"
---

6
src/note-intention.md
View file

@ -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&nbsp;à&nbsp;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&nbsp;esthétique sobre, sur mesure, où la typographie et les contrastes assurent une&nbsp;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&nbsp;recherche dans l’annuaire, sans surcharge graphique inutile.
**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et&nbsp;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.
**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et&nbsp;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.
Notre façon de travailler repose sur des **allers-retours réguliers** avec vous : nous&nbsp;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&nbsp;fonction de&nbsp;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é web » dès le maquettage. Elle garantit la&nbsp;faisabilité technique du design, la&nbsp;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é wev » dès le maquettage. Elle garantie la&nbsp;faisabilité technique du design, la&nbsp;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&nbsp;faciliter l’intégration de&nbsp;nos développements, d’assurer la continuité technique et de favoriser des&nbsp;é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’utilisation de variable fonts et&nbsp;des fallback bien pensés. Bref, une attention constante à la performance et&nbsp;à&nbsp;la&nbsp;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’utlisation de variable fonts et&nbsp;des fallback bien pensé. Bref, une attention constante à la performance et&nbsp;à&nbsp;la&nbsp;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.

4
src/planning.md
View file

@ -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 2 — Intégration arbre de compétence, développement de la page d’accueil et de la liste filtrables
- 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 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.

2
src/portfolio-1img/actuel-inactuel.md
View file

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

2
src/portfolio-1img/chromobase.md
View file

@ -1,6 +1,6 @@
# Chromobase
**Base de données** du projet ERC Chromotope qui explore l'impact culturel de l’apparition de la couleur dans l’industrie dans les années 1850. Comprend des **fonctionnalités avancées de navigation, recherche et tri des contenus**.
Base de données du projet ERC Chromotope qui explore l'impact culturel de l’apparition de la couleur dans l’industrie dans les années 1850.
![.](images/chromobase.png)

4
src/portfolio-1img/cultures-visuelles.md
View file

@ -1,6 +1,6 @@
# Cultures visuelles
Plateforme collaborative pour le programme de recherche, intégrant une interface graphique en front-end pour l’édition du contenu.
Plateforme pour le programme de recherche, intégrant une interface graphique an front-end pour l’édition du contenu.
![.](images/cultures-visuelles.png)
@ -20,7 +20,7 @@ Plateforme collaborative pour le programme de recherche, intégrant une interfac
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
<dd>Design, éveloppement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>

2
src/portfolio-1img/decarb-one.md
View file

@ -1,6 +1,6 @@
# Decarb.one
Site **éco-conçu** pour une agence de relations presse et de communication responsable.
Site vitrine pour l’agence de relations presse et de communication, decarb.one qui raconte un monde décarboné.
![.](images/decarb-one.png)

29
src/portfolio-1img/design-to-pack.md
View file

@ -1,29 +0,0 @@
# 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 **vues 3D interactives**.
![.](images/design-to-pack.jpg)
<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>

33
src/portfolio-1img/flaash.md
View file

@ -1,33 +0,0 @@
# Decarb.one
Site de la revue d'anticipation Flaash.
![.](images/flaash-thematiques.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://www.flaash.fr" target="_blank">flaash.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Culture</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>Revue Flaash</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Développement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Studio Plastac</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2024</dd>
</dl>
</div>

29
src/portfolio-1img/gms.md
View file

@ -1,29 +0,0 @@
# Game Management System
Plateforme sur-mesure dédié à la conception et à la planification de parties de divers jeux en ligne.
![.](images/gms.png)
<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>[World Game](https://www.world.game/)</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>

2
src/portfolio-1img/heroines.md
View file

@ -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’équipe du médialab</dd>
<dd>en collaboration avec Benjamin Benjamin Gremillon et l’éauipe du médialab</dd>
</dl> -->
<dl>
<dt>Date</dt>

2
src/portfolio-1img/medialab.md
View file

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

29
src/portfolio-1img/resin.md
View file

@ -1,29 +0,0 @@
# RésIn
Plateforme pour un réseau d’ingénieur·es dans la recherche, avec **système de filtres croisés**.
![.](images/resin.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://resin.medialab.sciences-po.fr/" target="_blank">resin.medialab.sciences-po.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Recherche</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>médialab, SciencesPo</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design, développement front-end</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2025</dd>
</dl>
</div>

33
src/portfolio-1img/tmn-lab.md
View file

@ -1,33 +0,0 @@
# TMN Lab, État des lieux du numérique 2021
Outil pour présenter les études du TMNlab avec système de collecte des favoris et d’impression à la demande.
![.](images/TMNlab.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="hhttps://www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021" target="_blank">/www.tmnlab.com/etudes/etat-des-lieux-du-numerique-2021</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Recherche</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>TMNlab</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Praticable</dd>
</dl>
<dl>
<dt>Date</dt>
<dd >2021</dd>
</dl>
</div>

2
src/portfolio-1img/wysiwyg.md
View file

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