diff --git a/slides/intro.md b/slides/intro.md
new file mode 100644
index 0000000..bb3d466
--- /dev/null
+++ b/slides/intro.md
@@ -0,0 +1,572 @@
+
+---
+
+# Static Graphs
+
+---
+
+##  Static Graphs Structures
+
+- Nodes, Vertices
+- Edges, Links (undirected) 
+- Arcs (directed) 
+
+![Simple Network](/img/simple-network.svg)
+
+
+---
+
+
+## Static Graphs Theory
+
+- graph colouring problems
+- routing problems
+- flow problems
+- covering problems
+- sub-graphs problems
+
+
+---
+
+# Dynamic Graphs
+
+---
+
+## What kind of dynamics?
+
+- values/weight on edges or nodes?
+- nodes and/or edges added/removed?
+
+![Weighted Network](/img/weighted-network.svg)
+
+---
+
+## What kind of algorithms?
+
+- Computation time vs. Graph evolution?
+  - As soon as it gets computed, the result has vanished
+- Can we stop graph evolution and recompute?
+  - It depends on the dynamic graph model
+
+![Time-Varying Network](/img/varying-network.svg)
+
+
+---
+
+## Dynamic Graph Models
+
+<div class="information">
+Many Dynamic Graph models bounded to their application domain
+</div>
+
+- Is there a General model?
+- What about a **Dynamic Graph Theory** (colouring, routing, flows, etc.)?
+
+<!-- 
+- Many graph models consider dynamics in some ways. But they are usually bounded to their application domain.
+- Is there a general-enough model that can be used in a broad range of applications?
+- What about a **Dynamic Graph Theory** with algorithms for colouring, routing, flows, etc.?
+ 
+ -->
+---
+
+## Fields of Research
+
+<!-- 3 columns with black vertical line as a separator -->
+<div class="grid grid-cols-3">
+  <div class="">
+    <h3>Complex Networks</h3>
+    <p>Analysis/Modeling of "real world" networks</p>
+  </div>
+ 
+  <div class="">
+    <h3>Temporal Graphs</h3>
+    <p>Time-labelled static graphs</p>
+  </div>
+  <div class="">
+    <h3>Re-optimisation</h3>
+    <p>Build and maintain structures</p>
+  </div>
+</div>
+
+
+
+---
+
+## Complex Networks
+
+1. **Exploration**: Analysis of "real world" networks (web graphs, biological networks, social networks)
+
+2. **Modelling**: Build artificial networks (Barabasi-Albert, Watts-Strogatz, Dorogovtsev-Mendes, Golomb
+, etc.)
+
+- Measures on graphs: community, distribution, dimensions, etc.
+- Iterative Construction/Iteration: we see dynamic graphs here!
+
+---
+
+## Aggregative Methods
+
+All the evolution is known **in advance**, the dynamic graph is aggregated into a static graph. (Temporal Networks, Evolving Graphs, Time-Varying Graphs, etc.)
+
+Why? Because it allows the use of classical graph theory.
+
+![Aggregative Methods](/img/temporal-network.svg)
+
+---
+
+## Re-optimisation
+
+Build and maintain structures on dynamic graphs (e.g. spanning trees) **without** prior knowledge of the evolution.
+
+**Hypothesis**: Updating an existing structure after some modifications is more effective that recomputing it from scratch.
+
+![Re-optimization](/img/re-optimization.svg)
+
+---
+
+# GraphStream
+
+**Study interaction networks and their dynamics**
+
+- Dynamic Algorithms
+- Dynamic Visualisation
+
+A free and open-Source project supported by the University of Le Havre.
+
+
+---
+
+## In a nutshell
+
+A Java library with a handy public API
+
+```java
+Graph g = new SingleGraph("MyGraph");
+g.read("some-file.tlp");
+System.out.println("Average Degree: "+g.getDegree());
+g.display();
+```
+
+Based on an event model: Nodes and Edges are Added/Removed/Modified
+
+Interaction with other tools
+
+- Offline: several import / export file formats
+- Online: through the API or through a network connection
+
+---
+
+## Architecture
+
+### Public API <small>[graphstream-project.org/doc/API](http://graphstream-project.org/doc/API)</small>
+- `org.graphstream`
+    - `.graph`
+    - `.stream`
+    - `.ui`
+    - `.algorithm`
+
+### Organised into sub-projects <small>[github.com/graphstream](https://github.com/graphstream)</small>
+
+`gs-core`, `gs-algo`, `gs-ui-swing`, `gs-ui-javafx`, `gs-ui-android`, `gs-netstream`, `gs-boids`, `gs-netlogo`, `gs-geography`, ...
+
+
+---
+
+## Get GraphStream!
+
+- docs :  [graphstream-project.org](http://graphstream-project.org)
+- sources :  [github.com/graphstream](https://github.com/graphstream)
+- libraries :  [maven.org](https://search.maven.org/search?q=graphstream)
+    ```xml
+    <groupId>org.graphstream</groupId>
+    <artifactId>gs-core</artifactId>
+    <version>2.0</version>
+    ```
+
+---
+
+## GraphStream's Event Model
+
+The dynamics of the graph is expressed by an **event model**
+
+- Addition or removal of nodes
+- Addition or removal of edge
+- Addition, update or removal of data attributes
+- Time steps
+
+A **stream of events** modifies the structure of a graph.
+
+---
+
+## GraphStream's Event Model
+
+<div  style = " display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;">
+  <div class="flex  p-5 flex-col items-center ">
+    <h3>Sources</h3>
+    <p>Produce a stream of events</p>
+     <div >
+    <img src="/img/source.svg" alt="Sources" class="mb-0" style="height: 12vh">
+  </div>
+    </div>
+    <div class="flex p-5 flex-col items-center ">
+    <h3>Sinks</h3>
+    <p>Receive a stream of events</p>
+    <div ><img src="/img/sink.svg" alt="Sinks" class="mb-0" style="height: 12vh"/></div>
+    </div>
+    <div class="flex p-5 flex-col items-center ">
+    <h3>Pipes</h3>
+    <p class="text-centered">Both source and sink</p>
+    <div class=""><img src="/img/pipe.svg" alt="Pipes" class="mb-0" style="height: 12vh"/></div>
+    <p>A <b>graph</b> is a <b>pipe</b></p>
+    </div>
+</div>
+
+---
+
+
+## Pipelining
+
+Sources send events to sinks.
+
+- Observer design pattern
+- Publish / Subscribe messaging pattern
+- Java Swing listeners
+
+**Sources**, **pipes** and **sinks** can be connected to form **pipelines**.
+
+<div class="flex items-center justify-center">
+  <img src="/img/pipeline.svg" alt="File-Graph-Viewer Pipeline" style="height: 15vh" />
+</div>
+
+---
+
+## Pipelining
+
+```java
+Graph graph = new SingleGraph("Some Graph");
+graph.display();
+FileSource source = new FileSourceDGS();
+source.addSink( graph );
+source.begin("someFile.dgs");
+while( source.nextEvents() ){
+  // Do whatever between two events
+}
+source.end();
+```
+
+<div class="flex items-center justify-center ">
+  <img src="/img/pipeline.svg" alt="File-Graph-Viewer Pipeline" style="height: 15vh" />
+</div>
+---
+
+## Pipelining
+
+The stream of events can flow between sources and sinks:
+
+- across the network,
+- processes,
+- threads.
+
+For example a viewer can run in a distinct thread or machine, while a simulation on a graph runs on another.
+
+<div class="flex items-center justify-center ">
+  <img src="/img/proxy-pipe.svg" alt="Proxy Pipe" style="height: 12vh" />
+</div>
+
+
+---
+
+## Pipelining
+
+Receive events from some other process/thread/programme/machine
+
+```java
+Graph g = new SingleGraph("RWP");
+ThreadProxyPipe pipe = getPipeFromElsewhere(); //fake function
+pipe.addSink(g);
+g.display(false);
+
+while (true) {
+  pipe.pump();
+  Thread.sleep(1);
+}
+```
+
+---
+
+## Graph components
+
+### Various graph structures
+
+- Single graph (1-graph),
+- Multi-graph (p-graph), graphs where several edges can connect two given nodes.
+- Directed and/or undirected graphs.
+
+### Several internal representations
+
+- fast data retrieval,
+- data compactness.
+
+Representation of a graph at a given time (static). But this representation can evolve.
+
+---
+
+## Data Attributes
+
+- Any number of data attributes can be associated with any element of the graph.
+- An attribute is a **key**, **value** pair that can be any Java Object.
+- Attributes can be placed on nodes, edges and on the graph itself.
+
+```java
+g.setAttribute("My attribute", aValue);
+Node n = g.getNode("A");
+n.setAttribute("xy", 23.4, 55.0);
+Edge e = g.getEdge("AB");
+e.removeAttribute("selected");
+double w = e.getNumber("weight");
+```
+
+---
+
+## Algorithms
+
+
+<div class="flex flex-row items-center ">
+<div class="flex  p-5 flex-col items-center" >
+<h3>Searches</h3>
+<p>random searches, shortest paths, spanning trees, etc.</p>
+</div>
+
+<div class="flex  p-5 flex-col items-center">
+<h3>Metrics</h3>
+<p>modularity, centrality, degree distributions, connectivity, density, etc.</p>
+</div>
+
+<div class="flex  p-5 flex-col items-center">
+<h3>Generators</h3>
+<p>random, regular, preferential attachment, small world, from GIS, from the web, etc.</p>
+</div>
+</div>
+
+
+
+---
+
+## Focus on Dynamic Connected Components
+
+```java
+import org.graphstream.algorithm.ConnectedComponents;
+//...
+ConnectedComponents cc = new ConnectedComponents();
+cc.init(graph);
+while(something) {
+  cc.getConnectedComponentsCount();
+  canDoSomethingWithGraph();
+}
+```
+
+---
+
+## Focus on Dynamic Shortest Paths
+
+```java
+import org.graphstream.algorithm
+          .networksimplex.DynamicOneToAllShortestPath;
+//...
+DynamicOneToAllShortestPath algorithm =
+                new DynamicOneToAllShortestPath(null);
+algorithm.init(graph);
+algorithm.setSource("0");
+while(something) {
+  algorithm.compute();
+  canDoSomethingWithGraph();
+}
+```
+
+---
+
+## Algorithms
+
+[graphstream-project.org/doc/Algorithms/](http://graphstream-project.org/doc/Algorithms/)
+
+
+
+---
+
+## Visualization
+
+1. Dynamic Visualization: the graph is evolving, so does the visualization.
+2. Get more information than the graph itself: sprites.
+
+<div class="flex flex-row items-center ">
+
+<div class="">
+  <img src="/img/CSS.png" alt="CSS" />
+</div>
+<!-- <div>
+ <video controls autoplay loop> <source data-src="/img/boids.mp4" type="video/mp4"></video>
+</div> -->
+</div>
+
+---
+
+## Extra visual information
+
+### CSS
+
+```css
+graph { padding: 50px; }
+node {
+  size-mode: fit; shape: rounded-box;
+  fill-color: white; stroke-mode: plain;
+  padding: 5px, 4px; icon-mode: at-left;
+  icon: url('data/Smiley_032.png');
+}
+```
+
+<div class="flex flex-row items-center ">
+<div class="">
+  <img src="/img/size_mode2_.png" alt="CSS1" />
+</div>
+<div class="">
+  <img src="img/stroke_mode2.png" alt="CSS2" />
+</div>
+<div class="">
+  <img src="img/edge_shape1.png" alt="CSS3" />
+</div>
+<div class="">
+  <img src="img/node_shape6.png" alt="CSS4" />
+</div>
+</div>
+
+<!-- ![css1](/img/size_mode2_.png)![css2](/img/stroke_mode2.png)![css3](/img/edge_shape1.png)![css4](/img/node_shape6.png) -->
+
+---
+
+
+## Extra visual information
+
+### CSS classes
+
+```java
+graph.setAttribute("ui.stylesheet",
+  "graph {padding : 50px;}"
+  + "node {size: 100px; fill-mode: image-scaled;}"
+  + "node.fun {fill-image: url('fun.gif');}"
+  + "node.dull {fill-image: url('dull.png');}");
+Node a = graph.addNode("A");
+Node b = graph.addNode("B");
+Node c = graph.addNode("C");
+a.setAttribute("ui.class", "fun");
+b.setAttribute("ui.class", "fun");
+c.setAttribute("ui.class", "dull");
+
+```
+
+---
+
+
+## Extra visual information
+
+### CSS classes
+
+<img src="/img/funordull.png" alt="...and of course it is dynamic" style="height:35vh"/>
+
+
+---
+
+## Extra visual information
+
+### Sprites
+
+Graphical objects that give extra information on the application you deal with.
+
+```java
+SpriteManager sman = new SpriteManager(graph);
+Sprite pin = sman.addSprite("pin");
+```
+
+<p> Sprites are also customised with CSS <img src="/img/mapPinSmall.png" alt="Pin" style="display:inline ; height:5vh"/></p> 
+
+```css
+sprite#pin {
+    shape: box;
+    size: 32px, 52px;
+    fill-mode: image-scaled;
+    fill-image: url('mapPinSmall.png');
+}
+```
+
+---
+
+## Sprites
+
+<section data-background=" white">
+<img alt="LH" src="/img/leHavreStep2.png" class="max-h-100"/>
+</section>
+
+
+---
+
+## Sprites
+
+<section data-background=" white">
+<img alt="LH" src="/img/leHavreStep7.png" class="max-h-100"/>
+</section>
+
+
+---
+
+## Interactions with other Tools
+
+
+---
+
+
+## Offline interactions
+
+### File formats
+
+Tulip, Gephi, GML, Pajek, DOT, LGL, ncol, DGS
+
+```java
+DGS004
+"graph.dgs" 0 0
+an A x:1 y:2.3 label:"Node A"
+an B x:0 y:0
+an C xy:2.3,1
+ae AB A B weight:23.3
+ae AC A C weight:2
+st 1.0
+ae BC B > C
+st 1.1
+dn A
+```
+
+---
+
+## OnLine interactions
+
+### NetStream
+
+- Export streams of events to other applications / machines / languages
+- Both ways. From GS to other and from other to GS
+- Binary network protocol
+- TCP socket (and WebSocket) implementation
+- Several languages (Java, C++, Python, JS)
+
+---
+
+## NetLogo Extension
+
+- NetLogo agents (turtles, links and observer) send graph events to external application
+- The external application maintains a dynamic graph and runs algorithms on it
+- It sends the computed results back to NetLogo
+- Agents can receive and use them to take their decisions
+
+![NetLogo Extension](/img/netlogo.jpg)
+
+
+
+<!-- END -->
diff --git a/slides/package-lock.json b/slides/package-lock.json
index 92d8423..4911495 100644
--- a/slides/package-lock.json
+++ b/slides/package-lock.json
@@ -7,8 +7,10 @@
       "name": "graphadon",
       "dependencies": {
         "@slidev/cli": "^0.49.10",
+        "@slidev/theme-apple-basic": "^0.25.1",
         "@slidev/theme-default": "latest",
         "@slidev/theme-seriph": "latest",
+        "slidev-addon-qrcode": "^1.0.2",
         "slidev-theme-eloc": "^1.0.2",
         "vue": "^3.4.27"
       }
@@ -1720,6 +1722,31 @@
         "roughjs": "^4.6.6"
       }
     },
+    "node_modules/@slidev/theme-apple-basic": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/@slidev/theme-apple-basic/-/theme-apple-basic-0.25.1.tgz",
+      "integrity": "sha512-saA5yYui+jTT13tP+QJKnWeM8sK0IA1iln2E3sWAJsfKdQHUD3fw8+AlUHLUH6yc8NPq3ewtZcwWx49a/iF8Tg==",
+      "dependencies": {
+        "@slidev/types": "^0.47.0",
+        "codemirror-theme-vars": "^0.1.2",
+        "prism-theme-vars": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=14.0.0",
+        "slidev": ">=v0.47.0"
+      }
+    },
+    "node_modules/@slidev/theme-apple-basic/node_modules/@slidev/types": {
+      "version": "0.47.5",
+      "resolved": "https://registry.npmjs.org/@slidev/types/-/types-0.47.5.tgz",
+      "integrity": "sha512-X67V4cCgM0Sz50bP8GbVzmiL8DHC2IXvdKcsN7DlxHyf+/T4d9GveeGukwha5Fx3MuYeGZWKag7TFL2ZY4w54A==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@slidev/theme-default": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/@slidev/theme-default/-/theme-default-0.25.0.tgz",
@@ -6981,6 +7008,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "dependencies": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -7377,6 +7417,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/slidev-addon-qrcode": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/slidev-addon-qrcode/-/slidev-addon-qrcode-1.0.2.tgz",
+      "integrity": "sha512-vYjfu8KHnOaiijWaQFc5LaaglDIISGZ5Bx4m0RbmDlPiIZDseEoJX6O3Lxh4LaaCdo5JpMK/3o6CcNZtcTqpLg==",
+      "dependencies": {
+        "qr-code-styling": "^1.6.0-rc.1"
+      },
+      "engines": {
+        "slidev": ">=0.32.1"
+      }
+    },
     "node_modules/slidev-theme-eloc": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/slidev-theme-eloc/-/slidev-theme-eloc-1.0.2.tgz",
diff --git a/slides/package.json b/slides/package.json
index fcf49a5..5f96d5c 100644
--- a/slides/package.json
+++ b/slides/package.json
@@ -9,9 +9,16 @@
   },
   "dependencies": {
     "@slidev/cli": "^0.49.10",
+    "@slidev/theme-apple-basic": "^0.25.1",
     "@slidev/theme-default": "latest",
     "@slidev/theme-seriph": "latest",
+    "slidev-addon-qrcode": "^1.0.2",
     "slidev-theme-eloc": "^1.0.2",
     "vue": "^3.4.27"
+  },
+  "slidev": {
+    "addons": [
+      "slidev-addon-qrcode"
+    ]
   }
 }
