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: implement dark mode support, update writing route logic, and add content entry placeholder

Browse Source
This commit is contained in:
Jaron
2026-05-12 19:12:41 -05:00
parent ab8eb9ab86
commit 60b5319909
12 changed files with 101 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
+1 -17
View File
@@ -2,23 +2,7 @@
import '~/assets/css/main.css';
useHead({
link: [
{ rel: 'icon', type: 'image/png', href: '/favicon.png' },
// { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
// {
// rel: 'preconnect',
// href: 'https://fonts.gstatic.com',
// crossorigin: '',
// },
// {
// 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',
// },
],
link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }],
});
onMounted(() => {});
app/assets/bgvideo.webm
BIN
View File
Binary file not shown.
app/assets/css/main.css
+20 -3
View File
@@ -4,14 +4,31 @@
/* --font: 'Baskervville', serif; */
/* --font: 'EB Garamond', serif; */
/* --font: 'Plantin MT Pro', serif; */
--font: 'Redaction', serif;
/* --font: 'Young Serif', serif; */
/* --font: "SohneBuch", sans-serif; */
--font: 'Redaction', serif;
--font-hover: 'Redaction 70', serif;
/* --font-hover: var(--font); */
--text: #333;
--muted: #666;
--bg: #fbfbf7;
--color-white-500: #fbfbf7;
--gap: 1rem;
}
::selection {
background: var(--text);
color: var(--bg);
}
.dark-mode {
--text: #fbfbf7;
--bg: #111111;
--muted: #d1d1d1;
--color-white-500: #fbfbf7;
}
.flex {
@@ -70,12 +87,12 @@ body {
display: inline-block;
vertical-align: bottom;
position: relative;
color: var(--bg);
color: var(--color-white-500);
text-decoration: none;
transition: all 200ms ease;
padding: 0 4px;
margin: 0 -4px;
background-image: linear-gradient(var(--bg), var(--bg));
background-image: linear-gradient(var(--color-white-500), var(--color-white-500));
background-size: 100% 1px;
background-position: bottom;
background-repeat: no-repeat;
app/layouts/main.vue
+34 -7
View File
@@ -3,6 +3,12 @@ defineProps<{
title?: string;
description?: string;
}>();
const theme = useColorMode();
const toggleTheme = () => {
theme.preference = theme.preference === 'light' ? 'dark' : 'light';
};
</script>
<template>
@@ -27,14 +33,20 @@ defineProps<{
<div class="header-upper">
<slot name="header-upper">
<div class="flex-center header-upper-nav">
<p style="font-family: monospace">🐟🎩.dev</p>
<button
class="theme-toggle"
@click="toggleTheme"
v-if="!theme.unknown"
>
{{ theme.value === 'dark' ? '🌚' : '🌝' }}
</button>
<div class="flex-ff"></div>
<!-- <NuxtLink to="/resume" class="basic-link"
>Resume</NuxtLink
> -->
<NuxtLink to="/writing" class="basic-link"
>Writing</NuxtLink
>
<!-- <NuxtLink to="/writing" class="basic-link">
Writing
</NuxtLink> -->
</div>
</slot>
</div>
@@ -71,8 +83,9 @@ defineProps<{
</div>
</div>
<div class="footer-lower">
<div class="flex-center">
<div class="flex-center" style="gap: var(--gap)">
<p style="text-align: right">Est. 2003</p>
<!-- <p style="font-family: monospace">🐟🎩.dev</p> -->
<div class="flex-ff"></div>
<p style="text-align: right">Austin, TX</p>
</div>
@@ -158,7 +171,7 @@ svg[height='0'] {
border-top: 1px solid var(--muted);
border-bottom: 1px solid var(--muted);
padding: 2rem;
color: var(--bg);
color: var(--color-white-500);
position: relative;
isolation: isolate;
@@ -180,7 +193,7 @@ svg[height='0'] {
border-top: 1px solid var(--muted);
border-bottom: 1px solid var(--muted);
padding: 2rem;
color: var(--bg);
color: var(--color-white-500);
min-height: 10vh;
position: relative;
isolation: isolate;
@@ -205,6 +218,20 @@ svg[height='0'] {
gap: 1rem;
}
.theme-toggle {
background: transparent;
border: none;
cursor: pointer;
font-size: large;
font-weight: bold;
color: var(--text);
transition: opacity 0.2s ease;
}
.theme-toggle:hover {
opacity: 0.5;
}
@media (max-width: 1024px) {
.page-wrapper {
--main-width: 80vw;
app/pages/index.vue
+13 -6
View File
@@ -73,11 +73,18 @@ definePageMeta({
<h5>About</h5>
<div class="section__content">
<p>
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.
I enjoy the entire process of building things; backend,
frontend, product, etc.
</p>
<p>
I left school and my job at Chick-fil-A in 2022 to write
code full time. It's definitely one of the best decisions
I've ever made. I've learned so much since then and
<em>still</em> have so much more to learn.
</p>
<p>
If you want to build something cool or connect hit me up! I
still dont know enough people to form a band yet ;)
</p>
</div>
</section>
@@ -300,7 +307,7 @@ section:last-of-type {
font-size: small;
}
.about p {
.about p:last-child {
margin: 0;
}
app/pages/writing/[...slug].vue
+3 -1
View File
@@ -1,7 +1,9 @@
<script lang="ts" setup>
const route = useRoute();
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('writing').path(route.path).first();
return queryCollection('writing')
.path(route.path.replace('/writing/', ''))
.first();
});
if (!page.value) {
app/pages/writing/index.vue
+5 -5
View File
@@ -27,20 +27,20 @@ const formatDate = (dateString: string) => {
<section>
<div class="section__content">
<template v-if="pages?.length">
<a
<NuxtLink
v-for="page in pages"
:href="page.path"
:to="'/writing/' + page.path"
:key="page.path"
class="article"
>
<h3 class="article__title">{{ page.title }}</h3>
<p class="article__date">
<!-- <p class="article__date">
{{ formatDate(page.date) }}
</p>
</p> -->
<p class="article__description">
{{ page.description }}
</p>
</a>
</NuxtLink>
</template>
<template v-else>
<div class="empty-state">