commit 6134204a10bf788fc34377e707da2e57caad51e4 Author: Julie Blanc Date: Mon Dec 29 11:27:47 2025 +0100 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..34a79d1 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ + + +HTML paged.js + + +``` +pandoc --defaults src/files.yaml --template=assets/template.html --metadata-file src/meta.yaml --lua-filter=assets/add_section_ids.lua -o index.html +``` + + +PDF plus léger: + +``` +gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/printer -dNOPAUSE -dQUIET -dBATCH -sOutputFile=portfolio-compress.pdf portfolio.pdf +``` + + + diff --git a/assets/README.md b/assets/README.md new file mode 100644 index 0000000..70c37b0 --- /dev/null +++ b/assets/README.md @@ -0,0 +1,19 @@ + + +HTML paged.js + +``` +pandoc --template=assets/template.html --toc -o output.html input.md +``` + + + +PDF plus léger: + +``` +gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/printer -dNOPAUSE -dQUIET -dBATCH -sOutputFile=output.pdf input.pdf +``` + + + + diff --git a/assets/add_section_ids.lua b/assets/add_section_ids.lua new file mode 100644 index 0000000..8abde3a --- /dev/null +++ b/assets/add_section_ids.lua @@ -0,0 +1,49 @@ +local filenames = PANDOC_STATE.input_files or {} + +function Pandoc(doc) + local blocks = {} + + -- Check if input files are available + if not filenames or #filenames == 0 then + io.stderr:write("Error: No input files found in PANDOC_STATE.input_files\n") + return doc + end + + -- Process each file independently + for _, filename in ipairs(filenames) do + -- Extract the ID from the filename (the name without the extension) + local section_id = filename:match("([^/]+)%.md$") + local section_class = "" + + -- Check if the filename contains "portfolio" + if filename:match("portfolio") then + section_class = " class=\"portfolio-group\"" + end + + -- Add a section for each file with the optional class + table.insert(blocks, pandoc.RawBlock("html", "

")) + + -- Read the content of the file as raw text + local file = io.open(filename, "r") + if not file then + io.stderr:write("Error: Unable to read file " .. filename .. "\n") + return doc + end + local file_content = file:read("*all") + file:close() + + -- Convert the Markdown content to Pandoc blocks + local file_doc = pandoc.read(file_content, 'markdown') + + -- Add the blocks from the file to the section + for _, block in ipairs(file_doc.blocks) do + table.insert(blocks, block) + end + + -- Close the section + table.insert(blocks, pandoc.RawBlock("html", "

