Files for my website
bwc9876.dev
Add some cow styles
+53
-1
+17
public/pfp-lines.svg
+17
public/pfp-lines.svg
···
1
+
<?xml version="1.0" encoding="UTF-8"?>
2
+
<svg stroke="#000" class="pfp-lines" version="1.1" viewBox="0 0 48 48"
3
+
xmlns="http://www.w3.org/2000/svg">
4
+
<g fill="none" stroke-linecap="round" stroke-linejoin="round"
5
+
stroke-width=".64515">
6
+
<rect x="23.946" y=".32257" width=".10717" height="6.5158" />
7
+
<rect x="23.946" y="41.162" width=".10717" height="6.5158" />
8
+
<rect transform="rotate(-90)" x="-24.054" y="41.162" width=".10717" height="6.5158" />
9
+
<rect transform="rotate(-90)" x="-24.054" y=".32257" width=".10717" height="6.5158" />
10
+
<g transform="rotate(-45,24,24)">
11
+
<rect x="23.946" y=".32257" width=".10717" height="6.5158" />
12
+
<rect x="23.946" y="41.162" width=".10717" height="6.5158" />
13
+
<rect transform="rotate(-90)" x="-24.054" y="41.162" width=".10717" height="6.5158" />
14
+
<rect transform="rotate(-90)" x="-24.054" y=".32257" width=".10717" height="6.5158" />
15
+
</g>
16
+
</g>
17
+
</svg>
+36
-1
src/pages/index.astro
+36
-1
src/pages/index.astro
···
121
121
gap: var(--spacing);
122
122
}
123
123
124
+
@keyframes glow {
125
+
0% {
126
+
box-shadow: 0 0 0 0 var(--primary);
127
+
}
128
+
100% {
129
+
box-shadow: 0 0 450px 5px var(--primary);
130
+
}
131
+
}
132
+
124
133
.hero-image {
134
+
--anim-props: 900ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
125
135
display: flex;
126
136
align-items: center;
137
+
position: relative;
138
+
animation: glow var(--anim-props);
139
+
border-radius: 50%;
127
140
}
128
141
129
142
@media (width <= 575px) {
···
133
146
}
134
147
135
148
.hero-image img {
136
-
width: 350px;
149
+
width: 250px;
150
+
z-index: 100;
137
151
clip-path: circle();
152
+
}
153
+
154
+
@keyframes pop {
155
+
from {
156
+
transform: scale(0);
157
+
}
158
+
to {
159
+
transform: scale(1.8);
160
+
}
161
+
}
162
+
163
+
.hero-image:after {
164
+
animation: pop var(--anim-props);
165
+
content: "";
166
+
mask: url("/pfp-lines.svg") no-repeat 50% 50%;
167
+
mask-size: cover;
168
+
display: inline-block;
169
+
position: absolute;
170
+
inset: 0;
171
+
width: 100%;
172
+
background-image: radial-gradient(circle at center, var(--primary) 0, var(--accent) 100%);
138
173
}
139
174
140
175
.view-more {