new images
This commit is contained in:
Julie Blanc
parent
2fb4814e41
commit
3dd9a54e2d
37 changed files with 506 additions and 281 deletions
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
|
|
@ -306,7 +306,7 @@ footer{
|
|||
grid-column-gap: 2em;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
break-inside: avoid;
|
||||
margin-bottom: 3em;
|
||||
margin-bottom: 2.8em;
|
||||
}
|
||||
|
||||
.portfolio-group figure{
|
||||
|
|
@ -314,7 +314,7 @@ footer{
|
|||
grid-row: 1/4;
|
||||
margin: 0;
|
||||
border: 1px solid #cfcfcf;
|
||||
aspect-ratio: 5/3;
|
||||
aspect-ratio: 8/5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -362,3 +362,7 @@ footer{
|
|||
}
|
||||
|
||||
|
||||
|
||||
#wysiwyg img{
|
||||
object-position: 0px 0px;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 470 KiB After Width: | Height: | Size: 125 KiB |
BIN
images/acau.png
BIN
images/acau.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.1 MiB After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 493 KiB After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 728 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 707 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
BIN
images/design-to-pack.png
Normal file
BIN
images/design-to-pack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2 MiB After Width: | Height: | Size: 439 KiB |
BIN
images/gms.png
BIN
images/gms.png
Binary file not shown.
|
Before Width: | Height: | Size: 465 KiB After Width: | Height: | Size: 83 KiB |
BIN
images/ntbesancon.png
Normal file
BIN
images/ntbesancon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
images/ntbesancon_calendrier.png
Normal file
BIN
images/ntbesancon_calendrier.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
images/timelure-68.png
Normal file
BIN
images/timelure-68.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
images/timelure-home.png
Normal file
BIN
images/timelure-home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
BIN
images/timelure-responsive.jpg
Normal file
BIN
images/timelure-responsive.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
615
index.html
615
index.html
|
|
@ -16,8 +16,8 @@
|
|||
<body>
|
||||
|
||||
<aside class="infos">
|
||||
<p>Portfolio CERAMIQ+</p>
|
||||
<p>2 février 2026</p>
|
||||
<p>Portfolio CEAAC</p>
|
||||
<p>12 février 2026</p>
|
||||
<p>contact@studio-variable.com</p>
|
||||
</aside>
|
||||
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</header>
|
||||
|
||||
<footer>
|
||||
<p><p>Studio Variable – Portfolio CERAMIQ+</p></p>
|
||||
<p><p>Studio Variable – Portfolio CEAAC</p></p>
|
||||
</footer>
|
||||
|
||||
|
||||
|
|
@ -43,10 +43,9 @@
|
|||
développe une approche formelle et technique qui concilie
|
||||
<strong>ergonomie, sobriété, accessibilité et respect de la vie
|
||||
privée</strong>.</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 l’open
|
||||
source.</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 l’open source.</p>
|
||||
</section>
|
||||
<section id="equipe">
|
||||
<h2 id="équipe">Équipe</h2>
|
||||
|
|
@ -75,13 +74,301 @@
|
|||
<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
|
||||
le code. Il a co-fondé le studio Variable. Il enseigne à l’ENSCi et
|
||||
à Paris 1.</p>
|
||||
</div>
|
||||
</section>
|
||||
<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 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 et développement full-stack
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
Date
|
||||
</dt>
|
||||
<dd>
|
||||
2025
|
||||
</dd>
|
||||
</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="esaj" class="portfolio-group">
|
||||
<h1 id="esaj">ESAJ</h1>
|
||||
<p>Site vitrine pour l’École supérieure d’Architecture 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 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>
|
||||
</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
|
||||
|
|
@ -123,7 +410,7 @@
|
|||
Prestation(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Design, front-end
|
||||
Design et développement front-end
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -182,222 +469,7 @@
|
|||
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
|
||||
Design et développement front-end
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -449,7 +521,7 @@
|
|||
Prestation(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Design, développement front-end
|
||||
Design et développement front-end
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -457,8 +529,7 @@
|
|||
Partenaire(s)
|
||||
</dt>
|
||||
<dd>
|
||||
en collaboration avec Benjamin Benjamin Gremillon et l’équipe du
|
||||
médialab
|
||||
en collaboration avec Benjamin Gremillon et l’équipe du médialab
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -474,7 +545,7 @@
|
|||
<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
|
||||
intégrant une interface graphique en front-end pour l’édition du
|
||||
contenu.</p>
|
||||
<figure>
|
||||
<img src="images/cultures-visuelles.png" alt="." />
|
||||
|
|
@ -531,8 +602,58 @@
|
|||
</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="flaash" class="portfolio-group">
|
||||
<h1 id="decarb.one">Decarb.one</h1>
|
||||
<h1 id="flaash">Flaash</h1>
|
||||
<p>Site de la revue d’anticipation Flaash.</p>
|
||||
<figure>
|
||||
<img src="images/flaash-thematiques.png" alt="." />
|
||||
|
|
@ -576,7 +697,7 @@
|
|||
Partenaire(s)
|
||||
</dt>
|
||||
<dd>
|
||||
en collaboration avec Studio Plastac
|
||||
Studio Plastac (design)
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -589,12 +710,12 @@
|
|||
</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>
|
||||
<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/acau.png" alt="." />
|
||||
<img src="images/repenser-les-heros.png" alt="." />
|
||||
<figcaption aria-hidden="true">.</figcaption>
|
||||
</figure>
|
||||
<div class="details">
|
||||
|
|
@ -603,7 +724,7 @@
|
|||
URL
|
||||
</dt>
|
||||
<dd>
|
||||
<a href="https://www.acau-architectes.fr/" target="_blank">acau-architectes.fr/</a>
|
||||
<a href="https://repenserlesheros.femis.fr/" target="_blank">repenserlesheros.femis.fr</a>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -611,7 +732,7 @@
|
|||
Secteur
|
||||
</dt>
|
||||
<dd>
|
||||
Communication
|
||||
Recherche
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -619,7 +740,7 @@
|
|||
Client
|
||||
</dt>
|
||||
<dd>
|
||||
Agence Coopérative Architectes Urbanistes
|
||||
groupe de recherche de La Fémis / SACRe, PSL
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
|
|
@ -627,23 +748,19 @@
|
|||
Prestation(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Développement full-stack
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>
|
||||
Partenaire(s)
|
||||
</dt>
|
||||
<dd>
|
||||
Plastac (design)
|
||||
Design et développement full-stack
|
||||
</dd>
|
||||
</dl>
|
||||
<!-- <dl>
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>en collaboration avec Benjamin Benjamin Gremillon et l’équipe du médialab</dd>
|
||||
</dl> -->
|
||||
<dl>
|
||||
<dt>
|
||||
Date
|
||||
</dt>
|
||||
<dd>
|
||||
2024
|
||||
2021
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
## 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 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 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.
|
||||
|
||||
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 **faire dialoguer les logiques formelles et techniques**. 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.
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ 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 a co-fondé le studio Variable. Il enseigne à l’ENSCi et à Paris 1.
|
||||
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.
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,17 +6,20 @@ input-files:
|
|||
# - src/livrables.md
|
||||
- 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/design-to-pack.md
|
||||
- src/portfolio-1img/gms.md
|
||||
- src/portfolio-1img/tmn-lab.md
|
||||
- src/portfolio-1img/wysiwyg.md
|
||||
- src/portfolio-1img/medialab.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/heroines.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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "Studio Variable"
|
||||
baseline: "Design × code | studio-variable.com"
|
||||
client: "Portfolio CERAMIQ+"
|
||||
date: "2 février 2026"
|
||||
client: "Portfolio CEAAC"
|
||||
date: "12 février 2026"
|
||||
contact: "contact@studio-variable.com"
|
||||
footer: "Studio Variable – Portfolio CERAMIQ+"
|
||||
footer: "Studio Variable – Portfolio CEAAC"
|
||||
---
|
||||
|
|
@ -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 dé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érences, nous travaillerons soit sur une branche 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Site vitrine pour l’Agence 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>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>Prestation(s)</dt>
|
||||
<dd>Design, front-end</dd>
|
||||
<dd>Design et développement front-end</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Partenaire(s)</dt>
|
||||
|
|
|
|||
|
|
@ -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 collaborative pour le programme de recherche, intégrant une interface graphique en front-end pour l’édition du contenu.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
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**.
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="details">
|
||||
<dl>
|
||||
|
|
|
|||
33
src/portfolio-1img/esaj.md
Normal file
33
src/portfolio-1img/esaj.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# ESAJ
|
||||
|
||||
Site vitrine pour l'École supérieure d'Architecture des Jardins, avec programmes des formations, formulaire de contact et actualités.
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
# Decarb.one
|
||||
# Flaash
|
||||
|
||||
Site de la revue d'anticipation Flaash.
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ Site de la revue d'anticipation Flaash.
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>Partenaire(s)</dt>
|
||||
<dd>en collaboration avec Studio Plastac</dd>
|
||||
<dd>Studio Plastac (design)</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Date</dt>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Game Management System
|
||||
|
||||
Plateforme sur-mesure dédié à la conception et à la planification de parties de divers jeux en ligne.
|
||||
Plateforme sur-mesure dédiée à la conception et à la planification de parties de divers jeux en ligne.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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, développement full-stack</dd>
|
||||
<dd>Design et développement full-stack</dd>
|
||||
</dl>
|
||||
<!-- <dl>
|
||||
<dt>Partenaire(s)</dt>
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ Laboratoire interdisciplinaire qui interroge les relations entre le numérique e
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>Prestation(s)</dt>
|
||||
<dd>Design, développement front-end</dd>
|
||||
<dd>Design et développement front-end</dd>
|
||||
</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 Gremillon et l’équipe du médialab</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Date</dt>
|
||||
|
|
|
|||
33
src/portfolio-1img/ntbesancon.md
Normal file
33
src/portfolio-1img/ntbesancon.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Nouveau théâtre de Besançon
|
||||
|
||||
Site web, avec calendrier et billetterie intégrée.
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
|
@ -20,7 +20,7 @@ Plateforme pour un réseau d’ingénieur·es dans la recherche, avec **système
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>Prestation(s)</dt>
|
||||
<dd>Design, développement front-end</dd>
|
||||
<dd>Design et développement front-end</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Date</dt>
|
||||
|
|
|
|||
33
src/portfolio-1img/timelure.md
Normal file
33
src/portfolio-1img/timelure.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# Timelure
|
||||
|
||||
Archives des 70 ans de programmation des Rencontres de Lure, organisées sous forme de chronologie.
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
|
@ -7,7 +7,7 @@ Outil pour présenter les études du TMNlab avec système de collecte des favori
|
|||
<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><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>
|
||||
|
|
|
|||
|
|
@ -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 sur l’évolution des logiciels de graphisme en Suisse et en France (1980 - aujourd'hui).
|
||||
|
||||
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ Projet de recherche sur l’évolution des logiciels de graphisme en Suisse et e
|
|||
</dl>
|
||||
<dl>
|
||||
<dt>Prestation(s)</dt>
|
||||
<dd>Design, développement full-stack</dd>
|
||||
<dd>Design et développement full-stack</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Date</dt>
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@ 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 logiciel libre et de l’open 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 ogiciel libre et de l’open source.
|
||||
Loading…
Add table
Add a link
Reference in a new issue