Landing page is designed now.

pages/index.html

@@ -1,64 +1,89 @@
 <h1>Zed's Game Dev Website</h1>
+<script src="https://player.twitch.tv/js/embed/v1.js"></script>
+
 <div class="flex flex-col flex-start">
-  <shape class="video bg-gray-950! font-bold gap-8">
+  <shape id="twitch-player" class="video bg-gray-950! font-bold gap-8">
-    <button class="hover:btn-hover bg-gray-200"><a id="streams" href="/stream/">View Past Streams</a></button>
-    <button class="hover:btn-hover bg-gray-200"><a id="live" href="/live/">Watch Today's Livestream</a></button>
   </shape>
 </div>
 
 <block class="bg-gray-300 dark:bg-gray-800" data-testid="clickblock">
-<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+<p class="text-xl">Hi, my name is Zed and this i where I post things about my games that I'm making.</p>
-</p>
 </block>
 
 <block>
 <grid class="grid-cols-2">
-  <shape class="xxs">Left Image</shape>
+  <img src="/images/buckaroo_bonzai.png" />
-  <div>
+  <block>
     <h3>I stream on Twitch.</h3>
 
     <p>I stream every day at 10AM/10PM EST time.  60% of the time it's a chill laid back stream with only programming and a bit of talking about programming.  30% of the time it's art for games I'm making. 10% of the time it's games I'm playing.</p>
 
     <a href="https://twitch.tv/zedashaw"><button style="--value: 2; --text: 9">Watch me on Twitch</button></a>
-  </div>
+  </block>
 </grid>
 </block>
 
 <block class="bg-gray-300 dark:bg-gray-800">
-<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
+<p class="text-xl">In the year 2025 I decided to finally take all of my skills and apply them tothe challenge of creating games.  I figured, "Hey, games are nothing more than paintings and music with code attached. How hard could it be?"  Turns out, not only is it challenging but it's <b>fun</b>.</p>
+</block>
+
+<block>
+<grid class="grid-cols-2">
+<block>
+  <h2>Play My Games</h2>
+  <p>Are you a fan of retro styled jank but fun games?  Me too, so here's my games I've made with that theme.  Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it. Hopefully.</p>
+
+  <a href="/game/"><button style="--value: 2; --text: 9">Play my Games</button></a>
+</block>
+
+<img src="/images/rat_king_emote.gif" />
+</grid>
+</block>
+
+<block class="bg-gray-300 dark:bg-gray-800">
+<p class="text-xl">I try to share all of my code online for people to review.  Some of it is open source, but other projects are simply copyright.  You're can view and play them if they're published here. I treat programming as a form of self-expression similar to my painting and writing.  Given that <a href="https://en.wikipedia.org/wiki/Bernstein_v._United_States">code is speech according to the Supreme Court</a> then I am allowed to publish my code without a license in the same way that I publish my blog posts and paintings without a license.</p>
+</block>
+
+<block>
+<grid class="grid-cols-2">
+  <img src="/images/vim_window_clip.jpg" />
+  <block>
+  <h2>Checkout my Git</h2>
+  <p>If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.</p>
+
+  <a href="https://git.zedshaw.games/games"><button style="--value: 2; --text: 9">View my Git</button></a>
+  </block>
+</grid>
+</block>
+
+<block class="bg-gray-300 dark:bg-gray-800">
+<h2 class="!text-3xl">Contact Me</h2>
+<p>If you'd like to contact me about what you see here then email me at <a href="mailto:help@learncodethehardway.com">help@learncodethehardway.com</a>. It might take me about a day to respond.
 </p>
 </block>
 
 <block>
 <grid class="grid-cols-2">
 <div>
-<h2>Zed's Trash Ass Games</h2>
+<h2>I Like to Paint</h2>
-<p>Are you a fan of retro styled half-assed but fun games?  Me too, so here's my games I've made with that theme.  Think "it's the late 80s and nobody knows how to make a game" when you play these and you'll enjoy every minute of it.</p>
+<p>All of the art in my games is original paintings that I process with a bunch of jank imagemagick scripts to give it that "80s/90s retro" look. I frequently do paintings live on Twitch, and I post most of the art here as well.</p>
 
