Compare commits

..

No commits in common. "main" and "2025-direction-6e" have entirely different histories.

46 changed files with 208 additions and 837 deletions

View file

@ -1,3 +0,0 @@
{
"liveServer.settings.port": 5501
}

View file

@ -306,7 +306,7 @@ footer{
grid-column-gap: 2em;
grid-template-rows: auto auto 1fr;
break-inside: avoid;
margin-bottom: 2.8em;
margin-bottom: 3em;
}
.portfolio-group figure{
@ -314,7 +314,7 @@ footer{
grid-row: 1/4;
margin: 0;
border: 1px solid #cfcfcf;
aspect-ratio: 8/5;
aspect-ratio: 5/3;
overflow: hidden;
}
@ -362,7 +362,3 @@ footer{
}
#wysiwyg img{
object-position: 0px 0px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 7.1 MiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 493 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 728 KiB

After

Width:  |  Height:  |  Size: 2.8 MiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 707 KiB

After

Width:  |  Height:  |  Size: 2.2 MiB

Before After
Before After

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 439 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 445 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 465 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 708 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 134 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 529 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 144 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 487 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2 MiB

View file

@ -16,18 +16,18 @@
<body>
<aside class="infos">
<p>Portfolio CEAAC</p>
<p>12 février 2026</p>
<p>Proposition Direction 6ème!</p>
<p>29 décembre 2025</p>
<p>contact@studio-variable.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 CEAAC</p></p>
<p><p>Studio Variable Proposition Direction 6ème!</p></p>
</footer>
@ -43,9 +43,10 @@
développe une approche formelle et technique qui concilie
<strong>ergonomie, sobriété, accessibilité et respect de la vie
privée</strong>.</p>
<!-- Nous sommes spécialisés dans la publication à source unique en **web-to-print**. -->
<p>Nous privilégions les projets ouverts et engagés, avec une forte
culture du ogiciel libre et de lopen source.</p>
<p>Nous sommes spécialisés dans la publication à source unique en
<strong>web-to-print</strong>. Nous privilégions les projets ouverts
et engagés, avec une forte culture du logiciel libre et de lopen
source.</p>
</section>
<section id="equipe">
<h2 id="équipe">Équipe</h2>
@ -74,7 +75,7 @@
<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 à lENSCi et
le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et
à Paris 1.</p>
</div>
</section>
@ -84,7 +85,7 @@
<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 - aujourdhui).</p>
Suisse et en France (1980 - aujourdhui)</p>
<figure>
<img src="images/wysiwyg.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -119,7 +120,7 @@
Prestation(s)
</dt>
<dd>
Design et développement full-stack
Design, développement full-stack
</dd>
</dl>
<dl>
@ -132,250 +133,11 @@
</dl>
</div>
</section>
<section id="acau" class="portfolio-group">
<h1 id="acau">ACAU</h1>
<p>Site vitrine pour lAgence 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="esaj" class="portfolio-group">
<h1 id="esaj">ESAJ</h1>
<p>Site vitrine pour lÉcole supérieure dArchitecture des Jardins,
avec programmes des formations, formulaire de contact et
actualités.</p>
<figure>
<img src="images/esaj.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.esaj.asso.fr/" target="_blank">www.esaj.asso.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Formation
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
École supérieure dArchitecture des Jardins
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Lola Duval (design)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</dl>
</div>
</section>
<section id="ntbesancon" class="portfolio-group">
<h1 id="nouveau-théâtre-de-besançon">Nouveau théâtre de
Besançon</h1>
<p>Site web, avec calendrier et billetterie intégrée.</p>
<figure>
<img src="images/ntbesancon.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://ntbesancon.fr/" target="_blank">ntbesancon.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Culture
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Nouveau théâtre de Besançon
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Studio Plastac (design)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</dl>
</div>
</section>
<section id="timelure" class="portfolio-group">
<h1 id="timelure">Timelure</h1>
<p>Archives des 70 ans de programmation des Rencontres de Lure,
organisées sous forme de chronologie.</p>
<figure>
<img src="images/timelure-responsive.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://chronologie.delure.org/" target="_blank">chronologie.delure.org</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Culturel, Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Rencontres Internationales de Lure
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
Julien Bidoret, Lola Duval et léquipe des Rencontres de Lure
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2022
</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 limpact culturel de lapparition de la couleur dans
lindustrie 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 limpact
culturel de lapparition de la couleur dans lindustrie dans les
années 1850.</p>
<figure>
<img src="images/chromobase.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -410,7 +172,7 @@
Prestation(s)
</dt>
<dd>
Design et développement front-end
Design, front-end
</dd>
</dl>
<dl>
@ -431,57 +193,6 @@
</dl>
</div>
</section>
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau dingé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 et développement front-end
</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
@ -521,7 +232,7 @@
Prestation(s)
</dt>
<dd>
Design et développement front-end
Design, développement front-end
</dd>
</dl>
<dl>
@ -529,7 +240,8 @@
Partenaire(s)
</dt>
<dd>
en collaboration avec Benjamin Gremillon et léquipe du médialab
en collaboration avec Benjamin Benjamin Gremillon et léquipe du
médialab
</dd>
</dl>
<dl>
@ -542,11 +254,165 @@
</dl>
</div>
</section>
<section id="resin" class="portfolio-group">
<h1 id="résin">RésIn</h1>
<p>Plateforme pour un réseau dingénieur·es dans la recherche, avec
système de recherche par arbre de compétences</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="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. Linterface 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="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 en front-end pour lédition du contenu.</p>
<figure>
<img src="images/cultures-visuelles.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
@ -652,114 +518,6 @@
</dl>
</div>
</section>
<section id="flaash" class="portfolio-group">
<h1 id="flaash">Flaash</h1>
<p>Site de la revue danticipation Flaash.</p>
<figure>
<img src="images/flaash-thematiques.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<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>
Studio Plastac (design)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</dl>
</div>
</section>
<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/actuel-inactuel.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://actuel-inactuel.fr/" target="_blank">actuel-inactuel.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Association époque
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2024
</dd>
</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
@ -798,7 +556,7 @@
Prestation(s)
</dt>
<dd>
Design et développement full-stack
Design, développement full-stack
</dd>
</dl>
<!-- <dl>
@ -817,8 +575,8 @@
</section>
<section id="decarb-one" class="portfolio-group">
<h1 id="decarb.one">Decarb.one</h1>
<p>Site <strong>éco-conçu</strong> pour une agence de relations
presse et de communication responsable.</p>
<p>Site vitrine pour lagence 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>
@ -874,170 +632,6 @@
</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. Linterface permet de collaborer du brief aux produits
finis, en passant par les <strong>vues 3D interactives</strong>.</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="gms" class="portfolio-group">
<h1 id="game-management-system">Game Management System</h1>
<p>Plateforme sur-mesure dédiée à 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 dimpression à 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="https://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="details">
<p>STUDIO VARIABLE<br />
SAS, société par actions simplifiée au capital social de 1 200,00

