121 lines
2.9 KiB
Plaintext
121 lines
2.9 KiB
Plaintext
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
|
|
import ContactCTA from '../components/ContactCTA.astro';
|
|
import Hero from '../components/Hero.astro';
|
|
---
|
|
|
|
<BaseLayout title="About | Alex Lebens" description="About Alex Lebens">
|
|
<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="/assets/hiking.jpg"
|
|
alt="Alex Lebens hiking in Texas"
|
|
/>
|
|
</Hero>
|
|
|
|
<section>
|
|
<h2 class="section-title">Background</h2>
|
|
<div class="content">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy.
|
|
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum
|
|
id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla
|
|
pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare.
|
|
</p>
|
|
<p>
|
|
Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis
|
|
natoque penatibus. Cras fermentum odio eu feugiat pretium nibh. Proin nibh nisl
|
|
condimentum id venenatis. Porta nibh venenatis cras sed felis eget velit. Id diam vel
|
|
quam elementum pulvinar etiam non.
|
|
</p>
|
|
<p>
|
|
Ultrices tincidunt arcu non sodales neque sodales ut. Sed enim ut sem viverra aliquet
|
|
eget sit amet. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra.
|
|
Viverra accumsan in nisl nisi scelerisque eu ultrices. In massa tempor nec feugiat nisl
|
|
pretium fusce.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Education</h2>
|
|
<div class="content">
|
|
<p>Corporis voluptates tenetur laudantium.</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h2 class="section-title">Skills</h2>
|
|
<div class="content">
|
|
<p>officia unde omnis</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>
|