")) + end + + -- Return the modified document + return pandoc.Pandoc(blocks, doc.meta) +end diff --git a/assets/fonts/Area/AreaNormal-Black.woff b/assets/fonts/Area/AreaNormal-Black.woff new file mode 100644 index 0000000..af43d0e Binary files /dev/null and b/assets/fonts/Area/AreaNormal-Black.woff differ diff --git a/assets/fonts/Area/AreaNormal-Black.woff2 b/assets/fonts/Area/AreaNormal-Black.woff2 new file mode 100644 index 0000000..0293446 Binary files /dev/null and b/assets/fonts/Area/AreaNormal-Black.woff2 differ diff --git a/assets/fonts/Area/AreaNormal-BlackItalic.woff b/assets/fonts/Area/AreaNormal-BlackItalic.woff new file mode 100644 index 0000000..e4223fc Binary files /dev/null and b/assets/fonts/Area/AreaNormal-BlackItalic.woff differ diff --git a/assets/fonts/Area/AreaNormal-BlackItalic.woff2 b/assets/fonts/Area/AreaNormal-BlackItalic.woff2 new file mode 100644 index 0000000..c1b24c1 Binary files /dev/null and b/assets/fonts/Area/AreaNormal-BlackItalic.woff2 differ diff --git a/assets/fonts/Area/AreaNormal-Bold.woff b/assets/fonts/Area/AreaNormal-Bold.woff new file mode 100644 index 0000000..4469c62 Binary files /dev/null and b/assets/fonts/Area/AreaNormal-Bold.woff differ diff --git a/assets/fonts/Area/AreaNormal-Bold.woff2 b/assets/fonts/Area/AreaNormal-Bold.woff2 new file mode 100644 index 0000000..7caf0ad Binary files /dev/null and b/assets/fonts/Area/AreaNormal-Bold.woff2 differ diff --git a/assets/fonts/Area/AreaNormal-BoldItalic.woff b/assets/fonts/Area/AreaNormal-BoldItalic.woff new file mode 100644 index 0000000..69da8ea Binary files /dev/null and b/assets/fonts/Area/AreaNormal-BoldItalic.woff differ diff --git a/assets/fonts/Area/AreaNormal-BoldItalic.woff2 b/assets/fonts/Area/AreaNormal-BoldItalic.woff2 new file mode 100644 index 0000000..197339b Binary files /dev/null and b/assets/fonts/Area/AreaNormal-BoldItalic.woff2 differ diff --git a/assets/fonts/Area/stylesheet.css b/assets/fonts/Area/stylesheet.css new file mode 100644 index 0000000..31f9555 --- /dev/null +++ b/assets/fonts/Area/stylesheet.css @@ -0,0 +1,35 @@ +@font-face { + font-family: 'Area Normal'; + src: url('AreaNormal-Bold.woff2') format('woff2'), + url('AreaNormal-Bold.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Area Normal'; + src: url('AreaNormal-BoldItalic.woff2') format('woff2'), + url('AreaNormal-BoldItalic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Area Normal'; + src: url('AreaNormal-Black.woff2') format('woff2'), + url('AreaNormal-Black.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Area Normal'; + src: url('AreaNormal-BlackItalic.woff2') format('woff2'), + url('AreaNormal-BlackItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} \ No newline at end of file diff --git a/assets/fonts/Geist-mono/GeistMono-Black.woff2 b/assets/fonts/Geist-mono/GeistMono-Black.woff2 new file mode 100644 index 0000000..44b4582 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Black.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-BlackItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-BlackItalic.woff2 new file mode 100644 index 0000000..c754d5c Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-BlackItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Bold.woff2 b/assets/fonts/Geist-mono/GeistMono-Bold.woff2 new file mode 100644 index 0000000..d8ed52d Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Bold.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-BoldItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-BoldItalic.woff2 new file mode 100644 index 0000000..d7ca574 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-BoldItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-ExtraBold.woff2 b/assets/fonts/Geist-mono/GeistMono-ExtraBold.woff2 new file mode 100644 index 0000000..410a931 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-ExtraBold.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 new file mode 100644 index 0000000..7567ed4 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-ExtraBoldItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-ExtraLight.woff2 b/assets/fonts/Geist-mono/GeistMono-ExtraLight.woff2 new file mode 100644 index 0000000..5730816 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-ExtraLight.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 new file mode 100644 index 0000000..885be50 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-ExtraLightItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Italic.woff2 b/assets/fonts/Geist-mono/GeistMono-Italic.woff2 new file mode 100644 index 0000000..2b6328b Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Italic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Italic[wght].woff2 b/assets/fonts/Geist-mono/GeistMono-Italic[wght].woff2 new file mode 100644 index 0000000..8795c26 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Italic[wght].woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Light.woff2 b/assets/fonts/Geist-mono/GeistMono-Light.woff2 new file mode 100644 index 0000000..fd9ad48 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Light.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-LightItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-LightItalic.woff2 new file mode 100644 index 0000000..373be05 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-LightItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Medium.woff2 b/assets/fonts/Geist-mono/GeistMono-Medium.woff2 new file mode 100644 index 0000000..d16f229 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Medium.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-MediumItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-MediumItalic.woff2 new file mode 100644 index 0000000..0bb5004 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-MediumItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Regular.woff2 b/assets/fonts/Geist-mono/GeistMono-Regular.woff2 new file mode 100644 index 0000000..1b694fe Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Regular.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-SemiBold.woff2 b/assets/fonts/Geist-mono/GeistMono-SemiBold.woff2 new file mode 100644 index 0000000..e420d39 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-SemiBold.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 new file mode 100644 index 0000000..24e32b7 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-SemiBoldItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-Thin.woff2 b/assets/fonts/Geist-mono/GeistMono-Thin.woff2 new file mode 100644 index 0000000..8104fa3 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-Thin.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono-ThinItalic.woff2 b/assets/fonts/Geist-mono/GeistMono-ThinItalic.woff2 new file mode 100644 index 0000000..fc946f2 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono-ThinItalic.woff2 differ diff --git a/assets/fonts/Geist-mono/GeistMono[wght].woff2 b/assets/fonts/Geist-mono/GeistMono[wght].woff2 new file mode 100644 index 0000000..b96b7d4 Binary files /dev/null and b/assets/fonts/Geist-mono/GeistMono[wght].woff2 differ diff --git a/assets/fonts/Geist-mono/stylesheet.css b/assets/fonts/Geist-mono/stylesheet.css new file mode 100644 index 0000000..e3eb0dd --- /dev/null +++ b/assets/fonts/Geist-mono/stylesheet.css @@ -0,0 +1,180 @@ +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ThinItalic.woff2') format('woff2'), + url('GeistMono-ThinItalic.woff') format('woff'); + font-weight: 100; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLightItalic.woff2') format('woff2'), + url('GeistMono-ExtraLightItalic.woff') format('woff'); + font-weight: 200; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBold.woff2') format('woff2'), + url('GeistMono-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-SemiBoldItalic.woff2') format('woff2'), + url('GeistMono-SemiBoldItalic.woff') format('woff'); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Italic.woff2') format('woff2'), + url('GeistMono-Italic.woff') format('woff'); + font-weight: normal; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BoldItalic.woff2') format('woff2'), + url('GeistMono-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-MediumItalic.woff2') format('woff2'), + url('GeistMono-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-BlackItalic.woff2') format('woff2'), + url('GeistMono-BlackItalic.woff') format('woff'); + font-weight: 900; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Thin.woff2') format('woff2'), + url('GeistMono-Thin.woff') format('woff'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Bold.woff2') format('woff2'), + url('GeistMono-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-LightItalic.woff2') format('woff2'), + url('GeistMono-LightItalic.woff') format('woff'); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBoldItalic.woff2') format('woff2'), + url('GeistMono-ExtraBoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Black.woff2') format('woff2'), + url('GeistMono-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraBold.woff2') format('woff2'), + url('GeistMono-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-ExtraLight.woff2') format('woff2'), + url('GeistMono-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Regular.woff2') format('woff2'), + url('GeistMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Medium.woff2') format('woff2'), + url('GeistMono-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Geist Mono'; + src: url('GeistMono-Light.woff2') format('woff2'), + url('GeistMono-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..7fce15b --- /dev/null +++ b/assets/style.css @@ -0,0 +1,362 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -o-font-smoothing: antialiased +} + + +body{ + font-family: 'Area Normal'; + font-size: 12px; + line-height: 1.5em; + --small: 9px; + --light: #bfbfbf; + --title: 20px; + --mono: 'Geist Mono'; + --table-w: 760px; +} + +a{ + color: currentColor; +} + +img{ width: 100%; } + + +@page { + size: A4 landscape; + margin-left: 14mm; + margin-right: 14mm; + margin-top: 8mm; + margin-bottom: 14mm; + @bottom-left { + content: element(titleRunning); + + + + } + @bottom-right-corner{ + content: counter(page) "/" counter(pages); + /* font-size: 8px; */ + color: var(--light); + text-align: left; + + + } + } + +#note-intention, +#devis, +#equipe, +#details{ + break-before: page; + break-after: page; +} + + +header{ + margin-top: 20em; + margin-bottom: 3em; +} +header h1{ + font-size: 6em; + line-height: 1em; +} + +header h2{ + margin-top: 0.5em; +} + + +#studio-variable{ + break-after: page; + max-width: 56ch; + +} + + + + +.infos{ + width: 100%; + display: flex; + justify-content: space-between; + gap: 1ch; +} + + +section > h2{ + font-weight: bold; + font-size: var(--title); + break-after: none; + margin-bottom: 2em; +} + +section > h2::before{ + content: '● '; +} + +p{ + margin: .75em 0; + widows: 3; + orphans: 3; +} + +h3{ + font-size: 1em; + margin-top: 2em; + margin-bottom: 1em; +} + + + +ul{ + list-style-type: square; + margin-left: 2em; +} + +footer{ + position: running(titleRunning); + /* font-size: 8px; */ + color: var(--light); + +} + + +@media screen, pagedjs-ignore{ + body{ + padding: 20px; + background-color: #efefef + } + .pagedjs_page{ + outline: 1px solid #cfcfcf; + background-color: white; + margin-bottom: 30px; + } + + .pagedjs_pages{ + margin: 0 auto; + width: var(--pagedjs-width-right); + } +} + + + +/* NOTE INTENTION -------------------------------------------- */ + +#note-intention{ + columns: 2; + column-fill: auto; + column-gap: 2.5em; + +} + +#note-intention h2{ + column-span: all; +} + +#note-intention h2 + p{ + margin-top: 0em; +} + + +/* DEVIS -------------------------------------------- */ + + + +#devis h2 + p{ + + width: var(--table-w); + text-align: right; + margin-bottom: 1.5em; +} + +#devis table{ + width: 760px; + /* font-family: var(--mono); */ + border-collapse: collapse; + border-bottom: 1px solid #cfcfcf; +} + +#devis table thead th{ + background-color: #efefef; + text-align: left; +} + +#devis table thead th, td{ + padding: 5px 1ch; +} + +#devis table thead th:nth-of-type(2), +#devis table thead th:nth-of-type(3), +#devis table td:nth-of-type(2), +#devis table td:nth-of-type(3){ + text-align: right!important; +} + +#devis table tr:nth-of-type(even){ + background-color: #efefef; + +} + +#devis table .indent{ + display: inline-block; + width: 4ch; +} + + +#devis #total table{ + /* border-top: 1px solid #cfcfcf; */ + width: 400px; + margin-left: calc(var(--table-w) - 400px); + margin-top: 2em; + border-bottom: none; +} + +#devis #total th, +#devis #total td{ + background-color: transparent!important; + font-weight: bold; +} + +#devis #total tr:nth-of-type(1){ + color: var(--light); +} + + +#devis #total tr:nth-of-type(2) td{ + background-color: transparent!important; +} + + +#devis #total + p{ + margin-top: 3em; + font-size: var(--small); + line-height: 1.5em; + max-width: 40ch; + margin-left: calc(var(--table-w) - 400px); + +} + + +/* PLANNING & LIVRABLES ---------------------------------------- */ + + +#livrables{ + margin-top: 5em; +} + + +/* EQUIPE --------------------------------------------------- */ + +#equipe .people{ + min-height: 160px; + break-inside: avoid; + margin-top: 6em; + margin-bottom: 6em; + padding-left: 220px; + position: relative; + margin-left: 5em; +} + + +#equipe figure{ + width: 160px; + position: absolute; + left: 0px; + +} + +#equipe figure figcaption{ + display: none; +} + +#equipe .people h1{ + font-size: var(--title); + line-height: 1.2em; + margin-top: 5px; +} + + +#equipe .people p{ + max-width: 52ch; +} + + + + +/* PORTFOLIO intro-------------------------------------------- */ + +#portfolio-introduction > h2{ + margin-bottom: 0px; + +} + + + + +/* PORTFOLIO 1img -------------------------------------------- */ + +.portfolio-group{ + display: grid; + grid-template-columns: 500px 1fr; + grid-column-gap: 2em; + grid-template-rows: auto auto 1fr; + break-inside: avoid; + margin-bottom: 3em; +} + +.portfolio-group figure{ + grid-column: 1; + grid-row: 1/4; + margin: 0; + border: 1px solid #cfcfcf; + aspect-ratio: 5/3; + overflow: hidden; +} + +.portfolio-group figure figcaption{ display: none; } + +.portfolio-group figure img{ + width: 100%; + display: flex; + +} + +.portfolio-group h1{ + grid-column: 2; + grid-row: 1; + font-size: var(--title); + line-height: 1.2em; + margin-top: 5px; +} + +.portfolio-group p{ + grid-column: 2; + grid-row: 2; + width: 54ch; +} + +.portfolio-group .details{ + grid-column: 2; + grid-row: 3; + margin-top: 0.75em; +} + + +.portfolio-group .details dl{ + display: flex; + margin-bottom: 0.5ch; + +} + +.portfolio-group .details dt{ + width: 12ch; + font-weight: bold; + flex: 0 0 auto; +} + + diff --git a/assets/template.html b/assets/template.html new file mode 100644 index 0000000..ebd7fd2 --- /dev/null +++ b/assets/template.html @@ -0,0 +1,42 @@ + + + + + + $title$ + + + + + + + + + + + + + +

