99 lines
No EOL
1.9 KiB
Text
99 lines
No EOL
1.9 KiB
Text
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
|
|
import ContactCTA from '../components/ContactCTA.astro';
|
|
import Hero from '../components/Hero.astro';
|
|
---
|
|
|
|
<BaseLayout title="About | Toastie_t0ast" description="About Toastie_t0ast">
|
|
<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."
|
|
>
|
|
</Hero>
|
|
|
|
<section>
|
|
<h2 class="section-title">Background</h2>
|
|
<div class="content">
|
|
<p>
|
|
Hi there I am Toastie a software developer from New Zealand I mostly write Discord bots and some other things.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Education</h2>
|
|
<div class="content">
|
|
<p>Studied at Learner Me here in NZ.</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Skills</h2>
|
|
<div class="content">
|
|
<p>Discord bot development and systems administration</p>
|
|
</div>
|
|
</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> |