Goodbye, beautiful tabs :(

diff --git a/hackaday.css b/hackaday.css
index 9be3f54e7869b7566335094e86d26cc9ae4b481b..1657606631395ce06e16b3a48260e2fcd2b7d58a 100644 (file)
--- a/hackaday.css
+++ b/hackaday.css
@@ -27,7 +27,7 @@
     margin: 10px;
 }
 
-.tabs {
+.years {
     width: max(242px, 60%); /* 242px is the fixed-size element including margins */
     margin: 0 auto;
     display: flex;
@@ -35,61 +35,31 @@
     flex-wrap: wrap;
     flex: 1 1 auto;
 }
-.tabs > input[type="radio"] {
+.years > input[type="radio"] {
     position: absolute;
     left: -200vw;
 
 }
-.tabs > label {
+.years > label {
     position: relative;
     padding: 15px 15px 25px;
-    border: 1px solid transparent;
-    border-bottom: 0;
+    border: 1px solid #ccc;
     cursor: pointer;
     font-weight: 600;
     min-width: 4em;
     font-size: 24pt;
     text-align: center;
-}
-.tabs > input:checked + label {
-    border-color: #ccc;
+    display: block;
+    width: min-content;
     border-bottom: 1px solid #fff;
     margin-bottom: -1px;
 }
-.tabs > label:hover,
-.tabs > input:focus + label,
-.tabs > input:checked + label {
-    /*color: #06c;*/
-}
-input:focus-visible + label { /* Keyboard nav */
-  outline: 2px solid rgba(0,102,204,1);
-  border-radius: 3px;
+.years > label:nth-child(n+2) {
+    margin-top: 2rem;
 }
 
-.tabs > label:hover::after,
-.tabs > input:focus + label::after,
-.tabs > input:checked + label::after {
-    content: "";
-    position: absolute;
-    left: 15px;
-    right: 15px;
-    bottom: 10px;
-    height: 4px;
-    background: #8d8d8d;
-}
-.tabs > input:not(:checked) + label:hover::after,
-.tabs > input:not(:checked):focus + label::after {
-    opacity: 0.2;
-}
-
-.tabs .tab-panels > * {
-    display: none;
+.years section {
     border-top: 1px solid #ccc;
-}
-
-.tabs > input[value="2024"]:checked ~ .tab-panels > section.year-2024 ,
-.tabs > input[value="2023"]:checked ~ .tab-panels > section.year-2023 ,
-.tabs > input[value="2022"]:checked ~ .tab-panels > section.year-2022 {
     display: block;
 }
 
@@ -167,6 +137,9 @@ input:focus-visible + label { /* Keyboard nav */
 .hacks.year-2023 .date::after {
     content: ", 2023";
 }
+.hacks.year-2024 .date::after {
+    content: ", 2024";
+}
 
 .hack .description {
     margin-top: 10px;

diff --git a/hackaday.html b/hackaday.html
index c7387959df7aef3c99ff38dee177083e369dfb93..b43c0a700d5532f5b951033bf812d5e3e27833ca 100644 (file)
--- a/hackaday.html
+++ b/hackaday.html
@@ -16,780 +16,778 @@
         <a href="https://blog.za3k.com/tag/hack-a-day/">Blog posts</a>
     </section>
     </div>
-    <div class="tabs">
-        <input type="radio" name="hacktab" value="2024" id="2024-tab" checked><label for="2024-tab">2024</label>
-        <input type="radio" name="hacktab" value="2023" id="2023-tab"><label for="2023-tab">2023</label>
-        <input type="radio" name="hacktab" value="2022" id="2022-tab"><label for="2022-tab">2022</label>
-        <div class="tab-panels">
-            <section class="hacks year-2024">
-                <!--
-                <div class="hack">
-                    <a href="XXX"><img src="img/hackaday3_01.png"></a>
-                    <span class="name">XXX</span>
-                    <span class="date">01</span>
-                    <span class="links">
-                        <a class="demo" href="XXX"></a>
-                        <a class="source" href="XXX"></a>
-                        <a class="blog" href="XXX"></a>
-                    </span>
-                    <span class="description">XXX</span>
-                </div>
-                -->
-                <div class="hack fail">
-                    <a href="https://blog.za3k.com/hack-a-day-day-30-led-fireplace/"><img src="img/hackaday3_30.png"></a>
-                    <span class="name">LED Fireplace</span>
-                    <span class="date">30</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-30-led-fireplace/"></a>
-                    </span>
-                    <span class="description">flickering fireplace</span>
-                </div>
-                <div class="hack">
-                    <a href="https://github.com/za3k/esp-wroom-32"><img src="img/hackaday3_29.png"></a>
-                    <span class="name">ESP32 Docs</span>
-                    <span class="date">29</span>
-                    <span class="links">
-                        <a class="demo" href="https://github.com/za3k/esp-wroom-32"></a>
-                        <a class="source" href="https://github.com/za3k/esp-wroom-32"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-29-esp32-microcontroller-documentation/"></a>
-                    </span>
-                    <span class="description">set up and pinout</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-27-minecraft-mod/"><img src="img/hackaday3_27.png"></a>
-                    <span class="name">Minecraft Mod</span>
-                    <span class="date">27</span>
-                    <span class="links">
-                        <a class="demo" href="https://github.com/za3k/dirt-slab-fabric-mod/releases/tag/v1.0.0"></a>
-                        <a class="source" href="https://github.com/za3k/dirt-slab-fabric-mod"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-27-minecraft-mod/"></a>
-                    </span>
-                    <span class="description">dirt slab</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/no-room-for-error"><img src="img/hackaday3_26.png"></a>
-                    <span class="name">No Room for Error</span>
-                    <span class="date">26</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/no-room-for-error"></a>
-                        <a class="source" href="https://github.com/za3k/no-room-for-error"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-26-no-room-for-error/"></a>
-                    </span>
-                    <span class="description">one attempt coding</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/go/screensaver.html"><img src="img/hackaday3_25.png"></a>
-                    <span class="name">Go Screensaver</span>
-                    <span class="date">25</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/go/screensaver.html"></a>
-                        <a class="source" href="https://github.com/za3k/go"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-25-go-screensaver/"></a>
-                    </span>
-                    <span class="description">watch game replays</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/little-herbalist/"><img src="img/hackaday3_23.png"></a>
-                    <span class="name">Little Herbalist</span>
-                    <span class="date">23</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/little-herbalist/"></a>
-                        <a class="source" href="https://github.com/za3k/little-herbalist"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-unfinished-game/"></a>
-                    </span>
-                    <span class="description">unfinished brewing game</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-22-ai-friend/"><img src="img/hackaday3_22.png"></a>
-                    <span class="name">AI Friend</span>
-                    <span class="date">22</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-22-ai-friend/"></a>
-                    </span>
-                    <span class="description">make a custom friend</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/go/"><img src="img/hackaday3_20.png"></a>
-                    <span class="name">2p Library</span>
-                    <span class="date">20</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/go/"></a>
-                        <a class="source" href="https://gist.github.com/za3k/028bbd83e6b74f305db04b2a5fe7500e"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-20-2p-library/"></a>
-                    </span>
-                    <span class="description">add online multiplayer</span>
-                </div>
-                <div class="hack fail">
-                    <a href="https://blog.za3k.com/hack-a-day-day-19-dd-campaign/"><img src="img/hackaday3_19.png"></a>
-                    <span class="name">RPG Campaign</span>
-                    <span class="date">19</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-19-dd-campaign/"></a>
-                    </span>
-                    <span class="description">a short d&amp;d campaign</span>
-                </div>
-                <div class="hack">
-                    <a href=""https://za3k.com/archive/how-to-tie"><img src="img/hackaday3_17.png"></a>
-                    <span class="name">Android App</span>
-                    <span class="date">17</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.com/archive/how-to-tie"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-17-android-app/"></a>
-                    </span>
-                    <span class="description">learn to tie a tie</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://za3k.github.io/go/"><img src="img/hackaday3_16.png"></a>
-                    <span class="name">Go</span>
-                    <span class="date">16</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/go/"></a>
-                        <a class="source" href="https://github.com/za3k/go"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-16-go/"></a>
-                    </span>
-                    <span class="description">strategy game</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://za3k.github.io/cant-stop/"><img src="img/hackaday3_14.png"></a>
-                    <span class="name">Can't Stop</span>
-                    <span class="date">14</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/cant-stop/"></a>
-                        <a class="source" href="https://github.com/za3k/cant-stop"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-14-cant-stop/"></a>
-                    </span>
-                    <span class="description">dice game</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/pixel-kitchen/"><img src="img/hackaday3_13.png"></a>
-                    <span class="name">Pixel Kitchen</span>
-                    <span class="date">13</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/pixel-kitchen/"></a>
-                        <a class="source" href="https://github.com/za3k/pixel-kitchen"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-13-pixel-kitchen/"></a>
-                    </span>
-                    <span class="description">craft foods, serve customers</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-12-whiteboard-to-do-list/"><img src="img/hackaday3_12.png"></a>
-                    <span class="name">To-Do List</span>
-                    <span class="date">12</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-12-whiteboard-to-do-list/"></a>
-                    </span>
-                    <span class="description">magnetic to-do whiteboard</span>
-                </div>
-                <div class="hack">
-                    <a href="https://upload.za3k.com/"><img src="img/hackaday3_11.png"></a>
-                    <span class="name">Uploader</span>
-                    <span class="date">11</span>
-                    <span class="links">
-                        <a class="demo" href="https://upload.za3k.com/"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-11-upload-za3k-com/"></a>
-                    </span>
-                    <span class="description">send me files</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://za3k.github.io/color-sort"><img src="img/hackaday3_08.png"></a>
-                    <span class="name">Color Sort</span>
-                    <span class="date">08</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/color-sort"></a>
-                        <a class="source" href="https://github.com/za3k/color-sort"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-08-color-sort/"></a>
-                    </span>
-                    <span class="description">relax and sort colors</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/sunchart/"><img src="img/hackaday3_07.png"></a>
-                    <span class="name">When Sun?</span>
-                    <span class="date">07</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/sunchart/"></a>
-                        <a class="source" href="https://github.com/za3k/sunchart"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-07-when-does-the-sun-come-back/"></a>
-                    </span>
-                    <span class="description">countdown to summer</span>
-                </div>
-                <div class="hack fail">
-                    <a href="https://blog.za3k.com/hack-a-day-day-05-milling-an-aluminium-soma-cube-failed/"><img src="img/hackaday3_05.png"></a>
-                    <span class="name">Milled Puzzle</span>
-                    <span class="date">05</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-05-milling-an-aluminium-soma-cube-failed/"></a>
-                    </span>
-                    <span class="description">aluminium soma cube</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-04-project-lembas/"><img src="img/hackaday3_04.png"></a>
-                    <span class="name">Lembas</span>
-                    <span class="date">04</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-04-project-lembas/"></a>
-                    </span>
-                    <span class="description">edible crackers</span>
-                </div>
-                <div class="hack fail">
-                    <a href="https://blog.za3k.com/hack-a-day-day-02-acrylic-soma-cube-failed/"><img src="img/hackaday3_02.png"></a>
-                    <span class="name">Cut Acrylic Puzzle</span>
-                    <span class="date">02</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-02-acrylic-soma-cube-failed/"></a>
-                    </span>
-                    <span class="description">acrylic soma cube</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/ircpuzzles-solver/"><img src="img/hackaday3_01.png"></a>
-                    <span class="name">IRC Puzzles</span>
-                    <span class="date">01</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ircpuzzles-solver/"></a>
-                        <a class="source" href="https://github.com/za3k/ircpuzzles-solver"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-01-ircpuzzles-player/"></a>
-                    </span>
-                    <span class="description">solve a puzzle hunt</span>
-                </div>
-            </section>
-            <section class="hacks year-2023">
-                <div class="hack collab">
-                    <a href="https://za3k.github.io/ha3k-30-musicofspheres/"><img src="img/hackaday2_30.png"></a>
-                    <span class="name">Celestial Music</span>
-                    <span class="date">30</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-30-musicofspheres/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-30-musicofspheres"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-30-music-of-the-celestial-spheres/"></a>
-                    </span>
-                    <span class="description">experience scales, watch orbits</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/ha3k-29-speedread/"><img src="img/hackaday2_29.png"></a>
-                    <span class="name">Speed Reading</span>
-                    <span class="date">29</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-29-speedread/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-29-speedread"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-29-speed-reading/"></a>
-                    </span>
-                    <span class="description">read uncomfortably fast</span>
-                </div>
-                <div class="hack collab cool">
-                    <a href="https://www.youtube.com/watch?v=6sW5rQTj1cE"><img src="img/hackaday2_28.png"></a>
-                    <span class="name">90s Sitcom</span>
-                    <span class="date">28</span>
-                    <span class="links">
-                        <a class="demo" href="https://www.youtube.com/watch?v=6sW5rQTj1cE"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-28-sitcom"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-28-90s-sitcom/"></a>
-                    </span>
-                    <span class="description">fake sitcom intro</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-23-packing/"><img src="img/hackaday2_24.png"></a>
-                    <span class="name">stuff.md</span>
-                    <span class="date">24</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-packing/"></a>
-                    </span>
-                    <span class="description">text database of physical stuff</span>
-                </div>
-                <div class="hack">
-                    <a href="https://www.youtube.com/watch?v=hEYZWD2gQsQ"><img src="img/hackaday2_23.png"></a>
-                    <span class="name">Timelapse</span>
-                    <span class="date">23</span>
-                    <span class="links">
-                            <a class="demo" href="https://www.youtube.com/watch?v=hEYZWD2gQsQ"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-packing/"></a>
-                    </span>
-                    <span class="description">timelapse of house move</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-22-homemade-pcbs/"><img src="img/hackaday2_22.png"></a>
-                    <span class="name">Circuit Boards</span>
-                    <span class="date">22</span>
-                    <span class="links">
-                        <a class="source" href="https://github.com/za3k/ha3k-22-pcb"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-22-homemade-pcbs/"></a>
-                    </span>
-                    <span class="description">make circuitboards at home</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://za3k.github.io/ha3k-20-lockpick/"><img src="img/hackaday2_20b.png"></a>
-                    <span class="name">Lockpicking</span>
-                    <span class="date">20</span>
-                    <span class="links">
-                        <a class="source" href="https://github.com/za3k/ha3k-20-lockpick"></a>
-                        <a class="blog" href="https://blog.za3k.com/hillsfar-lockpicking-20-complete/"></a>
-                    </span>
-                    <span class="description">pick a lock</span>
-                </div>
-                <div class="hack">
-                    <a href="https://blog.za3k.com/hack-a-day-day-20-hillsfar-lockpicking-spritesheet/"><img src="img/hackaday2_20.png"></a>
-                    <span class="name">Hillsfar Spritesheet</span>
-                    <span class="date">20</span>
-                    <span class="links">
-                        <a class="source" href="https://github.com/za3k/ha3k-20-lockpick"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-20-hillsfar-lockpicking-spritesheet/"></a>
-                    </span>
-                    <span class="description">sprites from a minigame</span>
-                </div>
-                <div class="hack">
-                    <a href="https://github.com/za3k/ha3k-18-ai-grabbag"><img src="img/hackaday2_18.png"></a>
-                    <span class="name">AI Grab Bag</span>
-                    <span class="date">18</span>
-                    <span class="links">
-                        <a class="source" href="https://github.com/za3k/ha3k-18-ai-grabbag"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-18-a-i-grab-bag/"></a>
-                    </span>
-                    <span class="description">install instructions for a.i. tools</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.com/games/tower_of_choices"><img src="img/hackaday2_17.png"></a>
-                    <span class="name">Tower of Choices</span>
-                    <span class="date">17</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.com/games/tower_of_choices"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-17-tower-of-choices/"></a>
-                    </span>
-                    <span class="description">pen and paper RPG</span>
-                </div>
-                <div class="hack collab">
-                    <a href="https://za3k.github.io/ha3k-14-synth/"><img src="img/hackaday2_14.png"></a>
-                    <span class="name">Bytebeat Synth</span>
-                    <span class="date">14</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-14-synth/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-14-synth"></a>
-                        <a class="blog" href="https://za3k.github.io/ha3k-14-synth/"></a>
-                    </span>
-                    <span class="description">bytebeat fun</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://za3k.github.io/ha3k-13-blueprint/"><img src="img/hackaday2_13.png"></a>
-                    <span class="name">Blueprint Maker</span>
-                    <span class="date">13</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-13-blueprint/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-13-blueprint"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-13-blueprint-maker/"></a>
-                    </span>
-                    <span class="description">draw house blueprints</span>
-                </div>
-                <div class="hack collab">
-                    <a href="https://za3k.github.io/ha3k-12-screensaver/"><img src="img/hackaday2_12.png"></a>
-                    <span class="name">Screensaver</span>
-                    <span class="date">12</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-12-screensaver/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-12-screensaver"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-12-screensavers/"></a>
-                    </span>
-                    <span class="description">silly screensaver</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://youtu.be/FewtsNn8dg0"><img src="img/hackaday2_11.png"></a>
-                    <span class="name">Raytracer: Rain</span>
-                    <span class="date">11</span>
-                    <span class="links">
-                        <a class="demo" href="https://youtu.be/FewtsNn8dg0"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-11-raytracer-rain"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-11-raytraced-rain/"></a>
-                    </span>
-                    <span class="description">screensaver video</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/ha3k-10-typewriter/"><img src="img/hackaday2_10.png"></a>
-                    <span class="name">Typewriter</span>
-                    <span class="date">10</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-10-typewriter/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-10-typewriter"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-10-typewriter/"></a>
-                    </span>
-                    <span class="description">clicky clacky</span>
-                </div>
-                <div class="hack">
-                    <a href="https://za3k.github.io/ha3k-08-receipt/"><img src="img/hackaday2_08.png"></a>
-                    <span class="name">Receipt</span>
-                    <span class="date">08</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-08-receipt/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-08-receipt"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-08-receipt-zine/"></a>
-                    </span>
-                    <span class="description">silly little zine</span>
-                </div>
-                <div class="hack collab cool">
-                    <a href="https://za3k.github.io/ha3k-07-doodle-alchemy/"><img src="img/hackaday2_07.png"></a>
-                    <span class="name">Alchemy</span>
-                    <span class="date">07</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-07-doodle-alchemy/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-07-doodle-alchemy"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-06-doodlemoji-alchemy/"></a>
-                    </span>
-                    <span class="description">combine elements</span>
-                </div>
-                <div class="hack">
-                    <a href="https://www.youtube.com/watch?v=y4TcrxRg4aw"><img src="img/hackaday2_06.png"></a>
-                    <span class="name">GPU Raytracing</span>
-                    <span class="date">06</span>
-                    <span class="links">
-                        <a class="demo" href="https://www.youtube.com/watch?v=y4TcrxRg4aw"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-06-raytracer"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-06/"></a>
-                    </span>
-                    <span class="description">speed up graphics with CUDA</span>
-                </div>
-                <div class="hack collab">
-                    <a href="https://blog.za3k.com/hack-a-day-day-04-lashed-table/"><img src="img/hackaday2_04.png"></a>
-                    <span class="name">Lashed Furniture</span>
-                    <span class="date">04</span>
-                    <span class="links">
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-04-lashed-table/"></a>
-                    </span>
-                    <span class="description">bamboo table</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://blog.za3k.com/hack-a-day-day-2-raytracing/"><img src="img/hackaday2_02.png"></a>
-                    <span class="name">Raytracing</span>
-                    <span class="date">02</span>
-                    <span class="links">
-                        <a class="demo" href=""></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-02"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-2-raytracing/"></a>
-                    </span>
-                    <span class="description">pretty 3d graphics drawing</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://za3k.github.io/ha3k-01-perquackey/"><img src="img/hackaday2_01.png"></a>
-                    <span class="name">Perquackey</span>
-                    <span class="date">01</span>
-                    <span class="links">
-                        <a class="demo" href="https://za3k.github.io/ha3k-01-perquackey/"></a>
-                        <a class="source" href="https://github.com/za3k/ha3k-01-perquackey"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-day-01-perquackey/"></a>
-                    </span>
-                    <span class="description">word game from 1953</span>
-                </div>
-            </section>
-            <section class="hacks year-2022">
-                <div class="hack cool">
-                    <a href="https://doodle-rpg.com"><img src="img/hackaday30.png"></a>
-                    <span class="name">Doodle RPG</span>
-                    <span class="date">30</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/mmo"></a>
-                        <a class="source" href="https://github.com/za3k/day30_mmo"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mmo/"></a>
-                    </span>
-                    <span class="description">draw the world with friends</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://tilde.za3k.com/hackaday/adventure"><img src="img/hackaday29.png"></a>
-                    <span class="name">Hack-An-Adventure</span>
-                    <span class="date">29</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/adventure"></a>
-                        <a class="source" href="https://github.com/za3k/day29_adventure"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-adventure/"></a>
-                    </span>
-                    <span class="description">draw cute adventures</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/farm"><img src="img/hackaday27.png"></a>
-                    <span class="name">Hack-A-Farm</span>
-                    <span class="date">27</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/farm"></a>
-                        <a class="source" href="https://github.com/za3k/day27_farm"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-farm/"></a>
-                    </span>
-                    <span class="description">plant crops</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/snake"><img src="img/hackaday12.png"></a>
-                    <span class="name">Hack-A-Snake</span>
-                    <span class="date">27</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/snake"></a>
-                        <a class="source" href="https://github.com/za3k/day12_snake"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-snake/"></a>
-                    </span>
-                    <span class="description">snake</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/mini"><img src="img/hackaday26.png"></a>
-                    <span class="name">Hack-A-Minigame</span>
-                    <span class="date">26</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/mini"></a>
-                        <a class="source" href="https://github.com/za3k/day26_mini"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mini/"></a>
-                    </span>
-                    <span class="description">save scumming snake</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/experiment"><img src="img/hackaday25.png"></a>
-                    <span class="name">Hack-An-Experiment</span>
-                    <span class="date">25</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/experiment"></a>
-                        <a class="source" href="https://github.com/za3k/day25_experiment"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-experiment/"></a>
-                    </span>
-                    <span class="description">experimental algorithm analysis</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/clock"><img src="img/hackaday24.png"></a>
-                    <span class="name">Hack-A-Clock</span>
-                    <span class="date">24</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/clock"></a>
-                        <a class="source" href="https://github.com/za3k/day24_clock"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-clock/"></a>
-                    </span>
-                    <span class="description">decimal time clock</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/link2"><img src="img/hackaday23.png"></a>
-                    <span class="name">Hack-A-Link 2</span>
-                    <span class="date">23</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/link2"></a>
-                        <a class="source" href="https://github.com/za3k/day23_link2"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link2/"></a>
-                    </span>
-                    <span class="description">link directory</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://tilde.za3k.com/hackaday/hell"><img src="img/hackaday22.png"></a>
-                    <span class="name">Hack-A-Hell</span>
-                    <span class="date">22</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/hell"></a>
-                        <a class="source" href="https://github.com/za3k/day22_hell"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-hell/"></a>
-                    </span>
-                    <span class="description">bullet hell music visualizer</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/battle"><img src="img/hackaday21.png"></a>
-                    <span class="name">Hack-A-Battle</span>
-                    <span class="date">21</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/battle"></a>
-                        <a class="source" href="https://github.com/za3k/day21_battle"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-battle/"></a>
-                    </span>
-                    <span class="description">two music visualizers battle</span>
-                </div>
-                <div class="hack fail">
-                    <a href="https://tilde.za3k.com/hackaday/hang"><img src="img/hackaday19.png"></a>
-                    <span class="name">Hack-A-Hang</span>
-                    <span class="date">19</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/hang"></a>
-                        <a class="source" href="https://github.com/za3k/day19_hang"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-hang/"></a>
-                    </span>
-                    <span class="description">hang with friends</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/crop"><img src="img/hackaday18.png"></a>
-                    <span class="name">Hack-A-Crop</span>
-                    <span class="date">18</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/crop"></a>
-                        <a class="source" href="https://github.com/za3k/day18_crop"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-crop/"></a>
-                    </span>
-                    <span class="description">crop images</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://tilde.za3k.com/hackaday/tank"><img src="img/hackaday17.png"></a>
-                    <span class="name">Hack-A-Tank</span>
-                    <span class="date">17</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/tank"></a>
-                        <a class="source" href="https://github.com/za3k/day17_tank"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tank/"></a>
-                    </span>
-                    <span class="description">relax and play with fish</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/song"><img src="img/hackaday16.png"></a>
-                    <span class="name">Hack-A-Song</span>
-                    <span class="date">16</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/song"></a>
-                        <a class="source" href="https://github.com/za3k/day16_song"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-song/"></a>
-                    </span>
-                    <span class="description">listen to 'greensleeves'</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://tilde.za3k.com/hackaday/sound"><img src="img/hackaday15.png"></a>
-                    <span class="name">Hack-A-Sound</span>
-                    <span class="date">15</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/sound"></a>
-                        <a class="source" href="https://github.com/za3k/day15_sound"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-sound/"></a>
-                    </span>
-                    <span class="description">play sounds and make tracks</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/stats"><img src="img/hackaday14.png"></a>
-                    <span class="name">Hack-A-Stats</span>
-                    <span class="date">14</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/stats"></a>
-                        <a class="source" href="https://github.com/za3k/day14_stats"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-stats/"></a>
-                    </span>
-                    <span class="description">see how hack-a-day is doing</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/line"><img src="img/hackaday13.png"></a>
-                    <span class="name">Hack-A-Line</span>
-                    <span class="date">13</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/line"></a>
-                        <a class="source" href="https://github.com/za3k/day13_line"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-line/"></a>
-                    </span>
-                    <span class="description">play 5-in-a-row with a friend</span>
-                </div>
-                <div class="hack skipped">
-                    <a href=""><img></a>
-                    <span class="name">Day 12</span>
-                    <span class="date">12</span>
-                </div>
-                <div class="hack kinda-cool">
-                    <a href="https://tilde.za3k.com/hackaday/tile"><img src="img/hackaday11.png"></a>
-                    <span class="name">Hack-A-Tile</span>
-                    <span class="date">11</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/tile"></a>
-                        <a class="source" href="https://github.com/za3k/day11_tile"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tile/"></a>
-                    </span>
-                    <span class="description">arrange matching tiles</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/machine"><img src="img/hackaday10.png"></a>
-                    <span class="name">Hack-A-Machine</span>
-                    <span class="date">10</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/machine"></a>
-                        <a class="source" href="https://github.com/za3k/day10_machine"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-machine/"></a>
-                    </span>
-                    <span class="description">goofy machine with assembly</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/mandelbrot"><img src="img/hackaday09.png"></a>
-                    <span class="name">Hack-A-Mandelbrot</span>
-                    <span class="date">09</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/mandelbrot"></a>
-                        <a class="source" href="https://github.com/za3k/day09_mandelbrot"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mandelbrot/"></a>
-                    </span>
-                    <span class="description">explore fractals</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/dictionary"><img src="img/hackaday08.png"></a>
-                    <span class="name">Hack-A-Dictionary</span>
-                    <span class="date">08</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/dictionary"></a>
-                        <a class="source" href="https://github.com/za3k/day08_dictionary"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-dictionary/"></a>
-                    </span>
-                    <span class="description">look up words</span>
-                </div>
-                <div class="hack cool">
-                    <a href="https://tilde.za3k.com/hackaday/asteroid"><img src="img/hackaday07.png"></a>
-                    <span class="name">Hack-An-Asteroid</span>
-                    <span class="date">07</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/asteroid"></a>
-                        <a class="source" href="https://github.com/za3k/day07_asteroid"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-asteroid/"></a>
-                    </span>
-                    <span class="description">asteroids clone</span>
-                </div>
-                <div class="hack fail">
-                    <a href="https://tilde.za3k.com/hackaday/icecube"><img src="img/hackaday06.png"></a>
-                    <span class="name">Hack-An-Icecube</span>
-                    <span class="date">06</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/icecube"></a>
-                        <a class="source" href="https://github.com/za3k/day06_icecube"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-icecube/"></a>
-                    </span>
-                    <span class="description">icecubes fall</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/homepage"><img src="img/hackaday01.png"></a>
-                    <span class="name">Hack-A-Homepage</span>
-                    <span class="date">05</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/homepage"></a>
-                        <a class="source" href="https://github.com/za3k/day01_homepage"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-homepage/"></a>
-                    </span>
-                    <span class="description">make your own homepage</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/link"><img src="img/hackaday02.png"></a>
-                    <span class="name">Hack-A-Link</span>
-                    <span class="date">05</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/link"></a>
-                        <a class="source" href="https://github.com/za3k/day02_link"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link/"></a>
-                    </span>
-                    <span class="description">a link shortener</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/paste"><img src="img/hackaday05.png"></a>
-                    <span class="name">Hack-A-Paste</span>
-                    <span class="date">05</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/paste"></a>
-                        <a class="source" href="https://github.com/za3k/day05_paste"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-paste/"></a>
-                    </span>
-                    <span class="description">a pastebin</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/chat/"><img src="img/hackaday04.png"></a>
-                    <span class="name">Hack-A-Chat</span>
-                    <span class="date">04</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/chat"></a>
-                        <a class="source" href="https://github.com/za3k/day04_chat"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-chat/"></a>
-                    </span>
-                    <span class="description">an online chatroom</span>
-                </div>
-                <div class="hack">
-                    <a href="https://tilde.za3k.com/hackaday/blog"><img src="img/hackaday03.png"></a>
-                    <span class="name">Hack-A-Blog</span>
-                    <span class="date">03</span>
-                    <span class="links">
-                        <a class="demo" href="https://tilde.za3k.com/hackaday/blog"></a>
-                        <a class="source" href="https://github.com/za3k/day03_blog"></a>
-                        <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-blog/"></a>
-                    </span>
-                    <span class="description">a blog for anyone</span>
-                </div>
-            </section>
-        </div>
+    <div class="years">
+        <label for="2024-tab">2024</label>
+        <section class="hacks year-2024">
+            <!--
+            <div class="hack">
+                <a href="XXX"><img src="img/hackaday3_01.png"></a>
+                <span class="name">XXX</span>
+                <span class="date">01</span>
+                <span class="links">
+                    <a class="demo" href="XXX"></a>
+                    <a class="source" href="XXX"></a>
+                    <a class="blog" href="XXX"></a>
+                </span>
+                <span class="description">XXX</span>
+            </div>
+            -->
+            <div class="hack fail">
+                <a href="https://blog.za3k.com/hack-a-day-day-30-led-fireplace/"><img src="img/hackaday3_30.png"></a>
+                <span class="name">LED Fireplace</span>
+                <span class="date">30</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-30-led-fireplace/"></a>
+                </span>
+                <span class="description">flickering fireplace</span>
+            </div>
+            <div class="hack">
+                <a href="https://github.com/za3k/esp-wroom-32"><img src="img/hackaday3_29.png"></a>
+                <span class="name">ESP32 Docs</span>
+                <span class="date">29</span>
+                <span class="links">
+                    <a class="demo" href="https://github.com/za3k/esp-wroom-32"></a>
+                    <a class="source" href="https://github.com/za3k/esp-wroom-32"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-29-esp32-microcontroller-documentation/"></a>
+                </span>
+                <span class="description">set up and pinout</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-27-minecraft-mod/"><img src="img/hackaday3_27.png"></a>
+                <span class="name">Minecraft Mod</span>
+                <span class="date">27</span>
+                <span class="links">
+                    <a class="demo" href="https://github.com/za3k/dirt-slab-fabric-mod/releases/tag/v1.0.0"></a>
+                    <a class="source" href="https://github.com/za3k/dirt-slab-fabric-mod"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-27-minecraft-mod/"></a>
+                </span>
+                <span class="description">dirt slab</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/no-room-for-error"><img src="img/hackaday3_26.png"></a>
+                <span class="name">No Room for Error</span>
+                <span class="date">26</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/no-room-for-error"></a>
+                    <a class="source" href="https://github.com/za3k/no-room-for-error"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-26-no-room-for-error/"></a>
+                </span>
+                <span class="description">one attempt coding</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/go/screensaver.html"><img src="img/hackaday3_25.png"></a>
+                <span class="name">Go Screensaver</span>
+                <span class="date">25</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/go/screensaver.html"></a>
+                    <a class="source" href="https://github.com/za3k/go"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-25-go-screensaver/"></a>
+                </span>
+                <span class="description">watch game replays</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/little-herbalist/"><img src="img/hackaday3_23.png"></a>
+                <span class="name">Little Herbalist</span>
+                <span class="date">23</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/little-herbalist/"></a>
+                    <a class="source" href="https://github.com/za3k/little-herbalist"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-unfinished-game/"></a>
+                </span>
+                <span class="description">unfinished brewing game</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-22-ai-friend/"><img src="img/hackaday3_22.png"></a>
+                <span class="name">AI Friend</span>
+                <span class="date">22</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-22-ai-friend/"></a>
+                </span>
+                <span class="description">make a custom friend</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/go/"><img src="img/hackaday3_20.png"></a>
+                <span class="name">2p Library</span>
+                <span class="date">20</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/go/"></a>
+                    <a class="source" href="https://gist.github.com/za3k/028bbd83e6b74f305db04b2a5fe7500e"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-20-2p-library/"></a>
+                </span>
+                <span class="description">add online multiplayer</span>
+            </div>
+            <div class="hack fail">
+                <a href="https://blog.za3k.com/hack-a-day-day-19-dd-campaign/"><img src="img/hackaday3_19.png"></a>
+                <span class="name">RPG Campaign</span>
+                <span class="date">19</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-19-dd-campaign/"></a>
+                </span>
+                <span class="description">a short d&amp;d campaign</span>
+            </div>
+            <div class="hack">
+                <a href=""https://za3k.com/archive/how-to-tie"><img src="img/hackaday3_17.png"></a>
+                <span class="name">Android App</span>
+                <span class="date">17</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.com/archive/how-to-tie"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-17-android-app/"></a>
+                </span>
+                <span class="description">learn to tie a tie</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://za3k.github.io/go/"><img src="img/hackaday3_16.png"></a>
+                <span class="name">Go</span>
+                <span class="date">16</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/go/"></a>
+                    <a class="source" href="https://github.com/za3k/go"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-16-go/"></a>
+                </span>
+                <span class="description">strategy game</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://za3k.github.io/cant-stop/"><img src="img/hackaday3_14.png"></a>
+                <span class="name">Can't Stop</span>
+                <span class="date">14</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/cant-stop/"></a>
+                    <a class="source" href="https://github.com/za3k/cant-stop"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-14-cant-stop/"></a>
+                </span>
+                <span class="description">dice game</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/pixel-kitchen/"><img src="img/hackaday3_13.png"></a>
+                <span class="name">Pixel Kitchen</span>
+                <span class="date">13</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/pixel-kitchen/"></a>
+                    <a class="source" href="https://github.com/za3k/pixel-kitchen"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-13-pixel-kitchen/"></a>
+                </span>
+                <span class="description">craft foods, serve customers</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-12-whiteboard-to-do-list/"><img src="img/hackaday3_12.png"></a>
+                <span class="name">To-Do List</span>
+                <span class="date">12</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-12-whiteboard-to-do-list/"></a>
+                </span>
+                <span class="description">magnetic to-do whiteboard</span>
+            </div>
+            <div class="hack">
+                <a href="https://upload.za3k.com/"><img src="img/hackaday3_11.png"></a>
+                <span class="name">Uploader</span>
+                <span class="date">11</span>
+                <span class="links">
+                    <a class="demo" href="https://upload.za3k.com/"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-11-upload-za3k-com/"></a>
+                </span>
+                <span class="description">send me files</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://za3k.github.io/color-sort"><img src="img/hackaday3_08.png"></a>
+                <span class="name">Color Sort</span>
+                <span class="date">08</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/color-sort"></a>
+                    <a class="source" href="https://github.com/za3k/color-sort"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-08-color-sort/"></a>
+                </span>
+                <span class="description">relax and sort colors</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/sunchart/"><img src="img/hackaday3_07.png"></a>
+                <span class="name">When Sun?</span>
+                <span class="date">07</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/sunchart/"></a>
+                    <a class="source" href="https://github.com/za3k/sunchart"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-07-when-does-the-sun-come-back/"></a>
+                </span>
+                <span class="description">countdown to summer</span>
+            </div>
+            <div class="hack fail">
+                <a href="https://blog.za3k.com/hack-a-day-day-05-milling-an-aluminium-soma-cube-failed/"><img src="img/hackaday3_05.png"></a>
+                <span class="name">Milled Puzzle</span>
+                <span class="date">05</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-05-milling-an-aluminium-soma-cube-failed/"></a>
+                </span>
+                <span class="description">aluminium soma cube</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-04-project-lembas/"><img src="img/hackaday3_04.png"></a>
+                <span class="name">Lembas</span>
+                <span class="date">04</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-04-project-lembas/"></a>
+                </span>
+                <span class="description">edible crackers</span>
+            </div>
+            <div class="hack fail">
+                <a href="https://blog.za3k.com/hack-a-day-day-02-acrylic-soma-cube-failed/"><img src="img/hackaday3_02.png"></a>
+                <span class="name">Cut Acrylic Puzzle</span>
+                <span class="date">02</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-02-acrylic-soma-cube-failed/"></a>
+                </span>
+                <span class="description">acrylic soma cube</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/ircpuzzles-solver/"><img src="img/hackaday3_01.png"></a>
+                <span class="name">IRC Puzzles</span>
+                <span class="date">01</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ircpuzzles-solver/"></a>
+                    <a class="source" href="https://github.com/za3k/ircpuzzles-solver"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-01-ircpuzzles-player/"></a>
+                </span>
+                <span class="description">solve a puzzle hunt</span>
+            </div>
+        </section>
+        <label for="2023-tab">2023</label>
+        <section class="hacks year-2023">
+            <div class="hack collab">
+                <a href="https://za3k.github.io/ha3k-30-musicofspheres/"><img src="img/hackaday2_30.png"></a>
+                <span class="name">Celestial Music</span>
+                <span class="date">30</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-30-musicofspheres/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-30-musicofspheres"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-30-music-of-the-celestial-spheres/"></a>
+                </span>
+                <span class="description">experience scales, watch orbits</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/ha3k-29-speedread/"><img src="img/hackaday2_29.png"></a>
+                <span class="name">Speed Reading</span>
+                <span class="date">29</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-29-speedread/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-29-speedread"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-29-speed-reading/"></a>
+                </span>
+                <span class="description">read uncomfortably fast</span>
+            </div>
+            <div class="hack collab cool">
+                <a href="https://www.youtube.com/watch?v=6sW5rQTj1cE"><img src="img/hackaday2_28.png"></a>
+                <span class="name">90s Sitcom</span>
+                <span class="date">28</span>
+                <span class="links">
+                    <a class="demo" href="https://www.youtube.com/watch?v=6sW5rQTj1cE"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-28-sitcom"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-28-90s-sitcom/"></a>
+                </span>
+                <span class="description">fake sitcom intro</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-23-packing/"><img src="img/hackaday2_24.png"></a>
+                <span class="name">stuff.md</span>
+                <span class="date">24</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-packing/"></a>
+                </span>
+                <span class="description">text database of physical stuff</span>
+            </div>
+            <div class="hack">
+                <a href="https://www.youtube.com/watch?v=hEYZWD2gQsQ"><img src="img/hackaday2_23.png"></a>
+                <span class="name">Timelapse</span>
+                <span class="date">23</span>
+                <span class="links">
+                        <a class="demo" href="https://www.youtube.com/watch?v=hEYZWD2gQsQ"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-23-packing/"></a>
+                </span>
+                <span class="description">timelapse of house move</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-22-homemade-pcbs/"><img src="img/hackaday2_22.png"></a>
+                <span class="name">Circuit Boards</span>
+                <span class="date">22</span>
+                <span class="links">
+                    <a class="source" href="https://github.com/za3k/ha3k-22-pcb"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-22-homemade-pcbs/"></a>
+                </span>
+                <span class="description">make circuitboards at home</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://za3k.github.io/ha3k-20-lockpick/"><img src="img/hackaday2_20b.png"></a>
+                <span class="name">Lockpicking</span>
+                <span class="date">20</span>
+                <span class="links">
+                    <a class="source" href="https://github.com/za3k/ha3k-20-lockpick"></a>
+                    <a class="blog" href="https://blog.za3k.com/hillsfar-lockpicking-20-complete/"></a>
+                </span>
+                <span class="description">pick a lock</span>
+            </div>
+            <div class="hack">
+                <a href="https://blog.za3k.com/hack-a-day-day-20-hillsfar-lockpicking-spritesheet/"><img src="img/hackaday2_20.png"></a>
+                <span class="name">Hillsfar Spritesheet</span>
+                <span class="date">20</span>
+                <span class="links">
+                    <a class="source" href="https://github.com/za3k/ha3k-20-lockpick"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-20-hillsfar-lockpicking-spritesheet/"></a>
+                </span>
+                <span class="description">sprites from a minigame</span>
+            </div>
+            <div class="hack">
+                <a href="https://github.com/za3k/ha3k-18-ai-grabbag"><img src="img/hackaday2_18.png"></a>
+                <span class="name">AI Grab Bag</span>
+                <span class="date">18</span>
+                <span class="links">
+                    <a class="source" href="https://github.com/za3k/ha3k-18-ai-grabbag"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-18-a-i-grab-bag/"></a>
+                </span>
+                <span class="description">install instructions for a.i. tools</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.com/games/tower_of_choices"><img src="img/hackaday2_17.png"></a>
+                <span class="name">Tower of Choices</span>
+                <span class="date">17</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.com/games/tower_of_choices"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-17-tower-of-choices/"></a>
+                </span>
+                <span class="description">pen and paper RPG</span>
+            </div>
+            <div class="hack collab">
+                <a href="https://za3k.github.io/ha3k-14-synth/"><img src="img/hackaday2_14.png"></a>
+                <span class="name">Bytebeat Synth</span>
+                <span class="date">14</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-14-synth/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-14-synth"></a>
+                    <a class="blog" href="https://za3k.github.io/ha3k-14-synth/"></a>
+                </span>
+                <span class="description">bytebeat fun</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://za3k.github.io/ha3k-13-blueprint/"><img src="img/hackaday2_13.png"></a>
+                <span class="name">Blueprint Maker</span>
+                <span class="date">13</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-13-blueprint/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-13-blueprint"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-13-blueprint-maker/"></a>
+                </span>
+                <span class="description">draw house blueprints</span>
+            </div>
+            <div class="hack collab">
+                <a href="https://za3k.github.io/ha3k-12-screensaver/"><img src="img/hackaday2_12.png"></a>
+                <span class="name">Screensaver</span>
+                <span class="date">12</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-12-screensaver/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-12-screensaver"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-12-screensavers/"></a>
+                </span>
+                <span class="description">silly screensaver</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://youtu.be/FewtsNn8dg0"><img src="img/hackaday2_11.png"></a>
+                <span class="name">Raytracer: Rain</span>
+                <span class="date">11</span>
+                <span class="links">
+                    <a class="demo" href="https://youtu.be/FewtsNn8dg0"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-11-raytracer-rain"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-11-raytraced-rain/"></a>
+                </span>
+                <span class="description">screensaver video</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/ha3k-10-typewriter/"><img src="img/hackaday2_10.png"></a>
+                <span class="name">Typewriter</span>
+                <span class="date">10</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-10-typewriter/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-10-typewriter"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-10-typewriter/"></a>
+                </span>
+                <span class="description">clicky clacky</span>
+            </div>
+            <div class="hack">
+                <a href="https://za3k.github.io/ha3k-08-receipt/"><img src="img/hackaday2_08.png"></a>
+                <span class="name">Receipt</span>
+                <span class="date">08</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-08-receipt/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-08-receipt"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-08-receipt-zine/"></a>
+                </span>
+                <span class="description">silly little zine</span>
+            </div>
+            <div class="hack collab cool">
+                <a href="https://za3k.github.io/ha3k-07-doodle-alchemy/"><img src="img/hackaday2_07.png"></a>
+                <span class="name">Alchemy</span>
+                <span class="date">07</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-07-doodle-alchemy/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-07-doodle-alchemy"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-06-doodlemoji-alchemy/"></a>
+                </span>
+                <span class="description">combine elements</span>
+            </div>
+            <div class="hack">
+                <a href="https://www.youtube.com/watch?v=y4TcrxRg4aw"><img src="img/hackaday2_06.png"></a>
+                <span class="name">GPU Raytracing</span>
+                <span class="date">06</span>
+                <span class="links">
+                    <a class="demo" href="https://www.youtube.com/watch?v=y4TcrxRg4aw"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-06-raytracer"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-06/"></a>
+                </span>
+                <span class="description">speed up graphics with CUDA</span>
+            </div>
+            <div class="hack collab">
+                <a href="https://blog.za3k.com/hack-a-day-day-04-lashed-table/"><img src="img/hackaday2_04.png"></a>
+                <span class="name">Lashed Furniture</span>
+                <span class="date">04</span>
+                <span class="links">
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-04-lashed-table/"></a>
+                </span>
+                <span class="description">bamboo table</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://blog.za3k.com/hack-a-day-day-2-raytracing/"><img src="img/hackaday2_02.png"></a>
+                <span class="name">Raytracing</span>
+                <span class="date">02</span>
+                <span class="links">
+                    <a class="demo" href=""></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-02"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-2-raytracing/"></a>
+                </span>
+                <span class="description">pretty 3d graphics drawing</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://za3k.github.io/ha3k-01-perquackey/"><img src="img/hackaday2_01.png"></a>
+                <span class="name">Perquackey</span>
+                <span class="date">01</span>
+                <span class="links">
+                    <a class="demo" href="https://za3k.github.io/ha3k-01-perquackey/"></a>
+                    <a class="source" href="https://github.com/za3k/ha3k-01-perquackey"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-day-01-perquackey/"></a>
+                </span>
+                <span class="description">word game from 1953</span>
+            </div>
+        </section>
+        <label for="2022-tab">2022</label>
+        <section class="hacks year-2022">
+            <div class="hack cool">
+                <a href="https://doodle-rpg.com"><img src="img/hackaday30.png"></a>
+                <span class="name">Doodle RPG</span>
+                <span class="date">30</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/mmo"></a>
+                    <a class="source" href="https://github.com/za3k/day30_mmo"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mmo/"></a>
+                </span>
+                <span class="description">draw the world with friends</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://tilde.za3k.com/hackaday/adventure"><img src="img/hackaday29.png"></a>
+                <span class="name">Hack-An-Adventure</span>
+                <span class="date">29</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/adventure"></a>
+                    <a class="source" href="https://github.com/za3k/day29_adventure"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-adventure/"></a>
+                </span>
+                <span class="description">draw cute adventures</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/farm"><img src="img/hackaday27.png"></a>
+                <span class="name">Hack-A-Farm</span>
+                <span class="date">27</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/farm"></a>
+                    <a class="source" href="https://github.com/za3k/day27_farm"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-farm/"></a>
+                </span>
+                <span class="description">plant crops</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/snake"><img src="img/hackaday12.png"></a>
+                <span class="name">Hack-A-Snake</span>
+                <span class="date">27</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/snake"></a>
+                    <a class="source" href="https://github.com/za3k/day12_snake"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-snake/"></a>
+                </span>
+                <span class="description">snake</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/mini"><img src="img/hackaday26.png"></a>
+                <span class="name">Hack-A-Minigame</span>
+                <span class="date">26</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/mini"></a>
+                    <a class="source" href="https://github.com/za3k/day26_mini"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mini/"></a>
+                </span>
+                <span class="description">save scumming snake</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/experiment"><img src="img/hackaday25.png"></a>
+                <span class="name">Hack-An-Experiment</span>
+                <span class="date">25</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/experiment"></a>
+                    <a class="source" href="https://github.com/za3k/day25_experiment"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-experiment/"></a>
+                </span>
+                <span class="description">experimental algorithm analysis</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/clock"><img src="img/hackaday24.png"></a>
+                <span class="name">Hack-A-Clock</span>
+                <span class="date">24</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/clock"></a>
+                    <a class="source" href="https://github.com/za3k/day24_clock"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-clock/"></a>
+                </span>
+                <span class="description">decimal time clock</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/link2"><img src="img/hackaday23.png"></a>
+                <span class="name">Hack-A-Link 2</span>
+                <span class="date">23</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/link2"></a>
+                    <a class="source" href="https://github.com/za3k/day23_link2"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link2/"></a>
+                </span>
+                <span class="description">link directory</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://tilde.za3k.com/hackaday/hell"><img src="img/hackaday22.png"></a>
+                <span class="name">Hack-A-Hell</span>
+                <span class="date">22</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/hell"></a>
+                    <a class="source" href="https://github.com/za3k/day22_hell"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-hell/"></a>
+                </span>
+                <span class="description">bullet hell music visualizer</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/battle"><img src="img/hackaday21.png"></a>
+                <span class="name">Hack-A-Battle</span>
+                <span class="date">21</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/battle"></a>
+                    <a class="source" href="https://github.com/za3k/day21_battle"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-battle/"></a>
+                </span>
+                <span class="description">two music visualizers battle</span>
+            </div>
+            <div class="hack fail">
+                <a href="https://tilde.za3k.com/hackaday/hang"><img src="img/hackaday19.png"></a>
+                <span class="name">Hack-A-Hang</span>
+                <span class="date">19</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/hang"></a>
+                    <a class="source" href="https://github.com/za3k/day19_hang"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-hang/"></a>
+                </span>
+                <span class="description">hang with friends</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/crop"><img src="img/hackaday18.png"></a>
+                <span class="name">Hack-A-Crop</span>
+                <span class="date">18</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/crop"></a>
+                    <a class="source" href="https://github.com/za3k/day18_crop"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-crop/"></a>
+                </span>
+                <span class="description">crop images</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://tilde.za3k.com/hackaday/tank"><img src="img/hackaday17.png"></a>
+                <span class="name">Hack-A-Tank</span>
+                <span class="date">17</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/tank"></a>
+                    <a class="source" href="https://github.com/za3k/day17_tank"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tank/"></a>
+                </span>
+                <span class="description">relax and play with fish</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/song"><img src="img/hackaday16.png"></a>
+                <span class="name">Hack-A-Song</span>
+                <span class="date">16</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/song"></a>
+                    <a class="source" href="https://github.com/za3k/day16_song"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-song/"></a>
+                </span>
+                <span class="description">listen to 'greensleeves'</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://tilde.za3k.com/hackaday/sound"><img src="img/hackaday15.png"></a>
+                <span class="name">Hack-A-Sound</span>
+                <span class="date">15</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/sound"></a>
+                    <a class="source" href="https://github.com/za3k/day15_sound"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-sound/"></a>
+                </span>
+                <span class="description">play sounds and make tracks</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/stats"><img src="img/hackaday14.png"></a>
+                <span class="name">Hack-A-Stats</span>
+                <span class="date">14</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/stats"></a>
+                    <a class="source" href="https://github.com/za3k/day14_stats"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-stats/"></a>
+                </span>
+                <span class="description">see how hack-a-day is doing</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/line"><img src="img/hackaday13.png"></a>
+                <span class="name">Hack-A-Line</span>
+                <span class="date">13</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/line"></a>
+                    <a class="source" href="https://github.com/za3k/day13_line"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-line/"></a>
+                </span>
+                <span class="description">play 5-in-a-row with a friend</span>
+            </div>
+            <div class="hack skipped">
+                <a href=""><img></a>
+                <span class="name">Day 12</span>
+                <span class="date">12</span>
+            </div>
+            <div class="hack kinda-cool">
+                <a href="https://tilde.za3k.com/hackaday/tile"><img src="img/hackaday11.png"></a>
+                <span class="name">Hack-A-Tile</span>
+                <span class="date">11</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/tile"></a>
+                    <a class="source" href="https://github.com/za3k/day11_tile"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-tile/"></a>
+                </span>
+                <span class="description">arrange matching tiles</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/machine"><img src="img/hackaday10.png"></a>
+                <span class="name">Hack-A-Machine</span>
+                <span class="date">10</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/machine"></a>
+                    <a class="source" href="https://github.com/za3k/day10_machine"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-machine/"></a>
+                </span>
+                <span class="description">goofy machine with assembly</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/mandelbrot"><img src="img/hackaday09.png"></a>
+                <span class="name">Hack-A-Mandelbrot</span>
+                <span class="date">09</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/mandelbrot"></a>
+                    <a class="source" href="https://github.com/za3k/day09_mandelbrot"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-mandelbrot/"></a>
+                </span>
+                <span class="description">explore fractals</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/dictionary"><img src="img/hackaday08.png"></a>
+                <span class="name">Hack-A-Dictionary</span>
+                <span class="date">08</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/dictionary"></a>
+                    <a class="source" href="https://github.com/za3k/day08_dictionary"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-dictionary/"></a>
+                </span>
+                <span class="description">look up words</span>
+            </div>
+            <div class="hack cool">
+                <a href="https://tilde.za3k.com/hackaday/asteroid"><img src="img/hackaday07.png"></a>
+                <span class="name">Hack-An-Asteroid</span>
+                <span class="date">07</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/asteroid"></a>
+                    <a class="source" href="https://github.com/za3k/day07_asteroid"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-asteroid/"></a>
+                </span>
+                <span class="description">asteroids clone</span>
+            </div>
+            <div class="hack fail">
+                <a href="https://tilde.za3k.com/hackaday/icecube"><img src="img/hackaday06.png"></a>
+                <span class="name">Hack-An-Icecube</span>
+                <span class="date">06</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/icecube"></a>
+                    <a class="source" href="https://github.com/za3k/day06_icecube"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-an-icecube/"></a>
+                </span>
+                <span class="description">icecubes fall</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/homepage"><img src="img/hackaday01.png"></a>
+                <span class="name">Hack-A-Homepage</span>
+                <span class="date">05</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/homepage"></a>
+                    <a class="source" href="https://github.com/za3k/day01_homepage"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-homepage/"></a>
+                </span>
+                <span class="description">make your own homepage</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/link"><img src="img/hackaday02.png"></a>
+                <span class="name">Hack-A-Link</span>
+                <span class="date">05</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/link"></a>
+                    <a class="source" href="https://github.com/za3k/day02_link"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-link/"></a>
+                </span>
+                <span class="description">a link shortener</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/paste"><img src="img/hackaday05.png"></a>
+                <span class="name">Hack-A-Paste</span>
+                <span class="date">05</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/paste"></a>
+                    <a class="source" href="https://github.com/za3k/day05_paste"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-paste/"></a>
+                </span>
+                <span class="description">a pastebin</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/chat/"><img src="img/hackaday04.png"></a>
+                <span class="name">Hack-A-Chat</span>
+                <span class="date">04</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/chat"></a>
+                    <a class="source" href="https://github.com/za3k/day04_chat"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-chat/"></a>
+                </span>
+                <span class="description">an online chatroom</span>
+            </div>
+            <div class="hack">
+                <a href="https://tilde.za3k.com/hackaday/blog"><img src="img/hackaday03.png"></a>
+                <span class="name">Hack-A-Blog</span>
+                <span class="date">03</span>
+                <span class="links">
+                    <a class="demo" href="https://tilde.za3k.com/hackaday/blog"></a>
+                    <a class="source" href="https://github.com/za3k/day03_blog"></a>
+                    <a class="blog" href="https://blog.za3k.com/hack-a-day-hack-a-blog/"></a>
+                </span>
+                <span class="description">a blog for anyone</span>
+            </div>
+        </section>
     </div>
 </body>
 </html>