feat: add photo gallery to index and update navigation and styling throughout app

app/app.vue

@@ -20,6 +20,8 @@ useHead({
         },
     ],
 });
+
+onMounted(() => {});
 </script>
 
 <template>

app/assets/css/fonts.css

@@ -236,4 +236,3 @@
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
-

app/assets/css/main.css

@@ -56,6 +56,16 @@ body {
     line-height: 1.6;
 }
 
+.basic-link {
+    color: var(--text);
+    transition: opacity 0.2s ease;
+    text-underline-offset: 4px;
+}
+
+.basic-link:hover {
+    opacity: 0.5;
+}
+
 .punch-link {
     display: inline-block;
     vertical-align: bottom;

app/layouts/main.vue

@@ -25,11 +25,22 @@ defineProps<{
 
             <header class="header">
                 <div class="header-upper">
-                    <slot name="header-upper" />
+                    <slot name="header-upper">
+                        <div class="flex-center header-upper-nav">
+                            <p style="font-family: monospace">🐟🎩.dev</p>
+                            <div class="flex-ff"></div>
+                            <!-- <NuxtLink to="/resume" class="basic-link"
+                                >Resume</NuxtLink
+                            > -->
+                            <NuxtLink to="/writing" class="basic-link"
+                                >Writing</NuxtLink
+                            >
+                        </div>
+                    </slot>
                 </div>
                 <div class="header-lower">
                     <slot name="header-lower">
-                        <h1 class="name">{{ title || 'Jaron' }}</h1>
+                        <h1 class="name">{{ title || "Hello, I'm Jaron" }}</h1>
                         <p class="title">
                             {{
                                 description ||
@@ -131,6 +142,13 @@ svg[height='0'] {
     height: 8vh;
 }
 
+.header-upper-nav {
+    padding: 1rem;
+    height: 100%;
+    font-size: small;
+    gap: 1rem;
+}
+
 .header-lower {
     display: flex;
     flex-direction: column;
@@ -184,6 +202,7 @@ svg[height='0'] {
     padding: 1rem;
     height: 8vh;
     font-size: small;
+    gap: 1rem;
 }
 
 @media (max-width: 1024px) {

app/pages/index.vue

@@ -35,6 +35,16 @@ definePageMeta({
         <section class="projects">
             <h5>Selected Work</h5>
             <div class="section__content">
+                <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://mystwright.com/"
                     target="_blank"
@@ -46,16 +56,6 @@ definePageMeta({
                         investigate, solve.
                     </p>
                 </a>
-                <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"
@@ -73,14 +73,93 @@ definePageMeta({
             <h5>About</h5>
             <div class="section__content">
                 <p>
-                    I work across the full stack; backend, frontend, and the
+                    I work across the full stack; backend, frontend, and
-                    product decisions in between. My favorite side projects are
+                    product. My favorite side projects are ones that bring me
-                    ones that bring me new skills. Even better are ones where I
+                    new skills. Even better are ones where I solve a problem or
-                    solve a problem or build a tool I can use. I'm always open
+                    build a tool I can use. I'm always open to interesting work
-                    to interesting work and conversations.
+                    and conversations.
                 </p>
             </div>
         </section>
+        <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="/photography/athens_red_scooter.jpg"
+                                alt="Red scooter in Athens"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>Athens</p>
+                            <p>2026</p>
+                        </div>
+                    </div>
+                    <div class="photo-grid__item">
+                        <div class="photo__image">
+                            <img
+                                src="/photography/athens_subway.jpg"
+                                alt="Athens metro station"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>Athens</p>
+                            <p>2026</p>
+                        </div>
+                    </div>
+                    <div class="photo-grid__item">
+                        <div class="photo__image">
+                            <img
+                                src="/photography/athens_sunset.jpg"
+                                alt="Athens at sunset"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>Athens</p>
+                            <p>2026</p>
+                        </div>
+                    </div>
+                    <div class="photo-grid__item">
+                        <div class="photo__image">
+                            <img
+                                src="/photography/london_porsche.jpg"
+                                alt="Porsche shop in London"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>London</p>
+                            <p>2025</p>
+                        </div>
+                    </div>
+                    <div class="photo-grid__item">
+                        <div class="photo__image">
+                            <img
+                                src="/photography/underground.jpg"
+                                alt="Entrace to the London underground"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>London</p>
+                            <p>2026</p>
+                        </div>
+                    </div>
+                    <div class="photo-grid__item">
+                        <div class="photo__image">
+                            <img
+                                src="/photography/austin_parking.jpg"
+                                alt="Parking garage in Austin"
+                            />
+                        </div>
+                        <div class="photo__overlay">
+                            <p>Austin</p>
+                            <p>2024</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </NuxtLayout>
 </template>
 
@@ -124,7 +203,7 @@ section:last-of-type {
 
 .project {
     border-bottom: 1px solid var(--muted);
-    padding: 2rem 0;
+    padding: 1rem 0;
     display: block;
     text-decoration: none;
     color: inherit;
@@ -214,6 +293,7 @@ section:last-of-type {
 .photo__overlay p:nth-child(2) {
     font-weight: 300;
     font-style: italic;
+    font-size: small;
 }
 
 .about p {

app/pages/writing/index.vue

@@ -8,7 +8,7 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
     <NuxtLayout
         name="main"
         title="Writing"
-        description="Some thoughts I've had over the years. Not all of them are good, but here we are."
+        description="Thoughts I've had here and there. Maybe you'll find something helpful or interesting here."
     >
         <template #header-upper>
             <div class="header-upper-inner">
@@ -19,9 +19,17 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
             </div>
         </template>
         <section>
-            <a v-for="page in pages" :href="page.path" :key="page.path">
+            <div class="section__content">
-                {{ page.title }}
+                <a
-            </a>
+                    v-for="page in pages"
+                    :href="page.path"
+                    :key="page.path"
+                    class="article"
+                >
+                    <h3 class="article__title">{{ page.title }}</h3>
+                    <p class="article__description">{{ page.description }}</p>
+                </a>
+            </div>
         </section>
     </NuxtLayout>
 </template>
@@ -33,4 +41,48 @@ const { data: pages } = await useAsyncData('writing-pages', () =>
     height: 100%;
     padding: 0 2rem;
 }
+
+section > .section__content {
+    padding: 0 2rem;
+}
+
+.article {
+    border-bottom: 1px solid var(--muted);
+    padding: 1rem 0;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.article:first-of-type {
+    padding-top: 0;
+}
+
+.article:last-of-type {
+    padding-bottom: 0;
+}
+
+.article:last-child {
+    border-bottom: none;
+}
+
+.article:hover > .article__title {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+    font-style: italic;
+    font-family: var(--font-hover);
+}
+
+.article__title {
+    margin: 0;
+    font-weight: 400;
+}
+
+.article__description {
+    margin: 0;
+    font-size: small;
+    font-weight: 400;
+    font-style: italic;
+    color: var(--muted);
+}
 </style>