doll.sister.pet
The source code for my personal website and blog.
hanna.lol
blog
website
refactor: finish up index/home page
public/img/avatar.png
public/img/avatar.png
This is a binary file and will not be displayed.
public/img/background.jpg
public/img/background.jpg
This is a binary file and will not be displayed.
+1
public/img/emoji.svg
+1
public/img/emoji.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smile-plus-icon lucide-smile-plus"><path d="M22 11v1a10 10 0 1 1-9-10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/><path d="M16 5h6"/><path d="M19 2v6"/></svg>
+1
public/img/envelope.svg
+1
public/img/envelope.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail-icon lucide-mail"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
+1
public/img/file-user.svg
+1
public/img/file-user.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-user-icon lucide-file-user"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M16 22a4 4 0 0 0-8 0"/><circle cx="12" cy="15" r="3"/></svg>
+1
public/img/games.svg
+1
public/img/games.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad-directional-icon lucide-gamepad-directional"><path d="M11.146 15.854a1.207 1.207 0 0 1 1.708 0l1.56 1.56A2 2 0 0 1 15 18.828V21a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2.172a2 2 0 0 1 .586-1.414z"/><path d="M18.828 15a2 2 0 0 1-1.414-.586l-1.56-1.56a1.207 1.207 0 0 1 0-1.708l1.56-1.56A2 2 0 0 1 18.828 9H21a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1z"/><path d="M6.586 14.414A2 2 0 0 1 5.172 15H3a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2.172a2 2 0 0 1 1.414.586l1.56 1.56a1.207 1.207 0 0 1 0 1.708z"/><path d="M9 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2.172a2 2 0 0 1-.586 1.414l-1.56 1.56a1.207 1.207 0 0 1-1.708 0l-1.56-1.56A2 2 0 0 1 9 5.172z"/></svg>
+1
public/img/gitlab.svg
+1
public/img/gitlab.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gitlab-icon lucide-gitlab"><path d="m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z"/></svg>
+1
public/img/heart.svg
+1
public/img/heart.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>
+1
public/img/user-lock.svg
+1
public/img/user-lock.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-lock-icon lucide-user-lock"><circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><path d="M15 15.5V14a2 2 0 0 1 4 0v1.5"/><rect width="8" height="5" x="13" y="16" rx=".899"/></svg>
+229
-1
src/pages/index.astro
+229
-1
src/pages/index.astro
···
1
1
---
2
2
import Page from "../layouts/Page.astro";
3
+
4
+
const links = [
5
+
{
6
+
name: 'GitLab',
7
+
icon: 'gitlab',
8
+
url: 'https://gitlab.com/hqnna',
9
+
},
10
+
{
11
+
name: 'Emojis',
12
+
icon: 'emoji',
13
+
url: 'https://discord.gg/qZQmTM5Skk',
14
+
},
15
+
{
16
+
name: 'Steam',
17
+
icon: 'games',
18
+
url: 'https://steamcommunity.com/id/sapphicdoll',
19
+
},
20
+
{
21
+
name: 'GPG Key',
22
+
icon: 'user-lock',
23
+
url: '/files/key.txt',
24
+
},
25
+
{
26
+
name: 'Resume',
27
+
icon: 'file-user',
28
+
url: '/files/resume.pdf',
29
+
},
30
+
{
31
+
name: 'Contact',
32
+
icon: 'envelope',
33
+
url: 'mailto:me@hanna.lol',
34
+
},
35
+
{
36
+
name: 'Donate',
37
+
icon: 'heart',
38
+
url: 'https://liberapay.com/hqnna',
39
+
}
40
+
];
3
41
---
4
42
5
-
<Page title="Hanna Rose" desc="Just your average software engineer"></Page>
43
+
<Page title="Hanna Rose" desc="Just your average software engineer">
44
+
<div class="background"></div>
45
+
46
+
<div class="center">
47
+
<div class="container">
48
+
<div class="details">
49
+
<img src="/img/avatar.png" alt="avatar">
50
+
<div class="about">
51
+
<h1>Hanna Rose</h1>
52
+
<h2>Just your average software engineer</h2>
53
+
<ul class="socials">
54
+
{links.map(link => (
55
+
<li>
56
+
<a draggable="false" href={link.url}>
57
+
<img src={`/img/${link.icon}.svg`} alt={`${link.name} icon`}>
58
+
<span class="label">{link.name}</span>
59
+
</a>
60
+
</li>
61
+
))}
62
+
</ul>
63
+
</div>
64
+
</div>
65
+
</div>
66
+
</div>
67
+
</Page>
68
+
69
+
<style>
70
+
div.background {
71
+
background-image: url("/img/background.jpg");
72
+
background-position: center;
73
+
filter: saturate(0%);
74
+
position: absolute;
75
+
height: 100%;
76
+
width: 100%;
77
+
z-index: 0;
78
+
left: 0;
79
+
top: 0;
80
+
}
81
+
82
+
div.center {
83
+
width: 100%;
84
+
height: 100%;
85
+
display: flex;
86
+
justify-content: center;
87
+
align-items: center;
88
+
}
89
+
90
+
div.container {
91
+
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
92
+
border: 1px solid var(--border);
93
+
background-color: var(--bg-primary);
94
+
border-radius: var(--radius);
95
+
padding: var(--space-lg);
96
+
z-index: 1;
97
+
max-width: 90%;
98
+
99
+
@media only screen and (max-width: 800px) {
100
+
box-sizing: border-box;
101
+
width: 95%;
102
+
margin: 0;
103
+
}
104
+
}
105
+
106
+
div.details {
107
+
flex-direction: row;
108
+
display: flex;
109
+
110
+
& > img {
111
+
width: 128px;
112
+
height: 128px;
113
+
aspect-ratio: 1 / 1;
114
+
border-radius: var(--radius);
115
+
pointer-events: none;
116
+
border: 1px solid var(--border);
117
+
}
118
+
119
+
@media only screen and (max-width: 800px) {
120
+
flex-direction: column;
121
+
align-items: center;
122
+
}
123
+
}
124
+
125
+
div.about {
126
+
display: flex;
127
+
margin-left: var(--space-lg);
128
+
flex-direction: column;
129
+
justify-content: center;
130
+
131
+
& > h1 {
132
+
color: var(--text-primary);
133
+
}
134
+
135
+
& > h2 {
136
+
font-weight: 200;
137
+
color: var(--text-muted);
138
+
}
139
+
140
+
@media only screen and (max-width: 800px) {
141
+
align-items: center;
142
+
margin-top: var(--space-md);
143
+
margin-left: 0px !important;
144
+
width: 100%;
145
+
146
+
& > h1 {
147
+
@media only screen and (max-width: 475px) {
148
+
font-size: 20px;
149
+
}
150
+
}
151
+
152
+
& > h2 {
153
+
@media only screen and (max-width: 475px) {
154
+
font-size: 15px;
155
+
}
156
+
}
157
+
}
158
+
}
159
+
160
+
ul.socials {
161
+
display: flex;
162
+
list-style: none;
163
+
margin-top: var(--space-md);
164
+
width: 100%;
165
+
166
+
& > li {
167
+
display: inline-block;
168
+
margin-right: var(--space-sm);
169
+
170
+
& > a {
171
+
display: flex;
172
+
align-items: center;
173
+
justify-content: center;
174
+
background-color: var(--bg-secondary);
175
+
border: 1px solid var(--border);
176
+
text-decoration: none;
177
+
border-radius: var(--radius-sm);
178
+
color: var(--text-secondary);
179
+
width: 32px;
180
+
height: 32px;
181
+
182
+
& > img {
183
+
width: 16px;
184
+
}
185
+
186
+
&:hover {
187
+
background-color: var(--bg-tertiary);
188
+
border-color: var(--accent-blue);
189
+
color: var(--accent-blue);
190
+
}
191
+
192
+
&:hover > img {
193
+
filter:
194
+
brightness(0)
195
+
saturate(100%)
196
+
invert(70%)
197
+
sepia(37%)
198
+
saturate(4975%)
199
+
hue-rotate(200deg)
200
+
brightness(106%)
201
+
contrast(101%);
202
+
}
203
+
}
204
+
}
205
+
206
+
@media only screen and (max-width: 800px) {
207
+
flex-direction: column;
208
+
margin-top: var(--space-md) !important;
209
+
210
+
& > li {
211
+
margin-right: 0px;
212
+
213
+
&:not(:last-child) {
214
+
margin-bottom: var(--space-sm);
215
+
}
216
+
217
+
& > a {
218
+
width: 100%;
219
+
height: 48px;
220
+
}
221
+
}
222
+
}
223
+
}
224
+
225
+
span.label {
226
+
display: none;
227
+
228
+
@media only screen and (max-width: 800px) {
229
+
display: inline-block;
230
+
margin-left: 8px;
231
+
}
232
+
}
233
+
</style>