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

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

Browse Source
This commit is contained in:
Jaron
2026-04-29 16:32:57 -05:00
parent f1f43877d7
commit 3e79461faa
11 changed files with 146 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
-11
View File
@@ -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
+27 -2
View File
@@ -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;
}
}
.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
+27 -55
View File
@@ -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>
app/pages/index.vue
+92 -35
View File
@@ -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;