From 3e79461faac6a5987b192f8bd63b29f7ba0b8ee7 Mon Sep 17 00:00:00 2001
From: Jaron <jaron@ed.link>
Date: Wed, 29 Apr 2026 16:32:57 -0500
Subject: [PATCH] refactor: update typography to EB Garamond, add punch-link
 styling, and refine landing page content and components.

---
 app/app.vue                                   |  11 --
 app/assets/css/main.css                       |  29 +++-
 app/error.vue                                 |  82 ++++-------
 app/pages/index.vue                           | 127 +++++++++++++-----
 public/favicon.ico                            | Bin 4286 -> 0 bytes
 .../{ => photography}/athens_red_scooter.jpg  | Bin
 public/{ => photography}/athens_subway.jpg    | Bin
 public/{ => photography}/athens_sunset.jpg    | Bin
 public/{ => photography}/austin_parking.jpg   | Bin
 public/{ => photography}/london_porsche.jpg   | Bin
 public/{ => photography}/underground.jpg      | Bin
 11 files changed, 146 insertions(+), 103 deletions(-)
 delete mode 100644 public/favicon.ico
 rename public/{ => photography}/athens_red_scooter.jpg (100%)
 rename public/{ => photography}/athens_subway.jpg (100%)
 rename public/{ => photography}/athens_sunset.jpg (100%)
 rename public/{ => photography}/austin_parking.jpg (100%)
 rename public/{ => photography}/london_porsche.jpg (100%)
 rename public/{ => photography}/underground.jpg (100%)

