added an about me page

changed some links and styles
added some pics of me (yuck)

css/output.css

@@ -709,10 +709,22 @@ video {
   clear: none;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-4 {
+  margin: 1rem;
+}
+
 .mb-36 {
   margin-bottom: 9rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -820,12 +832,93 @@ video {
   aspect-ratio: 1 / 1;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-24 {
+  height: 6rem;
+}
+
+.h-32 {
+  height: 8rem;
+}
+
+.h-72 {
+  height: 18rem;
+}
+
+.h-80 {
+  height: 20rem;
+}
+
+.h-dvh {
+  height: 100dvh;
+}
+
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-lvh {
+  height: 100lvh;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.h-svh {
+  height: 100svh;
+}
+
+.max-h-0 {
+  max-height: 0px;
+}
+
+.max-h-24 {
+  max-height: 6rem;
+}
+
+.max-h-72 {
+  max-height: 18rem;
+}
+
+.max-h-80 {
+  max-height: 20rem;
+}
+
+.max-h-96 {
+  max-height: 24rem;
+}
+
+.max-h-full {
+  max-height: 100%;
+}
+
+.max-h-screen {
+  max-height: 100vh;
+}
+
+.min-h-32 {
+  min-height: 8rem;
+}
+
 .min-h-svh {
   min-height: 100svh;
 }
 
-.w-1\/2 {
-  width: 50%;
+.w-1 {
+  width: 0.25rem;
 }
 
 .w-24 {
@@ -848,6 +941,11 @@ video {
   width: weird-and-invalid;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full {
   width: 100%;
 }
@@ -857,6 +955,20 @@ video {
   width: max-content;
 }
 
+.min-w-40 {
+  min-width: 10rem;
+}
+
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
+
+.max-w-max {
+  max-width: -moz-max-content;
+  max-width: max-content;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1195,10 +1307,6 @@ video {
   grid-auto-flow: column dense;
 }
 
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -1383,10 +1491,6 @@ video {
   justify-items: stretch;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1711,6 +1815,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -1845,6 +1953,11 @@ video {
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
+.bg-slate-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
+}
+
 .bg-slate-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(148 163 184 / var(--tw-bg-opacity));
@@ -1865,11 +1978,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .decoration-slice {
   -webkit-box-decoration-break: slice;
           box-decoration-break: slice;
@@ -2153,11 +2261,31 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity));
+}
+
+.text-slate-900 {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
@@ -2588,12 +2716,45 @@ video {
   text-align: center;
 }
 
+@media not all and (min-width: 1024px) {
+  .max-lg\:h-80 {
+    height: 20rem;
+  }
+
+  .max-lg\:max-h-80 {
+    max-height: 20rem;
+  }
+
+  .max-lg\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:underline {
     text-decoration-line: underline;
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+
+  .lg\:w-full {
+    width: 100%;
+  }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-wrap {
+    flex-wrap: wrap;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   @media (min-width: 1024px) {
     .dark\:lg\:hover\:\[paint-order\:markers\]:hover {

henry.html

@@ -6,8 +6,8 @@
     <link href="./index.css" rel="stylesheet" />
   </head>
   <body class="bg-slate-800 items-center flex-col flex min-h-svh">
-    <div class="bg-slate-900 text-white text-center p-4 w-full">
-      <a href="./index.html">
+    <div class="bg-slate-900 text-white text-center p-4 w-full h-16">
+      <a href="./landing.html">
         <h1
           class="text-4xl tracking-widest hover:scale-x-50 transition-transform duration-1000 ease-linear"
         >
@@ -15,5 +15,100 @@
         </h1>
       </a>
     </div>
+
+    <div class="flex flex-col lg:flex-row">
+      <div
+        class="lg:w-1/2 max-h-view-minus-header max-lg:max-h-80 max-lg:w-fit overflow-auto"
+      >
+        <div class="flex lg:flex-wrap">
+          <img
+            src="./img/henry/1.jpeg"
+            alt="Image 1"
+            class="lg:w-1/2 max-lg:h-80"
+          />
+          <img
+            src="./img/henry/2.jpeg"
+            alt="Image 2"
+            class="lg:w-1/2 max-lg:h-80"
+          />
+          <img
+            src="./img/henry/3.jpg"
+            alt="Image 3"
+            class="lg:w-full max-lg:h-80"
+          />
+          <img
+            src="./img/henry/4.jpeg"
+            alt="Image 4"
+            class="lg:w-1/2 max-lg:h-80"
+          />
+          <img
+            src="./img/henry/5.jpeg"
+            alt="Image 5"
+            class="lg:w-1/2 max-lg:h-80"
+          />
+        </div>
+      </div>
+      <div class="lg:w-1/2 max-h-view-minus-header overflow-auto">
+        <div class="flex flex-col flex-nowrap">
+          <div class="bg-slate-900 p-4 m-4 rounded">
+            <h2 class="text-2xl font-bold mb-4">About Henry</h2>
+            <p>
+              Hey! Thanks for visiting my very cool and good website. I'm a
+              full-stack developer in Raleigh, NC. I'm passionate about
+              learning, coding, road tripping, computers, my wife, my cats, and
+              anything else that manages to capture my very limited attention
+              span.
+            </p>
+            <p>
+              I started coding in middle school when I got my TI-84 calculator
+              and found out I could write BASIC programs with it. I went on to
+              study computer science at NCSU, and I've been working as a
+              software engineer since graduating in 2019. The bulk of my
+              experience is with C#, React, and SQL, but I'm always
+              experimenting with new technologies.
+            </p>
+          </div>
+          <div class="bg-slate-900 p-4 m-4 rounded">
+            <h2 class="text-2xl font-bold mb-4">About This Site</h2>
+            <p>
+              I created this website to learn Tailwind CSS, and to finally
+              establish my own corner of the internet. I wanted a place to
+              organize my little projects, and to motivate me to keep creating
+              them. There aren't many at the moment, but I hope to have more to
+              explore here soon.
+            </p>
+            <p>
+              This site is containerized and proudly self-hosted on an old Intel
+              NUC. Along with my other sites, it sits behind a reverse proxy
+              running on a raspberry pi, and is served over HTTPS with a Let's
+              Encrypt certificate. The source code is available on my
+              <a href="https://git.hobbs.zone/henry">Gitea instance</a>. I
+              eventually plan to host everything on a kubernetes cluster
+              composed of several NUCs. Maybe I'll even write a blog post about
+              it if I ever get around to starting a blog.
+            </p>
+          </div>
+          <div class="bg-slate-900 p-4 m-4 rounded">
+            <h2 class="text-2xl font-bold mb-4">Contact</h2>
+            <p>
+              If you'd like to get in touch, you can reach me at
+              <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a>.
+            </p>
+          </div>
+          <!--TODO-->
+          <!-- <div class="bg-slate-900 p-4 m-4 rounded">
+            <h2 class="text-2xl font-bold mb-4">Resume</h2>
+            <p>
+              You can view my resume
+              <a
+                href="./resume.html"
+                class="bg-slate-300 text-slate-900 rounded-sm"
+                >here</a
+              >, or download a PDF version <a href="./resume.pdf">here</a>.
+            </p>
+          </div> -->
+        </div>
+      </div>
+    </div>
   </body>
 </html>

img/gitea.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+  <rect x="-1.771" y="-2.952" width="504.723" height="509.445" style="fill: rgb(255, 255, 255); stroke: rgb(255, 255, 255);"/>
+  <path style="fill: rgb(255, 255, 255);" d="M 297.096 388.469 L 207.5 344.102 C 198.673 339.737 194.861 328.682 199.168 319.517 L 242.236 227.22 C 246.473 218.129 257.204 214.201 266.101 218.637 C 278.245 224.673 285.235 228.092 285.235 228.092 L 285.164 148.668 L 296.955 148.596 L 297.025 233.765 C 297.025 233.765 337.553 251.367 355.698 262.932 C 358.31 264.604 362.899 267.877 364.806 273.405 C 366.288 277.841 366.218 282.933 364.1 287.442 L 321.031 379.741 C 316.654 388.977 305.922 392.905 297.096 388.469 Z"/>
+  <path style="fill: rgb(96, 153, 38);" d="M 457.227 145.25 C 454.333 142.267 450.449 142.34 450.449 142.34 C 450.449 142.34 367.701 147.14 324.844 148.159 C 315.453 148.377 306.133 148.596 296.884 148.668 L 296.884 233.911 C 293.002 232.02 289.047 230.057 285.164 228.165 C 285.164 201.69 285.093 148.741 285.093 148.741 C 264.619 149.031 222.114 147.14 222.114 147.14 C 222.114 147.14 122.28 141.976 111.406 140.958 C 104.488 140.523 95.521 139.431 83.871 142.049 C 77.728 143.358 60.218 147.432 45.886 161.614 C 14.114 190.78 22.234 237.185 23.222 244.167 C 24.422 252.676 28.093 276.314 45.604 296.897 C 77.939 337.7 147.556 336.755 147.556 336.755 C 147.556 336.755 156.099 357.775 169.161 377.122 C 186.812 401.196 204.957 419.961 222.608 422.216 C 267.09 422.216 355.981 422.143 355.981 422.143 C 355.981 422.143 364.454 422.216 375.961 414.652 C 385.846 408.47 394.671 397.632 394.671 397.632 C 394.671 397.632 403.78 387.595 416.489 364.685 C 420.371 357.63 423.619 350.793 426.444 344.32 C 426.444 344.32 465.417 259.149 465.417 176.234 C 464.641 151.142 458.639 146.704 457.227 145.25 Z M 106.253 293.697 C 87.966 287.515 80.199 280.096 80.199 280.096 C 80.199 280.096 66.714 270.351 59.937 251.149 C 48.286 219.001 58.948 199.363 58.948 199.363 C 58.948 199.363 64.879 182.998 86.13 177.544 C 95.873 174.852 108.018 175.288 108.018 175.288 C 108.018 175.288 113.03 218.492 119.102 243.803 C 124.186 265.04 136.613 300.316 136.613 300.316 C 136.613 300.316 118.185 298.061 106.253 293.697 Z M 318.278 371.957 C 318.278 371.957 313.97 382.504 304.439 383.158 C 300.344 383.45 297.167 382.286 297.167 382.286 C 297.167 382.286 296.955 382.213 293.425 380.759 L 213.712 340.756 C 213.712 340.756 206.016 336.61 204.675 329.409 C 203.122 323.518 206.581 316.244 206.581 316.244 L 244.919 234.856 C 244.919 234.856 248.308 227.801 253.533 225.401 C 253.956 225.184 255.158 224.673 256.71 224.31 C 262.429 222.783 269.419 226.347 269.419 226.347 L 347.578 265.405 C 347.578 265.405 356.475 269.55 358.381 277.187 C 359.723 282.569 358.027 287.369 357.11 289.697 C 352.662 300.898 318.278 371.957 318.278 371.957 Z"/>
+  <path style="fill: rgb(96, 153, 38);" d="M 248.308 312.753 C 242.519 312.826 237.436 316.972 236.094 322.791 C 234.753 328.61 237.506 334.646 242.519 337.337 C 247.956 340.247 254.875 338.646 258.546 333.41 C 262.147 328.246 261.582 321.118 257.275 316.608 L 274.221 280.897 C 275.28 280.97 276.833 281.042 278.598 280.533 C 281.493 279.878 283.611 277.914 283.611 277.914 C 286.576 279.223 289.683 280.678 292.931 282.351 C 296.319 284.097 299.497 285.915 302.392 287.661 C 303.027 288.025 303.663 288.461 304.369 289.043 C 305.498 289.988 306.769 291.297 307.688 293.043 C 309.028 297.043 306.345 303.88 306.345 303.88 C 304.722 309.407 293.354 333.41 293.354 333.41 C 287.635 333.264 282.552 337.046 280.857 342.501 C 279.022 348.392 281.633 355.084 287.141 357.993 C 292.648 360.902 299.426 359.23 303.027 354.138 C 306.557 349.193 306.274 342.282 302.25 337.7 C 303.592 335.009 304.863 332.319 306.204 329.482 C 309.734 321.917 315.735 307.372 315.735 307.372 C 316.371 306.135 319.76 299.88 317.643 291.88 C 315.877 283.587 308.746 279.732 308.746 279.732 C 300.132 273.987 288.13 268.677 288.13 268.677 C 288.13 268.677 288.13 265.696 287.352 263.513 C 286.576 261.258 285.376 259.804 284.599 258.931 C 287.918 251.876 291.236 244.894 294.554 237.839 C 291.659 236.384 288.835 234.929 285.941 233.402 C 282.552 240.53 279.092 247.731 275.703 254.859 C 270.973 254.786 266.595 257.404 264.336 261.695 C 261.935 266.277 262.429 271.95 265.677 276.096 L 248.308 312.753 Z"/>
+</svg>

index.css

@@ -1,5 +1,23 @@
-@import url("./css/output.css");
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-p {
-  @apply text-white;
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: white;
+}
+p + p {
+  margin-top: 10px;
+}
+p a {
+  text-decoration: underline;
+}
+
+.max-h-view-minus-header {
+  max-height: calc(100vh - 4rem);
 }

index.html

@@ -10,7 +10,9 @@
         img.src = "./img/20240413_101400-sq.jpg"
         img.onclick = null
         setTimeout(() => {
-          // go to landing page
+          // reset back to 1st pic, make it clickable again, then redirect
+          img.src = "./img/20231117_131631.jpg"
+          img.onclick = onKittyClick
           window.location.href = "./landing.html"
         }, 1000)
       }
@@ -18,7 +20,7 @@
   </head>
   <body class="bg-slate-800 items-center flex-col flex min-h-svh">
     <div class="bg-slate-900 text-white text-center p-4 w-full">
-      <a href="./index.html">
+      <a href="./landing.html">
         <h1
           class="text-4xl tracking-widest hover:scale-x-50 transition-transform duration-1000 ease-linear"
         >
@@ -37,12 +39,5 @@
         onclick="onKittyClick()"
       />
     </div>
-    <div
-      class="bottom-2 flex justify-center w-max bg-slate-200 p-2 rounded-md shadow-md fixed px-24"
-    >
-      <p class="text-black text-center">
-        <b>Email me: <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a></b>
-      </p>
-    </div>
   </body>
 </html>

landing.html

@@ -7,7 +7,7 @@
   </head>
   <body class="bg-slate-800 items-center flex-col flex min-h-svh">
     <div class="bg-slate-900 text-white text-center p-4 w-full">
-      <a href="./index.html">
+      <a href="./landing.html">
         <h1
           class="text-4xl tracking-widest hover:scale-x-50 transition-transform duration-1000 ease-linear"
         >
@@ -15,15 +15,15 @@
         </h1>
       </a>
     </div>
-    <div class="grid grid-cols-3 gap-4 p-4 w-full">
+    <div class="flex flex-wrap">
       <a href="./henry.html">
         <div
-          class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform"
+          class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
         >
           <div class="flex flex-row">
             <img
               class="w-24 rounded-full aspect-square"
-              src="./img/20231117_131631.jpg"
+              src="./img/henry.jpg"
               alt="zuzu"
             />
             <div class="flex flex-col p-4">
@@ -33,30 +33,51 @@
           </div>
         </div>
       </a>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 2 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 3 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 4 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 5 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 6 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 7 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 8 content -->
-      </div>
-      <div class="bg-white shadow-md p-4">
-        <!-- Card 9 content -->
-      </div>
+      <a href="https://git.hobbs.zone/henry">
+        <div
+          class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        >
+          <div class="flex flex-row">
+            <img
+              class="w-24 rounded-full aspect-square"
+              src="./img/gitea.svg"
+              alt="gitea"
+            />
+            <div class="flex flex-col p-4">
+              <h1 class="text-4xl">Gitea</h1>
+              <p>Source code for my projects</p>
+            </div>
+          </div>
+        </div>
+      </a>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+      <div
+        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      ></div>
+    </div>
+    <div
+      class="bottom-2 flex justify-center w-max bg-slate-200 p-2 rounded-md shadow-md fixed px-24"
+    >
+      <p class="text-black text-center">
+        <b>Email me: <a href="mailto:henry@hobbs.zone">henry@hobbs.zone</a></b>
+      </p>
     </div>
   </body>
 </html>

tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./**/*.{html,js}"],
+  content: ["./**/*.{html,js,css}"],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+}