$title$

$baseline$

+ + + + + $body$ + + + + + + + + \ No newline at end of file diff --git a/images/acau.png b/images/acau.png new file mode 100644 index 0000000..6f2d540 Binary files /dev/null and b/images/acau.png differ diff --git a/images/actuel-inactuel.png b/images/actuel-inactuel.png new file mode 100644 index 0000000..fbdcdde Binary files /dev/null and b/images/actuel-inactuel.png differ diff --git a/images/chromobase.png b/images/chromobase.png new file mode 100644 index 0000000..0b524a3 Binary files /dev/null and b/images/chromobase.png differ diff --git a/images/cultures-visuelles.png b/images/cultures-visuelles.png new file mode 100644 index 0000000..36c655d Binary files /dev/null and b/images/cultures-visuelles.png differ diff --git a/images/decarb-one.png b/images/decarb-one.png new file mode 100644 index 0000000..ceee9c0 Binary files /dev/null and b/images/decarb-one.png differ diff --git a/images/esaj.png b/images/esaj.png new file mode 100644 index 0000000..ac8aec7 Binary files /dev/null and b/images/esaj.png differ diff --git a/images/medialab.png b/images/medialab.png new file mode 100644 index 0000000..0fefc4c Binary files /dev/null and b/images/medialab.png differ diff --git a/images/repenser-les-heros.png b/images/repenser-les-heros.png new file mode 100644 index 0000000..9c328df Binary files /dev/null and b/images/repenser-les-heros.png differ diff --git a/images/studio-variable_Adrien.jpg b/images/studio-variable_Adrien.jpg new file mode 100644 index 0000000..85ccd97 Binary files /dev/null and b/images/studio-variable_Adrien.jpg differ diff --git a/images/studio-variable_Julie.jpg b/images/studio-variable_Julie.jpg new file mode 100644 index 0000000..eea41f2 Binary files /dev/null and b/images/studio-variable_Julie.jpg differ diff --git a/images/wysiwyg.png b/images/wysiwyg.png new file mode 100644 index 0000000..3d44248 Binary files /dev/null and b/images/wysiwyg.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..95cd515 --- /dev/null +++ b/index.html @@ -0,0 +1,801 @@ + + + + + + Studio Variable + + + + + + + + + + + + + +

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.

