Compare commits
No commits in common. "main" and "2025-resin" have entirely different histories.
main
...
2025-resin
3
.vscode/settings.json
vendored
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"liveServer.settings.port": 5501
|
|
||||||
}
|
|
||||||
10
README.md
|
|
@ -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
|
HTML paged.js
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
33251
assets/paged.polyfill.js
|
|
@ -306,7 +306,7 @@ footer{
|
||||||
grid-column-gap: 2em;
|
grid-column-gap: 2em;
|
||||||
grid-template-rows: auto auto 1fr;
|
grid-template-rows: auto auto 1fr;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
margin-bottom: 2.8em;
|
margin-bottom: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-group figure{
|
.portfolio-group figure{
|
||||||
|
|
@ -314,7 +314,7 @@ footer{
|
||||||
grid-row: 1/4;
|
grid-row: 1/4;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 1px solid #cfcfcf;
|
border: 1px solid #cfcfcf;
|
||||||
aspect-ratio: 8/5;
|
aspect-ratio: 5/3;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -322,8 +322,6 @@ footer{
|
||||||
|
|
||||||
.portfolio-group figure img{
|
.portfolio-group figure img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -362,7 +360,3 @@ footer{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#wysiwyg img{
|
|
||||||
object-position: 0px 0px;
|
|
||||||
}
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>$title$</title>
|
<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">
|
<link rel="stylesheet" type="text/css" href="assets/style.css">
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
BIN
images/acau.png
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 7.1 MiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 493 KiB |
|
Before Width: | Height: | Size: 728 KiB After Width: | Height: | Size: 2.8 MiB |
|
Before Width: | Height: | Size: 707 KiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 439 KiB |
|
Before Width: | Height: | Size: 445 KiB |
BIN
images/gms.png
|
Before Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 708 KiB |
|
Before Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 100 KiB |
|
Before Width: | Height: | Size: 529 KiB |
|
Before Width: | Height: | Size: 144 KiB |
BIN
images/resin.png
|
Before Width: | Height: | Size: 640 KiB |
|
Before Width: | Height: | Size: 172 KiB |
|
Before Width: | Height: | Size: 212 KiB |
|
Before Width: | Height: | Size: 142 KiB |
|
Before Width: | Height: | Size: 487 KiB |
|
Before Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 2 MiB |
942
index.html
|
|
@ -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 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é.
|
|
||||||
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.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 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 faisabilité technique du design, la fidélité des maquettes par rapport au résultat final, réduit les allers-retours entre design et développement et accélère nettement l’intégration.
|
|
||||||
- **Un travail mené au plus près du code existant**, afin de faciliter l’intégration de nos développements, d’assurer la continuité technique et de favoriser des échanges simples et efficaces avec vous.
|
|
||||||
- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utilisation de variable fonts et des fallback bien pensés. Bref, une attention constante à la performance et à la sobriété des ressources.
|
|
||||||
|
|
@ -2,27 +2,28 @@
|
||||||
|
|
||||||
<div class="people">
|
<div class="people">
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
# 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>
|
||||||
|
|
||||||
<div class="people">
|
<div class="people">
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
# Adrien Payet
|
# 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.
|
||||||
|
|
||||||
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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,17 @@
|
||||||
input-files:
|
input-files:
|
||||||
- src/studio-variable.md
|
- src/studio-variable.md
|
||||||
# - src/note-intention.md
|
- src/note-intention.md
|
||||||
# - src/devis.md
|
- src/devis.md
|
||||||
# - src/planning.md
|
- src/planning.md
|
||||||
# - src/livrables.md
|
- src/livrables.md
|
||||||
- src/equipe.md
|
- src/equipe.md
|
||||||
- src/portfolio-introduction.md
|
- src/portfolio-introduction.md
|
||||||
- src/portfolio-1img/wysiwyg.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/chromobase.md
|
||||||
- src/portfolio-1img/resin.md
|
|
||||||
- src/portfolio-1img/medialab.md
|
- src/portfolio-1img/medialab.md
|
||||||
- src/portfolio-1img/cultures-visuelles.md
|
- src/portfolio-1img/cultures-visuelles.md
|
||||||
- src/portfolio-1img/actuel-inactuel.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/heroines.md
|
||||||
|
- src/portfolio-1img/acau.md
|
||||||
- src/portfolio-1img/decarb-one.md
|
- src/portfolio-1img/decarb-one.md
|
||||||
- src/portfolio-1img/design-to-pack.md
|
- src/details.md
|
||||||
- src/portfolio-1img/gms.md
|
|
||||||
- src/portfolio-1img/tmn-lab.md
|
|
||||||
- src/details.md
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Studio Variable"
|
title: "Studio Variable"
|
||||||
baseline: "Design × code | studio-variable.com"
|
baseline: "Design × code"
|
||||||
client: "Portfolio CEAAC"
|
client: "Proposition RésIn"
|
||||||
date: "12 février 2026"
|
date: "6 octobre 2025"
|
||||||
contact: "contact@studio-variable.com"
|
contact: "contact@studio-varible.com"
|
||||||
footer: "Studio Variable – Portfolio CEAAC"
|
footer: "Studio Variable – Proposition RésIn"
|
||||||
---
|
---
|
||||||
|
|
@ -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 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é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 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 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 façon de travailler repose sur des **allers-retours réguliers** avec vous : nous définirons des étapes intermédiaires pour valider les choix au fur et à mesure, plutôt que de tout livrer en une fois. Cela permet d’ajuster le projet en fonction de vos retours et des contraintes qui pourraient émerger.
|
||||||
|
|
||||||
|
|
@ -13,7 +13,7 @@ Notre force réside dans la complémentarité de nos profils : designers et 
|
||||||
|
|
||||||
### Les forces de notre proposition
|
### 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 faisabilité technique du design, la fidélité des maquettes par rapport au résultat final, réduit les allers-retours entre design et développement et accélère nettement l’intégration.
|
- **Des maquettes directement codées en HTML et CSS**, plutôt que figées dans un outil comme Figma. Cette approche permet d’adopter une « mentalité 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.
|
||||||
- **Un travail mené au plus près du code existant**, afin de faciliter l’intégration de nos développements, d’assurer la continuité technique et de favoriser des échanges simples et efficaces avec vous.
|
- **Un travail mené au plus près du code existant**, afin de faciliter l’intégration de nos développements, d’assurer la continuité technique et de favoriser des échanges simples et efficaces avec vous.
|
||||||
- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utilisation de variable fonts et des fallback bien pensés. Bref, une attention constante à la performance et à la sobriété des ressources.
|
- **Une démarche d’écoconception et d’accessibilité assumée**, qui se traduit par un design et un code légers, un recours limité à JavaScript, un HTML bien construit répondant aux normes d’accessibilité, l’utlisation de variable fonts et des fallback bien pensé. Bref, une attention constante à la performance et à la sobriété des ressources.
|
||||||
- **Une refonte graphique pensée autour de l’arbre des compétences**, conçu comme un élément central et progressif de navigation : il sera placé visuellement à proximité du moteur de recherche sur desktop, déployé en 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.
|
- **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 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.
|
||||||
|
|
@ -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
|
- 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**
|
- **4 novembre : validation de l’identité proposée**
|
||||||
- Semaine 4–6 (3–21 nov.) : Développement front avec sprints
|
- Semaine 4–6 (3–21 nov.) : Développement front avec sprints
|
||||||
- Sprint 1 — Copie du dépôt, pipeline parallèle, audit HTML, mise en place SASS
|
- Sprint 1 — Copie du dèpôt, pipeline parallèle, audit HTML, mise en place SASS
|
||||||
- Sprint 2 — Intégration arbre de compétence, développement de la page d’accueil et de la liste filtrables
|
- 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 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
|
- 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.
|
- Semaine 7 (24–28 nov.) : Révisions UI et petits ajustements. Validation définitive du logo.
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ Site vitrine pour l’Agence Coopérative Architectes Urbanistes.
|
||||||
<div class="details">
|
<div class="details">
|
||||||
<dl>
|
<dl>
|
||||||
<dt>URL</dt>
|
<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>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ Plateforme pour une critique des arts et des techniques.
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement full-stack</dd>
|
<dd>Design, éveloppement full-stack</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Date</dt>
|
<dt>Date</dt>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Chromobase
|
# 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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement front-end</dd>
|
<dd>Design, front-end</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Partenaire(s)</dt>
|
<dt>Partenaire(s)</dt>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Cultures visuelles
|
# 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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@ Plateforme collaborative pour le programme de recherche, intégrant une int
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement full-stack</dd>
|
<dd>Design, éveloppement full-stack</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Partenaire(s)</dt>
|
<dt>Partenaire(s)</dt>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Decarb.one
|
# 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é.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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**.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -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.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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,33 +0,0 @@
|
||||||
# Flaash
|
|
||||||
|
|
||||||
Site de la revue d'anticipation Flaash.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
# Game Management System
|
|
||||||
|
|
||||||
Plateforme sur-mesure dédiée à la conception et à la planification de parties de divers jeux en ligne.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -20,11 +20,11 @@ Publication du groupe de recherche de La Fémis à propos de la figure du héros
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement full-stack</dd>
|
<dd>Design, développement full-stack</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<!-- <dl>
|
<!-- <dl>
|
||||||
<dt>Partenaire(s)</dt>
|
<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> -->
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Date</dt>
|
<dt>Date</dt>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# médialab
|
# 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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -20,11 +20,11 @@ Laboratoire interdisciplinaire qui interroge les relations entre le numérique e
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement front-end</dd>
|
<dd>Design, développement front-end</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Partenaire(s)</dt>
|
<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>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Date</dt>
|
<dt>Date</dt>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
# Noranim
|
|
||||||
|
|
||||||
Site vitrine pour une association professionnelle de la filière cinéma d’animation en région Hauts de France. Comprend des pages **évènements et membres filtrables par catégories**.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
# 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>
|
|
||||||
|
|
@ -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**.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
# 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>
|
|
||||||
|
|
@ -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.
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# WYSIWYG
|
# 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)
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@ Projet de recherche sur l’évolution des logiciels de graphisme en Suisse et&n
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Prestation(s)</dt>
|
<dt>Prestation(s)</dt>
|
||||||
<dd>Design et développement full-stack</dd>
|
<dd>Design, développement full-stack</dd>
|
||||||
</dl>
|
</dl>
|
||||||
<dl>
|
<dl>
|
||||||
<dt>Date</dt>
|
<dt>Date</dt>
|
||||||
|
|
|
||||||
|
|
@ -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**.
|
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 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 privilégions les projets ouverts et engagés, avec une forte culture du ogiciel libre et de l’open source.
|
|
||||||