my personal website!
meowing.zip
website
1<!DOCTYPE html>
2<html>
3<head>
4 <title>niko's cool and awesome website!</title>
5 <link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
6 <link
7 rel="stylesheet"
8 type="text/css"
9 href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
10 />
11 <link
12 rel="stylesheet"
13 type="text/css"
14 href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
15 />
16</head>
17<link rel="stylesheet" href="styles.css">
18<footer>
19 <div style="display: flex;">
20 <a href="./fursona.html"><img class="pfp" src="./assets/images/pfp.jpg" alt="my fursona. a cat (sometimes fops) thing that wears a mask"></a>
21 <a style="padding: 20px; margin-right: 38%; display: inline-block;">niko's cool and awesome website!<small style="color: var(--subtext); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
22 <div class="dropdown" tabindex="1">
23 <i class="db2" tabindex="1"></i>
24 <a style="font-size: 14px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-gear"></i>settings</a>
25 <div id="settings" class="settings-popup">
26 <a style="margin: 3px; font-size: 11px; color: light-dark(#d20f39, #f38ba8);">settings saved with javascript enabled</a>
27 <radio-picker>
28 <a style="justify-content: center; align-items: center; text-align: left; display: flex; font-size: 14px; color: var(--foreground);">theme:</a>
29 <label for="theme-auto"><input type="radio" name="theme" id="theme-auto" value="auto" checked>auto</label>
30 <label for="theme-light"><input type="radio" name="theme" id="theme-light" value="light">light</label>
31 <label for="theme-dark"><input type="radio" name="theme" id="theme-dark" value="dark">dark</label>
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>
39 <checkbox-picker>
40 <a style="text-align: left; margin-left: 7px; font-size: 14px; color: var(--foreground);">accessibility:</a>
41 <label for="disable-bg"><input type="checkbox" id="disable-bg" name="background">disable background</label>
42 <label for="disable-animations"><input type="checkbox" id="disable-animations" name="animations">disable animations</label>
43 </checkbox-picker>
44 </div>
45 </div>
46 </div>
47 <div class="divider"></div>
48 <div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
49 <div class="dropdown" tabindex="1">
50 <a class="dropbtn" href="./blog"><i style="margin-right: 5px;" class="ph ph-pen"></i>blog</a>
51 </div>
52 <div class="dropdown" tabindex="1">
53 <i class="db2" tabindex="1"></i>
54 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-at"></i>follow me on socials</a>
55 <div class="dropdown-content">
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://masto.meowing.zip/@niko" target="_blank">fediverse</a>
58 <a style="color: var(--red);" href="https://youtube.com/@meowingmaxing" target="_blank">youtube</a>
59 </div>
60 </div>
61 <div class="dropdown" tabindex="1">
62 <i class="db2" tabindex="1"></i>
63 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-user-plus"></i>add me!</a>
64 <div class="dropdown-content">
65 <a style="color: var(--light-blue);" href="https://steamcommunity.com/id/meowmaxing" target="_blank">steam</a>
66 </div>
67 </div>
68 <div class="dropdown" tabindex="1">
69 <i class="db2" tabindex="1"></i>
70 <a style="margin-left: 5px;" class="dropbtn"><i style="margin-right: 5px;" class="ph ph-chat-circle-dots"></i>contact info</a>
71 <div class="dropdown-content">
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>
76 </div>
77 </div>
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>
79 <a style="margin-left: 15px; font-size: 12px; color: var(--subtext);"><i style="margin-right: 5px;" class="ph ph-pen"></i>guestbook (under construction)</a>
80 </div>
81</footer>
82
83<body>
84 <bg-gradient aria-hidden="true"></bg-gradient>
85 <bg aria-hidden="true"></bg>
86 <div class="main">
87 <h3><i style="margin-right: 10px;" class="ph ph-info"></i>who am i?</h3>
88 <div class="divider"></div>
89 <div class="about">
90 <a>
91 hiiii!! my name is Niko, this is my lil corner of the web <small style="font-size: 10px;">(waow)</small>!<br><br>
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> !!
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>
94 </a>
95 </div>
96 <div style="margin-top: 5px;" class="pronouns-box">
97 <h3 style="margin-top: 5px; font-size: 15px;"><i style="margin-right: 10px;" class="ph ph-info"></i>pronouns</h3>
98 <div class="divider"></div>
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>
100 </div>
101 </div>
102 <div class="main">
103 <h3>what do u use for video editing?</h3>
104 <div class="divider"></div>
105 <a style="color: var(--purple);">
106 adobe premiere pro (SORRY)
107 </a>
108 <a>-</a>
109 <a style="color: var(--purple);">
110 adobe after effects (SORRY)
111 </a>
112 <a style="font-size: 13px;">,</a>
113 <a style="color: var(--teal);">
114 sometimes davinci resolve when on linux
115 </a>
116 <div class="divider"></div>
117 <h3>what about photo editing?</h3>
118 <div class="divider"></div>
119 <a style="color: var(--blue);">
120 adobe photoshop (SORRY)
121 </a>
122 <a>,</a>
123 <a>
124 sometimes gimp when on linux
125 </a>
126 <div class="divider"></div>
127 <h3>what about audio stuff?</h3>
128 <div class="divider"></div>
129 <a style="color: var(--green);">just reaper...</a>
130 </div>
131 <div class="main">
132 <div style="margin-bottom: 10px">
133 <a>a collections of buttons!</a>
134 <a style="color: var(--subtext);"><small>sorted alphabetically by domain name</small></a>
135 </div>
136 <div class="divider"></div>
137 <div style="margin-bottom: 10px;">
138 <a style="font-size: 14px">friends</a>
139 <a style="font-size: 12px; color: var(--subtext);"><small>let me know if you want urs added here!</small></a>
140 </div>
141 <div class="web-buttons" style="padding: 5px; margin-bottom: 10px">
142 <a href="https://aquamarine.gay"><img class="web-button" alt="aquamarine.gay" src="./assets/88x31/friends/aquamarine.gif"></a>
143 <a href="https://atapi.space"><img class="web-button" alt="atapi.space" src="./assets/88x31/friends/atapi.gif"></a>
144 <a href="https://byemc.xyz"><img class="web-button" alt="byespace" src="./assets/88x31/friends/byespace.gif"></a>
145 <a href="https://daniela.lol"><img class="web-button" alt="daniela.lol" src="./assets/88x31/friends/daniela.gif"></a>
146 <a href="https://doskel.net"><img width="88" height="31" class="web-button" alt="doskel.net" src="./assets/88x31/friends/doskel.png"/></a>
147 <a href="https://eeep.ee"><img class="web-button" width="88" height="31" alt="a cropped rotated fox face emoji, in shades of gray, meant to looks like a platinum fox" src="./assets/88x31/friends/chfour.svg"/></a>
148 <a href="https://enderman0125.ryuen.ca"><img class="web-button" src="./assets/88x31/friends/enderman0125.gif"></a>
149 <a href="https://f0urst4r.net/"><img class="web-button" src="./assets/88x31/friends/f0urst4r.gif" alt="F0URST4R" title="F0URST4R"></a>
150 <a href="https://ielenia.lgbt"><img class="web-button" alt="ielenia.lgbt" src="./assets/88x31/friends/ielenia.png"></a>
151 <a href="https://invoxiplaygames.uk"><img class="web-button" alt="invoxiplaygames.uk" src="./assets/88x31/friends/invoxiplaygames.png"></a>
152 <a href="https://jack.cab"><img alt="jack.cab" class="web-button" src="./assets/88x31/friends/jackcab.png"></a>
153 <a href="https://jbc.lol"><img class="web-button" src="./assets/88x31/friends/jbc.svg" alt="jb's site" style="image-rendering: pixelated;"/></a>
154 <a href="https://notfire.cc"><img class="web-button" alt="notfire.cc" src="./assets/88x31/friends/notfire.gif"></a>
155 <a href="https://microspinny.zip"><img class="web-button" alt="microspinny.zip" src="./assets/88x31/friends/microspinny.png"></a>
156 <a href="https://potatoe.ca"><img class="web-button" alt="potatoe.ca" src="./assets/88x31/friends/potatoe.png"></a>
157 <a href="https://shiver-j.neocities.org"><img class="web-button" alt="shiver j." src="./assets/88x31/friends/shiverj.png"></a>
158 <a href="https://sneexy.synth.download"><img class="web-button" src="./assets/88x31/friends/sneexy.svg" alt="Sneexy"></a>
159 <a href="https://reimu.info"><img class="web-button" alt="reimu.info" src="./assets/88x31/friends/ezio.png"></a>
160 <a href="https://rodents.rodeo"><img class="web-button" alt="rodents.rodeo" src="./assets/88x31/friends/mjdxp.png"></a>
161 <a href="https://ry.cd-rom.net"><img class="web-button" alt="ry.cd-rom.net" src="./assets/88x31/friends/ryfox.png"></a>
162 <a href="https://thxdeeply.com"><img class="web-button" alt="thxdeeply.com" src="./assets/88x31/friends/thxdeeply.gif"></a>
163 <a href="https://w.on-t.work"><img class="web-button" alt="w.on-t.work" src="./assets/88x31/friends/wont-work.png"></a>
164 <a href="https://witchfuneral.quest"><img class="web-button" alt="witchfuneral.quest" src="./assets/88x31/friends/witchfuneral.png"></a>
165 <a href="https://zenfyr.dev/"><img class="web-button" src="./assets/88x31/friends/zenfyr.webp" alt="zenfyr" title="zenfyr"></a>
166 </div>
167 <div style="margin-bottom: 10px;">
168 <a style="font-size: 14px">others</a>
169 </div>
170 <div class="other-web-buttons" style="padding: 5px; margin-bottom: 20px;">
171 <a href="https://epicblazed.com"><img class="web-button" alt="epicblazed" src="./assets/88x31/others/epicblazed.png"></a>
172 <a href="https://firefox.com"><img class="web-button" alt="i dont give a FUCK about safari" src="./assets/88x31/others/idgaf-abt-safari.png"></a>
173 <a href="https://googleballs.com"><img class="web-button" alt="googleballs.com" src="./assets/88x31/others/google-balls.png"></a>
174 <a href="https://smokepowered.com"><img class="web-button" alt="smokepowered.com" src="./assets/88x31/others/smokepowered.gif"></a>
175 <a href="https://starlightnet.work"><img class="web-button" loading="lazy" src="./assets/88x31/others/starlight-network.png" alt="The Starlight Network"></a>
176 <a href="https://synth.download"><img class="web-button" src="./assets/88x31/others/synth.download.svg" alt="Synth.Download!"></a>
177 </div>
178 <div style="margin-bottom: 10px;">
179 <a style="font-size: 14px">and here is mine!</a>
180 <a style="font-size: 12px; color: var(--subtext);"><small>feel free to add mine (hotlinking is ok!, click the button to copy the html)</small></a>
181 </div>
182 <div class="my-button" style="padding: 5px;">
183 <a onclick="copyButton()"><img class="web-button" src="./assets/88x31/button.png" alt="my cool ass button"></a>
184 </div>
185 </div>
186 <a style="color: var(--accent); padding: 10px;" href="https://git.gay/meowmaxing/website"><small>website source!</small></a>
187 <a style="color: var(--accent); padding: 10px;"><small>last modified: 2026-04-18T23:45:53Z</small></a>
188 <span id="copy-toast"><i style="margin-right: 5px; color: var(--green)" class="ph ph-clipboard-text"></i>copied to clipboard!</span>
189 <div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
190</body>
191<script>
192 function copyButton() {
193 navigator.clipboard.writeText('<a href="https://meowing.zip"><img src="https://meowing.zip/assets/88x31/button.png" alt="meowing.zip"></a>');
194 var x = document.getElementById("copy-toast");
195 x.className = "show";
196 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
197 }
198 document.addEventListener("DOMContentLoaded", function() {
199 const t = document.querySelectorAll('input[name="theme"]')
200 , c = document.querySelectorAll('input[name="color"]')
201 , i = document.getElementById("disable-bg")
202 , o = document.getElementById("disable-animations");
203 function a() {
204 const t = document.querySelector('input[name="theme"]:checked').value;
205 const c = document.querySelector('input[name="color"]:checked').value;
206 localStorage.setItem("disable-bg", i.checked),
207 localStorage.setItem("disable-animations", o.checked)
208 }
209 !function() {
210 const t = localStorage.getItem("theme");
211 if (t) {
212 const e = document.querySelector(`input[name="theme"][value="${t}"]`);
213 e && (e.checked = !0)
214 }
215 const c = localStorage.getItem("color");
216 if (c) {
217 const e = document.querySelector(`input[name="color"][value="${t}"]`);
218 e && (e.checked = !0)
219 }
220 "true" === localStorage.getItem("disable-bg") && (i.checked = !0);
221 "true" === localStorage.getItem("disable-animations") && (o.checked = !0)
222 }(),
223 document.addEventListener("DOMContentLoaded", function() {
224 let e = document.getElementById("alt-popup");
225 function t() {
226 document.querySelectorAll("[alt], [aria-label]").forEach(e => {
227 e.addEventListener("mousemove", n),
228 e.addEventListener("mouseout", i)
229 }
230 )
231 }
232 function n(t) {
233 const n = t.target.getAttribute("alt")
234 , i = t.target.getAttribute("aria-label")
235 , o = n || i;
236 if (o) {
237 e.textContent = o,
238 e.style.opacity = "0",
239 e.style.visibility = "visible",
240 e.style.position = "fixed";
241 const n = window.innerWidth
242 , i = window.innerHeight
243 , c = e.offsetWidth
244 , a = e.offsetHeight;
245 let l = t.clientX + 20
246 , s = t.clientY + 20;
247 l + c > n && (l = t.clientX - c - 10),
248 s + a > i && (s = t.clientY - a - 10),
249 l < 0 && (l = 10),
250 s < 0 && (s = 10),
251 e.style.left = l + "px",
252 e.style.top = s + "px",
253 e.style.opacity = "1",
254 e.style.visibility = "visible"
255 }
256 }
257 function i() {
258 e.style.opacity = "0",
259 e.style.visibility = "hidden"
260 }
261 if (t(),
262 window.MutationObserver) {
263 const e = new MutationObserver(e => {
264 e.forEach(e => {
265 e.addedNodes.length && t()
266 }
267 )
268 }
269 );
270 document.body && e.observe(document.body, {
271 childList: !0,
272 subtree: !0
273 })
274 }
275 }),
276 t.forEach(e => {
277 e.addEventListener("change", function() {
278 a()
279 })
280 }
281 ),
282 i.addEventListener("change", a),
283 o.addEventListener("change", a)
284 });
285</script>
286<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
287<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
288<a rel="me" href="https://merping.synth.download/@meowmaxing"></a>
289<a rel="me" href="https://booping.synth.download/@gayfamicom"></a>
290<a rel="me" href="https://waf.moe/blog/gayfamicom"></a>
291</html>