portfolio iyo bissek

assets/css/figures.css

@@ -49,6 +49,10 @@ figure[data-crop="false"] img {
 
 
 /* --- INTERPAGE ---- */
+
+.interpage{
+  break-before: left;
+}
 .interpage figure {
   /*background-color: var(--copper);*/
   background-color: var(--silver);

assets/css/portfolio.css

@@ -3,8 +3,33 @@
     --pagedjs-fold: 0px;
 }
 
+.portfolio{
+  page: portfolio;
+  --margin: 8mm;
+}
+
+@page portfolio:first{
+   
+    @top-left { content: none;}
+    @top-right { content: none; }
+    @top-center { content: none;}
+     @top-right-corner { content: none;}
+      @top-left-corner { content: none; display: none; }
+}
+
+@page portfolio:nth(2){
+   
+    @top-left { content: none;}
+    @top-right { content: none; }
+    @top-center { content: none;}
+     @top-right-corner { content: none;}
+      @top-left-corner { content: none; display: none; }
+}
+
+
+
 .pagedjs_portfolio_page .pagedjs_sheet{
-  overflow: visible !important;
+  /* overflow: visible !important; */
 }
 
 [data-chapter="portfolio"] p{
@@ -19,6 +44,114 @@
 }
 
 
+.portfolio .chapter-header{
+  break-before: right;
+}
+
+
+.portfolio img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+}
+
+
+.intro-portfolio{
+  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
+  position: absolute;
+  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
+  top: calc(var(--pagedjs-margin-top)*-1 + var(--margin));
+
+}
+
+.portfolio-simple-paysage{
+  width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
+  position: relative;
+  left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
+}
+
+
+.portfolio-full-page{
+     break-before: page;
+   break-after: page;
+}
+
+.portfolio-full-page figure{
+  position: absolute;
+  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)*2);
+  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
+  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
+  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
+ z-index: -1;
+}
+
+
+.portfolio-spread-left{
+  break-before: left;
+}
+
+.portfolio-spread-right{
+    break-before: right;
+}
+
+.portfolio-spread figure{
+  position: absolute;
+  z-index: -1;
+  width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
+  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
+  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
+  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
+}
+
+.portfolio-spread-right figure{
+  left: calc(var(--pagedjs-pagebox-width)*-1 - var(--pagedjs-margin-left) - var(--bleed-images));
+}
+
+
+
+
+
+/* IYO BISSECK -------------------------------------------- */
+
+#fig-iyo-bisseck-3{
+  break-before: page;
+}
+
+
+#fig-iyo-bisseck-4 img{
+  object-fit: contain;
+  width: 80%;
+  object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));
+
+}
+
+
+/* #fig-iyo-bisseck-5 img{
+  position: relative;
+  width: 80%;
+  left: calc(20% - var(--bleed-images));
+ object-fit: contain;
+  object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
+} */
+
+#fig-iyo-bisseck-5 img{
+    object-fit: contain;
+  width: 80%;
+  position: relative;
+  left: calc(10% - var(--bleed-images));
+
+}
+
+#fig-iyo-bisseck-6, #fig-iyo-bisseck-7{
+  break-before: page;
+}
+
+
+
+
+
+
 /* ------ DOUBLE PAGE ------- */ 
 
 .spread{
@@ -45,7 +178,6 @@
   left: 0;
   overflow: hidden;
   break-after: page;
-  /*break-before: left;*/
 }
 .spread__right{
   margin: 0;

assets/css/print-template.css

@@ -72,9 +72,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
   --pagedjs-full-page: spread;
 }
 
+
+.block-type-fullpageimage{
+  break-before: page;
+  break-after: page;
+}
+
 .full-bleed-image{
-  break-before: left;
-  page-break-after: always;
   position: absolute;
   top: calc(var(--pagedjs-margin-top)*-1 - var(--pagedjs-bleed-top));
   height: var(--pagedjs-height);
@@ -220,7 +224,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
 }
 
 
-.spread-image figure.full-width img;
+.spread-image figure.full-width img,
 .full-bleed-image figure.full-width img{
   max-width: 100%;
   height: auto;

assets/css/print.css

@@ -166,11 +166,11 @@
 
 
   @page:blank {
-    @top-left { content: none;}
+    /* @top-left { content: none;}
     @top-left-corner { content: none;}
     @top-right { content: none; }
     @top-center { content: none;}
-    @bottom-center { content: none; }
+    @bottom-center { content: none; } */
 
 
   }

assets/js/plugins/beforeParsed.js

@@ -6,6 +6,7 @@ class before extends Paged.Handler {
 
     beforeParsed(content) {
         paragraphId(content);
+        portfolioSpread(content);
     }
 }
 
@@ -29,3 +30,13 @@ function paragraphId(content) {
     });
 
 }
+
+
+function portfolioSpread(content){
+    content.querySelectorAll('.portfolio-spread').forEach(block => {
+        const clone = block.cloneNode(true);
+        clone.classList.add('portfolio-spread-right');
+        block.classList.add('portfolio-spread-left');
+        block.parentNode.insertBefore(clone, block.nextSibling);
+    });
+}