Note intention

Notre intervention se concentre 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é.

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 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 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, au service du réseau + RésIn.

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é 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.
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.
Selon la pertinence, un fil + d’Ariane (breadcrumb) pour contextualiser
les profils + affichés.

Devis

→ Taux journalier: 800€ HT

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tâche	Jours	€ (HT)
Création du logo	1	800
Identité visuelle avec mockup d’une page responsive type + (maquettes HTML & CSS)	2	1600
UI arbre de compétences (explorable, filtrage)	1.5	1200
Développement front-end de toutes les pages responsives
→ Home page	1	800
→ Pages listes et de tri	1.5	1200
→ Pages individuelles	1.5	1200
→ Pages de contenu: présentation, + ressources, etc.	0.5	400
→ Intégration au code existant	30.00%	1080
Mise en place de la recherche réactive	0.5	400
Révisions UI et petits ajustements	0.5	400
Tests cross-device, optimisation HTML/CSS/JS et + accessibilité	0.5	400
Gestion de projet	10.00%	948

+ + + + + + + + + + + + + + + + + +

Sous total HT	10428
TVA 20 %	2085.6
Total TTC	12513.6

Note : Si votre structure ne récupère pas la TVA et que cela + constitue une contrainte budgétaire, nous vous invitons à nous en + faire part afin d’en discuter.