diff --git a/slides/img/CSS.png b/slides/public/img/CSS.png
similarity index 100%
rename from slides/img/CSS.png
rename to slides/public/img/CSS.png
diff --git a/slides/img/Community_Structure1.png b/slides/public/img/Community_Structure1.png
similarity index 100%
rename from slides/img/Community_Structure1.png
rename to slides/public/img/Community_Structure1.png
diff --git a/slides/img/Community_Structure2.png b/slides/public/img/Community_Structure2.png
similarity index 100%
rename from slides/img/Community_Structure2.png
rename to slides/public/img/Community_Structure2.png
diff --git a/slides/img/Community_Structure3.png b/slides/public/img/Community_Structure3.png
similarity index 100%
rename from slides/img/Community_Structure3.png
rename to slides/public/img/Community_Structure3.png
diff --git a/slides/img/Community_Structure4.png b/slides/public/img/Community_Structure4.png
similarity index 100%
rename from slides/img/Community_Structure4.png
rename to slides/public/img/Community_Structure4.png
diff --git a/slides/img/LinLog1.png b/slides/public/img/LinLog1.png
similarity index 100%
rename from slides/img/LinLog1.png
rename to slides/public/img/LinLog1.png
diff --git a/slides/img/Modularity1.svg b/slides/public/img/Modularity1.svg
similarity index 100%
rename from slides/img/Modularity1.svg
rename to slides/public/img/Modularity1.svg
diff --git a/slides/img/Modularity2.svg b/slides/public/img/Modularity2.svg
similarity index 100%
rename from slides/img/Modularity2.svg
rename to slides/public/img/Modularity2.svg
diff --git a/slides/img/Modularity3.svg b/slides/public/img/Modularity3.svg
similarity index 100%
rename from slides/img/Modularity3.svg
rename to slides/public/img/Modularity3.svg
diff --git a/slides/img/Network_Community_Structure.svg b/slides/public/img/Network_Community_Structure.svg
similarity index 100%
rename from slides/img/Network_Community_Structure.svg
rename to slides/public/img/Network_Community_Structure.svg
diff --git a/slides/public/img/boids.mp4 b/slides/public/img/boids.mp4
new file mode 100644
index 0000000..99b489a
Binary files /dev/null and b/slides/public/img/boids.mp4 differ
diff --git a/slides/img/boids.png b/slides/public/img/boids.png
similarity index 100%
rename from slides/img/boids.png
rename to slides/public/img/boids.png
diff --git a/slides/img/eclipse-import-maven-projects.png b/slides/public/img/eclipse-import-maven-projects.png
similarity index 100%
rename from slides/img/eclipse-import-maven-projects.png
rename to slides/public/img/eclipse-import-maven-projects.png
diff --git a/slides/img/edge_shape1.png b/slides/public/img/edge_shape1.png
similarity index 100%
rename from slides/img/edge_shape1.png
rename to slides/public/img/edge_shape1.png
diff --git a/slides/img/funordull.png b/slides/public/img/funordull.png
similarity index 100%
rename from slides/img/funordull.png
rename to slides/public/img/funordull.png
diff --git a/slides/img/geography1.png b/slides/public/img/geography1.png
similarity index 100%
rename from slides/img/geography1.png
rename to slides/public/img/geography1.png
diff --git a/slides/img/geography2.png b/slides/public/img/geography2.png
similarity index 100%
rename from slides/img/geography2.png
rename to slides/public/img/geography2.png
diff --git a/slides/img/gs-logo-white-tiny.svg b/slides/public/img/gs-logo-white-tiny.svg
similarity index 100%
rename from slides/img/gs-logo-white-tiny.svg
rename to slides/public/img/gs-logo-white-tiny.svg
diff --git a/slides/img/gs-logo-white.svg b/slides/public/img/gs-logo-white.svg
similarity index 100%
rename from slides/img/gs-logo-white.svg
rename to slides/public/img/gs-logo-white.svg
diff --git a/slides/img/gs-logo.svg b/slides/public/img/gs-logo.svg
similarity index 100%
rename from slides/img/gs-logo.svg
rename to slides/public/img/gs-logo.svg
diff --git a/slides/img/gs-logo_fulltext.svg b/slides/public/img/gs-logo_fulltext.svg
similarity index 100%
rename from slides/img/gs-logo_fulltext.svg
rename to slides/public/img/gs-logo_fulltext.svg
diff --git a/slides/img/gs-logo_text.svg b/slides/public/img/gs-logo_text.svg
similarity index 100%
rename from slides/img/gs-logo_text.svg
rename to slides/public/img/gs-logo_text.svg
diff --git a/slides/img/layout-in-graph-2-pipeline.svg b/slides/public/img/layout-in-graph-2-pipeline.svg
similarity index 100%
rename from slides/img/layout-in-graph-2-pipeline.svg
rename to slides/public/img/layout-in-graph-2-pipeline.svg
diff --git a/slides/img/layout-in-graph-pipeline.svg b/slides/public/img/layout-in-graph-pipeline.svg
similarity index 100%
rename from slides/img/layout-in-graph-pipeline.svg
rename to slides/public/img/layout-in-graph-pipeline.svg
diff --git a/slides/img/layout-pipeline.svg b/slides/public/img/layout-pipeline.svg
similarity index 100%
rename from slides/img/layout-pipeline.svg
rename to slides/public/img/layout-pipeline.svg
diff --git a/slides/img/layout-viewer-graph-pipeline.svg b/slides/public/img/layout-viewer-graph-pipeline.svg
similarity index 100%
rename from slides/img/layout-viewer-graph-pipeline.svg
rename to slides/public/img/layout-viewer-graph-pipeline.svg
diff --git a/slides/img/layout-viewer-pipeline.svg b/slides/public/img/layout-viewer-pipeline.svg
similarity index 100%
rename from slides/img/layout-viewer-pipeline.svg
rename to slides/public/img/layout-viewer-pipeline.svg
diff --git a/slides/img/leHavreStep2.png b/slides/public/img/leHavreStep2.png
similarity index 100%
rename from slides/img/leHavreStep2.png
rename to slides/public/img/leHavreStep2.png
diff --git a/slides/img/leHavreStep7.png b/slides/public/img/leHavreStep7.png
similarity index 100%
rename from slides/img/leHavreStep7.png
rename to slides/public/img/leHavreStep7.png
diff --git a/slides/img/mapPinSmall.png b/slides/public/img/mapPinSmall.png
similarity index 100%
rename from slides/img/mapPinSmall.png
rename to slides/public/img/mapPinSmall.png
diff --git a/slides/img/netlogo.jpg b/slides/public/img/netlogo.jpg
similarity index 100%
rename from slides/img/netlogo.jpg
rename to slides/public/img/netlogo.jpg
diff --git a/slides/img/node_shape6.png b/slides/public/img/node_shape6.png
similarity index 100%
rename from slides/img/node_shape6.png
rename to slides/public/img/node_shape6.png
diff --git a/slides/img/pipe.svg b/slides/public/img/pipe.svg
similarity index 100%
rename from slides/img/pipe.svg
rename to slides/public/img/pipe.svg
diff --git a/slides/img/pipeline.svg b/slides/public/img/pipeline.svg
similarity index 100%
rename from slides/img/pipeline.svg
rename to slides/public/img/pipeline.svg
diff --git a/slides/img/polbooks_fr.png b/slides/public/img/polbooks_fr.png
similarity index 100%
rename from slides/img/polbooks_fr.png
rename to slides/public/img/polbooks_fr.png
diff --git a/slides/img/proxy-pipe.svg b/slides/public/img/proxy-pipe.svg
similarity index 100%
rename from slides/img/proxy-pipe.svg
rename to slides/public/img/proxy-pipe.svg
diff --git a/slides/img/proxy-pipeline.svg b/slides/public/img/proxy-pipeline.svg
similarity index 100%
rename from slides/img/proxy-pipeline.svg
rename to slides/public/img/proxy-pipeline.svg
diff --git a/slides/img/qr-github-gs-talk.svg b/slides/public/img/qr-github-gs-talk.svg
similarity index 100%
rename from slides/img/qr-github-gs-talk.svg
rename to slides/public/img/qr-github-gs-talk.svg
diff --git a/slides/img/qr-graphstream-project.svg b/slides/public/img/qr-graphstream-project.svg
similarity index 100%
rename from slides/img/qr-graphstream-project.svg
rename to slides/public/img/qr-graphstream-project.svg
diff --git a/slides/img/qr-graphstream.github.io-gs-talk.svg b/slides/public/img/qr-graphstream.github.io-gs-talk.svg
similarity index 100%
rename from slides/img/qr-graphstream.github.io-gs-talk.svg
rename to slides/public/img/qr-graphstream.github.io-gs-talk.svg
diff --git a/slides/img/re-optimization.svg b/slides/public/img/re-optimization.svg
similarity index 100%
rename from slides/img/re-optimization.svg
rename to slides/public/img/re-optimization.svg
diff --git a/slides/img/simple-network.svg b/slides/public/img/simple-network.svg
similarity index 100%
rename from slides/img/simple-network.svg
rename to slides/public/img/simple-network.svg
diff --git a/slides/img/sink.svg b/slides/public/img/sink.svg
similarity index 100%
rename from slides/img/sink.svg
rename to slides/public/img/sink.svg
diff --git a/slides/img/size_mode2_.png b/slides/public/img/size_mode2_.png
similarity index 100%
rename from slides/img/size_mode2_.png
rename to slides/public/img/size_mode2_.png
diff --git a/slides/img/source.svg b/slides/public/img/source.svg
similarity index 100%
rename from slides/img/source.svg
rename to slides/public/img/source.svg
diff --git a/slides/img/stroke_mode2.png b/slides/public/img/stroke_mode2.png
similarity index 100%
rename from slides/img/stroke_mode2.png
rename to slides/public/img/stroke_mode2.png
diff --git a/slides/img/temporal-network.svg b/slides/public/img/temporal-network.svg
similarity index 100%
rename from slides/img/temporal-network.svg
rename to slides/public/img/temporal-network.svg
diff --git a/slides/img/testStar2.png b/slides/public/img/testStar2.png
similarity index 100%
rename from slides/img/testStar2.png
rename to slides/public/img/testStar2.png
diff --git a/slides/img/text_bg_mode4.png b/slides/public/img/text_bg_mode4.png
similarity index 100%
rename from slides/img/text_bg_mode4.png
rename to slides/public/img/text_bg_mode4.png
diff --git a/slides/img/triangle1.png b/slides/public/img/triangle1.png
similarity index 100%
rename from slides/img/triangle1.png
rename to slides/public/img/triangle1.png
diff --git a/slides/img/triangle2.png b/slides/public/img/triangle2.png
similarity index 100%
rename from slides/img/triangle2.png
rename to slides/public/img/triangle2.png
diff --git a/slides/img/triangle3.png b/slides/public/img/triangle3.png
similarity index 100%
rename from slides/img/triangle3.png
rename to slides/public/img/triangle3.png
diff --git a/slides/img/varying-network.svg b/slides/public/img/varying-network.svg
similarity index 100%
rename from slides/img/varying-network.svg
rename to slides/public/img/varying-network.svg
diff --git a/slides/img/weighted-network.svg b/slides/public/img/weighted-network.svg
similarity index 100%
rename from slides/img/weighted-network.svg
rename to slides/public/img/weighted-network.svg
diff --git a/slides/img/zachary.png b/slides/public/img/zachary.png
similarity index 100%
rename from slides/img/zachary.png
rename to slides/public/img/zachary.png
diff --git a/slides/slides.md b/slides/slides.md
index 1f78e12..2510144 100644
--- a/slides/slides.md
+++ b/slides/slides.md
@@ -1,557 +1,63 @@
 ---
 theme : ./
