diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index 0724eef..9147b00 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -280,10 +280,26 @@ [data-chapter="portfolio"]{ --sign-color: var(--green); + --sign-color: white; page: portfolio; - break-before: right; + break-before: left; } + @page portfolio{ --sign-color: var(--green); + --sign-color: white; +} + + + +[data-chapter="portfolio-bis"]{ + --sign-color: var(--green); + page: portfolioBis; + break-before: left; +} + + +@page portfolioBis{ + --sign-color: var(--green); } \ No newline at end of file diff --git a/maquette-tests/assets/css/portfolio.css b/maquette-tests/assets/css/portfolio.css new file mode 100644 index 0000000..55314f1 --- /dev/null +++ b/maquette-tests/assets/css/portfolio.css @@ -0,0 +1,220 @@ +:root{ + --bleed-images: 3mm; + --pagedjs-fold: 0px; +} + + +[data-chapter="portfolio"] p{ + color: white; +} + +.pagedjs_portfolio_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after, +.pagedjs_portfolio_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{ + background-color: black; + color: white; + padding: 0; +} + +[data-chapter="portfolio"] .chapter-header h2 span, +[data-chapter="portfolio"] .chapter-header .author span{ + color: black; + padding-right: 0.75ch; +} + + +/* DOUBLE */ + +.spread{ + position: relative; + z-index: -1; +} +.spread__left{ + + margin: 0; + width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)); + height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important; + position: absolute; + top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1); + left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1); + overflow: hidden; + break-after: page; + } + .spread__right{ + margin: 0; + width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)); + height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important; + position: absolute; + top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1); + left: calc(var(--pagedjs-margin-left)*-1); + overflow: hidden; + } + .spread-content{ + margin: 0; + width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2); + height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important; + position: absolute; + top: 0; + left: 0; + } + + .spread__left .spread-content{ + left: calc(var(--pagedjs-fold)*-1); + } + .spread__right .spread-content{ + left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold)); + } + + + + + + + /* SPECIFIC */ + + #josefa-1 .spread-content img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: -310px 10px; + +} + + + #josefa-2 .spread__left{ + top: -280px; + } + #josefa-2 .spread-content img{ + width: 100%; + height: 120%; + object-fit: cover; + object-position: -1700px 0px; + +} + + +#josepha-2__1{ + z-index: 100; + width: 140mm; + height: 190mm; + position: absolute; + left: -15mm; + overflow: hidden; +} + +#josepha-2__1 img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: -900px 0px; +} + +#josefa-3{ + break-before: left; +} + + #josefa-3 .background{ + width: 100%; + height: 120%; + object-fit: cover; + object-position: -1800px 0px; + +} + + +#josepha-3__1_left{ + z-index: 100; + width: 100%; + height: 156mm; + position: absolute; + top: -100px; + overflow: hidden; +} + +#josepha-3__1_left img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: -900px 0px; + +} + +#josepha-3__1_right{ + z-index: 100; + width: calc(var(--pagedjs-pagebox-width)*0.4); + height: 156mm; + position: absolute; + top: -100px; + overflow: hidden; +} + +#josepha-3__1_right img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: calc(var(--pagedjs-pagebox-width)*-1 - var(--bleed-images) - 900px) 0px; +} + + +#josefa-4{ + break-before: left; +} + + #josefa-4 .background{ + width: 100%; + height: 120%; + object-fit: cover; + object-position: -1900px -200px; + +} + + + +#josepha-4_inside{ + z-index: 100; + width: 140mm; + height: 190mm; + position: absolute; + bottom: -5mm; + right: -5mm; + overflow: hidden; +} + +#josepha-4_inside img{ + width: 100%; + height: 100%; + object-fit: cover; + /* object-position: -900px 0px; */ +} + + + + +#josefa-5{ + break-before: left; +} + + #josefa-5 figure{ + /* background-color: black; */ + } + + #josefa-5 .background{ + width: 100%; + height: 100%; + object-fit: cover; + /* object-position: -1900px -200px; */ + +} + +.josepha-grid-1{ +break-before: left; +} + +.josepha-grid{ + width: 100%; +} + + +.josepha-grid img{ + width: 100%; + margin-bottom: calc(var(--baseline)*0.5); +} diff --git a/maquette-tests/csspageweaver/manifest.json b/maquette-tests/csspageweaver/manifest.json index f5b741d..1b464be 100644 --- a/maquette-tests/csspageweaver/manifest.json +++ b/maquette-tests/csspageweaver/manifest.json @@ -32,7 +32,8 @@ "assets/css/text.css", "assets/css/subtitles.css", "assets/css/running-page.css", - "assets/css/entretiens.css" + "assets/css/entretiens.css", + "assets/css/portfolio.css" ], "hook": [ "/js/decor-subtitles.js", diff --git a/maquette-tests/images/josefa-01.png b/maquette-tests/images/josefa-01.png new file mode 100644 index 0000000..39ec86e Binary files /dev/null and b/maquette-tests/images/josefa-01.png differ diff --git a/maquette-tests/images/josefa-02.png b/maquette-tests/images/josefa-02.png new file mode 100644 index 0000000..757c311 Binary files /dev/null and b/maquette-tests/images/josefa-02.png differ diff --git a/maquette-tests/images/josefa-03.png b/maquette-tests/images/josefa-03.png new file mode 100644 index 0000000..d16ad3d Binary files /dev/null and b/maquette-tests/images/josefa-03.png differ diff --git a/maquette-tests/images/josefa-04.png b/maquette-tests/images/josefa-04.png new file mode 100644 index 0000000..f413af9 Binary files /dev/null and b/maquette-tests/images/josefa-04.png differ diff --git a/maquette-tests/images/josefa-05.png b/maquette-tests/images/josefa-05.png new file mode 100644 index 0000000..474d0b9 Binary files /dev/null and b/maquette-tests/images/josefa-05.png differ diff --git a/maquette-tests/images/josefa-06.png b/maquette-tests/images/josefa-06.png new file mode 100644 index 0000000..1246860 Binary files /dev/null and b/maquette-tests/images/josefa-06.png differ diff --git a/maquette-tests/images/josefa-07.png b/maquette-tests/images/josefa-07.png new file mode 100644 index 0000000..c5f837d Binary files /dev/null and b/maquette-tests/images/josefa-07.png differ diff --git a/maquette-tests/images/josefa-08.png b/maquette-tests/images/josefa-08.png new file mode 100644 index 0000000..880d5d3 Binary files /dev/null and b/maquette-tests/images/josefa-08.png differ diff --git a/maquette-tests/images/josefa-09.png b/maquette-tests/images/josefa-09.png new file mode 100644 index 0000000..820c8d1 Binary files /dev/null and b/maquette-tests/images/josefa-09.png differ diff --git a/maquette-tests/images/josefa-10.png b/maquette-tests/images/josefa-10.png new file mode 100644 index 0000000..b2b790c Binary files /dev/null and b/maquette-tests/images/josefa-10.png differ diff --git a/maquette-tests/images/josefa-install.jpg b/maquette-tests/images/josefa-install.jpg new file mode 100644 index 0000000..b63814f Binary files /dev/null and b/maquette-tests/images/josefa-install.jpg differ diff --git a/maquette-tests/index.html b/maquette-tests/index.html index d6833da..99a53d9 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -54,6 +54,126 @@ --> +
+ + + D6cor + Josèfa Ntjam + Swell of spaec(i)es + + +
+
+
+
+ + +
+
++++
+++++
+++
++
+ +
+
+
+
+
+
+ +++
++
+
+
+ +

