diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
index 7a99f10..773a81e 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -63,7 +63,7 @@ header{
}
header h1{
font-size: 6em;
- line-height: 1em;
+ line-height: 1.1em;
}
header h2{
@@ -255,8 +255,8 @@ footer{
#equipe .people{
min-height: 160px;
break-inside: avoid;
- margin-top: 6em;
- margin-bottom: 6em;
+ margin-top: 2em;
+ margin-bottom: 2em;
padding-left: 220px;
position: relative;
margin-left: 5em;
@@ -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;
+}
\ No newline at end of file
diff --git a/images/TMNLab.png b/images/TMNLab.png
index 74abb45..80d6f69 100644
Binary files a/images/TMNLab.png and b/images/TMNLab.png differ
diff --git a/images/acau.png b/images/acau.png
index 6f2d540..ff20504 100644
Binary files a/images/acau.png and b/images/acau.png differ
diff --git a/images/actuel-inactuel.png b/images/actuel-inactuel.png
index fbdcdde..d2e03ef 100644
Binary files a/images/actuel-inactuel.png and b/images/actuel-inactuel.png differ
diff --git a/images/chromobase.png b/images/chromobase.png
index 0b524a3..1fc1452 100644
Binary files a/images/chromobase.png and b/images/chromobase.png differ
diff --git a/images/cultures-visuelles.png b/images/cultures-visuelles.png
index 36c655d..e7f2dd6 100644
Binary files a/images/cultures-visuelles.png and b/images/cultures-visuelles.png differ
diff --git a/images/design-to-pack.jpg b/images/design-to-pack.jpg
deleted file mode 100644
index ea1c88c..0000000
Binary files a/images/design-to-pack.jpg and /dev/null differ
diff --git a/images/design-to-pack.png b/images/design-to-pack.png
new file mode 100644
index 0000000..6a02fc4
Binary files /dev/null and b/images/design-to-pack.png differ
diff --git a/images/flaash-thematiques.png b/images/flaash-thematiques.png
index 3da64e0..ebdb240 100644
Binary files a/images/flaash-thematiques.png and b/images/flaash-thematiques.png differ
diff --git a/images/gms.png b/images/gms.png
index 9ee160f..23479b2 100644
Binary files a/images/gms.png and b/images/gms.png differ
diff --git a/images/ntbesancon.png b/images/ntbesancon.png
new file mode 100644
index 0000000..2f542c5
Binary files /dev/null and b/images/ntbesancon.png differ
diff --git a/images/ntbesancon_calendrier.png b/images/ntbesancon_calendrier.png
new file mode 100644
index 0000000..a8e64d1
Binary files /dev/null and b/images/ntbesancon_calendrier.png differ
diff --git a/images/timelure-68.png b/images/timelure-68.png
new file mode 100644
index 0000000..9939d41
Binary files /dev/null and b/images/timelure-68.png differ
diff --git a/images/timelure-home.png b/images/timelure-home.png
new file mode 100644
index 0000000..d65e69f
Binary files /dev/null and b/images/timelure-home.png differ
diff --git a/images/timelure-responsive.jpg b/images/timelure-responsive.jpg
new file mode 100644
index 0000000..0b163d1
Binary files /dev/null and b/images/timelure-responsive.jpg differ
diff --git a/index.html b/index.html
index 945c299..2bba88f 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
- Studio Variable
+ Timothée Goguely <br>× Studio Variable
@@ -16,53 +16,55 @@
-
Studio Variable
-
Design × code | studio-variable.com
+
Timothée Goguely × Studio Variable
+
Design & code
-
Créé en juin 2025 et basé à Paris, Studio Variable conjugue
- design graphique, design d’interface et développement web
- full-stack. Œuvrant principalement avec le secteur de la
- recherche, de l’écologie et de la culture, il collabore aussi bien
- avec de grands comptes qu’avec des indépendants.
-
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.
+
Timothée Goguely, designer et développeur web spécialisé en
+ éco-conception et accessibilité numérique, s’associe à Studio
+ Variable pour cette candidature. Fondé par Julie Blanc et Adrien
+ Payet, le studio conjugue design graphique, design
+ d’interface et développement web full-stack — une équipe
+ avec laquelle il a l’habitude de travailler.
+
Nous œuvrons ensemble dans le secteur de la recherche, de
+ l’écologie et de la culture, aussi bien avec de grands comptes
+ qu’avec des indépendants. Notre approche formelle et technique
+ concilie ergonomie, sobriété, accessibilité et respect de la
+ vie privée. Les projets ouverts et engagés sont au cœur de
+ notre démarche, avec une forte culture du logiciel libre et de
+ l’open source.
Équipe
-
+ .
-
Julie Blanc
-
Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera
- le design et le développement
- front-end du projet.
-
Julie est designer, développeuse et chercheuse. Elle a co-fondé
- le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
- Sa thèse, soutenue en 2023, porte sur l’utilisation des technologies
- du web par les designers graphiques.
+
Timothée Goguely
+
Designer et développeur web, spécialisé en éco-conception et
+ accessibilité numérique, Timothée assurera le
+ design et le développement
+ front-end du projet. Il sera votre interlocuteur
+ principal.
+
Timothée est co-responsable du Master Design Environnements
+ numériques de l’Univsersité de Strasbourg. Il collabore
+ essentiellement avec des associations, studios et coopératives dans
+ le domaine du design, de l’architecture, de la culture, du numérique
+ et de la recherche.
@@ -75,13 +77,538 @@
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
+ le code. Il a co-fondé le studio Variable. Il enseigne à l’ENSCi et
à Paris 1.
+
+
+
+ .
+
+
Julie Blanc
+
Docteur en ergonomie et spécialiste de CSS, Julie Blanc sera en
+ soutien pour le design et le développement
+ front-end du projet.
+
Julie est designer, développeuse et chercheuse. Elle a co-fondé
+ le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
+ Sa thèse, soutenue en 2023, porte sur l’utilisation des technologies
+ du web par les designers graphiques.
+
Sélection de projets
+
+
WYSIWYG
+
Projet de recherche sur l’évolution des logiciels de graphisme en
+ Suisse et en France (1980 - aujourd’hui).
Archives de la collection personnelle de Jack Usine de
+ photographies du patrimoine typographique artisanal français depuis
+ le milieu des années 2000. Comprend un système de filtres
+ avancé, recherche et tri des contenus.
Site vitrine d’une agence d’architecture. Comprend un système de
+ filtres, trie et vues multiples des projets, ainsi
+ qu’une structure de données permettant la
+ transformation d’une actualité en projet.
+ Julien Bidoret, Lola Duval et l’équipe des Rencontres de Lure
+
+
+
+
+ Date
+
+
+ 2022
+
+
+
+
Chromobase
Base de données du projet ERC Chromotope qui
@@ -123,7 +650,7 @@
Prestation(s)
- Design, front-end
+ Design et développement front-end
@@ -182,222 +709,7 @@
Prestation(s)
- Design, développement front-end
-
-
-
-
- Date
-
-
- 2025
-
-
-
-
-
-
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.
-
-
- .
-
-
-
-
- URL
-
-
- Plateforme privée
-
-
-
-
- Secteur
-
-
- Luxe
-
-
-
-
- Client
-
-
- Groupe Pochet
-
-
-
-
- Prestation(s)
-
-
- Développement du back-end, de la logique applicative et des
- interactions.
-
-
-
-
- Date
-
-
- 2025
-
-
-
-
-
-
Game Management System
-
Plateforme sur-mesure dédié à la conception et à la planification
- de parties de divers jeux en ligne.
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.
diff --git a/src/approche-studio.md b/src/approche-studio.md
index 8454d5d..ee703d1 100644
--- a/src/approche-studio.md
+++ b/src/approche-studio.md
@@ -1,8 +1,6 @@
-## Notre studio et son approche
+## Notre 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, lisible et durable.
diff --git a/src/equipe.md b/src/equipe.md
index 0fa099b..4298679 100644
--- a/src/equipe.md
+++ b/src/equipe.md
@@ -1,14 +1,18 @@
## Équipe
+
+
+
+
-
+
-# Julie Blanc
+# Timothée Goguely
-Docteur en ergonomie et spécialiste de CSS, Julie Blanc assurera le **design** et le **développement front-end** du projet.
+Designer et développeur web, spécialisé en éco-conception et accessibilité numérique, Timothée assurera le **design** et le **développement front-end** du projet. Il sera votre interlocuteur principal.
-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.
+Timothée est co-responsable du Master Design Environnements numériques de l’Univsersité de Strasbourg. Il collabore essentiellement avec des associations, studios et coopératives dans le domaine du design, de l’architecture, de la culture, du numérique et de la recherche.
@@ -20,19 +24,19 @@ 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.
-
+
-# Timothée Goguely
+# Julie Blanc
-Designer et développeur web, spécialisé en éco-conception et accessibilité numérique, Timothée assurera le **design** et le **développement front-end** du projet.
+Docteur en ergonomie et spécialiste de CSS, Julie Blanc sera en soutien pour le **design** et le **développement front-end** du projet.
-Timothée est co-responsable du Master Design Environnements numériques de l’Univsersité de Strasbourg. Il collabore essentiellement avec des associations, studios et coopératives dans le domaine du design, de l’architecture, de la culture, du numérique et de la recherche.
+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.
diff --git a/src/files.yaml b/src/files.yaml
index f54dba5..8df0d78 100644
--- a/src/files.yaml
+++ b/src/files.yaml
@@ -6,22 +6,20 @@ input-files:
# - src/livrables.md
- src/equipe.md
- src/portfolio-introduction.md
+ - src/portfolio-1img/wysiwyg.md
+ - src/portfolio-1img/esaj.md
+ - src/portfolio-1img/cultures-visuelles.md
+ - src/portfolio-1img/vernacular.md
+ - src/portfolio-1img/acau.md
+ - src/portfolio-1img/encoreheureux.md
+ - src/portfolio-1img/actuel-inactuel.md
+ - src/portfolio-1img/flaash.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/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/encoreheureux.md
- # - src/portfolio-1img/noranim.md
- # - src/portfolio-1img/ramel-luzoir.md
- # - src/portfolio-1img/rediriger.md
- # - src/portfolio-1img/vernacular.md
+ - src/portfolio-1img/rediriger.md
+ - src/portfolio-1img/decarb-one.md
+ - src/portfolio-1img/noranim.md
+ - src/portfolio-1img/ramel-luzoir.md
- src/details.md
diff --git a/src/meta.yaml b/src/meta.yaml
index aed5985..7eb807a 100644
--- a/src/meta.yaml
+++ b/src/meta.yaml
@@ -1,8 +1,8 @@
---
-title: "Studio Variable"
-baseline: "Design × code | studio-variable.com"
-client: "Portfolio CERAMIQ+"
-date: "2 février 2026"
+title: "Timothée Goguely × Studio Variable"
+baseline: "Design & code"
+client: "EBABX"
+date: "6 avril 2026"
contact: "contact@studio-variable.com"
-footer: "Studio Variable – Portfolio CERAMIQ+"
+footer: "Timothée Goguely × Studio Variable – Portfolio EBABX"
---
\ No newline at end of file
diff --git a/src/note-intention.md b/src/note-intention.md
index 90d1d2a..27e370a 100644
--- a/src/note-intention.md
+++ b/src/note-intention.md
@@ -4,7 +4,7 @@ Notre intervention se concentre sur une double approche, à la fois graphique et
**Sur le plan graphique**, nous portons une attention particulière à la lisibilité et à l’harmonisation des contenus. L’hétérogénéité des profils proposés dans l’annuaire (parfois très succincts, parfois très denses) sera prise en compte pour construire des pages qui restent esthétiques et équilibrées. Nous privilégions **une esthétique sobre, sur mesure, où la typographie et les contrastes assurent une hiérarchie claire**, afin d’éviter les ruptures visuelles dans l’annuaire. L’arbre des compétences, qui constitue un outil central de navigation et de recherche, fera l’objet d’une refonte spécifique : nous souhaitons en améliorer la lisibilité et l’exploration, en le rendant plus visible et plus interactif, tout en veillant à une utilisation fluide sur mobile comme sur ordinateur. Notre objectif est de concevoir une interface qui mette en valeur les compétences et facilite réellement la recherche dans l’annuaire, sans surcharge graphique inutile.
-**Sur le plan technique**, nous proposons une architecture simple : **HTML, SCSS et JavaScript vanilla**, complétés si nécessaire par une librairie légère comme Alpine.js pour la recherche réactive. Cette sobriété garantit la compatibilité avec la licence libre du projet, facilite la maintenance et limite l’empreinte écologique du site. Nous travaillerons à partir de l’existant, que ce soit le code ou l’image Docker déjà utilisée, et nous engageons à adapter nos développements à vos contraintes sans surcomplexification. En fonction de vos préférence, nous travaillerons soit sur une branch du 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.
diff --git a/src/portfolio-1img/acau.md b/src/portfolio-1img/acau.md
index 8400d34..9967410 100644
--- a/src/portfolio-1img/acau.md
+++ b/src/portfolio-1img/acau.md
@@ -7,7 +7,7 @@ Site vitrine pour l’Agence Coopérative Architectes Urbanistes.
diff --git a/src/portfolio-1img/cultures-visuelles.md b/src/portfolio-1img/cultures-visuelles.md
index 57a4f2e..c92e617 100644
--- a/src/portfolio-1img/cultures-visuelles.md
+++ b/src/portfolio-1img/cultures-visuelles.md
@@ -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.
diff --git a/src/portfolio-1img/design-to-pack.md b/src/portfolio-1img/design-to-pack.md
index c33f091..3cb2aa9 100644
--- a/src/portfolio-1img/design-to-pack.md
+++ b/src/portfolio-1img/design-to-pack.md
@@ -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**.
-
+
diff --git a/src/portfolio-1img/esaj.md b/src/portfolio-1img/esaj.md
new file mode 100644
index 0000000..c936967
--- /dev/null
+++ b/src/portfolio-1img/esaj.md
@@ -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.
+
+
+
+
diff --git a/src/portfolio-1img/flaash.md b/src/portfolio-1img/flaash.md
index 2a5edd3..c510e6a 100644
--- a/src/portfolio-1img/flaash.md
+++ b/src/portfolio-1img/flaash.md
@@ -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.
Partenaire(s)
-
en collaboration avec Studio Plastac
+
Studio Plastac (design)
Date
diff --git a/src/portfolio-1img/gms.md b/src/portfolio-1img/gms.md
index 80e5599..6ba6061 100644
--- a/src/portfolio-1img/gms.md
+++ b/src/portfolio-1img/gms.md
@@ -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.
diff --git a/src/portfolio-1img/heroines.md b/src/portfolio-1img/heroines.md
index 9c22006..f939c93 100644
--- a/src/portfolio-1img/heroines.md
+++ b/src/portfolio-1img/heroines.md
@@ -20,7 +20,7 @@ Publication du groupe de recherche de La Fémis à propos de la figure du héros
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
+ 
+