Hackaday is tabbed

diff --git a/hackaday.css b/hackaday.css
index 823abec5776ddf110c127dddb0aa439ba6a82b1c..e8d7149c20bbfc8a4fe4534f3a1770deae3dc2a2 100644 (file)
--- a/hackaday.css
+++ b/hackaday.css
@@ -14,6 +14,7 @@
     height: 1.5em;
     /*border: 1px solid;*/
     text-align: center;
+    margin-bottom: 20px;
 }
 .hack-links a {
     font-size: 14pt;
@@ -26,7 +27,7 @@ h2 {
     font-size: 20pt;
 }
 
-.hacks {
+.tabs {
     width: max(242px, 60%); /* 242px is the fixed-size element including margins */
     margin: 0 auto;
     display: flex;
@@ -34,6 +35,63 @@ h2 {
     flex-wrap: wrap;
     flex: 1 1 auto;
 }
+.tabs > input[type="radio"] {
+    position: absolute;
+    left: -200vw;
+
+}
+.tabs > label {
+    position: relative;
+    padding: 15px 15px 25px;
+    border: 1px solid transparent;
+    border-bottom: 0;
+    cursor: pointer;
+    font-weight: 600;
+    min-width: 4em;
+    font-size: 24pt;
+    text-align: center;
+}
+.tabs > input:checked + label {
+    border-color: #ccc;
+    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;
+}
+
+.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;
+    border-top: 1px solid #ccc;
+}
+
+.tabs > input[value="2023"]:checked ~ .tab-panels > section.year-2023 ,
+.tabs > input[value="2022"]:checked ~ .tab-panels > section.year-2022 {
+    display: block;
+}
+
 .hack {
     display: inline-block;
     width: 202px;

diff --git a/hackaday.html b/hackaday.html
index 709f8bfaf63bb90a2572d128babcc1e57aba59a3..c385cac87f2d1cdcd33612a40913aeea6a79e235 100644 (file)
--- a/hackaday.html
+++ b/hackaday.html
@@ -13,536 +13,540 @@
         <a href="https://blog.za3k.com/tag/hack-a-day/">Blog posts</a>
     </section>
     </div>
-    <h2>2023 Projects</h2>
-    <section class="hacks 2023">
-        <div class="hack">
-            <a href="https://za3k.github.io/ha3k-30-musicofspheres/"><img src="img/hackaday2_30.png"></a>
-            <span class="name">Music of the Spheres</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 class="tabs">
+        <input type="radio" name="hacktab" value="2023" id="2023-tab" checked><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-2023">
+                <div class="hack">
+                    <a href="https://za3k.github.io/ha3k-30-musicofspheres/"><img src="img/hackaday2_30.png"></a>
+                    <span class="name">Music of the Spheres</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">
+                    <a href="https://www.youtube.com/watch?v=6sW5rQTj1cE"><img src="img/hackaday2_28.png"></a>
+                    <span class="name">Pint-Sized</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">intro to a fake 90s sitcom</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">Homemade Circuitboards</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">circuitboards at home</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 Grabbag</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">a pen and paper RPG</span>
+                </div>
+                <div class="hack">
+                    <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">
+                    <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">
+                    <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">a silly screensaver</span>
+                </div>
+                <div class="hack">
+                    <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">a simple 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">a silly little zine</span>
+                </div>
+                <div class="hack">
+                    <a href="https://za3k.github.io/ha3k-07-doodle-alchemy/"><img src="img/hackaday2_07.png"></a>
+                    <span class="name">Doodle-moji 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">CUDA 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 GPU</span>
+                </div>
+                <div class="hack">
+                    <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">a lashed bamboo table</span>
+                </div>
+                <div class="hack">
+                    <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">
+                    <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">a word game from 1953</span>
+                </div>
+            </ul>
+            </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="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">
-            <a href="https://www.youtube.com/watch?v=6sW5rQTj1cE"><img src="img/hackaday2_28.png"></a>
-            <span class="name">Pint-Sized</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">intro to a fake 90s sitcom</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">Homemade Circuitboards</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">circuitboards at home</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 Grabbag</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">a pen and paper RPG</span>
-        </div>
-        <div class="hack">
-            <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">
-            <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">
-            <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">a silly screensaver</span>
-        </div>
-        <div class="hack">
-            <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">a simple 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">a silly little zine</span>
-        </div>
-        <div class="hack">
-            <a href="https://za3k.github.io/ha3k-07-doodle-alchemy/"><img src="img/hackaday2_07.png"></a>
-            <span class="name">Doodle-moji 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">CUDA 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 GPU</span>
-        </div>
-        <div class="hack">
-            <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">a lashed bamboo table</span>
-        </div>
-        <div class="hack">
-            <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">
-            <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">a word game from 1953</span>
-        </div>
-    </ul>
-    </section>
-    <h2>2022 Projects</h2>
-    <section class="hacks 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>

diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html
index 7dd1c4c20353cf01471e05da53d68c60ae872ebf..9ff9ec3cfe4c6d763787a54fa6663069cc84ccf2 100644 (file)
--- a/html-css-cheatsheet.html
+++ b/html-css-cheatsheet.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
 <!-- The source code to this page is horrible. Sorry. -->
+
+<-- TODOs:
+ - Localstorage
+ - Include jquery (specifically)
+-->
 <html lang="en">
 <head>
     <meta charset="utf-8">