-layout: full
-image: /img/gs-logo.svg
----
-
-# Dynamic Graphs
-
-## Practice Session
-
-### Graphadon Summer School
-
----
-layout: two-cols
----
-
-# Slides
-
-Codes and Slides are on GitHub
-
-- Code : [github.com/graphstream/gs-talk](https://github.com/graphstream/gs-talk)
-- Slides : [graphstream.github.io/gs-talk](https://graphstream.github.io/gs-talk)
-
-
-::right::
-
-![Sources for Codes and Presentations](/img/qr-graphstream.github.io-gs-talk.svg)
-
----
-
-# Outline 
-<!-- {data-background="url('/img/tmp.png')"} -->
-
-- Dynamic Graphs with GraphStream
-- [Demonstrations and Examples](demos.html)
-
-
----
-
-
-# First, static graphs
-
-##  Structure:{data-xx="ok"}
-
-- Nodes, Vertices
-- (undirected) Edges, Links
-- (directed) Arcs
-
-![Simple Network](/img/simple-network.svg)
-
-
----
-
-# First, static graphs
-
-## Algorithms: Graphs Theory
-
-- graph colouring problems
-- routing problems
-- flow problems
-- covering problems
-- sub-graphs problems
-
-
----
-
-# When we add dynamics...
-
-## What kind of dynamics?
-
-- values/weight on edges or nodes?
-- nodes and/or edges added/removed?
-
-![Weighted Network](/img/weighted-network.svg)
-
----
-
-# When we add dynamics...
-## Problem with algorithms
-
-- As soon as it gets computed, the result has vanished.
-- Can we stop the graph and recompute?
-- Depends on the dynamic graph model.
-
-![Time-Varying Network](/img/varying-network.svg)
-
-
----
-
-# Dynamic Graph Models
-
-Many graph models consider dynamics in some ways. But they are usually bounded to their application domain.
-
-- Is there a general-enough model that can be used in a broad range of applications?
-- What about a **Dynamic Graph Theory** with algorithms for colouring, routing, flows, etc.?
-
----
-
-# Complex Networks
-
-1. **Exploration**: Analysis of "real world" networks (web graphs, biological networks, social networks)
-
-2. **Modelling**: Build artificial networks (Barabasi-Albert, Watts-Strogatz, Dorogovtsev-Mendes, Golomb
-, etc.)
-
-- Measures on graphs: community, distribution, dimensions, etc.
-- Iterative Construction/Iteration: we see dynamic graphs here!
+#layout: center
+# the image source
+# image: /img/gs-logo-white.svg
 
+# background: /img/gs-logo-white.svg
 ---
 
-# Aggregative Methods
+<p class="text-[70px] leading-[1.4] font-bold"> Dynamic Graphs </p>
 
-All the evolution is known **in advance**, the dynamic graph is aggregated into a static graph. (Temporal Networks, Evolving Graphs, Time-Varying Graphs, etc.)
+<p class="text-[40px] "> Practice Session </p>
 
-Why? Because it allows the use of classical graph theory.
-
-![Aggregative Methods](/img/temporal-network.svg)
-
----
-
-# Re-optimisation
-
-Build and maintain structures on dynamic graphs (e.g. spanning trees) **without** prior knowledge of the evolution.
-
-**Hypothesis**: Updating an existing structure after some modifications is more effective that recomputing it from scratch.
-
-![Re-optimization](/img/re-optimization.svg)
+<p class="text-[40px] leading-[1.4] "> Graphadon Summer School </p>
+<p class="text-[30px] "> June 24-29, 2024 </p>
 
 ---
-
-# GraphStream
-
-**Study interaction networks and their dynamics**
-
-- Dynamic Algorithms
-- Dynamic Visualisation
-
-A free and open-Source project supported by the University of Le Havre.
-
-
----
-
-# In a nutshell
-
-A Java library with a handy public API
-
-```java
-Graph g = new SingleGraph("MyGraph");
-g.read("some-file.tlp");
-System.out.println("Average Degree: "+g.getDegree());
-g.display();
-```
-
-Based on an event model: Nodes and Edges are Added/Removed/Modified
-
-Interaction with other tools
-
-- Offline: several import / export file formats
-- Online: through the API or through a network connection
-
----
-
-# Architecture
-
-### Public API <small>[graphstream-project.org/doc/API](http://graphstream-project.org/doc/API)</small>
-
-- `org.graphstream`
-    - `.graph`
-    - `.stream`
-    - `.ui`
-    - `.algorithm`
-
-### Organised into sub-projects <small>[github.com/graphstream](https://github.com/graphstream)</small>
-
-- `gs-core`, `gs-algo`,
-- `gs-ui-swing`, `gs-ui-javafx`, `gs-ui-android`
-- `gs-netstream`, `gs-boids`, `gs-netlogo`, `gs-geography`, ...
-
-
----
-
-# Get GraphStream!
-
-### On the Website
-
-- [graphstream-project.org](http://graphstream-project.org)
-- legacy release (v1.3) of `gs-core`, `gs-algo`, `gs-ui`
-
-### On Github
-
-- [github.com/graphstream](https://github.com/graphstream)
-- bug tracker on the `gs-core` project
-- New Official Releases (v2.0)
-
----
-
-### On Maven
-
-
-
-
-```xml
-<groupId>org.graphstream</groupId>
-<artifactId>gs-core</artifactId>
-<version>2.0</version>
-```
-
----
-
-# GraphStream's Event Model
-
-The dynamics of the graph is expressed by an **event model**
-
-Events
-
-- Addition or removal of nodes
-- Addition or removal of edge
-- Addition, update or removal of data attributes
-- Time steps
-
-A **stream of events** modifies the structure of a graph.
-
----
-
-# GraphStream's Event Model
-
-### Sources
-
-Produce streams of events.
-![](/img/source.svg)
-
-### Sinks
-
-Receive streams of events.
-![](/img/sink.svg)
-
-### Pipes
-
-Both source and sink. A **graph** is a pipe.
-![](/img/pipe.svg)
-
----
-
-# Pipelining
-Sources send events to sinks.
-
-- Observer design pattern
-- Publish / Subscribe messaging pattern
-- Java Swing listeners
-
-Sources, pipes and sinks can be connected to form pipelines.
-
-![Example Pipeline](/img/pipeline.svg)
-
-
----
-
-# Pipelining
-
-```java
-Graph graph = new SingleGraph("Some Graph");
-graph.display();
-FileSource source = new FileSourceDGS();
-source.addSink( graph );
-source.begin("someFile.dgs");
-while( source.nextEvents() ){
-  // Do whatever between two events
-}
-source.end();
-```
-
-![File-Graph-Viewer Pipeline](/img/pipeline.svg)
-
----
-
-# Pipelining
-
-The stream of events can flow between sources and sinks:
-
-- across the network,
-- processes,
-- threads.
-
-For example a viewer can run in a distinct thread or machine, while a simulation on a graph runs on another.
-
-![Proxy Pipe](/img/proxy-pipe.svg)
-
-
----
-
-# Pipelining
-
-Receive events from some other process/thread/programme/machine
-
-```java
-Graph g = new SingleGraph("RWP");
-ThreadProxyPipe pipe = getPipeFromElsewhere(); //fake function
-pipe.addSink(g);
-g.display(false);
-
-while (true) {
-  pipe.pump();
-  Thread.sleep(1);
-}
-```
-
----
-
-# Graph components
-
-### Various graph structures
-
-- Single graph (1-graph),
-- Multi-graph (p-graph), graphs where several edges can connect two given nodes.
-- Directed and/or undirected graphs.
-
-### Several internal representations
-
-- fast data retrieval,
-- data compactness.
-
-Representation of a graph at a given time (static). But this representation can evolve.
-
----
-
-# Data Attributes
-
-- Any number of data attributes can be associated with any element of the graph.
-- An attribute is a **key**, **value** pair that can be any Java Object.
-- Attributes can be placed on nodes, edges and on the graph itself.
-
-```java
-g.setAttribute("My attribute", aValue);
-Node n = g.getNode("A");
-n.setAttribute("xy", 23.4, 55.0);
-Edge e = g.getEdge("AB");
-e.removeAttribute("selected");
-double w = e.getNumber("weight");
-```
-
----
-
-# Algorithms
-
-### Searches
-
-random searches, shortest paths, spanning trees, etc.
-
-### Metrics
-
-modularity, centrality, degree distributions, connectivity, density, etc.
-
-### Generators
-
-random, regular, preferential attachment, small world, from GIS, from the web, etc.
-
-
-
----
-
-# Focus on Dynamic Connected Components
-
-```java
-import org.graphstream.algorithm.ConnectedComponents;
-//...
-ConnectedComponents cc = new ConnectedComponents();
-cc.init(graph);
-while(something) {
-  cc.getConnectedComponentsCount();
-  canDoSomethingWithGraph();
-}
-```
-
----
-
-# Focus on Dynamic Shortest Paths
-
-```java
-import org.graphstream.algorithm
-          .networksimplex.DynamicOneToAllShortestPath;
-//...
-DynamicOneToAllShortestPath algorithm =
-                new DynamicOneToAllShortestPath(null);
-algorithm.init(graph);
-algorithm.setSource("0");
-while(something) {
-  algorithm.compute();
-  canDoSomethingWithGraph();
-}
-```
-
----
-
-# Algorithms
-
-Some tutorials to go further
-
-[graphstream-project.org/doc/Algorithms/](http://graphstream-project.org/doc/Algorithms/)
-
-
-
----
-
-# Visualization
-
-1. Dynamic Visualization: the graph is evolving, so does the visualization.
-2. Get more information than the graph itself: sprites.
-
- ![CSS](/img/CSS.png)
-
- <video controls autoplay loop><source data-src="/img/boids.mp4" type="video/mp4"></video>
-<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hv8vrvzG9y0" frameborder="0" allowfullscreen></iframe> -->
-
-
----
-
-# Extra visual information
-
-## CSS
-
-```css
-graph { padding: 50px; }
-node {
-  size-mode: fit; shape: rounded-box;
-  fill-color: white; stroke-mode: plain;
-  padding: 5px, 4px; icon-mode: at-left;
-  icon: url('data/Smiley_032.png');
-}
-```
-
-![css1](/img/size_mode2_.png)![css2](/img/stroke_mode2.png)![css3](/img/edge_shape1.png)![css4](/img/node_shape6.png)
-
----
-
-
-# Extra visual information
-
-## CSS classes
-
-```java
-graph.setAttribute("ui.stylesheet",
-  "graph {padding : 50px;}"
-  + "node {size: 100px; fill-mode: image-scaled;}"
-  + "node.fun {fill-image: url('fun.gif');}"
-  + "node.dull {fill-image: url('dull.png');}");
-Node a = graph.addNode("A");
-Node b = graph.addNode("B");
-Node c = graph.addNode("C");
-a.setAttribute("ui.class", "fun");
-b.setAttribute("ui.class", "fun");
-c.setAttribute("ui.class", "dull");
-
-```
-
+layout: two-cols
 ---
 
+<p class="text-4xl leading-[1.4]">Resources</p>
 
-# Extra visual information
-
-## CSS classes
-
-![...and of course it is dynamic.](/img/funordull.png)
-
-# Extra visual information
-
-## Sprites
+Code : [github.com/graphstream/graphadon](https://github.com/graphstream/graphadon)
 
-Graphical objects that give extra information on the application you deal with.
+Slides : [graphstream.github.io/graphadon](https://graphstream.github.io/graphadon)
 
-```java
-SpriteManager sman = new SpriteManager(graph);
-Sprite pin = sman.addSprite("pin");
-```
 
-Sprites are also customised with CSS ![pin](/img/mapPinSmall.png)
 
-```css
-sprite#pin {
-    shape: box;
-    size: 32px, 52px;
-    fill-mode: image-scaled;
-    fill-image: url('mapPinSmall.png');
-}
-```
+::right::
+<div class="flex flex-col items-center">
+<QRCode
+    :width="300"
+    :height="300"
+    type="svg"
+    data="https://github.com/graphstream/graphadon"
+    :margin="10"
+    :imageOptions="{ margin: 10 }"
+    :dotsOptions="{ color: '#000' ,type: 'rounded'}"
+    image="/img/gs-logo.svg"
+/>
+</div>
+<!-- ![Sources for Codes and Presentations](/img/qr-graphstream.github.io-gs-talk.svg) -->
 
 ---
 
-# Sprites
-
-<section data-background=" white">
-<img alt="LH" src="/img/leHavreStep2.png" style height="800px"/>
-</section>
+<p class="text-4xl leading-[1.4]">Outline</p>
 
+<Toc maxDepth=1 />
 
----
-
-# Sprites
-
-<section data-background=" white">
-<img alt="LH" src="/img/leHavreStep7.png" style height="800px"/>
-</section>
 
 
 ---
-
-# Interactions with other Tools
-
-
+src: ./intro.md
 ---
 
 
-# Offline interactions
-
-### File formats
-
-Tulip, Gephi, GML, Pajek, DOT, LGL, ncol, DGS
-
-```java
-DGS004
-"graph.dgs" 0 0
-an A x:1 y:2.3 label:"Node A"
-an B x:0 y:0
-an C xy:2.3,1
-ae AB A B weight:23.3
-ae AC A C weight:2
-st 1.0
-ae BC B > C
-st 1.1
-dn A
-```
-
 ---
-
-# OnLine interactions
-
-### NetStream
-
-- Export streams of events to other applications / machines / languages
-- Both ways. From GS to other and from other to GS
-- Binary network protocol
-- TCP socket (and WebSocket) implementation
-- Several languages (Java, C++, Python, JS)
-
+<!-- src: ./tutorials.md -->
 ---
 
-# NetLogo Extension
-
-- NetLogo agents (turtles, links and observer) send graph events to external application
-- The external application maintains a dynamic graph and runs algorithms on it
-- It sends the computed results back to NetLogo
-- Agents can receive and use them to take their decisions
-
-![NetLogo Extension](/img/netlogo.jpg)
-
-
-
-<!-- END -->
+--- 
+<!-- src: ./communities.md -->
+--- 
\ No newline at end of file
diff --git a/slides/styles/code.css b/slides/styles/code.css
index 769ff9f..54ebcab 100644
--- a/slides/styles/code.css
+++ b/slides/styles/code.css
@@ -67,7 +67,7 @@ pre[class*='language-'] {
 
 :not(pre) > code:before,
 :not(pre) > code:after {
-  content: '`';
+  content: '';
   opacity: 0.50;
 }
 
diff --git a/slides/styles/custom.css b/slides/styles/custom.css
index ba346fe..8a47220 100644
--- a/slides/styles/custom.css
+++ b/slides/styles/custom.css
@@ -11,7 +11,7 @@
     font-weight: bold;
   }
 .information {
-    @apply bg-red-100 border-l-4 margin-t-100 border-green-500 text-green-700 p-4;
+    @apply bg-gray-100 border-l-4 margin-t-100 border-green-500 text-green-800 p-4;
     font-weight: bold;
   }
 
diff --git a/slides/styles/override.css b/slides/styles/override.css
index d457674..d2af0a2 100644
--- a/slides/styles/override.css
+++ b/slides/styles/override.css
@@ -1,11 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;700&family=Merriweather:ital,wght@1,300;1,700&display=swap');
 :root {
     --slidev-slide-container-background: white;
-    --slidev-code-font-size: 0.5em;
+    --slidev-code-font-size: 1rem;
     --slidev-code-line-height: 1.4;
     --slidev-code-margin: 0;
-    --slidev-code-padding: 1em 1.2em;
-    --slidev-code-radius: 0.3em;
+    --slidev-code-padding: 1em 1em;
+    --slidev-code-radius: 0.5em;
     --slidev-controls-foreground: #333;
   }
   
@@ -29,7 +29,7 @@
     --quote-font-family: "Merriweather", serif;
     font-family: var(--font-family);
     font-feature-settings: 'calt', 'liga', 'case', 'ss02', 'ss03';
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     line-height: normal;
     
     p{
@@ -54,10 +54,10 @@
      * @apply border-1 border-[#ddd] rounded-xl shadow-2xl transform scale-90;
      */
 
-     h1 { @apply text-[70px] leading-[1.4] }
-     h2 { @apply text-5xl leading-[1.4] }
-     h3 { @apply text-4xl leading-[1.4] }
-     h4 { @apply text-3xl leading-[1.6] }
+     h1 { @apply text-[70px] leading-[1.4] b}
+     h2 { @apply text-4xl leading-[1.4] }
+     h3 { @apply text-3xl leading-[1.4] }
+     h4 { @apply text-2xl leading-[1.6] }
      h5 { @apply text-[20px] leading-[1.6] }
 
      h1, h2, h3, h4, h5, h6 {
@@ -97,3 +97,4 @@
       }
     }
   }
+