rabbit hole update

jom-hedges · jom-hedges · commit e7d1a81d08a9 · 2025-06-02T19:09:46.000+08:00
diff --git a/src/consts.ts b/src/consts.ts
@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = 'Jon Miller';
+export const SITE_TITLE = 'jmill';
 export const SITE_DESCRIPTION = 'editor | engineer | bicyclist';
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -18,9 +18,9 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
           <source src="/videos/reflections.mp4" type="video/mp4" />
         </video>
 			</div>
-        <button>
-			  	 
-  			</button>
+      <div class="button-container">
+        <a href="/about" class="enter-btn">Enter the Rabbit Hole</a>
+      </div>
 			<p>
 				
 			</p>
@@ -42,16 +42,47 @@ main {
 
 .video_container {
   position: absolute;
-  top: 50%;
+  top: 35%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
 }
 
 video {
   transform: rotate(270deg);
-  max-width: 100%;
-  max-height: 100vh;
+  width: 80vw;
+  height: auto;
+  max-width: 100vw;
+  max-height: 80vh;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 40vh;
+  z-index: 3;
+}
+
+.enter-btn {
+  position: relative;
+  z-index: 3;
+  padding: 10px 20px;
+  font-size: 16px;
+  color: #eaeaea; /* off white */
+  background-color: transparent;
+  border: 2px solid #bbb; /* subtle gray outline */
+  border-radius: 5px;
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.2s, color 0.2s, border 0.2s;
+  opacity: 0.7;
+}
+
+.enter-btn:hover {
+  background-color: #f5f5f5;
+  color: #222;
+  border: 2px solid #888;
+  opacity: 1;
 }
 
 </style>
diff --git a/src/pages/rabbit-hole.astro b/src/pages/rabbit-hole.astro
@@ -0,0 +1,36 @@
+---
+
+---
+<body>
+    <div class="wrapper">
+        <!-- Primary Layout -->
+        <!-- DOT GRID -->
+        <div class="instructions">
+            <h1>hjmg</h1>
+            <p>Click the a shape, then drag to any second shape. Repeat</p>
+        </div>
+        <div class="game-container">
+            <div class="game">
+                <div class="dot-grid">
+                    <!-- Dots will be generated here -->
+                </div>
+                <div class="shape-container">
+                    <!-- Shapes will be generated here -->
+                </div>
+            </div>
+        </div>
+        <! -- Text Layer -->
+        <div class="text-layer">
+            <h1>Iterate to navigate</h1>
+        </div>
+            <p class="story">
+                <span class="highlight">Rabbit Hole</span> is a game about exploring the unknown, where each choice leads you deeper into a maze of possibilities. 
+                <br>
+                <span class="highlight">Click</span> on a shape to start your journey, and <span class="highlight">drag</span> to connect with another shape. 
+                <br>
+                Each connection opens new paths, leading you further into the rabbit hole.
+                <!-- Text will generate here with JavaScript -->
+            </p>
+        </div>
+    </div>
+</body>
