diff --git a/css/output.css b/css/output.css index fa4eed4..09498b9 100644 --- a/css/output.css +++ b/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 { diff --git a/henry.html b/henry.html index ab8f82b..e0ec718 100644 --- a/henry.html +++ b/henry.html @@ -6,8 +6,8 @@ -
- +
+

@@ -15,5 +15,100 @@

+ +
+
+
+ Image 1 + Image 2 + Image 3 + Image 4 + Image 5 +
+
+
+
+
+

About Henry

+

+ 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. +

+

+ 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. +

+
+
+

About This Site

+

+ 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. +

+

+ 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 + Gitea instance. 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. +

+
+
+

Contact

+

+ If you'd like to get in touch, you can reach me at + henry@hobbs.zone. +

+
+ + +
+
+
diff --git a/img/gitea.svg b/img/gitea.svg new file mode 100644 index 0000000..bf9d899 --- /dev/null +++ b/img/gitea.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/img/henry.jpg b/img/henry.jpg new file mode 100644 index 0000000..a14304f Binary files /dev/null and b/img/henry.jpg differ diff --git a/img/henry/1.jpeg b/img/henry/1.jpeg new file mode 100644 index 0000000..5ef8c3b Binary files /dev/null and b/img/henry/1.jpeg differ diff --git a/img/henry/2.jpeg b/img/henry/2.jpeg new file mode 100644 index 0000000..f738720 Binary files /dev/null and b/img/henry/2.jpeg differ diff --git a/img/henry/3.jpg b/img/henry/3.jpg new file mode 100644 index 0000000..694c91a Binary files /dev/null and b/img/henry/3.jpg differ diff --git a/img/henry/4.jpeg b/img/henry/4.jpeg new file mode 100644 index 0000000..e838883 Binary files /dev/null and b/img/henry/4.jpeg differ diff --git a/img/henry/5.jpeg b/img/henry/5.jpeg new file mode 100644 index 0000000..4b37ca2 Binary files /dev/null and b/img/henry/5.jpeg differ diff --git a/index.css b/index.css index 901fd56..e3d6d38 100644 --- a/index.css +++ b/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); } diff --git a/index.html b/index.html index 06802b4..ff2e523 100644 --- a/index.html +++ b/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 @@
- +

@@ -37,12 +39,5 @@ onclick="onKittyClick()" />

-
-

- Email me: henry@hobbs.zone -

-
diff --git a/landing.html b/landing.html index 63435f5..f61e7c0 100644 --- a/landing.html +++ b/landing.html @@ -7,7 +7,7 @@
- +

@@ -15,15 +15,15 @@

-
+
zuzu
@@ -33,30 +33,51 @@
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
+ +
+
+ gitea +
+

Gitea

+

Source code for my projects

+
+
+
+ +
+
+
+
+
+
+
+
+
+

+ Email me: henry@hobbs.zone +

diff --git a/tailwind.config.js b/tailwind.config.js index ab3e021..425854c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./**/*.{html,js}"], + content: ["./**/*.{html,js,css}"], theme: { extend: {}, }, plugins: [], -}; +}