refactor: update typography to EB Garamond, add punch-link styling, and refine landing page content and components.

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>

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;
@@ -54,3 +55,27 @@ body {
     font-size: 16px;
     line-height: 1.6;
 }
+
+.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;
+}
+

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>
+                <p>
-                <NuxtLink to="/">Back to the homepage.</NuxtLink>
+                    {{ 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);
-}
+    z-index: -1;
-
-.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); */
 }
 
 .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>

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 {
+.header::before {
-    display: flex;
+    content: '';
-    flex-direction: column;
+    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;