Planning & phases

Démarrage : dès sélection (idéalement semaine + du 13 octobre 2025).
Rendu final : 8 décembre 2025.
Mode : itérations de 1 à 2 semaines (sprints courts).

Phases

Semaine 1 (13–17 oct.) : Échange pour le démarrage du projet, + accès API
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
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 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 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 8 (1–5 déc.) : Tests & optimisation.
Livraison finale : au plus tard 8 + décembre 2025.

Livrables

Copie du dépôt GitHub public (AGPLv3) avec : code, + Dockerfile
Pack logo (.svg / .png multi-résolution).
Maquettes codées (HTML/SCSS) si demandées

Équipe

Julie Blanc, chef de 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 + techonologies du web par les designers graphique.

Adrien Payet

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.

Sélection de projets

WYSIWYG

Projet de recherche l’évolution des logiciels de graphisme en + Suisse et en France (1980 - aujourd’hui)

+ URL +: + wysiwyg.ch +

+ Secteur +: + Recherche +

+ Client +: + HEAD – Genève, Haute école d’art et de design +

+ Prestation(s) +: + Design, développement full-stack +

+ Date +: + 2025 +

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.

+ URL +: + chromobase.huma-num.fr +

+ Secteur +: + Recherche +

+ Client +: + Sorbonne Université, CNAM, University of Oxford +

+ Prestation(s) +: + Design, front-end +

+ Partenaire(s) +: + OuestWare (développement) +

+ Date +: + 2023 +

médialab

Laboratoire interdisplinaire qui interroge les relations entre le + numérique et nos sociétés.

+ URL +: + medialab.sciencespo.fr +

+ Secteur +: + Recherche +

+ Client +: + médialab, SciencesPo +

+ Prestation(s) +: + Design, développement front-end +

+ Partenaire(s) +: + en collaboration avec Benjamin Benjamin Gremillon et l’équipe du + médialab +