assets/js/plugins/followingNotes.js

@@ -10,15 +10,13 @@ class followingNotes extends Paged.Handler {
     super(chunker, polisher, caller);
     this.notesClass = ".inline-note";
     this.newNotesClass = "following-note";
-    // this.reset = this.parameters?.reset;
+    this.reset = ".chapter";
     // this.align = this.parameters?.align;
     this.followingNoteOverflow = new Set();
   }
 
   beforeParsed(content) {
 
-    console.log("floatnotes");
-
     let newNotesClass = this.newNotesClass;
     resetCounter(content, this.reset, this.notesClass);
     createCallandMarker(content, this.notesClass, newNotesClass);

content/1_un-robot-poete-ne-nous-fait-toujours-pas-peur/chapitre.txt

@@ -2,11 +2,11 @@ Title: Un robot-poète ne nous fait toujours pas peur
 
 ----
 
-Maquette: false
+Maquette: true
 
 ----
 
-Typesetting: false
+Typesetting: true
 
 ----
 

content/2_iyo-bisseck/chapitre.txt

@@ -1,8 +1,16 @@
-Title: Iyo Bisseck
+Title: Wilderness Garden
 
 ----
 
-Id: iyo-bisseck
+Maquette: false
+
+----
+
+Typesetting: false
+
+----
+
+Correction: false
 
 ----
 
@@ -22,33 +30,24 @@ Bio:
 
 ----
 
-Text: [{"content":{"text":"<p>Wilderness Garden est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le joueur traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir : une salle d’archives, un bureau administratif, les profondeurs d’Internet, ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un « jardin » à protéger du reste du monde. En reprenant cette image, Wilderness Garden questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueurs à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueurs rencontrent un jardin clos où la surveillance rappelle les mécanismes du «contrat racial », une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la CAF, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes : une cérémonie de mémoire au cœur des infrastructures numériques, ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.</p><p>À travers ce voyage non linéaire, Wilderness Garden invite les joueurs à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":[],"id":"de1021ac-030f-46be-8673-b48556f62b1f","isHidden":false,"type":"break"}]
+Text: [{"content":{"text":"<p>Wilderness Garden est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le joueur traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir : une salle d’archives, un bureau administratif, les profondeurs d’Internet, ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un « jardin » à protéger du reste du monde. En reprenant cette image, Wilderness Garden questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueurs à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueurs rencontrent un jardin clos où la surveillance rappelle les mécanismes du «contrat racial », une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la CAF, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes : une cérémonie de mémoire au cœur des infrastructures numériques, ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.</p><p>À travers ce voyage non linéaire, Wilderness Garden invite les joueurs à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":[],"id":"de1021ac-030f-46be-8673-b48556f62b1f","isHidden":false,"type":"break"},{"content":{"image":["file://36fsvvwod97nz1ga"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-full-page"},"id":"b9b6bc49-ccef-4600-a790-7e89038dfcb5","isHidden":false,"type":"image"},{"content":{"image":["file://czj4n0r93jw8ofsb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3c909f8b-7039-4534-887a-d3e3503bc0dd","isHidden":false,"type":"image"},{"content":{"image":["file://coa5h7f71hdru7mj"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"3f146491-fb30-44c7-9efa-d06d46f24b2c","isHidden":false,"type":"image"},{"content":{"image":["file://ujynt8nqvk8r2qie"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"f844e22d-3270-4fcd-98e6-5b7fe6a20b7f","isHidden":false,"type":"image"},{"content":{"image":["file://shprtv8wmmlccuma"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"98e0f3bf-571c-45f7-bc08-59ea5b4aa4cb","isHidden":false,"type":"image"},{"content":{"image":["file://1doh2xvgznjyh1b5"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"96a2ee17-2755-4791-a4fd-89216171636b","isHidden":false,"type":"image"},{"content":{"image":["file://rkfkgfwvwaoqqqkb"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-simple-paysage"},"id":"f6f02f7e-0006-4b92-8831-e611a8f07cde","isHidden":false,"type":"image"}]
+
+----
+
+Avant-titre:
+
+image:
+  - file://agycxmm3k3mpbba0
+caption: ""
+doublepage: 'false'
 
 ----
 
 Portfolio: 
 
-- 
+----
-  spread:
+
-    - file://ujynt8nqvk8r2qie
+Id: iyo-bisseck
-  imageontop:
-    - file://shprtv8wmmlccuma
-  position: center
-  largeur: 13
-- 
-  spread:
-    - file://rkfkgfwvwaoqqqkb
-  imageontop:
-    - file://1doh2xvgznjyh1b5
-  position: bottomright
-  largeur: 15
-- 
-  spread:
-    - file://36fsvvwod97nz1ga
-  imageontop:
-    - file://coa5h7f71hdru7mj
-  position: topleft
-  largeur: 20
 
 ----