diff --git a/Fonts/Felidae.ttf b/Fonts/Felidae.ttf
new file mode 100644
index 0000000..554f296
Binary files /dev/null and b/Fonts/Felidae.ttf differ
diff --git a/Fonts/Louise-Regular.otf b/Fonts/Louise-Regular.otf
new file mode 100644
index 0000000..1121c00
Binary files /dev/null and b/Fonts/Louise-Regular.otf differ
diff --git a/Fonts/Resistance générale.otf b/Fonts/Resistance générale.otf
new file mode 100644
index 0000000..d2c8db0
Binary files /dev/null and b/Fonts/Resistance générale.otf differ
diff --git a/Fonts/Tiltortion.otf b/Fonts/Tiltortion.otf
new file mode 100644
index 0000000..aeff024
Binary files /dev/null and b/Fonts/Tiltortion.otf differ
diff --git a/Fonts/Transgender Grotesk-Regular-App.ttf b/Fonts/Transgender Grotesk-Regular-App.ttf
new file mode 100644
index 0000000..c9c7e72
Binary files /dev/null and b/Fonts/Transgender Grotesk-Regular-App.ttf differ
diff --git a/SI23-git b/SI23-git
new file mode 160000
index 0000000..9484953
--- /dev/null
+++ b/SI23-git
@@ -0,0 +1 @@
+Subproject commit 9484953a773fb0ca48c8cf019ae1825b2e3cd980
diff --git a/index style.css b/index style.css
index 08670da..22573c2 100644
--- a/index style.css	
+++ b/index style.css	
@@ -1,39 +1,82 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
+@font-face {
+  font-family: Resistance générale;
+  src: url(Fonts/Resistance\ générale.otf);
+}
+@font-face {
+  font-family: Louise-Regular;
+  src: url(Fonts/Louise-Regular.otf);
+}
+@font-face {
+  font-family: Felidae;
+  src: url(Fonts/Felidae.ttf);
+}
+@font-face {
+  font-family: Transgender Grotesk-Regular-App;
+  src: url(Fonts/Transgender\ Grotesk-Regular-App.ttf);
+}
+@font-face{
+  font-family: Tiltortion;
+  src: url(Fonts/Tiltortion.otf);
+}
+
 
 h1{ 
     top: 0;
     left: 0;
-    font-family: 'Arimo', sans-serif;
+    /* font-family: 'Transgender Grotesk-Regular-App'; */
+    z-index: 100;
+}
+span{
+  font-family: 'Felidae';
 }
 button{
     color: #5659ff;
     background-color: #fff;
     font-size: 1rem;
-    border: solid gray 2px;
+    border: solid black 2px;
     border-radius: 20px;
+    height: 6vh;
+}
+button:hover{
+  /* text-decoration: underline; */
+  border: solid red 2px;
+  animation-duration: 2s;
+  cursor: pointer;
+}
+ul{
+  list-style-type: "🡒";
+}
+li{
+  padding-left: 1rem;
 }
 .buttons {
+    display: flex;
+    align-items: flex-start;
+    padding: 5px;
     position: absolute;
-    top: 0;
+    top: 0rem;
     right: 0;
     padding-right: 2rem;
     padding-top: 2rem;
     font-size: 1rem;
-    width: 10vw;
+    width: 25vw;
     height: 5vh;
-    align-items: grid;
-    font-family: 'Arimo', sans-serif;
-}
+    }
+/* .buttons div{
+  display: flex;
+} */
 #intro{
     top: 0;
     left: 0;
-    font-family: 'Arimo', sans-serif;
+    width: 48vw;
+    /* font-family: 'Arimo', sans-serif; */
 }
 #down{
     bottom: 0;
     right: 0;