+ Date +: + 2019 +

Cultures visuelles

Plateforme pour le programme de recherche, intégrant une + interface graphique an front-end pour l’édition du contenu.

+ URL +: + culturesvisuelles.org +

+ Secteur +: + Recherche +

+ Client +: + Université de Strasbourg +

+ Prestation(s) +: + Design, éveloppement full-stack +

+ Partenaire(s) +: + en collaboration avec Timothée Goguely +

+ Date +: + 2020 +

actuel-inactuel

Plateforme pour une critique des arts et des techniques.

+ URL +: + actuel-inactuel.fr +

+ Secteur +: + Recherche +

+ Client +: + Association époque +

+ Prestation(s) +: + Design, éveloppement full-stack +

+ Date +: + 2024 +

Héro·ïne·s

Publication du groupe de recherche de La Fémis à propos de la + figure du héros dans les œuvres et pratiques artistiques

+ URL +: + repenserlesheros.femis.fr +

+ Secteur +: + Recherche +

+ Client +: + groupe de recherche de La Fémis / SACRe, PSL +

+ Prestation(s) +: + Design, développement full-stack +

+ +

+ Date +: + 2021 +

ACAU

Site vitrine pour l’Agence Coopérative Architectes + Urbanistes.

+ URL +: + acau-architectes.fr/ +

+ Secteur +: + Communication +

+ Client +: + Agence Coopérative Architectes Urbanistes +

+ Prestation(s) +: + Développement full-stack +

+ Partenaire(s) +: + Plastac (design) +

+ Date +: + 2024 +

Decarb.one

Site vitrine pour l’agence de relations presse et de + communication, decarb.one qui raconte un monde décarboné.

+ URL +: + decarb.one +

+ Secteur +: + Communication +

+ Client +: + decarb.one +

+ Prestation(s) +: + Design, développement full-stack +

+ Partenaire(s) +: + en collaboration avec Praticable +

+ Date +: + 2022 +

STUDIO VARIABLE
+ SAS, société par actions simplifiée au capital social de 1 200,00 + €
+ N° SIRET 988 558 003 00014
+ N° de TVA FR95988558003

Siège social:
+ 22 rue Boyer
+ 75020 Paris - France

Lieu d’activité:
+ Césure (Bureau 339)
+ 13 rue Santeuil
+ 75005 Paris - France

Site web: studio-variable.com

Pour nous contacter: contact@studio-variable.com

