feat: basic resume, some fancier animations

ethanthoma · Oct 31, 2024 · c73c888 · c73c888
1 parent d1a7da9
commit c73c888
Show file tree

Hide file tree

Showing 6 changed files with 395 additions and 84 deletions.
diff --git a/services/webserver/components/footer.templ b/services/webserver/components/footer.templ
@@ -3,9 +3,27 @@ package components
 type Footer struct{}
 
 templ (p Footer) View() {
-	<footer class="pt-s border-t-content border-t-2 mt-xl">
+	<footer class="flex flex-col items-center pt-s border-t-content border-t-2 mt-xl">
 		<p class="text-wrap text-center">
 			&copy;2024 Ethan Thoma. All rights reserved.
 		</p>
+		<ul class="flex gap-x-xs-s justify-between text-content/60">
+			<li>
+				<a
+					class="underline hover:text-accent"
+					href="https://github.com/ethanthoma/personal-website"
+				>
+					website source code
+				</a>
+			</li>
+			<li>
+				<a
+					class="underline hover:text-accent"
+					href="https://www.buymeacoffee.com/ethanthoma"
+				>
+					Buy me a coffee?
+				</a>
+			</li>
+		</ul>
 	</footer>
 }
diff --git a/services/webserver/components/nav.templ b/services/webserver/components/nav.templ
@@ -6,26 +6,56 @@ type Nav struct {
 }
 
 const effect = "translate-x-3xs -translate-y-3xs shadow-content shadow-[-4px_4px_0_0]"
+const hoverEffect = "hover:translate-x-3xs hover:-translate-y-3xs hover:shadow-content hover:shadow-[-4px_4px_0_0]"
 
 templ (p Nav) View() {
 	<nav id="nav" hx-swap-oob="true">
 		<ul class="flex justify-evenly gap-s-2xl">
 			for _, name := range p.Pages {
 				<li class="flex-1">
 					<a
-						class={ "block px-2xs-xs py-2xs border-2 text-center transition-[transform,box-shadow] duration-200 ease-in-out hover:translate-x-3xs hover:-translate-y-3xs hover:shadow-content hover:shadow-[-4px_4px_0_0]", 
-                            templ.KV("font-extrabold " + effect, p.PageCurrent == name) }
+						class={
+							"relative h-full block px-2xs-xs py-2xs border-2 text-center transition-all duration-200 ease-in-out group",
+							templ.KV(hoverEffect, p.PageCurrent != name),
+							templ.KV("font-extrabold "+effect, p.PageCurrent == name),
+						}
+						href={ templ.URL("/" + name) }
 						href={ templ.URL("/" + name) }
 						hx-get={ "/" + name }
 						hx-push-url={ "/" + name }
 						hx-target="main"
 						hx-select="main"
 						hx-swap="outerHTML"
 					>
-						{ name }
+						if name == "resume" {
+							@fancyHover(name)
+						} else {
+							{ name }
+						}
 					</a>
 				</li>
 			}
 		</ul>
 	</nav>
 }
+
+templ arrow() {
+	<svg class="w-xs h-xs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+	</svg>
+}
+
+templ fancyHover(name string) {
+	<span class="absolute inline-flex inset-[0] items-center justify-center overflow-hidden">
+		<span class="absolute bottom-[0] w-full h-[0] transition-all duration-150 ease-in-out bg-accent group-hover:h-full"></span>
+		<span class="absolute text-content right-[0] pr-3xs-2xs duration-200 ease-out group-hover:translate-x-m-l">
+			@arrow()
+		</span>
+		<span class="absolute text-base left-[0] pl-3xs-2xs duration-200 ease-out -translate-x-m-l group-hover:translate-x-[0]">
+			@arrow()
+		</span>
+		<span class="relative transition-colors duration-200 ease-in-out group-hover:text-base">
+			{ name }
+		</span>
+	</span>
+}
diff --git a/services/webserver/main.go b/services/webserver/main.go
@@ -40,7 +40,7 @@ func main() {
 
 	// pages
 
-	navList := []string{"home", "blog"}
+	navList := []string{"home", "blog", "resume"}
 
 	pageHome := pages.Home{Pages: navList}
 	http.Handle("GET /", templ.Handler(pageHome.View()))
@@ -69,6 +69,9 @@ func main() {
 		pagePost.View(post).Render(r.Context(), w)
 	})
 
