blob: f4fb02a722c18eddd2b0970aa7ae30877a4a356f (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
import BaseLayout from '../layouts/BaseLayout.astro';
import ContactCTA from '../components/ContactCTA.astro';
import Hero from '../components/Hero.astro';
---
<BaseLayout title="About | Jeanine White" description="About Jeanine White Lorem Ipsum">
<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/at-work.jpg"
alt="Jeanine White at work with a colleague"
/>
</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>
|
