9 files changed, 182 insertions, 0 deletions
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..6c55f7f
--- /dev/null
+++ b/.DS_Store
diff --git a/css/.DS_Store b/css/.DS_Store
new file mode 100644
index 0000000..2af3bfd
--- /dev/null
+++ b/css/.DS_Store
diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..82ec524
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,64 @@
+body {
+  margin: 0;
+  background-color: #AAAAAA;
+  font-family: 'Trebuchet MS', sans-serif;
+}
+
+.top-container {
+  text-align: center;
+  height: 100vh; 
+  padding: 24px;
+}
+
+.profile-picture {
+  width: 100%;
+  border-radius: 50%;
+  max-width: 600px;
+  box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+
+.projects-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  padding: 24px;
+  gap: 12px;
+}
+
+.project {
+  text-decoration: none;
+  color: black;
+  border-radius: 8px;
+  flex: 1;
+  background-color: #888888;
+  display: flex;
+  box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 12px 0 rgba(0,0,0,0.17);
+  min-width: 300px;
+  transition: transform 250ms;
+  padding: 12px;
+  gap: 12px;
+}
+
+.project:hover {
+  background-color: #666666;
+  transform: translateY(-8px);
+  cursor: pointer;
+}
+
+.project-logo-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+}
+
+.project-body {
+  flex: 5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: left;
+}
diff --git a/dvd-logo/images/dvd-logo.png b/dvd-logo/images/dvd-logo.png
new file mode 100644
index 0000000..560e642
--- /dev/null
+++ b/dvd-logo/images/dvd-logo.png
diff --git a/dvd-logo/index.html b/dvd-logo/index.html
new file mode 100644
index 0000000..fc07484
--- /dev/null
+++ b/dvd-logo/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>DVD MADNESS</title>
+    <style>
+      body {
+        margin: 0;
+        background: black;
+        height: 100%;
+        width: 100%;
+      }
+      #dvd-logo {
+        width: 200px;
+        position: absolute;
+        left: -200px; /* So that logo doesn't flash at top left corner when document loads */
+        top: -200px;
+      }
+    </style>
+  </head>
+  <body>
+    <img id="dvd-logo" src="images/dvd-logo.png">
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/dvd-logo/js/script.js b/dvd-logo/js/script.js
new file mode 100644
index 0000000..9703f88
--- /dev/null
+++ b/dvd-logo/js/script.js
@@ -0,0 +1,42 @@
+const randUpTo = (max) => Math.random() * max
+
+const randomHue = (element) => {
+  element.style.filter = `brightness(0.5) sepia(1) saturate(10000%) hue-rotate(${randUpTo(360)}deg)`;
+}
+
+const clamp = (val, max) => val > max ? max : val;
+
+
+const updateLogo = (logo, element) => {
+  const screen_height = window.innerHeight;
+  const screen_width = window.innerWidth;
+
+  const collide_y = logo.y <= 0 || (logo.y + element.clientHeight) >= screen_height;
+  const collide_x = logo.x <= 0 || (logo.x + element.clientWidth) >= screen_width;
+
+  logo.dx *= (collide_x ? -1 : 1);
+  logo.dy *= (collide_y ? -1 : 1);
+
+  if (collide_y || collide_x) {
+    randomHue(element);
+  }
+
+  // Clamp in case user changes screen size
+  logo.x = clamp(logo.x + logo.dx, screen_width - element.clientWidth);
+  logo.y = clamp(logo.y + logo.dy, screen_height - element.clientHeight);
+
+  element.style.left = `${logo.x}px`;
+  element.style.top = `${logo.y}px`;
+};
+
+window.onload = () => {
+  let logo = {
+    x: randUpTo(window.innerWidth),
+    y: randUpTo(window.innerHeight),
+    dx: 2,
+    dy: 2
+  };
+  const dvdLogo = document.getElementById("dvd-logo");
+
+  setInterval(() => updateLogo(logo, dvdLogo), 15); // ~ 67 hz
+}
diff --git a/images/profile.jpg b/images/profile.jpg
new file mode 100644
index 0000000..57ba3d0
--- /dev/null
+++ b/images/profile.jpg
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..47c463b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Simponic's Static Sites</title>
+    <link href="css/styles.css" rel="stylesheet">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+    <script src="https://kit.fontawesome.com/d7e97ed48f.js" crossorigin="anonymous"></script>
+  </head>
+  <body>
+    <div class="top-container animate__animated animate__fadeIn">
+      <img src="images/profile.jpg" class="profile-picture">
+      <p>
+         👋 Hello!
+         <br>
+         🤓 I'm Simponic. 
+         <br>
+         📖 This pages hosts strictly static content.
+         <br>
+         🔔 Visit <a href="https://simponic.xyz">simponic.xyz</a> to view my "real" website.
+      </p>
+      <div class="projects-grid">
+        <div class="project" onclick="window.location='dvd-logo/index.html'">
+          <div class="project-logo-container">
+            <i class="fa-solid fa-compact-disc"></i>
+          </div>
+
+          <div class="project-body">
+            <h1>DVD Logo Bouncing Animation</h1>
+            <p>Brings back the nostalgia of old-school DVD players, as discussed in <a href="https://www.youtube.com/watch?v=QOtuX0jL85Y">The Office</a>.</p>
+          </div>
+        </div>
+
+        <div class="project" onclick="window.location='maize-maze/index.html'">
+          <div class="project-logo-container">
+            <i class="fa-solid fa-diagram-project"></i>
+          </div>
+
+          <div class="project-body" >
+            <h1>The A-maze-ing Maize Maze</h1>
+            <p>A Randomized Kruskal's Maze game with BFS path-finding. You play as a 🌽corn stalk trying to become 🍿popcorn.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/maize-maze b/maize-maze
-Subproject 2bf6e469a6a914c1f2c41b1408ad988bd72b09f
+Subproject 4d1c1142634df0b10f6a7888ef1b6c2e8d63213