update images and project order

index.html

@@ -19,85 +19,75 @@ <h1>scroll.</h1>
                 <a href="https://qc20.github.io/Pulsar-Waveform/" target="_blank"></a>
             </div>
         </li>
-
         <li>
             <a href="https://qc20.github.io/warped-room/" target="_blank">
                 <img src="src/assets/img/warped-room.png" alt="Warped Room" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/warped-room/" target="_blank">
-                <img src="src/assets/img/particle-walker.png" alt="Particle Walker" />
+            <a href="https://qc20.github.io/Noct/" target="_blank">
+                <img src="src/assets/img/Noct3.png" alt="Noct" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/Alive/" target="_blank">
-                <img src="src/assets/img/alive.png" alt="Wavy Pulsar" />
+            <a href="https://qc20.github.io/InkDrop/" target="_blank">
+                <img src="src/assets/img/Ink-Drop.png" alt="Ink Drop" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
+            <a href="https://qc20.github.io/GLSL-Shader/" target="_blank">
                 <img src="src/assets/img/WavyHairball.png" alt="Wavy Hairball" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/Fireball/" target="_blank">
-                <img src="src/assets/img/fireball.png" alt="Fireball" />
-            </a>
-        </li>
-        <li>
-            <a href="https://qc20.github.io/Attractor/" target="_blank">
-                <img src="src/assets/img/thomas-attractor.png" alt="Thomas' Attractor" />
-            </a>
-        </li>
-        <li>
-            <a href="https://qc20.github.io/Attractor/" target="_blank">
-                <img src="src/assets/img/StripedBlob.png" alt="Thomas' Attractor" />
+            <a href="https://qc20.github.io/LiveDots/" target="_blank">
+                <img src="src/assets/img/LiveDots.png" alt="Live Dots" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/BW-Blobs/" target="_blank">
-                <img src="src/assets/img/BW-Blobs.png" alt="Black and White Blobs" />
+            <a href="https://qc20.github.io/Fireball/" target="_blank">
+                <img src="src/assets/img/fireball.png" alt="Fireball" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/Attractor/" target="_blank">
-                <img src="src/assets/img/CircleCircle-Interaction.png" alt="CircleCircle Interaction" />
-            </a>
+            <div class="iframe-container">
+                <iframe src="https://qc20.github.io/BW-Blobs/"></iframe>
+                <a href="https://qc20.github.io/BW-Blobs/" target="_blank"></a>
+            </div>
         </li>
         <li>
             <a href="https://qc20.github.io/Latex-Wave/" target="_blank">
                 <img src="src/assets/img/Latex-Wave.png" alt="Latex Wave" />
             </a>
         </li>
         <li>
-            <a href="https://qc20.github.io/Latex-Wave/" target="_blank">
-                <img src="src/assets/img/LiveDots.png" alt="Live Dots" />
+            <a href="https://qc20.github.io/GLSL-Shader/" target="_blank">
+                <img src="src/assets/img/GLSL-Shader.png" alt="GLSL Shader" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
-                <img src="src/assets/img/GLSL-Shader.png" alt="GLSL Shader" />
+            <a href="https://qc20.github.io/Attractor/" target="_blank">
+                <img src="src/assets/img/StripedBlob.png" alt="Striped Blob" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
-                <img src="src/assets/img/EndlessMountains.png" alt="Endless Mountains" />
+            <a href="https://qc20.github.io/Attractor/" target="_blank">
+                <img src="src/assets/img/thomas-attractor.png" alt="Thomas' Attractor" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
-                <img src="src/assets/img/Ink-Drop.png" alt="Ink Drop" />
+            <a href="https://qc20.github.io/Deformation/" target="_blank">
+                <img src="src/assets/img/Deformation.png" alt="Deformation" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
-                <img src="src/assets/img/Deformation.png" alt="Deformation" />
+            <a href="https://qc20.github.io/BlackHoles/" target="_blank">
+                <img src="src/assets/img/BlackHoles.png" alt="Black Holes" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/GLSL-Shader/" target="_blank">
-                <img src="" alt="Wavy Hairball" />
+            <a href="https://qc20.github.io/particle-walker/" target="_blank">
+                <img src="src/assets/img/particle-walker.png" alt="Particle Walker" />
             </a>
         </li>
         <li>
@@ -106,23 +96,28 @@ <h1>scroll.</h1>
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/BlackHoles/" target="_blank">
-                <img src="src/assets/img/BlackHoles.png" alt="Black Holes" />
+            <a href="https://qc20.github.io/CircleCircleInteraction/" target="_blank">
+                <img src="src/assets/img/CircleCircle-Interaction.png" alt="CircleCircle Interaction" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/Smoke/" target="_blank">
-                <img src="src/assets/img/Smoke.png" alt="Smoke" />
+            <a href="https://qc20.github.io/EndlessMountains/" target="_blank">
+                <img src="src/assets/img/EndlessMountains.png" alt="Endless Mountains" />
             </a>
         </li>
         <li>
-            <a href="qc20.github.io/Noct/" target="_blank">
-                <img src="src/assets/img/Noct3.png" alt="Noct" />
+            <a href="https://qc20.github.io/Smoke/" target="_blank">
+                <img src="src/assets/img/Smoke.png" alt="Smoke" />
             </a>
         </li>
         <li>
             <a href="https://qc20.github.io/Circle-In-Circle/" target="_blank">
-                <img src="src/assets/img/CircleInCircle.png" alt="Noct" />
+                <img src="src/assets/img/CircleInCircle.png" alt="Circle In Circle" />
+            </a>
+        </li>
+        <li>
+            <a href="https://qc20.github.io/Alive/" target="_blank">
+                <img src="src/assets/img/alive.png" alt="Wavy Pulsar" />
             </a>
         </li>
     </ul>

src/javascript/loader.js

@@ -1,6 +1,16 @@
 // loader.js
 window.addEventListener('load', function() {
+    const loadingScreen = document.querySelector('.loading-screen');
+    const loadingText = document.querySelector('.loading-screen .loading');
+
     setTimeout(function() {
-        document.body.classList.add('loaded');
-    }, 2500);
+        // Fade out the loading text
+        loadingText.style.opacity = '0';
+        loadingText.style.filter = 'blur(10px)';
+
+        // After the text fades out, fade out the entire loading screen
+        setTimeout(function() {
+            document.body.classList.add('loaded');
+        }, 550); // This should match the transition duration in CSS
+    }, 2750);
 });

src/styles/loader.css

@@ -15,6 +15,7 @@
 
 .loading-screen .loading {
     font-family: monospace;
+    transition: opacity 0.5s ease-out, filter 0.5s ease-out;
 }
 
 .loading-screen .loading:after {
@@ -34,4 +35,9 @@
 body.loaded .loading-screen {
     opacity: 0;
     pointer-events: none;
+}
+
+body.loaded .loading-screen .loading {
+    opacity: 0;
+    filter: blur(10px);
 }