jaron/folio
1
0
Fork 0
mirror of https://github.com/jaronpate/folio.git synced 2026-10-19 01:07:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jaron
2026-05-02 21:03:02 -05:00
parent 5e85800156
commit 0015e28b8f
6 changed files with 185 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/index.vue
+96 -16
View File
@@ -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
product decisions in between. My favorite side projects are
ones that bring me new skills. Even better are ones where I
solve a problem or build a tool I can use. I'm always open
to interesting work and conversations.
I work across the full stack; backend, frontend, and
product. My favorite side projects are ones that bring me
new skills. Even better are ones where I solve a problem or
build a tool I can use. I'm always open to interesting work
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
+56 -4
View File
@@ -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">
{{ page.title }}
</a>
<div class="section__content">
<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>