Added broken website for sync

src/lib/Counter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = 0
+  const increment = () => {
+    count += 10
+  }
+</script>
+
+<button on:scroll={increment}>
+  count is {count}
+</button>

src/lib/ScrollTextComponent.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    let chunkSize: number = 750;
+    let chunks: number = 10;
+
+
+
+    export let allChunkHeight: number = chunkSize * chunks;
+    let scrollPosition: number = 0;
+
+    function handleScroll() {
+        const divElement = document.getElementById('scrollContainer');
+        scrollPosition = divElement.scrollTop;
+
+        let chunkProgress: number = scrollPosition % chunkSize;
+        if (chunkSize * 0.1 < chunkProgress 
+        && chunkProgress < chunkSize * 0.9){
+            divElement.style.color = "pink";
+        }
+        else{
+            divElement.style.color = "lightblue";
+        }
+    }
+</script>
+
+<style>
+    .container {
+        width: 100%;    
+        height: 100vh;
+        overflow-y: scroll;
+        z-index: 1;
+    }
+
+    .scrollText {
+        width: 100%;
+        background-color: darkslateblue;
+        padding: 0;
+        margin: 0;
+        z-index: 1;
+    }
+
+    .center-screen {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 100vh;
+        position:relative;
+        left:0;
+        right:0;
+        top: 0;
+        bottom: 0;
+        margin:auto;
+        z-index: 1;
+    }
+</style>
+
+<div style="height: 40vh;">
+    <div class="center-screen">
+        =================================================
+    </div>
+
+    <div class="container" id="scrollContainer" on:scroll={handleScroll}>
+        <div class="scrollText" style="height: {allChunkHeight}px;">
+            {#each {length: chunks} as _, i}
+                <div class="chunk" style="height: {chunkSize}px; z-index: 0;">
+                    {scrollPosition}
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>