+	pageResume := pages.Resume{Pages: navList}
+	http.Handle("GET /resume", templ.Handler(pageResume.View()))
+
 	// static
 
 	http.Handle("GET /public/", http.StripPrefix("/public/", staticHandler(http.Dir("public"))))

diff --git a/services/webserver/pages/home.templ b/services/webserver/pages/home.templ
@@ -6,8 +6,6 @@ type Home struct {
 	Pages []string
 }
 
-var tags = []string{"python", "nix", "zig", "odin", "go"}
-
 templ (p Home) View() {
 	@layouts.Base{
 		Pages:       p.Pages,
@@ -31,7 +29,7 @@ templ (p Home) View() {
 				</p>
 			</section>
 			<section class="mt-m-l">
-				<h2 class="mb-xs-s text-lg border-b-2 border-content/80">Contact:</h2>
+				<h2 class="mb-xs-s text-lg border-b-2 border-content/80">Socials:</h2>
 				<ul class="space-y-s list-inside ps-2xs-xs text-content/80">
 					<li class="flex items-center gap-2xs hover:text-blue w-[fit-content]">
 						<svg class="w-xs h-xs" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
@@ -53,82 +51,6 @@ templ (p Home) View() {
 					</li>
 				</ul>
 			</section>
-			<section class="mt-m-l">
-				<h2 class="mb-xs-s text-lg border-b-2 border-content/80">Projects:</h2>
-				<ul class="space-y-s list-inside ps-2xs-xs text-content/80">
-					<li class="flex">
-						<time>20240911</time>
-						<span class="px-2xs">-</span>
-						<a
-							class="underline hover:text-blue"
-							href="https://github.com/ethanthoma/interaction-net"
-						><h2>Interaction Nets in Odin</h2></a>
-					</li>
-					<li class="flex">
-						<time>20240719</time>
-						<span class="px-2xs">-</span>
-						<a
-							class="underline hover:text-blue"
-							href="https://github.com/ethanthoma/zig-webgpu-compute-shader"
-						><h2>Zig Webgpu Compute Shader</h2></a>
-					</li>
-					<li class="flex">
-						<time>20240708</time>
-						<span class="px-2xs">-</span>
-						<a
-							class="underline hover:text-blue"
-							href="https://github.com/ethanthoma/zensor"
-						><h2>Zensor: a Zig tensor library</h2></a>
-					</li>
-				</ul>
-			</section>
-			<section class="mt-m-l">
-				<h2 class="mb-xs-s text-lg border-b-2 border-content/80">Skills:</h2>
-				<div class="flex flex-wrap gap-xs justify-start">
-					for _, tag := range tags {
-						<span class="px-xs py-3xs text-sm tracking-tight border-2 flex gap-2xs items-center text-content/80 flex-grow">
-							<svg class="w-xs h-xs text-content/80" aria-hidden="true">
-								<use href={ "#icon-" + tag }></use>
-							</svg>
-							<span class="flex-grow text-center">{ tag }</span>
-						</span>
-					}
-					<span class="flex-grow-[999]"></span>
-				</div>
-				<svg xmlns="http://www.w3.org/2000/svg" class="hidden invisible">
-					<!-- Python -->
-					<symbol id="icon-python" viewBox="0 0 128 128" fill="currentColor">
-						<path d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"></path>
-					</symbol>
-					<!-- Nix -->
-					<symbol id="icon-nix" viewBox="0 0 128 128" fill="currentColor">
-						<path d="M50.732 43.771L20.525 96.428l-7.052-12.033 8.14-14.103-16.167-.042L2 64.237l3.519-6.15 23.013.073 8.27-14.352 13.93-.037zm2.318 42.094l60.409.003-6.827 12.164-16.205-.045 8.047 14.115-3.45 6.01-7.05.008-11.445-20.097-16.483-.034-6.996-12.124zm35.16-23.074l-30.202-52.66L71.888 10l8.063 14.148 8.12-14.072 6.897.002 3.532 6.143-11.57 20.024 8.213 14.386-6.933 12.16z" clip-rule="evenodd" fill-rule="evenodd"></path>
-						<path d="M39.831 65.463l30.202 52.66-13.88.131-8.063-14.148-8.12 14.072-6.897-.002-3.532-6.143 11.57-20.024-8.213-14.386 6.933-12.16zm35.08-23.207l-60.409-.003L21.33 30.09l16.204.045-8.047-14.115 3.45-6.01 7.051-.01 11.444 20.097 16.484.034 6.996 12.124zm2.357 42.216l30.207-52.658 7.052 12.034-8.141 14.102 16.168.043L126 64.006l-3.519 6.15-23.013-.073-8.27 14.352-13.93.037z" clip-rule="evenodd" fill-rule="evenodd"></path>
-					</symbol>
-					<!-- Zig -->
-					<symbol id="icon-zig" viewBox="0 0 128 128" fill="currentColor">
-						<g>
-							<path d="M38.484 23.843l-15.06 18.405-7.529-11.712z"></path>
-							<path shape-rendering="crispEdges" d="M38.484 23.843l-10.876 9.203-4.183 9.202h-5.02v42.667h7.53l-9.203 4.183-6.693 14.222H0V23.843z"></path>
-							<path d="M25.935 84.915L10.039 103.32l-6.693-9.202zM46.85 23.843l5.02 11.713-20.916 6.692z"></path>
-							<path shape-rendering="crispEdges" d="M46.85 23.843h46.013v18.405H30.954L46.85 32.21z"></path>
-							<path d="M97.046 84.915L81.15 103.32l-5.856-10.875z"></path>
-							<path shape-rendering="crispEdges" d="M97.046 84.915l-13.386 7.53-2.51 10.875H35.137V84.915z"></path>
-							<path d="M125.49 5.438L43.503 103.32 2.51 122.562l81.987-98.719zM117.96 23.843l-.836 15.06-15.059 4.182z"></path>
-							<path shape-rendering="crispEdges" d="M128 23.843v79.477H88.68l11.712-10.039 4.183-8.366h5.02v-41.83h-7.53l8.366-7.53 7.53-11.712z"></path>
-							<path d="M104.575 84.915l4.183 12.55-20.078 5.855z"></path>
-						</g>
-					</symbol>
-					<!-- Odin -->
-					<symbol id="icon-odin" viewBox="300 800 800 900" fill="currentColor">
-						<path d="M430.516,1595.76C413.94,1584.38 400.839,1573.36 400.839,1573.36L827.125,835.012C827.125,835.012 844.672,841.52 859.166,848.469C877.436,857.226 892.569,865.763 892.569,865.763C1099.2,985.063 1170.11,1249.68 1050.81,1456.31C931.507,1662.95 666.89,1733.85 460.256,1614.55C460.256,1614.55 445.783,1606.23 430.516,1595.76ZM856.543,928.162L496.282,1552.15C668.477,1651.57 888.991,1592.48 988.408,1420.29C1087.82,1248.09 1028.74,1027.58 856.543,928.162ZM321.659,1487.36C307.172,1466.38 302.015,1456.32 302.015,1456.32C227.54,1326.96 222.078,1162.46 302.018,1024C381.958,885.54 527.146,808.023 676.415,807.839C676.415,807.839 696.568,807.787 713.348,809.394C738.628,811.816 755.435,815.078 755.435,815.078L347.771,1521.17C347.771,1521.17 338.1,1511.16 321.659,1487.36ZM633.291,882.532C524.653,895.735 423.297,958.044 364.417,1060.03C305.537,1162.01 302.255,1280.94 345.139,1381.63L633.291,882.532Z"></path>
-					</symbol>
-					<!-- Go -->
-					<symbol id="icon-go" viewBox="0 0 640 512" fill="currentColor">
-						<path d="M400.1 194.8C389.2 197.6 380.2 199.1 371 202.4C363.7 204.3 356.3 206.3 347.8 208.5L347.2 208.6C343 209.8 342.6 209.9 338.7 205.4C334 200.1 330.6 196.7 324.1 193.5C304.4 183.9 285.4 186.7 267.7 198.2C246.5 211.9 235.6 232.2 235.9 257.4C236.2 282.4 253.3 302.9 277.1 306.3C299.1 309.1 316.9 301.7 330.9 285.8C333 283.2 334.9 280.5 337 277.5V277.5L337 277.5C337.8 276.5 338.5 275.4 339.3 274.2H279.2C272.7 274.2 271.1 270.2 273.3 264.9C277.3 255.2 284.8 239 289.2 230.9C290.1 229.1 292.3 225.1 296.1 225.1H397.2C401.7 211.7 409 198.2 418.8 185.4C441.5 155.5 468.1 139.9 506 133.4C537.8 127.8 567.7 130.9 594.9 149.3C619.5 166.1 634.7 188.9 638.8 218.8C644.1 260.9 631.9 295.1 602.1 324.4C582.4 345.3 557.2 358.4 528.2 364.3C522.6 365.3 517.1 365.8 511.7 366.3C508.8 366.5 506 366.8 503.2 367.1C474.9 366.5 449 358.4 427.2 339.7C411.9 326.4 401.3 310.1 396.1 291.2C392.4 298.5 388.1 305.6 382.1 312.3C360.5 341.9 331.2 360.3 294.2 365.2C263.6 369.3 235.3 363.4 210.3 344.7C187.3 327.2 174.2 304.2 170.8 275.5C166.7 241.5 176.7 210.1 197.2 184.2C219.4 155.2 248.7 136.8 284.5 130.3C313.8 124.1 341.8 128.4 367.1 145.6C383.6 156.5 395.4 171.4 403.2 189.5C405.1 192.3 403.8 193.9 400.1 194.8zM48.3 200.4C47.1 200.4 46.7 199.8 47.4 198.8L53.9 190.4C54.5 189.5 56.1 188.9 57.3 188.9H168.6C169.8 188.9 170.1 189.8 169.5 190.7L164.2 198.8C163.6 199.8 162 200.7 161.1 200.7L48.3 200.4zM1.2 229.1C0 229.1-.3 228.4 .3 227.5L6.9 219.1C7.5 218.2 9 217.5 10.3 217.5H152.4C153.6 217.5 154.2 218.5 153.9 219.4L151.4 226.9C151.1 228.1 149.9 228.8 148.6 228.8L1.2 229.1zM75.7 255.9C75.1 256.8 75.4 257.7 76.7 257.7L144.6 258C145.5 258 146.8 257.1 146.8 255.9L147.4 248.4C147.4 247.1 146.8 246.2 145.5 246.2H83.2C82 246.2 80.7 247.1 80.1 248.1L75.7 255.9zM577.2 237.9C577 235.3 576.9 233.1 576.5 230.9C570.9 200.1 542.5 182.6 512.9 189.5C483.9 196 465.2 214.4 458.4 243.7C452.8 268 464.6 292.6 487 302.6C504.2 310.1 521.3 309.2 537.8 300.7C562.4 287.1 575.8 268 577.4 241.2C577.3 240 577.3 238.9 577.2 237.9z"></path>
-					</symbol>
-				</svg>
-			</section>
 		</article>
 	}
 }