andrew
/
homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add human banner, format code.

This commit is contained in:
Andrew Lalis 2026-02-18 16:13:09 -05:00
parent 40ac416804
commit 2b6e4755c9
11 changed files with 341 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/src/assets/images/created-by-a-human-with-a-brain-1x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

4
app/src/components/NavLink.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
const route = useRoute() const route = useRoute()
@ -8,7 +8,7 @@ const props = defineProps<{
}>() }>()
const active = computed(() => { const active = computed(() => {
return props.path !== '/' && route.path.startsWith(props.path) || props.path === route.path return (props.path !== '/' && route.path.startsWith(props.path)) || props.path === route.path
}) })
</script> </script>

17
app/src/router/index.ts
View File

@ -28,8 +28,8 @@ const router = createRouter({
path: 'about', path: 'about',
component: AboutView, component: AboutView,
meta: { meta: {
title: "About Andrew (and this site)", title: 'About Andrew (and this site)',
description: "Information about Andrew, and technical information about this website." description: 'Information about Andrew, and technical information about this website.'
} }
}, },
{ {
@ -37,7 +37,7 @@ const router = createRouter({
component: ContactView, component: ContactView,
meta: { meta: {
title: "Andrew's Contact Info", title: "Andrew's Contact Info",
description: "Information for how to get in touch with Andrew." description: 'Information for how to get in touch with Andrew.'
} }
}, },
{ {
@ -45,7 +45,7 @@ const router = createRouter({
component: SoftwareView, component: SoftwareView,
meta: { meta: {
title: "Andrew's Software", title: "Andrew's Software",
description: "A brief collection of software developed by Andrew." description: 'A brief collection of software developed by Andrew.'
} }
}, },
{ {
@ -61,7 +61,7 @@ const router = createRouter({
component: HikingView, component: HikingView,
meta: { meta: {
title: "Andrew's Hiking", title: "Andrew's Hiking",
description: "A logbook of notable summits and hikes Andrew has completed." description: 'A logbook of notable summits and hikes Andrew has completed.'
} }
}, },
{ {
@ -69,7 +69,8 @@ const router = createRouter({
component: LogBookView, component: LogBookView,
meta: { meta: {
title: "Andrew's Logbook", title: "Andrew's Logbook",
description: "Interactive messageboard where people can leave a public note on Andrew's website." description:
"Interactive messageboard where people can leave a public note on Andrew's website."
} }
} }
] ]
@ -94,7 +95,7 @@ const router = createRouter({
router.afterEach((to) => { router.afterEach((to) => {
nextTick(() => { nextTick(() => {
// Set document title if available. // Set document title if available.
if (to.meta.title && typeof(to.meta.title) === 'string') { if (to.meta.title && typeof to.meta.title === 'string') {
document.title = to.meta.title document.title = to.meta.title
} else { } else {
document.title = 'Andrew Lalis' document.title = 'Andrew Lalis'
@ -102,7 +103,7 @@ router.afterEach((to) => {
// Set document description meta tag if available. // Set document description meta tag if available.
const metaTag = document.querySelector("meta[name='description']") as HTMLMetaElement const metaTag = document.querySelector("meta[name='description']") as HTMLMetaElement
if (metaTag) { if (metaTag) {
if (to.meta.description && typeof(to.meta.description) === 'string') { if (to.meta.description && typeof to.meta.description === 'string') {
metaTag.content = to.meta.description metaTag.content = to.meta.description
} else { } else {
metaTag.content = "Andrew's homepage on the internet." metaTag.content = "Andrew's homepage on the internet."

11
app/src/views/AboutView.vue
View File

@ -31,12 +31,11 @@
<h3>About Me</h3> <h3>About Me</h3>
<p> <p>
Like you saw on the homepage, I'm a software engineer, pilot, gardener, Like you saw on the homepage, I'm a software engineer, pilot, gardener, hiker, and lots of
hiker, and lots of other things; once you do enough things, the labels other things; once you do enough things, the labels start to become pointless. I currently
start to become pointless. I currently live in Florida with my partner live in Florida with my partner Grace (who's a teacher, by the way), and our cat Finn. We like
Grace (who's a teacher, by the way), and our cat Finn. We like to spend to spend our time going to Disney, exploring new restaurants, and enjoying modern media
our time going to Disney, exploring new restaurants, and enjoying modern (movies, shows, video games, etc.).
media (movies, shows, video games, etc.).
</p> </p>
</main> </main>
</template> </template>

65
app/src/views/GardenDetails.vue
View File

@ -1,54 +1,55 @@
<script setup lang="ts"> <script setup lang="ts">
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'; import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
import { SPECIES } from '@/garden_data'; import { SPECIES } from '@/garden_data'
const sortedSpecies = [...SPECIES].sort((a, b) => const sortedSpecies = [...SPECIES].sort((a, b) =>
a['Scientific Name'] > b['Scientific Name'] ? 1 : -1 a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
) )
</script> </script>
<template> <template>
<header> <header>
<h1>My Home's Garden</h1> <h1>My Home's Garden</h1>
</header> </header>
<main> <main>
<p> <p>On this page, you'll find a list of all plants currently (or formerly) in my garden.</p>
On this page, you'll find a list of all plants currently (or formerly) <p>
in my garden. I keep a spreadsheet of all the species in my garden (or that have been present in the past).
</p> In total, my garden currently has <strong>52 unique species</strong>, with
<p> <strong>37 native species</strong>.
I keep a spreadsheet of all the species in my garden (or that have been present in the past). </p>
In total, my garden currently has <strong>52 unique species</strong>, with <p>
<strong>37 native species</strong>. <a href="/gardening" class="link-local">Back to gardening</a>
</p> </p>
<p>
<a href="/gardening" class="link-local">Back to gardening</a>
</p>
<div class="garden-cards-container"> <div class="garden-cards-container">
<GardenSpeciesCard v-for="species in sortedSpecies" :key="species['Scientific Name']" :species="species" <GardenSpeciesCard
style="width: 300px;" /> v-for="species in sortedSpecies"
</div> :key="species['Scientific Name']"
</main> :species="species"
style="width: 300px"
/>
</div>
</main>
</template> </template>
<style scoped> <style scoped>
h1 { h1 {
text-align: center; text-align: center;
} }
p { p {
max-width: 50ch; max-width: 50ch;
margin: 1rem auto; margin: 1rem auto;
} }
.garden-cards-container { .garden-cards-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
} }
/* No margins for the cards when in flex mode. */ /* No margins for the cards when in flex mode. */
.garden-species-card { .garden-species-card {
margin: 0; margin: 0;
} }
</style> </style>

210
app/src/views/GardenHerbsView.vue
View File

@ -1,129 +1,121 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<template> <template>
<header> <header>
<h1>My Herb Garden</h1> <h1>My Herb Garden</h1>
<nav> <nav>
<RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink> <RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink>
</nav> </nav>
</header> </header>
<main> <main>
<p> <p>
Towards the end of the western portion of the garden, I've set up a Towards the end of the western portion of the garden, I've set up a small patch of common
small patch of common kitchen herbs so that we don't have to buy kitchen herbs so that we don't have to buy overpriced stuff from grocery stores.
overpriced stuff from grocery stores. </p>
</p> <p>
<p> As you can see, there's more here than we can use ourselves, so if you're in the area and
As you can see, there's more here than we can use ourselves, so if would like some, feel free to get your scissors and take a bit for whatever you're cooking.
you're in the area and would like some, feel free to get your All I ask is that you please
scissors and take a bit for whatever you're cooking. All I ask is <strong
that you please <strong>only take what you need, and refrain from >only take what you need, and refrain from pruning anything that looks like it's not very
pruning anything that looks like it's not very abundant</strong>. abundant</strong
With your respectful cooperation, I can easily maintain these herbs >. With your respectful cooperation, I can easily maintain these herbs for many people to use.
for many people to use. </p>
</p> <div class="status-note">
<div class="status-note"> <p>
<p> Note: At this time, I'm still trying to get the following herbs established, so please don't
Note: At this time, I'm still trying to get the following herbs take any of these:
established, so please don't take any of these: </p>
</p> <ul>
<ul> <li>Mojito Mint</li>
<li>Mojito Mint</li> <li>Peppermint</li>
<li>Peppermint</li> <li>Chocolate Mint</li>
<li>Chocolate Mint</li> <li>Chamomile</li>
<li>Chamomile</li> <li>Basil</li>
<li>Basil</li> </ul>
</ul> <p>I also just pruned the Oregano, so please don't take too much of that.</p>
<p> </div>
I also just pruned the Oregano, so please don't take too much <p>
of that. The image below provides a quick reference guide on which herbs are which, but if you have any
</p> other questions,
</div> <RouterLink to="/contact" class="link-local">feel free to ask.</RouterLink>
<p> </p>
The image below provides a quick reference guide on which herbs are <img src="@/assets/images/herb-guide.jpg" />
which, but if you have any other questions,
<RouterLink to="/contact" class="link-local">feel free to ask.</RouterLink>
</p>
<img src="@/assets/images/herb-guide.jpg"/>
<section> <section>
<h2>Basic Herb Usage Guide</h2> <h2>Basic Herb Usage Guide</h2>
<p> <p>
Since it might be helpful, here's a brief guide on where you Since it might be helpful, here's a brief guide on where you might want to use the herbs
might want to use the herbs growing in the garden: growing in the garden:
</p> </p>
<ul> <ul>
<li> <li>
<strong><u>Mint and Chamomile</u></strong> can be used in various <strong><u>Mint and Chamomile</u></strong> can be used in various cocktails, or sparingly
cocktails, or sparingly in baked goods, or added to tea. in baked goods, or added to tea.
</li> </li>
<li> <li>
<strong><u>Chives</u></strong> add a splash of green, and a fresh <strong><u>Chives</u></strong> add a splash of green, and a fresh allium flavor, and can
allium flavor, and can be chopped finely to garnish pretty be chopped finely to garnish pretty much any dish, especially things like stews, potatoes,
much any dish, especially things like stews, potatoes, or or meats.
meats. </li>
</li> <li>
<li> <strong><u>Oregano</u></strong> is a great all-purpose herb that you can add to pizzas,
<strong><u>Oregano</u></strong> is a great all-purpose herb that sauces, and basically any Italian, Mexican, or Mediterranean dish.
you can add to pizzas, sauces, and basically any Italian, </li>
Mexican, or Mediterranean dish. <li>
</li> <strong><u>Rosemary</u></strong> has a strong, evergreen flavor that pairs well with beef
<li> dishes and slow-cooked stews and soups.
<strong><u>Rosemary</u></strong> has a strong, evergreen flavor </li>
that pairs well with beef dishes and slow-cooked stews <li>
and soups. <strong><u>Thyme</u></strong
</li> >, like rosemary, is quite universal in its applications, but works especially well on
<li> chicken, lamb, and other lighter meats, or when infused in oil for salad dressings.
<strong><u>Thyme</u></strong>, like rosemary, is quite universal </li>
in its applications, but works especially well on chicken, <li>
lamb, and other lighter meats, or when infused in oil for <strong><u>Basil</u></strong
salad dressings. >, with its distinct, almost spicy aroma, can be added directly to salads or chopped up
</li> and thrown into a tomato sauce or onto a pizza.
<li> </li>
<strong><u>Basil</u></strong>, with its distinct, almost spicy </ul>
aroma, can be added directly to salads or chopped up and </section>
thrown into a tomato sauce or onto a pizza. </main>
</li>
</ul>
</section>
</main>
</template> </template>
<style scoped> <style scoped>
h1,h2 { h1,
text-align: center; h2 {
text-align: center;
} }
nav { nav {
max-width: 50ch; max-width: 50ch;
margin: 1rem auto; margin: 1rem auto;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
p { p {
max-width: 50ch; max-width: 50ch;
margin: 1rem auto; margin: 1rem auto;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
ul { ul {
max-width: 50ch; max-width: 50ch;
margin: 1rem auto; margin: 1rem auto;
padding: 0 0.5rem; padding: 0 0.5rem;
padding-left: 2rem; padding-left: 2rem;
} }
img { img {
margin: 1rem auto; margin: 1rem auto;
max-width: calc(min(95%, 80ch)); max-width: calc(min(95%, 80ch));
display: block; display: block;
} }
.status-note { .status-note {
margin: 1rem auto; margin: 1rem auto;
font-weight: bold; font-weight: bold;
background-color: var(--background-color-2); background-color: var(--background-color-2);
border-radius: 0.5rem; border-radius: 0.5rem;
border: 0.25rem solid var(--code-color); border: 0.25rem solid var(--code-color);
max-width: 50ch; max-width: 50ch;
} }
</style> </style>

16
app/src/views/GardeningView.vue
View File

@ -1,18 +1,20 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<template> <template>
<main> <main>
<p> <p>
I'd like to call myself an avid gardener, with a particular interest in creating native-friendly garden habitats. I'd like to call myself an avid gardener, with a particular interest in creating
native-friendly garden habitats.
</p> </p>
<p> <p>
I work on my own garden that I share with my partner, and I like to help out with others' too. So if you're I work on my own garden that I share with my partner, and I like to help out with others' too.
thinking about killing your lawn and providing a space for non-invasive and native species to thrive, So if you're thinking about killing your lawn and providing a space for non-invasive and
I'd be happy to help! native species to thrive, I'd be happy to help!
</p> </p>
<p> <p>
<a href="/gardening/herbs" class="link-local">Click here to view a guide to my garden's herb patch.</a> <a href="/gardening/herbs" class="link-local"
>Click here to view a guide to my garden's herb patch.</a
>
</p> </p>
</main> </main>
</template> </template>

238
app/src/views/HikingView.vue
View File

@ -1,145 +1,149 @@
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<template> <template>
<main> <main>
<p> <p>
Once in a while, I'll go out hiking, so here's a record of all the Once in a while, I'll go out hiking, so here's a record of all the mountains I've sumitted.
mountains I've sumitted. </p>
</p> <div class="hiking-entry">
<div class="hiking-entry"> <header>
<header> <h3>Turkey Mountain</h3>
<h3>Turkey Mountain</h3> <time datetime="2025-07-16">July 16th, 2025</time>
<time datetime="2025-07-16">July 16th, 2025</time> </header>
</header> <p>
<p> A 7-mile out-and-back run / hike which started at the Spirit River casino in Tulsa,
A 7-mile out-and-back run / hike which started at the Spirit Oklahoma, and crossed the Arkansas River and climbed 300 feet to the lookout point on Turkey
River casino in Tulsa, Oklahoma, and crossed the Arkansas River Mountain.
and climbed 300 feet to the lookout point on Turkey Mountain. </p>
</p> <div class="hiking-entry-attributes">
<div class="hiking-entry-attributes"> <span class="elevation">912 ft.</span>
<span class="elevation">912 ft.</span> <a href="https://www.strava.com/activities/15133078684" class="strava-link" target="_blank"
<a href="https://www.strava.com/activities/15133078684" class="strava-link" target="_blank">Strava</a> >Strava</a
</div> >
</div> </div>
<div class="hiking-entry"> </div>
<header> <div class="hiking-entry">
<h3>Larch Mountain</h3> <header>
<time datetime="2025-05-25">May 25th, 2025</time> <h3>Larch Mountain</h3>
</header> <time datetime="2025-05-25">May 25th, 2025</time>
<p> </header>
Starting at Wakeena Falls, we first hiked over to Multnomah <p>
Falls, then up into the Mt. Hood Wilderness on the Larch Starting at Wakeena Falls, we first hiked over to Multnomah Falls, then up into the Mt. Hood
Mountain Trail. It was a very long hike, taking just about 8 Wilderness on the Larch Mountain Trail. It was a very long hike, taking just about 8 hours
hours to complete the entire 16-mile distance. to complete the entire 16-mile distance.
</p> </p>
<div class="hiking-entry-attributes"> <div class="hiking-entry-attributes">
<span class="elevation">4,056 ft.</span> <span class="elevation">4,056 ft.</span>
<a href="https://www.strava.com/activities/14595451892" class="strava-link" target="_blank">Strava</a> <a href="https://www.strava.com/activities/14595451892" class="strava-link" target="_blank"
<a href="https://youtu.be/9A5dGchdbeM" class="youtube-link" target="_blank">YouTube</a> >Strava</a
</div> >
</div> <a href="https://youtu.be/9A5dGchdbeM" class="youtube-link" target="_blank">YouTube</a>
<div class="hiking-entry"> </div>
<header> </div>
<h3>Elk Mountain</h3> <div class="hiking-entry">
<time datetime="2025-04-12">April 12th, 2025</time> <header>
</header> <h3>Elk Mountain</h3>
<p> <time datetime="2025-04-12">April 12th, 2025</time>
After sumitting King's Mountain, we headed back down for a much </header>
more technical climb to Elk Mountain, involving sketchy trails <p>
with steep drop-offs, and a lot of scrambling over rocks. After sumitting King's Mountain, we headed back down for a much more technical climb to Elk
</p> Mountain, involving sketchy trails with steep drop-offs, and a lot of scrambling over rocks.
<div class="hiking-entry-attributes"> </p>
<span class="elevation">2,788 ft.</span> <div class="hiking-entry-attributes">
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a> <span class="elevation">2,788 ft.</span>
</div> <a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank"
</div> >Strava</a
<div class="hiking-entry"> >
<header> </div>
<h3>King's Mountain</h3> </div>
<time datetime="2025-04-12">April 12th, 2025</time> <div class="hiking-entry">
</header> <header>
<p> <h3>King's Mountain</h3>
Summitted as the first part of the King's Mountain / Elk <time datetime="2025-04-12">April 12th, 2025</time>
Mountain 10-mile loop. This one wasn't technical, but just </header>
a very long, brutal uphill climb. <p>
</p> Summitted as the first part of the King's Mountain / Elk Mountain 10-mile loop. This one
<div class="hiking-entry-attributes"> wasn't technical, but just a very long, brutal uphill climb.
<span class="elevation">3,226 ft.</span> </p>
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a> <div class="hiking-entry-attributes">
</div> <span class="elevation">3,226 ft.</span>
</div> <a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank"
<div class="hiking-entry"> >Strava</a
<header> >
<h3>Angel's Rest</h3> </div>
<time datetime="2024-09-21">September 21st, 2024</time> </div>
</header> <div class="hiking-entry">
<p> <header>
My first actual "mountain" summit, when I visted Oregon in the <h3>Angel's Rest</h3>
fall of 2024. It was a great hike, but since I had never <time datetime="2024-09-21">September 21st, 2024</time>
climbed any mountains before, it was exhausting. </header>
</p> <p>
<div class="hiking-entry-attributes"> My first actual "mountain" summit, when I visted Oregon in the fall of 2024. It was a great
<span class="elevation">1,475 ft.</span> hike, but since I had never climbed any mountains before, it was exhausting.
<a href="https://www.strava.com/activities/12471616389" class="strava-link" target="_blank">Strava</a> </p>
</div> <div class="hiking-entry-attributes">
</div> <span class="elevation">1,475 ft.</span>
</main> <a href="https://www.strava.com/activities/12471616389" class="strava-link" target="_blank"
>Strava</a
>
</div>
</div>
</main>
</template> </template>
<style scoped> <style scoped>
.hiking-entry { .hiking-entry {
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: var(--background-color-2); background-color: var(--background-color-2);
border-radius: 1rem; border-radius: 1rem;
padding: 1rem; padding: 1rem;
} }
.hiking-entry header { .hiking-entry header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: top; align-items: top;
} }
.hiking-entry h3 { .hiking-entry h3 {
margin: 0; margin: 0;
} }
.hiking-entry time { .hiking-entry time {
display: block; display: block;
font-size: small; font-size: small;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.hiking-entry p { .hiking-entry p {
font-size: smaller; font-size: smaller;
text-align: left; text-align: left;
margin: 0.5rem 0 0.5rem 0; margin: 0.5rem 0 0.5rem 0;
} }
.hiking-entry-attributes { .hiking-entry-attributes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
} }
.hiking-entry-attributes>* { .hiking-entry-attributes > * {
background-color: var(--background-color); background-color: var(--background-color);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: small; font-size: small;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.strava-link { .strava-link {
color: #fc5200; color: #fc5200;
text-decoration: none; text-decoration: none;
} }
.strava-link:hover { .strava-link:hover {
text-decoration: underline; text-decoration: underline;
} }
.youtube-link { .youtube-link {
color: #ff0033; color: #ff0033;
text-decoration: none; text-decoration: none;
} }
.youtube-link:hover { .youtube-link:hover {
text-decoration: underline; text-decoration: underline;
} }
.elevation { .elevation {
font-weight: bold; font-weight: bold;
color: var(--success-color); color: var(--success-color);
} }
</style> </style>

8
app/src/views/HomeView.vue
View File

@ -3,11 +3,9 @@
<template> <template>
<main> <main>
<p> <p>
My name's Andrew, and I'm a software engineer, pilot, gardener, runner, home cook, and probably many My name's Andrew, and I'm a software engineer, pilot, gardener, runner, home cook, and
other things too, depending on who you ask. Welcome to my website! probably many other things too, depending on who you ask. Welcome to my website!
</p>
<p>
Click one of the links to check out something more interesting.
</p> </p>
<p>Click one of the links to check out something more interesting.</p>
</main> </main>
</template> </template>

105
app/src/views/MainSite.vue
View File

@ -7,69 +7,74 @@ See src/router/index.ts to see the nested set of routes that use this component.
--> -->
<script setup lang="ts"> <script setup lang="ts">
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import NavLink from '@/components/NavLink.vue'; import NavLink from '@/components/NavLink.vue'
</script> </script>
<template> <template>
<div class="bisection-container"> <div class="bisection-container">
<header class="page-bisection"> <header class="page-bisection">
<h1 class="site-header-text">Andrew Lalis</h1> <h1 class="site-header-text">Andrew Lalis</h1>
<nav> <nav>
<NavLink path="/">Home</NavLink> <NavLink path="/">Home</NavLink>
<NavLink path="/about">About</NavLink> <NavLink path="/about">About</NavLink>
<NavLink path="/software">Software</NavLink> <NavLink path="/software">Software</NavLink>
<NavLink path="/gardening">Gardening</NavLink> <NavLink path="/gardening">Gardening</NavLink>
<NavLink path="/hiking">Hiking</NavLink> <NavLink path="/hiking">Hiking</NavLink>
<NavLink path="/logbook">Logbook</NavLink> <NavLink path="/logbook">Logbook</NavLink>
<NavLink path="/contact">Contact</NavLink> <NavLink path="/contact">Contact</NavLink>
</nav> <div id="badges" style="text-align: right; margin: 1rem 0">
</header> <a href="https://cadence.moe/blog/2024-10-05-created-by-a-human-badges">
<img src="@/assets/images/created-by-a-human-with-a-brain-1x.png" />
</a>
</div>
</nav>
</header>
<RouterView v-slot="{ Component }"> <RouterView v-slot="{ Component }">
<Transition name="page"> <Transition name="page">
<Component :is="Component" class="page-bisection content-page" /> <Component :is="Component" class="page-bisection content-page" />
</Transition> </Transition>
</RouterView> </RouterView>
</div> </div>
</template> </template>
<style> <style>
.bisection-container { .bisection-container {
text-align: center; text-align: center;
} }
.page-bisection { .page-bisection {
width: 50ch; width: 50ch;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.content-page { .content-page {
text-align: left; text-align: left;
margin-top: 1rem; margin-top: 1rem;
} }
.site-header-text { .site-header-text {
font-family: Sacramento; font-family: Sacramento;
container-type: inline-size; container-type: inline-size;
font-size: calc(min(60px, max(5cqw, 42px))); font-size: calc(min(60px, max(5cqw, 42px)));
text-align: right; text-align: right;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0; margin-bottom: 0;
/* Gradient text color for the header. */ /* Gradient text color for the header. */
background-image: linear-gradient(90deg, var(--text-color), var(--code-color)); background-image: linear-gradient(90deg, var(--text-color), var(--code-color));
color: transparent; color: transparent;
background-clip: text; background-clip: text;
} }
.page-enter-active { .page-enter-active {
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.page-enter-from { .page-enter-from {
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }
/* /*
@ -77,21 +82,21 @@ Activates once the left and right half of the page stack due to width constraint
We remove a lot of the vertical spacing to make things fit better. We remove a lot of the vertical spacing to make things fit better.
*/ */
@media (width < calc(100ch - 2.5rem)) { @media (width < calc(100ch - 2.5rem)) {
.site-header-text { .site-header-text {
margin-top: 0; margin-top: 0;
} }
.content-page { .content-page {
margin-top: 0; margin-top: 0;
} }
} }
/* /*
Once the device width is smaller than one of the halves, sync the page half to the device width. Once the device width is smaller than one of the halves, sync the page half to the device width.
*/ */
@media (width < 50ch) { @media (width < 50ch) {
.page-bisection { .page-bisection {
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }
} }
</style> </style>

7
app/src/views/SoftwareView.vue
View File

@ -23,10 +23,9 @@ import SoftwareProjectTile from '@/components/SoftwareProjectTile.vue'
:tags="['Dlang', 'Vue', 'Typescript', 'Finance']" :tags="['Dlang', 'Vue', 'Typescript', 'Finance']"
> >
<p> <p>
An evolution of my previous desktop app <em>Perfin</em>, this is a An evolution of my previous desktop app <em>Perfin</em>, this is a web application that
web application that provides a more universal platform for personal provides a more universal platform for personal finance management, with responsive views
finance management, with responsive views and more comprehensive and more comprehensive tools for searching, along with so many other improvements over the
tools for searching, along with so many other improvements over the
first iteration. first iteration.
</p> </p>
</SoftwareProjectTile> </SoftwareProjectTile>