View file

@ -1,15 +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 saccompagne dune 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 dintégrer dès le départ nos principes décoconception et daccessibilité.
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 dajuster 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 lhabitude 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 lensemble 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 dadopter 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 lintégration.
- **Un travail mené au plus près du code existant**, afin de&nbsp;faciliter lintégration de&nbsp;nos développements, dassurer la continuité technique et de favoriser des&nbsp;échanges simples et efficaces avec vous.
- **Une démarche décoconception et daccessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTMLbien construit répondant aux normes daccessibilité, lutilisation 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.

View file

@ -20,9 +20,9 @@ Julie est designer, développeuse et chercheuse. Elle a co-fondé le studio Vari
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&nbsp;a&nbsp;co-fondé le studio Variable. Il enseigne à lENSCi et à Paris 1.
Adrien étudie, enseigne et pratique la philosophie, le design et le code. Il a co-fondé le studio Variable. Il enseigne à lENSCi et à Paris 1.
</div>

View file

@ -7,20 +7,14 @@ input-files:
- src/equipe.md
- src/portfolio-introduction.md
- src/portfolio-1img/wysiwyg.md
- src/portfolio-1img/acau.md
- src/portfolio-1img/esaj.md
- src/portfolio-1img/ntbesancon.md
- src/portfolio-1img/timelure.md
- src/portfolio-1img/chromobase.md
- src/portfolio-1img/resin.md
- src/portfolio-1img/medialab.md
- src/portfolio-1img/resin.md
- src/portfolio-1img/gms.md
- src/portfolio-1img/design-to-pack.md
- src/portfolio-1img/cultures-visuelles.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/flaash.md
- src/portfolio-1img/actuel-inactuel.md
- src/portfolio-1img/heroines.md
# - src/portfolio-1img/acau.md
- src/portfolio-1img/decarb-one.md
- src/portfolio-1img/design-to-pack.md
- src/portfolio-1img/gms.md
- src/portfolio-1img/tmn-lab.md
- src/details.md
- src/details.md

