Add human banner, format code.
This commit is contained in:
parent
40ac416804
commit
2b6e4755c9
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
|
|
@ -8,7 +8,7 @@ const props = defineProps<{
|
|||
}>()
|
||||
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ const router = createRouter({
|
|||
path: 'about',
|
||||
component: AboutView,
|
||||
meta: {
|
||||
title: "About Andrew (and this site)",
|
||||
description: "Information about Andrew, and technical information about this website."
|
||||
title: 'About Andrew (and this site)',
|
||||
description: 'Information about Andrew, and technical information about this website.'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -37,7 +37,7 @@ const router = createRouter({
|
|||
component: ContactView,
|
||||
meta: {
|
||||
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,
|
||||
meta: {
|
||||
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,
|
||||
meta: {
|
||||
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,
|
||||
meta: {
|
||||
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) => {
|
||||
nextTick(() => {
|
||||
// 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
|
||||
} else {
|
||||
document.title = 'Andrew Lalis'
|
||||
|
|
@ -102,7 +103,7 @@ router.afterEach((to) => {
|
|||
// Set document description meta tag if available.
|
||||
const metaTag = document.querySelector("meta[name='description']") as HTMLMetaElement
|
||||
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
|
||||
} else {
|
||||
metaTag.content = "Andrew's homepage on the internet."
|
||||
|
|
|
|||
|
|
@ -31,12 +31,11 @@
|
|||
|
||||
<h3>About Me</h3>
|
||||
<p>
|
||||
Like you saw on the homepage, I'm a software engineer, pilot, gardener,
|
||||
hiker, and lots of other things; once you do enough things, the labels
|
||||
start to become pointless. I currently live in Florida with my partner
|
||||
Grace (who's a teacher, by the way), and our cat Finn. We like to spend
|
||||
our time going to Disney, exploring new restaurants, and enjoying modern
|
||||
media (movies, shows, video games, etc.).
|
||||
Like you saw on the homepage, I'm a software engineer, pilot, gardener, hiker, and lots of
|
||||
other things; once you do enough things, the labels start to become pointless. I currently
|
||||
live in Florida with my partner Grace (who's a teacher, by the way), and our cat Finn. We like
|
||||
to spend our time going to Disney, exploring new restaurants, and enjoying modern media
|
||||
(movies, shows, video games, etc.).
|
||||
</p>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,55 @@
|
|||
<script setup lang="ts">
|
||||
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue';
|
||||
import { SPECIES } from '@/garden_data';
|
||||
import GardenSpeciesCard from '@/components/GardenSpeciesCard.vue'
|
||||
import { SPECIES } from '@/garden_data'
|
||||
|
||||
const sortedSpecies = [...SPECIES].sort((a, b) =>
|
||||
a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
|
||||
a['Scientific Name'] > b['Scientific Name'] ? 1 : -1
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<header>
|
||||
<h1>My Home's Garden</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>
|
||||
On this page, you'll find a list of all plants currently (or formerly)
|
||||
in my garden.
|
||||
</p>
|
||||
<p>
|
||||
I keep a spreadsheet of all the species in my garden (or that have been present in the past).
|
||||
In total, my garden currently has <strong>52 unique species</strong>, with
|
||||
<strong>37 native species</strong>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/gardening" class="link-local">Back to gardening</a>
|
||||
</p>
|
||||
<header>
|
||||
<h1>My Home's Garden</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>On this page, you'll find a list of all plants currently (or formerly) in my garden.</p>
|
||||
<p>
|
||||
I keep a spreadsheet of all the species in my garden (or that have been present in the past).
|
||||
In total, my garden currently has <strong>52 unique species</strong>, with
|
||||
<strong>37 native species</strong>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/gardening" class="link-local">Back to gardening</a>
|
||||
</p>
|
||||
|
||||
<div class="garden-cards-container">
|
||||
<GardenSpeciesCard v-for="species in sortedSpecies" :key="species['Scientific Name']" :species="species"
|
||||
style="width: 300px;" />
|
||||
</div>
|
||||
</main>
|
||||
<div class="garden-cards-container">
|
||||
<GardenSpeciesCard
|
||||
v-for="species in sortedSpecies"
|
||||
:key="species['Scientific Name']"
|
||||
:species="species"
|
||||
style="width: 300px"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
h1 {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
}
|
||||
|
||||
.garden-cards-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* No margins for the cards when in flex mode. */
|
||||
.garden-species-card {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,129 +1,121 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<header>
|
||||
<h1>My Herb Garden</h1>
|
||||
<nav>
|
||||
<RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<p>
|
||||
Towards the end of the western portion of the garden, I've set up a
|
||||
small patch of common kitchen herbs so that we don't have to buy
|
||||
overpriced stuff from grocery stores.
|
||||
</p>
|
||||
<p>
|
||||
As you can see, there's more here than we can use ourselves, so if
|
||||
you're in the area and would like some, feel free to get your
|
||||
scissors and take a bit for whatever you're cooking. All I ask is
|
||||
that you please <strong>only take what you need, and refrain from
|
||||
pruning anything that looks like it's not very abundant</strong>.
|
||||
With your respectful cooperation, I can easily maintain these herbs
|
||||
for many people to use.
|
||||
</p>
|
||||
<div class="status-note">
|
||||
<p>
|
||||
Note: At this time, I'm still trying to get the following herbs
|
||||
established, so please don't take any of these:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Mojito Mint</li>
|
||||
<li>Peppermint</li>
|
||||
<li>Chocolate Mint</li>
|
||||
<li>Chamomile</li>
|
||||
<li>Basil</li>
|
||||
</ul>
|
||||
<p>
|
||||
I also just pruned the Oregano, so please don't take too much
|
||||
of that.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
The image below provides a quick reference guide on which herbs are
|
||||
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"/>
|
||||
<header>
|
||||
<h1>My Herb Garden</h1>
|
||||
<nav>
|
||||
<RouterLink to="/gardening" class="link-local">Back to my gardening page</RouterLink>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<p>
|
||||
Towards the end of the western portion of the garden, I've set up a small patch of common
|
||||
kitchen herbs so that we don't have to buy overpriced stuff from grocery stores.
|
||||
</p>
|
||||
<p>
|
||||
As you can see, there's more here than we can use ourselves, so if you're in the area and
|
||||
would like some, feel free to get your scissors and take a bit for whatever you're cooking.
|
||||
All I ask is that you please
|
||||
<strong
|
||||
>only take what you need, and refrain from pruning anything that looks like it's not very
|
||||
abundant</strong
|
||||
>. With your respectful cooperation, I can easily maintain these herbs for many people to use.
|
||||
</p>
|
||||
<div class="status-note">
|
||||
<p>
|
||||
Note: At this time, I'm still trying to get the following herbs established, so please don't
|
||||
take any of these:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Mojito Mint</li>
|
||||
<li>Peppermint</li>
|
||||
<li>Chocolate Mint</li>
|
||||
<li>Chamomile</li>
|
||||
<li>Basil</li>
|
||||
</ul>
|
||||
<p>I also just pruned the Oregano, so please don't take too much of that.</p>
|
||||
</div>
|
||||
<p>
|
||||
The image below provides a quick reference guide on which herbs are 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>
|
||||
<h2>Basic Herb Usage Guide</h2>
|
||||
<p>
|
||||
Since it might be helpful, here's a brief guide on where you
|
||||
might want to use the herbs growing in the garden:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong><u>Mint and Chamomile</u></strong> can be used in various
|
||||
cocktails, or sparingly in baked goods, or added to tea.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Chives</u></strong> add a splash of green, and a fresh
|
||||
allium flavor, and can be chopped finely to garnish pretty
|
||||
much any dish, especially things like stews, potatoes, or
|
||||
meats.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Oregano</u></strong> is a great all-purpose herb that
|
||||
you can add to pizzas, sauces, and basically any Italian,
|
||||
Mexican, or Mediterranean dish.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Rosemary</u></strong> has a strong, evergreen flavor
|
||||
that pairs well with beef dishes and slow-cooked stews
|
||||
and soups.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Thyme</u></strong>, like rosemary, is quite universal
|
||||
in its applications, but works especially well on chicken,
|
||||
lamb, and other lighter meats, or when infused in oil for
|
||||
salad dressings.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Basil</u></strong>, with its distinct, almost spicy
|
||||
aroma, can be added directly to salads or chopped up and
|
||||
thrown into a tomato sauce or onto a pizza.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
<section>
|
||||
<h2>Basic Herb Usage Guide</h2>
|
||||
<p>
|
||||
Since it might be helpful, here's a brief guide on where you might want to use the herbs
|
||||
growing in the garden:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong><u>Mint and Chamomile</u></strong> can be used in various cocktails, or sparingly
|
||||
in baked goods, or added to tea.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Chives</u></strong> add a splash of green, and a fresh allium flavor, and can
|
||||
be chopped finely to garnish pretty much any dish, especially things like stews, potatoes,
|
||||
or meats.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Oregano</u></strong> is a great all-purpose herb that you can add to pizzas,
|
||||
sauces, and basically any Italian, Mexican, or Mediterranean dish.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Rosemary</u></strong> has a strong, evergreen flavor that pairs well with beef
|
||||
dishes and slow-cooked stews and soups.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Thyme</u></strong
|
||||
>, like rosemary, is quite universal in its applications, but works especially well on
|
||||
chicken, lamb, and other lighter meats, or when infused in oil for salad dressings.
|
||||
</li>
|
||||
<li>
|
||||
<strong><u>Basil</u></strong
|
||||
>, with its distinct, almost spicy aroma, can be added directly to salads or chopped up
|
||||
and thrown into a tomato sauce or onto a pizza.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
h1,h2 {
|
||||
text-align: center;
|
||||
h1,
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 2rem;
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 1rem auto;
|
||||
max-width: calc(min(95%, 80ch));
|
||||
display: block;
|
||||
margin: 1rem auto;
|
||||
max-width: calc(min(95%, 80ch));
|
||||
display: block;
|
||||
}
|
||||
|
||||
.status-note {
|
||||
margin: 1rem auto;
|
||||
font-weight: bold;
|
||||
background-color: var(--background-color-2);
|
||||
border-radius: 0.5rem;
|
||||
border: 0.25rem solid var(--code-color);
|
||||
max-width: 50ch;
|
||||
margin: 1rem auto;
|
||||
font-weight: bold;
|
||||
background-color: var(--background-color-2);
|
||||
border-radius: 0.5rem;
|
||||
border: 0.25rem solid var(--code-color);
|
||||
max-width: 50ch;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<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>
|
||||
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
|
||||
thinking about killing your lawn and providing a space for non-invasive and native species to thrive,
|
||||
I'd be happy to help!
|
||||
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 thinking about killing your lawn and providing a space for non-invasive and
|
||||
native species to thrive, I'd be happy to help!
|
||||
</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>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,145 +1,149 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<p>
|
||||
Once in a while, I'll go out hiking, so here's a record of all the
|
||||
mountains I've sumitted.
|
||||
</p>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Turkey Mountain</h3>
|
||||
<time datetime="2025-07-16">July 16th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
A 7-mile out-and-back run / hike which started at the Spirit
|
||||
River casino in Tulsa, Oklahoma, and crossed the Arkansas River
|
||||
and climbed 300 feet to the lookout point on Turkey Mountain.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">912 ft.</span>
|
||||
<a href="https://www.strava.com/activities/15133078684" class="strava-link" target="_blank">Strava</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Larch Mountain</h3>
|
||||
<time datetime="2025-05-25">May 25th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
Starting at Wakeena Falls, we first hiked over to Multnomah
|
||||
Falls, then up into the Mt. Hood Wilderness on the Larch
|
||||
Mountain Trail. It was a very long hike, taking just about 8
|
||||
hours to complete the entire 16-mile distance.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<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://youtu.be/9A5dGchdbeM" class="youtube-link" target="_blank">YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Elk Mountain</h3>
|
||||
<time datetime="2025-04-12">April 12th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
After sumitting King's Mountain, we headed back down for a much
|
||||
more technical climb to Elk Mountain, involving sketchy trails
|
||||
with steep drop-offs, and a lot of scrambling over rocks.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">2,788 ft.</span>
|
||||
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>King's Mountain</h3>
|
||||
<time datetime="2025-04-12">April 12th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
Summitted as the first part of the King's Mountain / Elk
|
||||
Mountain 10-mile loop. This one wasn't technical, but just
|
||||
a very long, brutal uphill climb.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">3,226 ft.</span>
|
||||
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank">Strava</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Angel's Rest</h3>
|
||||
<time datetime="2024-09-21">September 21st, 2024</time>
|
||||
</header>
|
||||
<p>
|
||||
My first actual "mountain" summit, when I visted Oregon in the
|
||||
fall of 2024. It was a great hike, but since I had never
|
||||
climbed any mountains before, it was exhausting.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">1,475 ft.</span>
|
||||
<a href="https://www.strava.com/activities/12471616389" class="strava-link" target="_blank">Strava</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<main>
|
||||
<p>
|
||||
Once in a while, I'll go out hiking, so here's a record of all the mountains I've sumitted.
|
||||
</p>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Turkey Mountain</h3>
|
||||
<time datetime="2025-07-16">July 16th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
A 7-mile out-and-back run / hike which started at the Spirit River casino in Tulsa,
|
||||
Oklahoma, and crossed the Arkansas River and climbed 300 feet to the lookout point on Turkey
|
||||
Mountain.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">912 ft.</span>
|
||||
<a href="https://www.strava.com/activities/15133078684" class="strava-link" target="_blank"
|
||||
>Strava</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Larch Mountain</h3>
|
||||
<time datetime="2025-05-25">May 25th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
Starting at Wakeena Falls, we first hiked over to Multnomah Falls, then up into the Mt. Hood
|
||||
Wilderness on the Larch Mountain Trail. It was a very long hike, taking just about 8 hours
|
||||
to complete the entire 16-mile distance.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<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://youtu.be/9A5dGchdbeM" class="youtube-link" target="_blank">YouTube</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Elk Mountain</h3>
|
||||
<time datetime="2025-04-12">April 12th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
After sumitting King's Mountain, we headed back down for a much more technical climb to Elk
|
||||
Mountain, involving sketchy trails with steep drop-offs, and a lot of scrambling over rocks.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">2,788 ft.</span>
|
||||
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank"
|
||||
>Strava</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>King's Mountain</h3>
|
||||
<time datetime="2025-04-12">April 12th, 2025</time>
|
||||
</header>
|
||||
<p>
|
||||
Summitted as the first part of the King's Mountain / Elk Mountain 10-mile loop. This one
|
||||
wasn't technical, but just a very long, brutal uphill climb.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">3,226 ft.</span>
|
||||
<a href="https://www.strava.com/activities/14160565820" class="strava-link" target="_blank"
|
||||
>Strava</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hiking-entry">
|
||||
<header>
|
||||
<h3>Angel's Rest</h3>
|
||||
<time datetime="2024-09-21">September 21st, 2024</time>
|
||||
</header>
|
||||
<p>
|
||||
My first actual "mountain" summit, when I visted Oregon in the fall of 2024. It was a great
|
||||
hike, but since I had never climbed any mountains before, it was exhausting.
|
||||
</p>
|
||||
<div class="hiking-entry-attributes">
|
||||
<span class="elevation">1,475 ft.</span>
|
||||
<a href="https://www.strava.com/activities/12471616389" class="strava-link" target="_blank"
|
||||
>Strava</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
.hiking-entry {
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--background-color-2);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--background-color-2);
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.hiking-entry header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: top;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: top;
|
||||
}
|
||||
.hiking-entry h3 {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.hiking-entry time {
|
||||
display: block;
|
||||
font-size: small;
|
||||
margin-bottom: 0.25rem;
|
||||
display: block;
|
||||
font-size: small;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.hiking-entry p {
|
||||
font-size: smaller;
|
||||
text-align: left;
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
font-size: smaller;
|
||||
text-align: left;
|
||||
margin: 0.5rem 0 0.5rem 0;
|
||||
}
|
||||
.hiking-entry-attributes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.hiking-entry-attributes>* {
|
||||
background-color: var(--background-color);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
.hiking-entry-attributes > * {
|
||||
background-color: var(--background-color);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.strava-link {
|
||||
color: #fc5200;
|
||||
text-decoration: none;
|
||||
color: #fc5200;
|
||||
text-decoration: none;
|
||||
}
|
||||
.strava-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.youtube-link {
|
||||
color: #ff0033;
|
||||
text-decoration: none;
|
||||
color: #ff0033;
|
||||
text-decoration: none;
|
||||
}
|
||||
.youtube-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.elevation {
|
||||
font-weight: bold;
|
||||
color: var(--success-color);
|
||||
font-weight: bold;
|
||||
color: var(--success-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
<template>
|
||||
<main>
|
||||
<p>
|
||||
My name's Andrew, and I'm a software engineer, pilot, gardener, runner, home cook, and 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.
|
||||
My name's Andrew, and I'm a software engineer, pilot, gardener, runner, home cook, and
|
||||
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>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,69 +7,74 @@ See src/router/index.ts to see the nested set of routes that use this component.
|
|||
-->
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import NavLink from '@/components/NavLink.vue';
|
||||
import NavLink from '@/components/NavLink.vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="bisection-container">
|
||||
<header class="page-bisection">
|
||||
<h1 class="site-header-text">Andrew Lalis</h1>
|
||||
<nav>
|
||||
<NavLink path="/">Home</NavLink>
|
||||
<NavLink path="/about">About</NavLink>
|
||||
<NavLink path="/software">Software</NavLink>
|
||||
<NavLink path="/gardening">Gardening</NavLink>
|
||||
<NavLink path="/hiking">Hiking</NavLink>
|
||||
<NavLink path="/logbook">Logbook</NavLink>
|
||||
<NavLink path="/contact">Contact</NavLink>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="bisection-container">
|
||||
<header class="page-bisection">
|
||||
<h1 class="site-header-text">Andrew Lalis</h1>
|
||||
<nav>
|
||||
<NavLink path="/">Home</NavLink>
|
||||
<NavLink path="/about">About</NavLink>
|
||||
<NavLink path="/software">Software</NavLink>
|
||||
<NavLink path="/gardening">Gardening</NavLink>
|
||||
<NavLink path="/hiking">Hiking</NavLink>
|
||||
<NavLink path="/logbook">Logbook</NavLink>
|
||||
<NavLink path="/contact">Contact</NavLink>
|
||||
<div id="badges" style="text-align: right; margin: 1rem 0">
|
||||
<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 }">
|
||||
<Transition name="page">
|
||||
<Component :is="Component" class="page-bisection content-page" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</div>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Transition name="page">
|
||||
<Component :is="Component" class="page-bisection content-page" />
|
||||
</Transition>
|
||||
</RouterView>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.bisection-container {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-bisection {
|
||||
width: 50ch;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
width: 50ch;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
text-align: left;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.site-header-text {
|
||||
font-family: Sacramento;
|
||||
container-type: inline-size;
|
||||
font-size: calc(min(60px, max(5cqw, 42px)));
|
||||
text-align: right;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
font-family: Sacramento;
|
||||
container-type: inline-size;
|
||||
font-size: calc(min(60px, max(5cqw, 42px)));
|
||||
text-align: right;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
/* Gradient text color for the header. */
|
||||
background-image: linear-gradient(90deg, var(--text-color), var(--code-color));
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
/* Gradient text color for the header. */
|
||||
background-image: linear-gradient(90deg, var(--text-color), var(--code-color));
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.page-enter-active {
|
||||
transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.page-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
opacity: 0;
|
||||
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.
|
||||
*/
|
||||
@media (width < calc(100ch - 2.5rem)) {
|
||||
.site-header-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
.site-header-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-top: 0;
|
||||
}
|
||||
.content-page {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Once the device width is smaller than one of the halves, sync the page half to the device width.
|
||||
*/
|
||||
@media (width < 50ch) {
|
||||
.page-bisection {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
.page-bisection {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -23,10 +23,9 @@ import SoftwareProjectTile from '@/components/SoftwareProjectTile.vue'
|
|||
:tags="['Dlang', 'Vue', 'Typescript', 'Finance']"
|
||||
>
|
||||
<p>
|
||||
An evolution of my previous desktop app <em>Perfin</em>, this is a
|
||||
web application that provides a more universal platform for personal
|
||||
finance management, with responsive views and more comprehensive
|
||||
tools for searching, along with so many other improvements over the
|
||||
An evolution of my previous desktop app <em>Perfin</em>, this is a web application that
|
||||
provides a more universal platform for personal finance management, with responsive views
|
||||
and more comprehensive tools for searching, along with so many other improvements over the
|
||||
first iteration.
|
||||
</p>
|
||||
</SoftwareProjectTile>
|
||||
|
|
|
|||
Loading…
Reference in New Issue