-    font-family: 'Arimo', sans-serif;
+    /* font-family: 'Arimo', sans-serif; */
 }
 .display-text{
     top: 0;
@@ -47,7 +90,7 @@ button{
 
 .slider-container {
     display: flex;
-    padding-top: 3rem;
+    /* padding-top: 3rem; */
     justify-content: center;
     align-items: center;
   }
@@ -55,11 +98,29 @@ button{
 body {
     color: #5659ff;
     background-color: #fff;
+    font-family: 'Arimo', sans-serif;
+    overflow: hidden;
+}
+/* .back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-image: linear-gradient(to bottom right, red, yellow);
+  z-index: -2;
+} */
+.body-font{
+  font-family: 'Arimo', sans-serif;
 }
-
 /* High-contrast styles */
 .high-contrast {
+    top: 0;
+    left: 0;
+    width: 97vw;
+    height: 92vh;
     color: #fff;
+    /* background: radial-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.2) 250%); */
     background-color: #000;
 }
 
@@ -95,4 +156,47 @@ input[type=range] {
   }
   img{
     border-radius: 20px;
+  }
+  .different-font{
+    font-family: 'Resistance générale';
+  }
+  .third-font{
+    font-family: 'Felidae';
+  }
+  .everything{
+    align-items: flex-start;
+    display: flex;
+    z-index: -4;
+  }
+  .left{
+    width: 50vw;
+    height: 97vh;
+    padding-right: 0.5rem;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    display: block;
+    /* z-index: -2; */
+  }
+  .right{
+    width: 45vw;
+    height: 94vh;
+    padding-left: 1rem;
+    padding-top: 2rem;
+    overflow-y: scroll;
+    /* background-image: linear-gradient(to bottom right, red, yellow); */
+  }
+  ::-webkit-scrollbar {
+    width: 20px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px blue; 
+    border-radius: 30px;
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: red; 
+    border-radius: 30px;
   }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8620b3c..8b130e9 100644
--- a/index.html
+++ b/index.html
@@ -8,43 +8,156 @@
     <title> Senka's user page</title>
     <link rel="stylesheet" href="index style.css" />
 </head>
-<body>
-    <div class="buttons">
-    <button id="toggle-high-contrast">Contrast</button>
-    <button class="slider-container">
-        <label for="font-size-slider" >Font Size</label>
-        <input type="range" id="font-size-slider" min="20" max="40" value="20" />
-    </button>
-    </div>
-      <div class="display-text" id="display-text">
-        <h1 id="title">Senka's User page</h1> 
-        <p id="intro"> Here I will ramble about the following: <br>
+<body id="body" class="body-font">
+    <!-- <div class="back">
+    </div> -->
+        <div class="buttons">
+        <button id="toggle-high-contrast">Contrast</button>
+        <button class="slider-container">
+            <label for="font-size-slider">Font Size</label>
+            <input type="range" id="font-size-slider" min="25" max="60" value="25" />
+        </button>
+        <button id="font-change">
+            <label for="font-change-2">Change Font</label>
+        </button>
+        </div>
+        <div class="display-text" id="display-text">
+    <div class="everything"> 
+    <div class="left">
+        
+        <h1 id="title"> <span>Добродошли и добро Вас нашли</span> <br>Senka's User Page</h1> 
+        <p id="intro">
+            Like many people in the creative industry I have a different cv and biography depending on the project I'm doing and the funding application I'm applying for. 
+            But I generally have an interest in archives, media theory, storytelling and writing. 
+            (Knowledge production, how do we learn collectivelly and the like...)<br>
+            Here I will ramble about and place the following: <br>
+            <ul id="intro">
+            <li>things I researched</li>
+            <li>little web experiments</li>
+            </ul>
         </p>
-        <img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
-        <button id="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
+        <p>text text text text text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text exttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text textexttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</p>
+        <!-- <button onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button> -->
+        
+    </div>
+    <div class="right">
+            <img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
+            <img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
+
+        </div>
     </div>
-     
+</div>
 <script type="text/javascript">
+    // const canvas = document.getElementById("myCanvas"),
+    // ctx = canvas.getContext("2d"),
+    // image = new Image();
+
+    // // Wait for the sprite sheet to load
+    // image.onload = () => {
+    // Promise.all([
+    // // Cut out two sprites from the sprite sheet
+    // createImageBitmap(image, 0, 0, 432, 432),
+    // // createImageBitmap(image, 432, 0, 432, 432),
+    // ]).then((sprites) => {
+    // // Draw each sprite onto the canvas
+    // ctx.drawImage(sprites[0], 0, 0);
+    // // ctx.drawImage(sprites[1], 102, 32);
+    // // Create a linear gradient
+    // // The start gradient point is at x=20, y=0
+    // // The end gradient point is at x=220, y=0
+    // const gradient = ctx.createLinearGradient(20, 0, 220, 0);
+
+    // // Add three color stops
+    // gradient.addColorStop(0, "green");
+    // gradient.addColorStop(0.5, "cyan");
+    // gradient.addColorStop(1, "green");
+
+    // // Set the fill style and draw a rectangle
+    // ctx.fillStyle = gradient;
+    // ctx.fillRect(20, 20, 200, 100);
+    // });
+    // };
+    // // Load the sprite sheet from an image file
+    // image.src = "important.jpg";
+
+
+   // Change font size button
     // Get the toggle button
+    var toggleButtonTwo = document.getElementById("font-change");
+    console.log("It's getting the body for the 2md time");
+     // Add a click event listener to the toggle button
+     toggleButtonTwo.addEventListener("click", function() {
+    // Get the body element
+    var body = document.getElementsByTagName("body")[0];
+    // var bodyFont = body.classList == "body-font"
+    // var highContrast = body.classList == "high-contrast"
+
+    // Toggle the "different-font" class on the body element
+    var bodyClasses = document.body.classList.value;
+    if (bodyClasses.includes("body-font")){
+        document.body.classList.remove("body-font");
+        document.body.classList.remove("third-font");
+        document.body.classList.add("different-font");
+    } else if (bodyClasses.includes("different-font")){
+        document.body.classList.remove("body-font");
+        document.body.classList.remove("different-font");
+        document.body.classList.add("third-font");
+    } else if (bodyClasses.includes("third-font")){
+        document.body.classList.remove("third-font");
+        document.body.classList.add("body-font");
+        document.body.classList.remove("different-font");
+        
+    }
+    // if  ( body.classList == "body-font" || body.classList == "body-font high-contrast"){
+    // body.classList.remove("body-font");
+    // body.classList.add("different-font");}
+    // else if(body.classList == "different-font" || body.classList == "different-font high-contrast"){
+    //     body.classList.remove("different-font");
+    //     body.classList.add("different-font-2");
+    //     body.classList.remove("body-font");
+    //     console.log("It worked!");
+    // } else{
+    //     body.classList.remove("different-font-2");
+    //     body.classList.add("body-font");
+    // }
+    // if  ( body.classList == "body-font high-contrast"){
+    // body.classList.remove("body-font");
+    // body.classList.add("different-font");}
+    // else if(body.classList == "different-font high-contrast"){
+    //     body.classList.remove("different-font")
+    //     body.classList.add("different-font-2");
+    //     console.log("It worked!")
+    // } else{
+    //     body.classList.remove("different-font-2")
+    //     body.classList.add("body-font");
+    // }
+    });
+
+    // Getting the toggle button
     var toggleButton = document.getElementById("toggle-high-contrast");
 
-    // Add a click event listener to the toggle button
+    // Added a click event listener to the toggle button
     toggleButton.addEventListener("click", function() {
-    // Get the body element
+    // Getting the body element
     var body = document.getElementsByTagName("body")[0];
     // Toggle the "high-contrast" class on the body element
     body.classList.toggle("high-contrast");
+    body.classList.remove("back")
     });
+
     // Slider for font size
     const fontSizeSlider = document.getElementById("font-size-slider");
     const displayText = document.getElementById("display-text");
+    function changeSize(){
+        const fontSize = fontSizeSlider.value;
+        displayText.style.fontSize = `${fontSize}px`;
+    }
 
     fontSizeSlider.addEventListener("input", () => {
-    const fontSize = fontSizeSlider.value;
-    displayText.style.fontSize = `${fontSize}px`;
-    //
-
+        changeSize();
     });
+    changeSize();
+
 </script>
 <script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
 <link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
diff --git a/stike-ideas.html b/stike-ideas.html
new file mode 100644
index 0000000..3d17fcc
--- /dev/null
+++ b/stike-ideas.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+
+<head>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch+Pop&display=swap');
+    body{
+        background: linear-gradient(-45deg, #ffaef6, #dbd2ff);
+        border: 2px solid rgb(0, 0, 0);
+        width: 98vw;
+        height: 97vh;
+        background-size: 400% 400%;
+        animation: gradientanimation 15s ease infinite;
+    }
+    @keyframes gradientanimation {
+        0%{
+            background-position:  0%, 50%;
+        }
+        50%{
+            background-position: 100%, 50%;
+        }
+        100%{
+            background-position: 0%, 50%;
+        }
+    }
+    h1{
+        top: 2rem;
+        left: 4rem;
+        position: absolute;
+        font-family: 'Rubik Glitch Pop', system-ui;
+        font-size: 4rem;
+        background-image: linear-gradient(180deg, rgb(0, 0, 0), #350707);
+        background-size: 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -moz-background-clip: text;
+        -webkit-text-fill-color: transparent; 
+        -moz-text-fill-color: transparent;
+    }
+    p{
+        top: 15rem;
+        left: 4rem;
+        position: absolute;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 1.5rem;
+        color: #350707;
+    }
+    .circle{
+        position: absolute;
+        top: 5rem;
+        right: 5rem;
+        height: 35vw;
+        width: 35vw;
+        background-color: #000000;
+        border-radius: 50%;
+        display: inline-block;
+        align-items: baseline;
+    }
+    .rectangle{
+        position: absolute;
+        top: 14vw;
+        left: 7vw;
+        height: 6rem;
+        width: 20vw;
+        background-color: #d7ffde;
+        display: inline-block;
+        z-index: 10;
+        border-radius: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    span{
+        top: 0.2rem;
+        color: #570000;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 1.2rem;
+        text-align: center;
+        align-items: center;
+    }
+    
+</style>
+</head>
+<body>
+ <h1>Magic 8 Ball <br> of Cloud Strike Ideas</h1>
+ <p> Click the ball for ideas</p>
+
+ <div id="8ball" class="circle" onclick="displayAnswer()">
+    <div class="rectangle">
+        <span id="answer">
+            What kind of strike do you want?
+         </span>
+    </div>
+ </div>
+
+    <script>
+    // getElementById("8ball") .effect( "shake" );
+    
+    var magicBall= document.getElementById("8ball");
+
+    magicBall.addEventListener("click", function() { 
+        console.log("Hello visitor");
+        
+    });
+
+    let answers = [
+    'Host a die-in in front of the Van Nelle data center',
+    'Don\'t use a credit card',
+    'Organise mesh network',
+    'Displace X',
+    'Arson'
+    ]
+
+    let displayAnswer = function()
+    {
+        let index = Math.floor(Math.random() * answers.length);
+        let answer = answers[index];
+        let element = document.getElementById( 'answer' );
+        element.style.display = 'inline-block';
+        element.innerHTML = '<br><br>' + answer;
+    }
+
+    // window.onload = function(){ 
+    // function shakeBall(){
+    //         document.getElementById("#8ball");
+    //         console.log("Hello visitor");
+    //     //    Ball.effect("shake");
+    //    }
+    // }
+    // Ball.onclick = shakeBall();
+    
+    
+    // function shakeBall(answer){
+       
+    //     Ball.effect("shake");
+    // }
+    // shakeBall();
+    </script>
+</body>
\ No newline at end of file