diff --git a/app/app.vue b/app/app.vue
index 6a4cdf7..cb50f49 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -7,16 +7,5 @@ useHead({
 </script>
 
 <template>
-    <svg width="0" height="0" aria-hidden="true" style="position: absolute">
-        <filter id="grainy" x="0" y="0" width="100%" height="100%">
-            <feTurbulence
-                type="fractalNoise"
-                baseFrequency=".85"
-                numOctaves="3"
-            ></feTurbulence>
-            <feColorMatrix type="saturate" values="0"></feColorMatrix>
-            <feBlend mode="multiply" in="SourceGraphic"></feBlend>
-        </filter>
-    </svg>
     <NuxtPage />
 </template>
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 79eb617..b38f25c 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -8,7 +8,8 @@
 
 :root {
     /* --font: 'Baskervville', serif; */
-    --font: "SohneBuch", sans-serif;
+    --font: 'EB Garamond', serif;
+    /* --font: "SohneBuch", sans-serif; */
     --text: #333;
     --muted: #666;
     --bg: #fbfbf7;
@@ -53,4 +54,28 @@ body {
     color: var(--text);
     font-size: 16px;
     line-height: 1.6;
-}
\ No newline at end of file
+}
+
+.punch-link {
+    display: inline-block;
+    vertical-align: bottom;
+    position: relative;
+    color: var(--bg);
+    text-decoration: none;
+    transition: all 200ms ease;
+    padding: 0 4px;
+    margin: 0 -4px;
+    background-image: linear-gradient(var(--bg), var(--bg));
+    background-size: 100% 1px;
+    background-position: bottom;
+    background-repeat: no-repeat;
+    mix-blend-mode: screen;
+}
+
+
+.punch-link:hover {
+    background-size: 100% 100%;
+    background-image: linear-gradient(#fff, #fff);
+    color: #000;
+}
+
diff --git a/app/error.vue b/app/error.vue
index 97f1042..2fd9365 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -10,12 +10,28 @@ useHead({
 
 <template>
     <div class="error-page">
+        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <filter id="grainy" x="0" y="0" width="100%" height="100%">
+                <feTurbulence
+                    type="fractalNoise"
+                    baseFrequency=".85"
+                    numOctaves="3"
+                ></feTurbulence>
+                <feColorMatrix type="saturate" values="0"></feColorMatrix>
+                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
+            </filter>
+        </svg>
         <div class="error-card">
-            <div class="error-bg"></div>
             <div class="error-content">
                 <h1>{{ error.status }}</h1>
-                <p>Sorry, something went wrong.</p>
-                <NuxtLink to="/">Back to the homepage.</NuxtLink>
+                <p>
+                    {{ error.message ?? 'Sorry, something went wrong.' }}
+                </p>
+                <p>
+                    <NuxtLink to="/" class="punch-link"
+                        >Back to the homepage.</NuxtLink
+                    >
+                </p>
             </div>
         </div>
     </div>
@@ -39,65 +55,21 @@ useHead({
     justify-content: center;
     padding: 2rem 16rem;
     color: var(--bg);
+    isolation: isolate;
+}
+
+.error-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
     background: url('/blend.jpeg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     filter: url(#grainy);
-}
-
-.error-bg {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* glass effect on background */
-    /* background: rgba(0, 0, 0, 0.16);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(5px); */
+    z-index: -1;
 }
 
 .error-content {
-    z-index: 1;
-}
-
-a {
-    position: relative;
-    color: var(--bg);
-    text-decoration: underline;
-    text-underline-offset: 4px;
-    z-index: 1;
-}
-
-a::before {
-    content: '';
-    background-color: var(--bg);
-    position: absolute;
-    top: -3px;
-    /* left: -4px; */
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* width: calc(100% + 8px); */
-    width: 100%;
-    /* height: 0; */
-    height: calc(100% + 6px);
-    transform: scaleY(0);
-    transform-origin: bottom;
-    transition: transform 200ms ease;
-}
-
-a:hover::before {
-    /* transform: scaleY(1); */
-}
-
-a:hover {
-    mix-blend-mode: screen;
-    color: var(--text);
-    background-color: var(--bg);
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 375f670..f9fa33c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const titles = ["Hello, I'm Jaron.", 'Nice to meet you.'];
+const titles = [
+    "Hello, I'm Jaron.",
+    'Nice to meet you.',
+    'Welcome.',
+    'Willkommen.',
+    'Bienvenue.',
+];
 
 const pageTitle = ref(titles[0]);
 
@@ -28,20 +34,36 @@ useHead({
             rel: 'stylesheet',
             href: 'https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap',
         },
+        {
+            rel: 'stylesheet',
+            href: 'https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap',
+        },
     ],
 });
 </script>
 
 <template>
     <div>
+        <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+            <filter id="grainy" x="0" y="0" width="100%" height="100%">
+                <feTurbulence
+                    type="fractalNoise"
+                    baseFrequency=".85"
+                    numOctaves="3"
+                ></feTurbulence>
+                <feColorMatrix type="saturate" values="0"></feColorMatrix>
+                <feBlend mode="multiply" in="SourceGraphic"></feBlend>
+            </filter>
+        </svg>
         <div class="page-wrapper">
             <div class="trace left"></div>
+
             <div class="trace right"></div>
 
             <header class="header">
                 <h1 class="name">Jaron</h1>
                 <p class="title">
-                    Software Engineer by trade &mdash; tinkerer by nature.
+                    Software Engineer by trade &mdash; builder by nature.
                 </p>
             </header>
 
@@ -49,27 +71,39 @@ useHead({
                 <section class="projects">
                     <h5>Selected Work</h5>
                     <div class="section__content">
-                        <a href="#" class="project">
+                        <a
+                            href="https://mystwright.com/"
+                            target="_blank"
+                            class="project"
+                        >
                             <h3 class="project__title">Mystwright</h3>
                             <p class="project__description">
                                 An AI-driven mystery detective game. Generate,
                                 investigate, solve.
                             </p>
                         </a>
-                        <a href="#" class="project">
+                        <a
+                            href="https://unicord.hat.fish/"
+                            target="_blank"
+                            class="project"
+                        >
+                            <h3 class="project__title">Unicord</h3>
+                            <p class="project__description">
+                                Discord bot SDK inspired by webserver
+                                architecture.
+                            </p>
+                        </a>
+                        <a
+                            href="https://github.com/jaronpate/rift-buddy"
+                            target="_blank"
+                            class="project"
+                        >
                             <h3 class="project__title">Rune Buddy</h3>
                             <p class="project__description">
                                 League of Legends runepage manager. Save &
                                 organise your pages for free.
                             </p>
                         </a>
-                        <a href="#" class="project">
-                            <h3 class="project__title">Unicord</h3>
-                            <p class="project__description">
-                                Lightweight Discord's bot SDK inspired by
-                                webserver architecture.
-                            </p>
-                        </a>
                     </div>
                 </section>
                 <section class="about">
@@ -85,14 +119,14 @@ useHead({
                         </p>
                     </div>
                 </section>
-                <section class="photos">
+                <!-- <section class="photos">
                     <h5>Photos</h5>
                     <div class="section__content">
                         <div class="photo-grid">
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/underground.jpg"
+                                        src="/photography/underground.jpg"
                                         alt="London Underground Sign"
                                     />
                                 </div>
@@ -104,7 +138,7 @@ useHead({
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/london_porsche.jpg"
+                                        src="/photography/london_porsche.jpg"
                                         alt="London Porsche"
                                     />
                                 </div>
@@ -116,7 +150,7 @@ useHead({
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/austin_parking.jpg"
+                                        src="/photography/austin_parking.jpg"
                                         alt="Austin Parking Sign"
                                     />
                                 </div>
@@ -128,7 +162,7 @@ useHead({
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/athens_red_scooter.jpg"
+                                        src="/photography/athens_red_scooter.jpg"
                                         alt="Athens Red Scooter"
                                     />
                                 </div>
@@ -140,7 +174,7 @@ useHead({
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/athens_subway.jpg"
+                                        src="/photography/athens_subway.jpg"
                                         alt="Athens Subway"
                                     />
                                 </div>
@@ -152,7 +186,7 @@ useHead({
                             <div class="photo-grid__item">
                                 <div class="photo__image">
                                     <img
-                                        src="/athens_sunset.jpg"
+                                        src="/photography/athens_sunset.jpg"
                                         alt="Athens Sunset"
                                     />
                                 </div>
@@ -163,7 +197,7 @@ useHead({
                             </div>
                         </div>
                     </div>
-                </section>
+                </section> -->
                 <div style="flex: 1"></div>
             </main>
 
@@ -171,7 +205,7 @@ useHead({
                 <div class="footer-upper">
                     <div class="flex-center">
                         <p>
-                            <a style="color: var(--bg)" href="mailto:yo@jp.wtf"
+                            <a class="punch-link" href="mailto:yo@jp.wtf"
                                 >Say hi.</a
                             >
                         </p>
@@ -252,35 +286,46 @@ svg[height='0'] {
 
     border-top: 1px solid var(--muted);
     border-bottom: 1px solid var(--muted);
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: left top;
-    background-repeat: no-repeat;
-    backdrop-filter: url(#grainy);
-    mix-blend-mode: multiply;
     padding: 2rem;
     color: var(--bg);
 
     margin-top: 8vh;
+    position: relative;
+    isolation: isolate;
 }
 
-.footer {
-    display: flex;
-    flex-direction: column;
+.header::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: left top;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
 }
 
 .footer-upper {
     border-top: 1px solid var(--muted);
     border-bottom: 1px solid var(--muted);
-    background: url('/blend.jpeg');
-    background-size: cover;
-    background-position: left bottom;
-    background-repeat: no-repeat;
-    backdrop-filter: url(#grainy);
-    mix-blend-mode: multiply;
     padding: 2rem;
     color: var(--bg);
     min-height: 10vh;
+    position: relative;
+    isolation: isolate;
+}
+
+.footer-upper::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: url('/blend.jpeg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: url(#grainy);
+    z-index: -1;
 }
 
 .footer-lower {
@@ -334,6 +379,14 @@ section:last-of-type {
     color: inherit;
 }
 
+.project:first-of-type {
+    padding-top: 0;
+}
+
+.project:last-of-type {
+    padding-bottom: 0;
+}
+
 .project:last-child {
     border-bottom: none;
 }
@@ -411,6 +464,10 @@ section:last-of-type {
     font-style: italic;
 }
 
+.about p {
+    margin: 0;
+}
+
 @media (max-width: 1024px) {
     .page-wrapper {
         --main-width: 80vw;
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 18993ad91cfd43e03b074dd0b5cc3f37ab38e49c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4286
zcmeHLOKuuL5PjK%MHWVi6lD<!mRb4$mdFuu1m7S&L72}0%nh7nb{xS*IY7K-1~WG>
zOGiR<sv2rs-P1h`ut*jRDypfj@9U}_3E&NVhC}c-e)fS606r6u2w#X;ZXeov|87fL
z!TI})z`sQxSz?%$m}Cpw?WF=YNnu;Mk#t%h*=w(2a7>EbCw`xmFozJ^aNatJY>w+g
ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph
z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8
zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%<Y^V1u
zxpEJLVzZ2NFGX+1TXChn89VxczG?Ja<o=SJ8n{y5$ezyw`8sz3-<3{&C8oX)|94kh
z+0M_EV^O^m@tH21JEPN_ux%Gy1GUw?U~8Zr)3xvGXUSPO+3I<5aAh6uT<iYgm~_ug
ziEA0#JM$)SV%(oc@>lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^
z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G
z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&w<W+!o=%S{hjU42>cHSn81VH1N~`0gvwH{
z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e<J#b(FPcAa6L9y8G}E@q!eIA^eYgE
GM1KL3x?{8e

diff --git a/public/athens_red_scooter.jpg b/public/photography/athens_red_scooter.jpg
similarity index 100%
rename from public/athens_red_scooter.jpg
rename to public/photography/athens_red_scooter.jpg
diff --git a/public/athens_subway.jpg b/public/photography/athens_subway.jpg
similarity index 100%
rename from public/athens_subway.jpg
rename to public/photography/athens_subway.jpg
diff --git a/public/athens_sunset.jpg b/public/photography/athens_sunset.jpg
similarity index 100%
rename from public/athens_sunset.jpg
rename to public/photography/athens_sunset.jpg
diff --git a/public/austin_parking.jpg b/public/photography/austin_parking.jpg
similarity index 100%
rename from public/austin_parking.jpg
rename to public/photography/austin_parking.jpg
diff --git a/public/london_porsche.jpg b/public/photography/london_porsche.jpg
similarity index 100%
rename from public/london_porsche.jpg
rename to public/photography/london_porsche.jpg
diff --git a/public/underground.jpg b/public/photography/underground.jpg
similarity index 100%
rename from public/underground.jpg
rename to public/photography/underground.jpg