+ + + + + + + + \ No newline at end of file diff --git a/src/details.md b/src/details.md new file mode 100644 index 0000000..e36bfb5 --- /dev/null +++ b/src/details.md @@ -0,0 +1,18 @@ +STUDIO VARIABLE \ +SAS, société par actions simplifiée au capital social de 1 200,00 € \ +N° SIRET 988 558 003 00014 \ +N° de TVA FR95988558003 + +Siège social: \ +22 rue Boyer \ +75020 Paris - France + +Lieu d’activité: \ +Césure (Bureau 339) \ +13 rue Santeuil \ +75005 Paris - France + +Site web: [studio-variable.com](https://studio-variable.com/) + +Pour nous contacter: contact@studio-variable.com + diff --git a/src/devis.md b/src/devis.md new file mode 100644 index 0000000..9ab83fa --- /dev/null +++ b/src/devis.md @@ -0,0 +1,38 @@ +## Devis + +→ Taux journalier: 800€ HT + + + +| **Tâche** | **Jours** | **€ (HT)** | +| ------------------------------------------------------------ | --------- | ---------- | +| Création du logo | 1 | 800 | +| Identité visuelle avec mockup d’une page responsive type (maquettes HTML & CSS) | 2 | 1600 | +| UI arbre de compétences (explorable, filtrage) | 1.5 | 1200 | +| Développement front-end de toutes les pages responsives | | | +| → Home page | 1 | 800 | +| → Pages listes et de tri | 1.5 | 1200 | +| → Pages individuelles | 1.5 | 1200 | +| → Pages de contenu: présentation, ressources, etc. | 0.5 | 400 | +| → Intégration au code existant | 30.00% | 1080 | +| Mise en place de la recherche réactive | 0.5 | 400 | +| Révisions UI et petits ajustements | 0.5 | 400 | +| Tests cross-device, optimisation HTML/CSS/JS et accessibilité | 0.5 | 400 | +| Gestion de projet | 10.00% | 948 | + + + +

+ +| Sous total HT | 10428 | +| ------------- | ------- | +| TVA 20 % | 2085.6 | +| Total TTC | 12513.6 | + + + + +

+ +Note : Si votre structure ne récupère pas la TVA et que cela constitue une contrainte budgétaire, nous vous invitons à nous en faire part afin d’en discuter. + diff --git a/src/equipe.md b/src/equipe.md new file mode 100644 index 0000000..950c26c --- /dev/null +++ b/src/equipe.md @@ -0,0 +1,29 @@ +## Équipe + +

+ +![.](images/studio-variable_Julie.jpg) + +# Julie Blanc, chef de 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 techonologies du web par les designers graphique. + +

+ +

+ +![.](images/studio-variable_Adrien.jpg) + +# Adrien Payet + +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. + + +

+ + diff --git a/src/files.yaml b/src/files.yaml new file mode 100644 index 0000000..527896d --- /dev/null +++ b/src/files.yaml @@ -0,0 +1,17 @@ +input-files: + - src/studio-variable.md + - src/note-intention.md + - src/devis.md + - src/planning.md + - src/livrables.md + - src/equipe.md + - src/portfolio-introduction.md + - src/portfolio-1img/wysiwyg.md + - src/portfolio-1img/chromobase.md + - src/portfolio-1img/medialab.md + - src/portfolio-1img/cultures-visuelles.md + - src/portfolio-1img/actuel-inactuel.md + - src/portfolio-1img/heroines.md + - src/portfolio-1img/acau.md + - src/portfolio-1img/decarb-one.md + - src/details.md \ No newline at end of file diff --git a/src/livrables.md b/src/livrables.md new file mode 100644 index 0000000..2cd9010 --- /dev/null +++ b/src/livrables.md @@ -0,0 +1,5 @@ +## Livrables + +- Copie du dépôt GitHub public (AGPLv3) avec : code, Dockerfile +- Pack logo (.svg / .png multi-résolution). +- Maquettes codées (HTML/SCSS) si demandées \ No newline at end of file diff --git a/src/meta.yaml b/src/meta.yaml new file mode 100644 index 0000000..fb0578c --- /dev/null +++ b/src/meta.yaml @@ -0,0 +1,8 @@ +--- +title: "Studio Variable" +baseline: "Design × code" +client: "Proposition RésIn" +date: "6 octobre 2025" +contact: "contact@studio-varible.com" +footer: "Studio Variable – Proposition RésIn" +--- \ No newline at end of file diff --git a/src/note-intention.md b/src/note-intention.md new file mode 100644 index 0000000..a223fae --- /dev/null +++ b/src/note-intention.md @@ -0,0 +1,19 @@ +## Note intention + +Notre intervention se concentre 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é. + +**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 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 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, au service du réseau RésIn. + + +### 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é 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. +- **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.
Selon la pertinence, un fil d’Ariane (breadcrumb) pour contextualiser
les profils affichés. \ No newline at end of file diff --git a/src/planning.md b/src/planning.md new file mode 100644 index 0000000..2a5e7e1 --- /dev/null +++ b/src/planning.md @@ -0,0 +1,21 @@ +## Planning & phases + +- Démarrage : **dès sélection** (idéalement semaine du 13 octobre 2025). +- Rendu final : **8 décembre 2025**. +- Mode : itérations de 1 à 2 semaines (sprints courts). + + +### Phases + +- Semaine 1 (13–17 oct.) : Échange pour le démarrage du projet, accès API +- 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** +- 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 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 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 8 (1–5 déc.) : Tests & optimisation. +- **Livraison finale** : au plus tard **8 décembre 2025**. + diff --git a/src/portfolio-1img/acau.md b/src/portfolio-1img/acau.md new file mode 100644 index 0000000..8400d34 --- /dev/null +++ b/src/portfolio-1img/acau.md @@ -0,0 +1,33 @@ +# ACAU + +Site vitrine pour l’Agence Coopérative Architectes Urbanistes. + +![.](images/acau.png) + +

URL: acau-architectes.fr/ +

Secteur: Communication

Client: Agence Coopérative Architectes Urbanistes

Prestation(s): Développement full-stack

Partenaire(s): Plastac (design)

Date: 2024

diff --git a/src/portfolio-1img/actuel-inactuel.md b/src/portfolio-1img/actuel-inactuel.md new file mode 100644 index 0000000..b521192 --- /dev/null +++ b/src/portfolio-1img/actuel-inactuel.md @@ -0,0 +1,29 @@ +# actuel-inactuel + +Plateforme pour une critique des arts et des techniques. + +![.](images/actuel-inactuel.png) + +

URL: actuel-inactuel.fr +

Secteur: Recherche

Client: Association époque

Prestation(s): Design, éveloppement full-stack

Date: 2024

diff --git a/src/portfolio-1img/chromobase.md b/src/portfolio-1img/chromobase.md new file mode 100644 index 0000000..8e118fd --- /dev/null +++ b/src/portfolio-1img/chromobase.md @@ -0,0 +1,33 @@ +# 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. + +![.](images/chromobase.png) + +

URL: chromobase.huma-num.fr +

Secteur: Recherche

Client: Sorbonne Université, CNAM, University of Oxford

Prestation(s): Design, front-end

Partenaire(s): OuestWare (développement)

Date: 2023

diff --git a/src/portfolio-1img/cultures-visuelles.md b/src/portfolio-1img/cultures-visuelles.md new file mode 100644 index 0000000..828cf16 --- /dev/null +++ b/src/portfolio-1img/cultures-visuelles.md @@ -0,0 +1,33 @@ +# Cultures visuelles + +Plateforme pour le programme de recherche, intégrant une interface graphique an front-end pour l’édition du contenu. + +![.](images/cultures-visuelles.png) + +

URL: culturesvisuelles.org +

Secteur: Recherche

Client: Université de Strasbourg

Prestation(s): Design, éveloppement full-stack

Partenaire(s): en collaboration avec Timothée Goguely

Date: 2020

diff --git a/src/portfolio-1img/decarb-one.md b/src/portfolio-1img/decarb-one.md new file mode 100644 index 0000000..05d7902 --- /dev/null +++ b/src/portfolio-1img/decarb-one.md @@ -0,0 +1,33 @@ +# Decarb.one + +Site vitrine pour l’agence de relations presse et de communication, decarb.one qui raconte un monde décarboné. + +![.](images/decarb-one.png) + +

URL: decarb.one +

Secteur: Communication

Client: decarb.one

Prestation(s): Design, développement full-stack

Partenaire(s): en collaboration avec Praticable

Date: 2022

diff --git a/src/portfolio-1img/heroines.md b/src/portfolio-1img/heroines.md new file mode 100644 index 0000000..e8a6ff6 --- /dev/null +++ b/src/portfolio-1img/heroines.md @@ -0,0 +1,33 @@ +# Héro·ïne·s + +Publication du groupe de recherche de La Fémis à propos de la figure du héros dans les œuvres et pratiques artistiques + +![.](images/repenser-les-heros.png) + +

URL: repenserlesheros.femis.fr +

Secteur: Recherche

Client: groupe de recherche de La Fémis / SACRe, PSL

Prestation(s): Design, développement full-stack

+ +

Date: 2021

diff --git a/src/portfolio-1img/medialab.md b/src/portfolio-1img/medialab.md new file mode 100644 index 0000000..bb809da --- /dev/null +++ b/src/portfolio-1img/medialab.md @@ -0,0 +1,33 @@ +# médialab + +Laboratoire interdisplinaire qui interroge les relations entre le numérique et nos sociétés. + +![.](images/medialab.png) + +

URL: medialab.sciencespo.fr +

Secteur: Recherche

Client: médialab, SciencesPo

Prestation(s): Design, développement front-end

Partenaire(s): en collaboration avec Benjamin Benjamin Gremillon et l’équipe du médialab

Date: 2019

diff --git a/src/portfolio-1img/wysiwyg.md b/src/portfolio-1img/wysiwyg.md new file mode 100644 index 0000000..8ce4510 --- /dev/null +++ b/src/portfolio-1img/wysiwyg.md @@ -0,0 +1,29 @@ +# WYSIWYG + +Projet de recherche l’évolution des logiciels de graphisme en Suisse et en France (1980 - aujourd'hui) + +![.](images/wysiwyg.png) + +

URL: wysiwyg.ch +

Secteur: Recherche

Client: HEAD – Genève, Haute école d'art et de design

Prestation(s): Design, développement full-stack

Date: 2025

diff --git a/src/portfolio-introduction.md b/src/portfolio-introduction.md new file mode 100644 index 0000000..f883bbf --- /dev/null +++ b/src/portfolio-introduction.md @@ -0,0 +1 @@ +## Sélection de projets \ No newline at end of file diff --git a/src/studio-variable.md b/src/studio-variable.md new file mode 100644 index 0000000..e431aa8 --- /dev/null +++ b/src/studio-variable.md @@ -0,0 +1,5 @@ +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. \ No newline at end of file