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

Added hiking page.

This commit is contained in:
Andrew Lalis 2025-05-30 15:36:39 -04:00
parent 210473b644
commit d0a5a0f4be
4 changed files with 143 additions and 2 deletions

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

@ -1,15 +1,20 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
defineProps<{
const props = defineProps<{
path: string
}>()
const active = computed(() => {
return props.path !== '/' && route.path.startsWith(props.path) || props.path === route.path
})
</script>
<template>
<div class="nav-link">
<RouterLink :to="path" v-bind:class="route.path === path ? 'nav-link-active' : ''">
<RouterLink :to="path" v-bind:class="active ? 'nav-link-active' : ''">
<slot></slot>
</RouterLink>
</div>

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

@ -7,6 +7,7 @@ import GardeningView from '@/views/GardeningView.vue'
import LogBookView from '@/views/LogBookView.vue'
import MainSite from '@/views/MainSite.vue'
import GardenDetails from '@/views/GardenDetails.vue'
import HikingView from '@/views/HikingView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -37,6 +38,10 @@ const router = createRouter({
path: 'gardening',
component: GardeningView
},
{
path: 'hiking',
component: HikingView
},
{
path: 'logbook',
component: LogBookView

130
app/src/views/HikingView.vue Normal file
View File

@ -0,0 +1,130 @@
<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>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;
}
.hiking-entry header {
display: flex;
justify-content: space-between;
align-items: top;
}
.hiking-entry h3 {
margin: 0;
}
.hiking-entry time {
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;
}
.hiking-entry-attributes {
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;
}
.strava-link {
color: #fc5200;
text-decoration: none;
}
.strava-link:hover {
text-decoration: underline;
}
.youtube-link {
color: #ff0033;
text-decoration: none;
}
.youtube-link:hover {
text-decoration: underline;
}
.elevation {
font-weight: bold;
color: var(--success-color);
}
</style>

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

@ -18,6 +18,7 @@ import NavLink from '@/components/NavLink.vue';
<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>