View file

@ -1,8 +1,8 @@
---
title: "Studio Variable"
baseline: "Design × code | studio-variable.com"
client: "Portfolio CEAAC"
date: "12 février 2026"
baseline: "Design × code"
client: "Proposition Direction 6ème!"
date: "29 décembre 2025"
contact: "contact@studio-variable.com"
footer: "Studio Variable Portfolio CEAAC"
footer: "Studio Variable Proposition Direction 6ème!"
---

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;lharmonisation des contenus. Lhétérogénéité des profils proposés dans lannuaire (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 lannuaire. Larbre des compétences, qui constitue un outil central de navigation et de recherche, fera lobjet dune refonte spécifique : nous souhaitons en améliorer la lisibilité et lexploration, 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 lannuaire, 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 lempreinte écologique du site. Nous travaillerons à partir de lexistant, que ce soit le code ou limage Docker déjà utilisée, et nous engageons à adapter nos développements à vos contraintes sans surcomplexification. En fonction de vos préférences, nous travaillerons soit sur une branche 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 lempreinte écologique du site. Nous travaillerons à partir de lexistant, que ce soit le code ou limage 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&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 dajuster le projet en&nbsp;fonction de&nbsp;vos retours et des contraintes qui pourraient émerger.

View file

@ -7,7 +7,7 @@ Site vitrine pour lAgence Coopérative Architectes Urbanistes.
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr</a>
<dd><a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr/</a>
</dd>
</dl>
<dl>

View file

@ -1,6 +1,6 @@
# Chromobase
**Base de données** du projet ERC Chromotope qui explore l'impact culturel de lapparition de la couleur dans lindustrie 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 lapparition de la couleur dans lindustrie dans les années 1850.
![.](images/chromobase.png)
@ -20,7 +20,7 @@
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement front-end</dd>
<dd>Design, front-end</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>

View file

@ -1,6 +1,6 @@
# Cultures visuelles
Plateforme collaborative pour le programme de recherche, intégrant une&nbsp;interface graphique en front-end pour lédition du contenu.
Plateforme pour le programme de recherche, intégrant une interface graphique en front-end pour lédition du contenu.
![.](images/cultures-visuelles.png)

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 lagence de relations presse et de communication, decarb.one qui raconte un monde décarboné.
![.](images/decarb-one.png)

View file

@ -1,8 +1,8 @@
# 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**.
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)
![.](images/design-to-pack.jpg)
<div class="details">
<dl>

View file

