120 lines
2.5 KiB
Plaintext
120 lines
2.5 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
|
|
import ContactCTA from '../components/ContactCTA.astro';
|
|
import Hero from '../components/Hero.astro';
|
|
|
|
import directus, { directus_url } from "../../lib/directus"
|
|
import { readSingleton } from "@directus/sdk";
|
|
|
|
const global = await directus.request(readSingleton("global"));
|
|
const about = await directus.request(readSingleton("about"));
|
|
---
|
|
|
|
<BaseLayout title=`About | ${global.name}` description=`About ${global.name}`>
|
|
<div class="stack gap-20">
|
|
<main class="wrapper about">
|
|
<Hero
|
|
title="About"
|
|
tagline="Thanks for stopping by. Read below to learn more about myself and my background."
|
|
>
|
|
<img
|
|
width="1553"
|
|
height="873"
|
|
src=`${directus_url}/assets/${global.about}`
|
|
alt=`${global.name} hiking in Texas`
|
|
/>
|
|
</Hero>
|
|
|
|
<section>
|
|
<h2 class="section-title">Background</h2>
|
|
<div
|
|
class="content"
|
|
set:html={about.background}
|
|
/>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Experience</h2>
|
|
<div
|
|
class="content"
|
|
set:html={about.experience}
|
|
/>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Education</h2>
|
|
<div
|
|
class="content"
|
|
set:html={about.education}
|
|
/>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Certifications</h2>
|
|
<div
|
|
class="content"
|
|
set:html={about.certifications}
|
|
/>
|
|
</section>
|
|
</main>
|
|
|
|
<ContactCTA />
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<style>
|
|
.about {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3.5rem;
|
|
}
|
|
|
|
img {
|
|
margin-top: 1.5rem;
|
|
border-radius: 1.5rem;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
color: var(--gray-200);
|
|
}
|
|
|
|
.section-title {
|
|
grid-column-start: 1;
|
|
font-size: var(--text-xl);
|
|
color: var(--gray-0);
|
|
}
|
|
|
|
.content {
|
|
grid-column: 2 / 4;
|
|
}
|
|
|
|
.content :global(a) {
|
|
text-decoration: 1px solid underline transparent;
|
|
text-underline-offset: 0.25em;
|
|
transition: text-decoration-color var(--theme-transition);
|
|
}
|
|
|
|
.content :global(a:hover),
|
|
.content :global(a:focus) {
|
|
text-decoration-color: currentColor;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.about {
|
|
display: grid;
|
|
grid-template-columns: 1fr 60% 1fr;
|
|
}
|
|
|
|
.about > :global(:first-child) {
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
section {
|
|
display: contents;
|
|
font-size: var(--text-lg);
|
|
}
|
|
}
|
|
</style>
|