my personal website!
meowing.zip
website
added more color scheme options! currently does not save tho sorgyyy i'll fix it later
+189
-26
+87
-21
index.html
+87
-21
index.html
···
30
30
<label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label>
31
31
<label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label>
32
32
</radio-picker>
33
+
<radio-picker>
34
+
<a style="justify-content: center; align-items: center; text-align: left; display: flex; font-size: 14px; color: var(--foreground);">color:</a>
35
+
<label for="theme-catppuccin"><input type="radio" name="color" id="theme-catppuccin" value="catppuccin" checked>catppuccin</label>
36
+
<label for="theme-newpaper"><input type="radio" name="color" id="theme-newpaper" value="newpaper">newpaper</label>
37
+
<label for="theme-dracula"><input type="radio" name="color" id="theme-dracula" value="newpaper">dracula</label>
38
+
</radio-picker>
33
39
<checkbox-picker>
34
40
<a style="text-align: left; margin-left: 7px; font-size: 14px; color: var(--foreground);">accessibility:</a>
35
41
<label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">disable background</label>
36
-
<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">animations</label>
42
+
<label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">disable animations</label>
37
43
</checkbox-picker>
38
44
</div>
39
45
</div>
···
47
53
<i class="db2" tabindex="1"></i>
48
54
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
49
55
<div class="dropdown-content">
50
-
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:plc:yt66ucfex7kgaifhu5qijrz3" target="_blank">bluesky</a>
51
-
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://merping.synth.download/@meowmaxing" target="_blank">fediverse</a>
52
-
<a style="color: light-dark(#d20f39, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
56
+
<a style="color: var(--blue);" href="https://bsky.app/profile/did:plc:yt66ucfex7kgaifhu5qijrz3" target="_blank">bluesky</a>
57
+
<a style="color: var(--green);" rel="me" href="https://merping.synth.download/@meowmaxing" target="_blank">fediverse</a>
58
+
<a style="color: var(--red);" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
53
59
</div>
54
60
</div>
55
61
<div class="dropdown" tabindex="1">
56
62
<i class="db2" tabindex="1"></i>
57
63
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
58
64
<div class="dropdown-content">
59
-
<a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
65
+
<a style="color: var(--light-blue);" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
60
66
</div>
61
67
</div>
62
68
<div class="dropdown" tabindex="1">
63
69
<i class="db2" tabindex="1"></i>
64
70
<a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-chat-circle-dots"></i>contact info</a>
65
71
<div class="dropdown-content">
66
-
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw" target="_blank">signal</a>
67
-
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:niko@meowing.zip">xmpp</a>
68
-
<a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
69
-
<a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:niko@meowing.zip">email</a>
72
+
<a style="color: var(--blue);" href="https://signal.me/#eu/2G_wkky5wzpLc8dGMMJZADmtQfS0v_hUHrPxyZ8C0-2dAsNSi0BBcq9gRoNB1bTw" target="_blank">signal</a>
73
+
<a style="color: var(--green);" href="xmpp:niko@meowing.zip">xmpp</a>
74
+
<a style="color: var(--purple);" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
75
+
<a style="color: var(--red);" href="mailto:niko@meowing.zip">email</a>
70
76
</div>
71
77
</div>
72
78
<a style="margin-left: 15px; font-size: 12px; color: var(--subtext);"><i style="margin-right: 5px;" class="ph ph-image"></i>gallery (under construction)</a>
···
81
87
<h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3>
82
88
<div class="divider"></div>
83
89
<div class="about">
84
-
<a style="font-size: 13px;">
90
+
<a>
85
91
hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br>
86
92
im a biromantic, asexual, genderfluid individual who likes computer-adjecent things and i also like to do video editing and VFX stuff <small style="font-size: 10px;">(every once in a blue moon)</small> !!
87
-
<br><br><a style="margin-top: 20px; color: light-dark(#d20f39, #f38ba8); font-size: 15px;">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
93
+
<br><br><a style="margin-top: 20px; color: var(--red); font-size: 15px;">im autistic as Fuck!!! so communication *might* be hard, please keep that in mind if u ever choose to talk to me, its not that i dont care!!</a>
88
94
</a>
89
95
</div>
90
96
<div style="margin-top: 5px;" class="pronouns-box">
91
97
<h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3>
92
98
<div class="divider"></div>
93
-
<a><i class="ph ph-heart" style="color: light-dark(#ea76cb, #f5c2e7);"></i> it/its<br><i style="color: light-dark(#04a5e5, #89dceb);" class="ph ph-thumbs-up"></i> they/them<br><i style="color: light-dark(#df8e1d, #f9e2af);" class="ph ph-smiley-meh"></i> she/her<br><i style="margin-right: 5px; color: light-dark(#d20f39, #f38ba8);" class="ph ph-x-circle"></i>he/him<br></a>
99
+
<a><i alt="preferred" class="ph ph-heart" style="color: var(--pink);"></i> it/its<br><i alt="acceptable" style="color: var(--blue);" class="ph ph-thumbs-up"></i> they/them<br><i alt="okay. i guess" style="color: var(--yellow);" class="ph ph-smiley-meh"></i> she/her<br><i alt="NO. not acceptable!" style="margin-right: 5px; color: var(--red);" class="ph ph-x-circle"></i>he/him, or anything else<br></a>
94
100
</div>
95
101
</div>
96
102
<div class="main">
97
103
<h3>what do u use for video editing?</h3>
98
104
<div class="divider"></div>
99
-
<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
105
+
<a style="color: var(--purple);">
100
106
adobe premiere pro (SORRY)
101
107
</a>
102
108
<a>-</a>
103
-
<a style="color: light-dark(#7287fd, #b4befe); font-size: 13px;">
109
+
<a style="color: var(--purple);">
104
110
adobe after effects (SORRY)
105
111
</a>
106
112
<a style="font-size: 13px;">,</a>
107
-
<a style="color: light-dark(#179299, #94e2d5); font-size: 13px;">
113
+
<a style="color: var(--teal);">
108
114
sometimes davinci resolve when on linux
109
115
</a>
110
116
<div class="divider"></div>
111
117
<h3>what about photo editing?</h3>
112
118
<div class="divider"></div>
113
-
<a style="color: light-dark(#1e66f5, #89b4fa); font-size: 13px;">
119
+
<a style="color: var(--blue);">
114
120
adobe photoshop (SORRY)
115
121
</a>
116
-
<a style="font-size: 13px;">,</a>
117
-
<a style="font-size: 13px;">
122
+
<a>,</a>
123
+
<a>
118
124
sometimes gimp when on linux
119
125
</a>
120
126
<div class="divider"></div>
121
127
<h3>what about audio stuff?</h3>
122
128
<div class="divider"></div>
123
-
<a style="color: light-dark(#40a02b, #a6e3a1); font-size: 13px;">just reaper...</a>
129
+
<a style="color: var(--green);">just reaper...</a>
124
130
</div>
125
131
<div class="main">
126
132
<div style="margin-bottom: 10px">
···
177
183
</div>
178
184
<a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
179
185
<a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a>
180
-
<span id="copy-toast"><i style="margin-right: 5px; color: light-dark(#40a02b, #a6e3a1)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
186
+
<span id="copy-toast"><i style="margin-right: 5px; color: var(--green)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
187
+
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
181
188
</body>
182
189
<script>
183
190
function copyButton() {
···
188
195
}
189
196
document.addEventListener("DOMContentLoaded", function() {
190
197
const t = document.querySelectorAll('input[name="theme"]')
198
+
, c = document.querySelectorAll('input[name="color"]')
191
199
, i = document.getElementById("disable-bg")
192
200
, o = document.getElementById("disable-animations");
193
201
function a() {
194
202
const t = document.querySelector('input[name="theme"]:checked').value;
195
-
localStorage.setItem("theme", t),
203
+
const c = document.querySelector('input[name="color"]:checked').value;
196
204
localStorage.setItem("disable-bg", i.checked),
197
205
localStorage.setItem("disable-animations", o.checked)
198
206
}
···
202
210
const e = document.querySelector(`input[name="theme"][value="${t}"]`);
203
211
e && (e.checked = !0)
204
212
}
213
+
const c = localStorage.getItem("color");
214
+
if (c) {
215
+
const e = document.querySelector(`input[name="color"][value="${t}"]`);
216
+
e && (e.checked = !0)
217
+
}
205
218
"true" === localStorage.getItem("disable-bg") && (i.checked = !0);
206
219
"true" === localStorage.getItem("disable-animations") && (o.checked = !0)
207
220
}(),
221
+
document.addEventListener("DOMContentLoaded", function() {
222
+
let e = document.getElementById("alt-popup");
223
+
function t() {
224
+
document.querySelectorAll("[alt], [aria-label]").forEach(e => {
225
+
e.addEventListener("mousemove", n),
226
+
e.addEventListener("mouseout", i)
227
+
}
228
+
)
229
+
}
230
+
function n(t) {
231
+
const n = t.target.getAttribute("alt")
232
+
, i = t.target.getAttribute("aria-label")
233
+
, o = n || i;
234
+
if (o) {
235
+
e.textContent = o,
236
+
e.style.opacity = "0",
237
+
e.style.visibility = "visible",
238
+
e.style.position = "fixed";
239
+
const n = window.innerWidth
240
+
, i = window.innerHeight
241
+
, c = e.offsetWidth
242
+
, a = e.offsetHeight;
243
+
let l = t.clientX + 20
244
+
, s = t.clientY + 20;
245
+
l + c > n && (l = t.clientX - c - 10),
246
+
s + a > i && (s = t.clientY - a - 10),
247
+
l < 0 && (l = 10),
248
+
s < 0 && (s = 10),
249
+
e.style.left = l + "px",
250
+
e.style.top = s + "px",
251
+
e.style.opacity = "1",
252
+
e.style.visibility = "visible"
253
+
}
254
+
}
255
+
function i() {
256
+
e.style.opacity = "0",
257
+
e.style.visibility = "hidden"
258
+
}
259
+
if (t(),
260
+
window.MutationObserver) {
261
+
const e = new MutationObserver(e => {
262
+
e.forEach(e => {
263
+
e.addedNodes.length && t()
264
+
}
265
+
)
266
+
}
267
+
);
268
+
document.body && e.observe(document.body, {
269
+
childList: !0,
270
+
subtree: !0
271
+
})
272
+
}
273
+
}),
208
274
t.forEach(e => {
209
275
e.addEventListener("change", function() {
210
276
a()
+102
-5
styles.css
+102
-5
styles.css
···
117
117
animation: 150s linear infinite ticker!important
118
118
}
119
119
}
120
+
&:has(#disable-alttext:checked) {
121
+
& .alt-popup {
122
+
display: none!important
123
+
}
124
+
}
120
125
@keyframes bg-move {
121
126
0% {
122
127
background-position: 0 0;
···
147
152
--crust: light-dark(#dce0e8, #11111b);
148
153
--foreground: light-dark(#4c4f69, #cdd6f4);
149
154
--subtext: light-dark(#7c7f93, #45475a);
150
-
--divider-color: light-dark(#8839ef, #9ca0b0);
155
+
--divider-color: var(--accent);
151
156
--accent: light-dark(#8839ef, #cba6f7);
157
+
158
+
--red: light-dark(#e64553, #eba0ac);
159
+
--blue: light-dark(#1e66f5, #89b4fa);
160
+
--light-blue: light-dark(#04a5e5, #89dceb);
161
+
--teal: light-dark(#179299, #94e2d5);
162
+
--green: light-dark(#40a02b, #a6e3a1);
163
+
--purple: light-dark(#7287fd, #b4befe);
164
+
--pink: light-dark(#ea76cb, #f5c2e7);
165
+
--yellow: light-dark(#df8e1d, #f9e2af);
166
+
&:has(#theme-catppuccin:checked) {
167
+
--background: light-dark(#eff1f5, #303030);
168
+
--crust: light-dark(#dce0e8, #11111b);
169
+
--foreground: light-dark(#4c4f69, #cdd6f4);
170
+
--subtext: light-dark(#7c7f93, #45475a);
171
+
--divider-color: var(--accent);
172
+
--accent: light-dark(#8839ef, #cba6f7);
173
+
174
+
--red: light-dark(#e64553, #eba0ac);
175
+
--blue: light-dark(#1e66f5, #89b4fa);
176
+
--light-blue: light-dark(#04a5e5, #89dceb);
177
+
--teal: light-dark(#179299, #94e2d5);
178
+
--green: light-dark(#40a02b, #a6e3a1);
179
+
--purple: light-dark(#7287fd, #b4befe);
180
+
--pink: light-dark(#ea76cb, #f5c2e7);
181
+
--yellow: light-dark(#df8e1d, #f9e2af);
182
+
}
183
+
&:has(#theme-newpaper:checked) {
184
+
--background: light-dark(#f1f3f2, #1e1e2e);
185
+
--crust: light-dark(#e5e5e5, #11111b);
186
+
--foreground: light-dark(#2f2a3d, #c6c8cd);
187
+
--subtext: light-dark(#444444, #bcbcbc);
188
+
--divider-color: var(--accent);
189
+
--accent: light-dark(#e563ba, #e878d8);
190
+
191
+
--red: light-dark(#af0000, #cc5555);
192
+
--blue: light-dark(#27408b, #8195e7);
193
+
--light-blue: light-dark(#0072c1, #7db1d5);
194
+
--teal: light-dark(#005f87, #72aeb3);
195
+
--green: light-dark(#008700, #75b680);
196
+
--purple: light-dark(#8700af, #a274d1);
197
+
--pink: light-dark(#e563ba, #e878d8);
198
+
--yellow: light-dark(#af5f00, #c57a30);
199
+
}
200
+
&:has(#theme-dracula:checked) {
201
+
--background: light-dark(#FFFBEB, #282A36);
202
+
--crust: light-dark(#CFCFDE, #44475A);
203
+
--foreground: light-dark(#1F1F1F, #F8F8F2);
204
+
--subtext: light-dark(#6C664B, #6272A4);
205
+
--divider-color: var(--accent);
206
+
--accent: light-dark(#644AC9, #6272A4);
207
+
208
+
--red: light-dark(#CB3A2A, #FF5555);
209
+
--blue: light-dark(#644AC9, #BD93F9);
210
+
--light-blue: light-dark(#7862D0, #D6ACFF);
211
+
--teal: light-dark(#036A96, #50FA7B);
212
+
--green: light-dark(#14710A, #50FA7B);
213
+
--purple: light-dark(#644AC9, #BD93F9);
214
+
--pink: light-dark(#A3144D, #FF79C6);
215
+
--yellow: light-dark(#846E15, #F1FA8C)
216
+
}
152
217
}
153
218
#copy-toast {
154
219
visibility: hidden;
···
243
308
}
244
309
.main {
245
310
background-color: light-dark(#dce0e880, #11111b80);
311
+
&:has(#theme-catppuccin:checked) {
312
+
background-color: light-dark(#f1f3f280, #30303080);
313
+
}
314
+
&:has(#theme-newpaper:checked) {
315
+
background-color: light-dark(#eff1f580, #1e1e2e80);
316
+
}
317
+
&:has(#theme-dracula:checked) {
318
+
background-color: light-dark(#FFFBEB80, #282A3680);
319
+
}
246
320
margin-top: 20px;
247
321
outline: 2px solid;
248
322
outline-color: var(--accent);
···
250
324
padding: 20px;
251
325
box-shadow: 10px 5px 10px var(--crust);
252
326
}
327
+
.main a {
328
+
font-size: 13px;
329
+
}
253
330
.main .about {
254
331
text-align: "left";
255
332
margin-top: 10px;
···
258
335
}
259
336
.main .pronouns-box {
260
337
background-color: light-dark(#dce0e880, #11111b80);
338
+
&:has(#theme-dracula:checked) {
339
+
background-color: light-dark(#FFFBEB80, #282A3680);
340
+
}
261
341
margin-top: 20px;
262
342
outline: 2px solid;
263
343
outline-color: var(--accent);
···
329
409
display: inline-block;
330
410
position: relative;
331
411
outline: none;
412
+
}
413
+
.dropdown a {
414
+
border: 0px soild transparent;
415
+
border-radius: 20px;
332
416
}
333
417
334
418
/* button */
···
448
532
display: inline-block;
449
533
}
450
534
535
+
.alt-popup {
536
+
background-color: color-mix(in srgb, var(--background) 85%, transparent);
537
+
backdrop-filter: blur(.5rem);
538
+
color: var(--foreground);
539
+
border: solid 2px var(--accent);
540
+
z-index: 1000;
541
+
pointer-events: none;
542
+
opacity: 0;
543
+
border-radius: .5rem;
544
+
max-width: 30rem;
545
+
padding: .5rem;
546
+
font-size: 1rem;
547
+
transition: opacity .4s;
548
+
position: fixed
549
+
}
451
550
.pfp {
452
551
border-radius: 15px;
453
552
border: 2px solid;
454
-
border-color: var(--foreground);
553
+
border-color: var(--accent);
455
554
width: 70px;
456
555
height: auto;
457
556
}
458
-
459
557
.pfp:hover {
460
558
transition: ease-in-out 0.2s;
461
559
height: auto;
462
-
width: 90px;
463
-
margin: 1px;
560
+
transform: scale(1.35, 1.35);
464
561
}
465
562
466
563
/* show dd content */