basic-portfolio_web-to-print/index.html
2026-04-05 16:21:35 +02:00

1031 lines
No EOL
20 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timothée Goguely <br>× Studio Variable</title>
<script src="/assets/paged.polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="assets/style.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/Area/stylesheet.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/Geist-mono/stylesheet.css">
</head>
<body>
<aside class="infos">
<p>EBABX</p>
<p>6 avril 2026</p>
<p>contact@studio-variable.com</p>
</aside>
<header>
<h1>Timothée Goguely <br>× Studio Variable</h1>
<h2>Design &amp; code</h2>
</header>
<footer>
<p><p>Timothée Goguely × Studio Variable Portfolio
EBABX</p></p>
</footer>
<section id="studio-variable">
<p>Timothée Goguely, designer et développeur web spécialisé en
éco-conception et accessibilité numérique, sassocie à Studio
Variable pour cette candidature. Fondé par Julie Blanc et Adrien
Payet, le studio conjugue <strong>design graphique, design
dinterface et développement web full-stack</strong> — une équipe
avec laquelle il a lhabitude de travailler.</p>
<p>Nous œuvrons ensemble dans le secteur de la recherche, de
lécologie et de la culture, aussi bien avec de grands comptes
quavec des indépendants. Notre approche formelle et technique
concilie <strong>ergonomie, sobriété, accessibilité et respect de la
vie privée</strong>. Les projets ouverts et engagés sont au cœur de
notre démarche, avec une forte culture du logiciel libre et de
lopen source.</p>
</section>
<section id="equipe">
<h2 id="équipe">Équipe</h2>
<div class="people">
<figure>
<img src="images/Timothee_small.jpg" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="timothée-goguely">Timothée Goguely</h1>
<p>Designer et développeur web, spécialisé en éco-conception et
accessibilité numérique, Timothée assurera le
<strong>design</strong> et le <strong>développement
front-end</strong> du projet. Il sera votre interlocuteur
principal.</p>
<p>Timothée est co-responsable du Master Design Environnements
numériques de lUnivsersité de Strasbourg. Il collabore
essentiellement avec des associations, studios et coopératives dans
le domaine du design, de larchitecture, de la culture, du numérique
et de la recherche.</p>
</div>
<div class="people">
<figure>
<img src="images/studio-variable_Adrien_small.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="adrien-payet">Adrien Payet</h1>
<p>Développeur full-stack, spécialisé en design et développement de
back-office et dinteractions front-end, Adrien assurera le
<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
à Paris 1.</p>
</div>
<div class="people">
<figure>
<img src="images/studio-variable_Julie_small.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<h1 id="julie-blanc">Julie Blanc</h1>
<p>Docteur en ergonomie et spécialiste de CSS, Julie Blanc sera en
soutien pour le <strong>design</strong> et le <strong>développement
front-end</strong> du projet.</p>
<p>Julie est designer, développeuse et chercheuse. Elle a co-fondé
le studio Variable. Elle est chercheuse associée à la HEAD (Genève).
Sa thèse, soutenue en 2023, porte sur lutilisation des technologies
du web par les designers graphiques.</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 - aujourdhui).</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 dart 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="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="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>
<figure>
<img src="images/cultures-visuelles.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://www.culturesvisuelles.org/" target="_blank">culturesvisuelles.org</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Université de Strasbourg
</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 Timothée Goguely
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2020
</dd>
</dl>
</div>
</section>
<section id="vernacular" class="portfolio-group">
<h1 id="jules-vernacular">Jules Vernacular</h1>
<p>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 <strong>filtres
avancé, recherche et tri des contenus</strong>.</p>
<figure>
<img src="images/vernacular.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://vernacular.fr/" target="_blank">vernacular.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Culture
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Jack Usine
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Grégory Cadars
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2026
</dd>
</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="encoreheureux" class="portfolio-group">
<h1 id="encore-heureux">Encore Heureux</h1>
<p>Site vitrine dune agence darchitecture. Comprend un système de
<strong>filtres, trie et vues multiples</strong> des projets, ainsi
quune <strong>structure de données</strong> permettant la
<strong>transformation dune actualité en projet</strong>.</p>
<figure>
<img src="images/encoreheureux.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://encoreheureux.org/" target="_blank">encoreheureux.org</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Architecture
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Encore Heureux
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</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="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="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>
<figure>
<img src="images/chromobase.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://chromobase.huma-num.fr/" target="_blank">chromobase.huma-num.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Sorbonne Université, CNAM, University of Oxford
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design et développement front-end
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
OuestWare (développement)
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2023
</dd>
</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
le numérique et nos sociétés. Un site web sans images et sans
Javascript.</p>
<figure>
<img src="images/medialab.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://medialab.sciencespo.fr/" target="_blank">medialab.sciencespo.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>
Partenaire(s)
</dt>
<dd>
en collaboration avec Benjamin Gremillon et léquipe du médialab
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2019
</dd>
</dl>
</div>
</section>
<section id="rediriger" class="portfolio-group">
<h1 id="noranim">Noranim</h1>
<p>Site web <strong>éco-conçu</strong> rassemblant le lexique et les
outils de la Redirection Écologique.</p>
<figure>
<img src="images/rediriger.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://rediriger.fr/" target="_blank">rediriger.fr</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Recherche
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
Institut dÉtudes Avancées de Nantes, Origens Medialab
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Élisa Denève et Anton Moglia
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2025
</dd>
</dl>
</div>
</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>
<figure>
<img src="images/decarb-one.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://decarb.one/" target="_blank">decarb.one</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Communication
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
decarb.one
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Design, développement full-stack
</dd>
</dl>
<dl>
<dt>
Partenaire(s)
</dt>
<dd>
en collaboration avec Praticable
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2022
</dd>
</dl>
</div>
</section>
<section id="noranim" class="portfolio-group">
<h1 id="noranim">Noranim</h1>
<p>Site vitrine pour une association professionnelle de la filière
cinéma danimation en région Hauts de France. Comprend des pages
<strong>évènements et membres filtrables par
catégories</strong>.</p>
<figure>
<img src="images/noranim.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<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>
</section>
<section id="ramel-luzoir" class="portfolio-group">
<h1 id="ramelluzoir">ramel·luzoir</h1>
<p>Portoflio de latelier de design graphique strasbourgeois
ramel·luzoir.</p>
<figure>
<img src="images/ramel-luzoir.png" alt="." />
<figcaption aria-hidden="true">.</figcaption>
</figure>
<div class="details">
<dl>
<dt>
URL
</dt>
<dd>
<a href="https://ramel-luzoir.com/" target="_blank">ramel-luzoir.com</a>
</dd>
</dl>
<dl>
<dt>
Secteur
</dt>
<dd>
Design
</dd>
</dl>
<dl>
<dt>
Client
</dt>
<dd>
ramel·luzoir
</dd>
</dl>
<dl>
<dt>
Prestation(s)
</dt>
<dd>
Développement full-stack
</dd>
</dl>
<dl>
<dt>
Date
</dt>
<dd>
2023
</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
<br />
N° SIRET 988 558 003 00014<br />
N° de TVA FR95988558003</p>
<p>Siège social:<br />
22 rue Boyer<br />
75020 Paris - France</p>
<p>Lieu dactivité:<br />
Césure (Bureau 339)<br />
13 rue Santeuil<br />
75005 Paris - France</p>
<p>Site web: <a
href="https://studio-variable.com/">studio-variable.com</a></p>
<p>Pour nous contacter: contact@studio-variable.com</p>
</section>
</body>
</html>