portfolio

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);
 }

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);
+}

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",

maquette-tests/index.html

@@ -54,6 +54,126 @@
     -->
 
 
+      <section class="chapter" data-chapter="portfolio">
+
+
+    <span class="nav-decor">D6cor</span>
+    <span class="nav-author">Josèfa Ntjam</span>
+    <span class="nav-title">Swell of spaec(i)es</span>
+
+
+    <div class="spread" id="josefa-1">
+        <figure class="spread__left"><div class="spread-content"><img  src="/images/josefa-06.png"></div></figure>
+        <figure class="spread__right"><div class="spread-content"><img src="/images/josefa-06.png"></div></figure>
+    </div>
+    
+   
+        <div class="chapter-header">
+                        <div class="hgroup-before">++++<br>+++++<br>+++<br>++<br>
+                            +<br>+<br>+<br>+<br>+<br>+<br>
+                            +++<br>++<br>+<br>+<br>
+                            +<br><br>+<br>++<br>+<br></div>
+                        <div class="hgroup">
+                            <div class="title-before">++--------------------------+</div>
+                            <h2><span>Swell of spaec(i)es</span></h2>
+                            <p class="author"><span>Josefa Ntjam</span></p>
+                            <div class="title-after">+--------------------------++</div>
+                        </div>
+                                  <div class="hgroup-after">+<br>++<br>+++<br>++++<br>+++<br>++<br>+<br>
+                           </div>
+        </div>
+
+        <p class="following-title">
+Dans la vidéo <em>swell of spæc(i)es</em> (2024) Josèfa Ntjam s'attache à réécrire les mythes Dogons et Huaorani entre l'espace sidéral et l'espace aquatique.
+            </p>
+
+            <p>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 ».</p>
+ <p>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.</p>
+<p>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.</p>
+<p>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 <br> 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.</p>
+<p></p>
+
+<p>Elsa Boyer</p>
+
+     <div class="spread" id="josefa-2">
+        <figure class="spread__left"><div class="spread-content"><img  src="/images/josefa-02.png"></div></figure>
+        <figure class="spread__right"><div class="spread-content"><img src="/images/josefa-02.png"></div></figure>
+
+        <div id="josepha-2__1">
+            <img src="/images/josefa-03.png">
+        </div>
+    </div>
+
+
+     <div class="spread" id="josefa-3">
+        <figure class="spread__left">
+            <div class="spread-content"><img  class="background" src="/images/josefa-05.png"></div>
+              <div id="josepha-3__1_left"><img src="/images/josefa-01.png"></div> 
+        
+        </figure>
+        <figure class="spread__right">
+            <div class="spread-content"><img class="background" src="/images/josefa-05.png"></div>
+             <div id="josepha-3__1_right"><img src="/images/josefa-01.png"></div> 
+        </figure>
+    </div>
+
+
+     <div class="spread" id="josefa-4">
+        <figure class="spread__left">
+            <div class="spread-content"><img class="background" src="/images/josefa-08.png"></div>
+          
+        </figure>
+        <figure class="spread__right">
+            <div class="spread-content"><img class="background" src="/images/josefa-08.png"></div>
+              <div id="josepha-4_inside"><img src="/images/josefa-09.png"></div> 
+        </figure>
+    </div>
+
+
+     <div class="spread" id="josefa-5">
+        <figure class="spread__left">
+            <div class="spread-content"><img class="background" src="/images/josefa-install.jpg"></div>
+          
+        </figure>
+        <figure class="spread__right">
+            <div class="spread-content"><img class="background" src="/images/josefa-install.jpg"></div>
+              <!-- <div id="josepha-4_inside"><img src="/images/josefa-09.png"></div>  -->
+        </figure>
+    </div>
+
+
+
+
+<div class="end-portfolio"></div>
+
+            </section>
+
+
+   <section class="chapter" data-chapter="portfolio-bis">
+
+
+    <span class="nav-decor">D6cor</span>
+    <span class="nav-author">Josèfa Ntjam</span>
+    <span class="nav-title">Swell of spaec(i)es</span>
+
+
+    <div class="josepha-grid josepha-grid-1">
+        <img class="background" src="/images/josefa-01.png">
+          <img class="background" src="/images/josefa-02.png">
+            <img class="background" src="/images/josefa-03.png">
+              <img class="background" src="/images/josefa-04.png">
+                <img class="background" src="/images/josefa-05.png">
+    </div>
+
+     <div class="josepha-grid josepha-grid-2">
+        <img class="background" src="/images/josefa-06.png">
+          <img class="background" src="/images/josefa-07.png">
+            <img class="background" src="/images/josefa-08.png">
+              <img class="background" src="/images/josefa-09.png">
+                <img class="background" src="/images/josefa-10.png">
+    </div>
+
+    </section>s
 
     <section class="chapter" data-chapter="essai" id="olivain-porry">
 

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);