+
++
+
+
+
++--------------------------+
+

Swell of spaec(i)es

+

Josefa Ntjam

+
+--------------------------++
+
+
+
++
+++
++++
+++
++
+
+
+
+ +

+Dans la vidéo swell of spæc(i)es (2024) Josèfa Ntjam s'attache à réécrire les mythes Dogons et Huaorani entre l'espace sidéral et l'espace aquatique. +

+ +

Au lieu d'une origine de la vie et des espèces, Josèfa Ntjam présente une non origine des espèces. Non pas un point d'origine qu'on pourrait identifier mais une boucle, une reprise, un cycle de transformations et de renouveaux qu'elle décrit comme « un processus alchimique en perpétuelle agitation, qui allie les genèses ancestrales avec les nouvelles technologies de génération d'image ».

+

Dans cette boucle, Amma, une divinité créatrice chez les Dogons, jette un fossile dans l'espace qui brise les astéroïdes et crée des étoiles de plancton bioluminescentes. Les étoiles sont ensuite avalées par un serpent astral et se déposent à l'intérieur de son ventre où elles se transforment en fossile. De la bouche du serpent émerge une planète fossile où Nommo, un génie ancestral des eaux dans les mythes dogons, crée une vie marine. Au sein de cette vie marine évolue une pieuvre qui se transforme en Amma, recommençant à nouveau le cycle.

+

Pour réaliser les images de cette vidéo, Josèfa Ntjam a utilisé une IA qui a été alimentée avec un ensemble de données que l'artiste a assemblé elle-même : des modèles 3D de vie marine, des images de statues d'Afrique de l’Ouest conservées dans des collections occidentales, des photographies de figures du mouvement de libération du Cameroun (UPC) contre les troupes coloniales françaises (Elisabeth Djouka, Marthe Ekemeyong Moumie et le grand-père de Josèfa Ntjam). Les modèles de génération automatisée d'images et les outils de modélisation permettent de naviguer visuellement entre les dimensions aquatiques et sidérales que convoque le récit.

+

Si Josèfa Ntjam se sert de l'IA c'est aussi parce qu'à ses yeux elle apporte de nouvelles manières de relier les histoires de domination coloniale et d'extraction des ressources à des récits d'émancipation. L'artiste s'en sert comme d'une ressource pour
hybrider les différentes formes de récits, pour circuler entre plusieurs logiques. swell of spæc(i)es se construit autour d'un point commun que Josèfa Ntjam repère entre les mythes et le fonctionnement de l'IA : comme les mythes, l’IA est itérative, elle répète et fait varier, générant des versions infinies à partir des mêmes éléments de base. En ce sens, l'IA permet aux figures et aux histoires de continuer à se transformer sans jamais se figer.

+

+ +

Elsa Boyer

+ +
+
+
+ +
+ +
+
+ + +
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+ + +
+
+
+ +
+
+
+ +
+
+ + + + +
+ +
+ + +
+ + + D6cor + Josèfa Ntjam + Swell of spaec(i)es + + +
+ + + + + +
+ +
+ + + + + +
+ +
s
diff --git a/maquette-tests/js/decor-subtitles.js b/maquette-tests/js/decor-subtitles.js index 2d1b2f8..1874b72 100644 --- a/maquette-tests/js/decor-subtitles.js +++ b/maquette-tests/js/decor-subtitles.js @@ -143,7 +143,8 @@ export default class itemsDecor extends Handler { ? this.createDecor(symbol, smallSizes, "decor-h6_small", "decor-h6") : this.createDecor(symbol, bigSizes, "decor-h6_big", "decor-h6"); const container = document.createElement("div"); - container.className = "h6_container"; + container.className = "h6_container " + h6.className; + h6.className = ""; h6.parentNode.insertBefore(container, h6); container.appendChild(firstDecor); container.appendChild(h6);