@ -1,33 +0,0 @@
# ESAJ
Site vitrine pour l'École supérieure d'Architecture des Jardins, avec programmes des formations, formulaire de contact et actualités.
![.](images/esaj.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://www.esaj.asso.fr/" target="_blank">www.esaj.asso.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Formation</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>École supérieure d'Architecture des Jardins</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Développement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>Lola Duval (design)</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2024</dd>
</dl>
</div>

View file

@ -1,33 +0,0 @@
# Flaash
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>Studio Plastac (design)</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2024</dd>
</dl>
</div>

View file

@ -1,6 +1,6 @@
# Game Management System
Plateforme sur-mesure dédiée à la conception et à la planification de parties de divers jeux en ligne.
Back-office sur-mesure dédié à la conception et à la planification de parties de divers jeux en ligne.
![.](images/gms.png)

View file

@ -20,7 +20,7 @@ Publication du groupe de recherche de La Fémis à propos de la figure du héros
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
<dd>Design, développement full-stack</dd>
</dl>
<!-- <dl>
<dt>Partenaire(s)</dt>

View file

@ -20,11 +20,11 @@ Laboratoire interdisciplinaire qui interroge les relations entre le numérique e
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement front-end</dd>
<dd>Design, développement front-end</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>en collaboration avec Benjamin Gremillon et léquipe du médialab</dd>
<dd>en collaboration avec Benjamin Benjamin Gremillon et léquipe du médialab</dd>
</dl>
<dl>
<dt>Date</dt>

View file

@ -1,29 +0,0 @@
# Noranim
Site vitrine pour une association professionnelle de la filière cinéma danimation en région Hauts de France. Comprend des pages **évènements et membres filtrables par catégories**.
![.](images/noranim.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://noranim.fr/" target="_blank">noranim.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Culture</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>Noranim</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Développement full-stack</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2025</dd>
</dl>
</div>

View file

@ -1,33 +0,0 @@
# Nouveau théâtre de Besançon
Site web, avec calendrier et billetterie intégrée.
![.](images/ntbesancon.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://ntbesancon.fr/" target="_blank">ntbesancon.fr</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Culture</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>Nouveau théâtre de Besançon</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Développement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>Studio Plastac (design)</dd>
</dl>
<dl>
<dt>Date</dt>
<dd>2024</dd>
</dl>
</div>

View file

@ -1,6 +1,6 @@
# RésIn
Plateforme pour un réseau dingénieur·es dans la recherche, avec **système de filtres croisés**.
Plateforme pour un réseau dingénieur·es dans la recherche, avec système de recherche par arbre de compétences
![.](images/resin.png)
@ -20,7 +20,7 @@ Plateforme pour un réseau dingénieur·es dans la recherche, avec **système
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement front-end</dd>
<dd>Design, développement front-end</dd>
</dl>
<dl>
<dt>Date</dt>

View file

@ -1,33 +0,0 @@
# Timelure
Archives des 70 ans de programmation des Rencontres de Lure, organisées&nbsp;sous forme de chronologie.
![.](images/timelure-responsive.jpg)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://chronologie.delure.org/" target="_blank">chronologie.delure.org</a>
</dd>
</dl>
<dl>
<dt>Secteur</dt>
<dd>Culturel, Recherche</dd>
</dl>
<dl>
<dt>Client</dt>
<dd>Rencontres Internationales de Lure</dd>
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
</dl>
<dl>
<dt>Partenaire(s)</dt>
<dd>Julien Bidoret, Lola Duval et léquipe des Rencontres de Lure</dd>
</dl>
<dl>
<dt>Date</dt>
<dd >2022</dd>
</dl>
</div>

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 dimpression à la demande.
![.](images/TMNlab.png)
<div class="details">
<dl>
<dt>URL</dt>
<dd><a href="https://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>

View file

@ -1,6 +1,6 @@
# WYSIWYG
Projet de recherche sur lévolution des logiciels de graphisme en Suisse et&nbsp;en&nbsp;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)
@ -20,7 +20,7 @@ Projet de recherche sur lévolution des logiciels de graphisme en Suisse et&n
</dl>
<dl>
<dt>Prestation(s)</dt>
<dd>Design et développement full-stack</dd>
<dd>Design, développement full-stack</dd>
</dl>
<dl>
<dt>Date</dt>

View file

@ -2,5 +2,4 @@ Créé en juin 2025 et basé à Paris, Studio Variable conjugue **design graphiq
Fondé par **Julie Blanc** (designer-développeuse et chercheuse en ergonomie) et **Adrien Payet** (designer-développeur issu de la philosophie), Studio Variable développe une approche formelle et technique qui concilie **ergonomie, sobriété, accessibilité et respect de la vie privée**.
<!-- Nous sommes spécialisés dans la publication à source unique en **web-to-print**. -->
Nous privilégions les projets ouverts et engagés, avec une forte culture du&nbsp;ogiciel libre et de lopen source.
Nous sommes spécialisés dans la publication à source unique en **web-to-print**. Nous privilégions les projets ouverts et engagés, avec une forte culture du logiciel libre et de lopen source.