-<a href="/game/"><button style="--value: 2; --text: 9">Play my Games</button></a>
+<a href="/game/"><button style="--value: 2; --text: 9">View my Art</button></a>
 </div>
-<shape>Right Image</shape>
+
+<img src="/images/Hawaii_Truck.jpg" />
 </grid>
 </block>
 
-<block class="bg-gray-300 dark:bg-gray-800">
-<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
-</p>
-</block>
 
-<block>
+<script>
-<grid class="grid-cols-2">
+  var options = {
-<shape class="shape-xs hover:bg-gray-950 bg-gray-400">Left Image</shape>
+    width: "100%",
-<div>
+    height: "100%",
-<h2>Checkout my Git</h2>
+    autoplay: false,
-<p>I put al of my code online for people to read and study.  If you're curious about the code behind my games or anything else I make then take a look at my git. It's like a buffet of half-finished genius.</p>
+    muted: true,
-
+    channel: "zedashaw"
-<a href="https://git.learnjsthehardway.com"><button style="--value: 2; --text: 9">View my Git</button></a>
+  };
-</div>
+  var player = new Twitch.Player("twitch-player", options);
-</grid>
+  player.setVolume(0.5);
-</block>
+</script>
-
-<block class="bg-gray-300 dark:bg-gray-800">
-<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby.
-</p>
-</block>

static/input_style.css

@@ -25,6 +25,10 @@ nav {
   @apply flex justify-center items-center bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl w-full justify-evenly;
 }
 
+a {
+  @apply underline;
+}
+
 nav > a {
   @apply flex justify-center items-center pt-1;
 }

static/style.css

@@ -499,6 +499,15 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .\!pb-4 {
+    padding-bottom: calc(var(--spacing) * 4) !important;
+  }
+  .\!pb-10 {
+    padding-bottom: calc(var(--spacing) * 10) !important;
+  }
+  .\!pb-20 {
+    padding-bottom: calc(var(--spacing) * 20) !important;
+  }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
@@ -517,6 +526,9 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
   .pb-10\! {
     padding-bottom: calc(var(--spacing) * 10) !important;
   }
@@ -529,6 +541,18 @@
   .align-top {
     vertical-align: top;
   }
+  .\!text-2xl {
+    font-size: var(--text-2xl) !important;
+    line-height: var(--tw-leading, var(--text-2xl--line-height)) !important;
+  }
+  .\!text-3xl {
+    font-size: var(--text-3xl) !important;
+    line-height: var(--tw-leading, var(--text-3xl--line-height)) !important;
+  }
+  .\!text-xl {
+    font-size: var(--text-xl) !important;
+    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -689,6 +713,9 @@ nav {
     color: var(--color-gray-50);
   }
 }
+a {
+  text-decoration-line: underline;
+}
 nav > a {
   display: flex;
   align-items: center;

views/layouts/main.html

@@ -38,16 +38,22 @@
     {{embed}}
   </main>
 
-  <footer>
+  <footer class="!p-4 !pb-20">
     <div class="flex-1">
       <img class="size-12 shrink-0" src="/logo.png" />
       <div>
-        <p>Blah blah about me.</p>
+        <p>I'm the author of many programming education books, a
+        semi-professional oil painter, and new game developer.</p>
       </div>
     </div>
     <div class="flex-1">
       <h3 class="text-3xl">Other Projects</h3>
-      <p>Some other links to stuff.</p>
+      <ul>
+        <li><a href="https://learncodethehardway.com/">Learn Code the Hard Way</a></li>
+        <li><a href="https://lcthw.dev/go/">Go Web Dev</a></li>
+        <li><a href="https://lcthw.dev/learn-code-the-hard-way/">Code Projects for Beginners</a></li>
+        <li><a href="https://zedshaw.com/blog/">Personal Essays</a></li>
+      </ul>
     </div>
   </footer>
   </body>