my personal website!
meowing.zip
website
some slight tweaks... and also a secret link somewhere..
Can you find it? well if you can read this commit, you already know...
+104
-8
+1
about-me.html
+1
about-me.html
···
46
46
</div>
47
47
</div>
48
48
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">gallery (under construction)</a>
49
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">guestbook (under construction)</a>
49
50
</div>
50
51
</footer>
51
52
<body>
+67
fursona.html
+67
fursona.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>oooh who's this? - gayfamicom's cool and awesome website!</title>
5
+
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
6
+
</head>
7
+
<link rel="stylesheet" href="styles.css">
8
+
<footer>
9
+
<div style="display: flex;">
10
+
<a><img class="pfp" src="./assets/images/pfp.jpg" alt="my fursona. a cat (sometimes fops) thing that wears a mask"></a>
11
+
<a style="padding: 20px; text-align: center">oooh who's this?<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">gayfamicom's cool and awesome website</small></a>
12
+
</div>
13
+
<div class="divider"></div>
14
+
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
15
+
<div class="dropdown">
16
+
<a href="." class="dropbtn">< go back!</a>
17
+
</div>
18
+
<div class="dropdown" tabindex="1">
19
+
<a style="margin-left: 5px;" href="./about-me.html" class="dropbtn">about me!</a>
20
+
</div>
21
+
<div class="dropdown" tabindex="1">
22
+
<a style="margin-left: 5px;" class="dropbtn" href="./blog.html">blog</a>
23
+
</div>
24
+
<div class="dropdown" tabindex="1">
25
+
<i class="db2" tabindex="1"></i>
26
+
<a style="margin-left: 5px;" class="dropbtn">follow me on socials</a>
27
+
<div class="dropdown-content">
28
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://bsky.app/profile/did:web:gayfamicom.lol" target="_blank">bluesky</a>
29
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" rel="me" href="https://hero.chaogarden.social/@gayfamicom" target="_blank">fediverse</a>
30
+
<a style="color: light-dark(#d20f39, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://youtube.com/@gayfamicom" target="_blank">youtube</a>
31
+
</div>
32
+
</div>
33
+
<div class="dropdown" tabindex="1">
34
+
<i class="db2" tabindex="1"></i>
35
+
<a style="margin-left: 5px;" class="dropbtn">add me!</a>
36
+
<div class="dropdown-content">
37
+
<a style="color: light-dark(#04a5e5, #89dceb); border: 0px soild transparent; border-radius: 20px;" href="https://steamcommunity.com/id/gayfamicom/" target="_blank">steam</a>
38
+
</div>
39
+
</div>
40
+
<div class="dropdown" tabindex="1">
41
+
<i class="db2" tabindex="1"></i>
42
+
<a style="margin-left: 5px;" class="dropbtn">contact info</a>
43
+
<div class="dropdown-content">
44
+
<a style="color: light-dark(#1e66f5, #89b4fa); border: 0px soild transparent; border-radius: 20px;" href="https://signal.me/#eu/xhGmxYVp-uOwNmQMWmpPv_O3NvCOA6pH7O1FOt_C1VG3Wkd-9TxAdr1qkhvumTX1" target="_blank">signal</a>
45
+
<a style="color: light-dark(#40a02b, #94e2d5); border: 0px soild transparent; border-radius: 20px;" href="xmpp:gayfamicom@synth.download">xmpp</a>
46
+
<a style="color: light-dark(#7287fd, #b4befe); border: 0px soild transparent; border-radius: 20px;" href="https://discord.com/users/752389000945467482" target="_blank">discord</a>
47
+
<a style="color: light-dark(#e64553, #eba0ac); border: 0px soild transparent; border-radius: 20px;" href="mailto:mail@gayfamicom.lol">email</a>
48
+
</div>
49
+
</div>
50
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">gallery (under construction)</a>
51
+
<a style="margin-left: 15px; font-size: 12px; color: light-dark(var(--light-subtext), var(--dark-subtext));">guestbook (under construction)</a>
52
+
</div>
53
+
</footer>
54
+
<body>
55
+
<div class="main">
56
+
<h3>hello! i'm so glad you clicked here!</h3>
57
+
<div class="divider"></div>
58
+
<a style="font-size: 15px; font-weight: 700;">who is this you wonder?</a>
59
+
<a style="font-size: 12px;">
60
+
this is my fursona! it's a cat (can be a fops sometimes) thing. its fluffy and cuddleable!</a>
61
+
<small style="font-size: 10px;">waow</small>
62
+
<br><br><a style="font-size: 15px; font-weight: 700;">
63
+
more info is to be determined at *some* point, when i have time</a>
64
+
<a style="font-size: 12px;"><br><br>ref sheet: [404 Not Found, for now]
65
+
</div>
66
+
</body>
67
+
</html>
+3
-8
index.html
+3
-8
index.html
···
7
7
<link rel="stylesheet" href="styles.css">
8
8
<footer>
9
9
<div style="display: flex;">
10
-
<img style="border-radius: 15px; border: 2px solid; border-color: light-dark(var(--light-accent), var(--dark-accent)); width: 70px; height: auto" src="./assets/images/pfp.jpg" alt="fursona">
11
-
<a style=" padding: 20px; text-align: center">gayfamicom's cool and awesome website!<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
12
-
<div style="display: flex; place-items: center; gap: 1rem;">
13
-
<a style="font-size: 14px;">visitor count: </a>
14
-
<a href="https://nixie.starlightnet.work">
15
-
<img style="border-radius: 15px; border: 2px solid; border-color: light-dark(var(--light-accent), var(--dark-accent));" src="https://nixie.starlightnet.work/?fg=%23926eaf&bg=%231b151e&pixel=1" alt="view counter" referrerpolicy="no-referrer-when-downgrade"/></a>
16
-
</div>
10
+
<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>
11
+
<a style="padding: 20px; text-align: center">gayfamicom's cool and awesome website!<small style="color: light-dark(var(--light-subtext), var(--dark-subtext)); margin-left: 10px; font-size: 12px;">awwahhff mrrroow!~</small></a>
17
12
</div>
18
13
<div class="divider"></div>
19
14
<div style="font-size: 15px; margin-top: 20px; margin-left: 2px; margin-bottom: 10px; display: flex;">
···
106
101
</div>
107
102
</div>
108
103
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;" href="https://tangled.org/gayfamicom.lol/site"><small>website source!</small></a>
109
-
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-03-24T04:36:46Z</small></a>
104
+
<a style="color: light-dark(var(--light-accent), var(--dark-accent)); padding: 10px;"><small>last modified: 2026-03-24T23:28:06Z</small></a>
110
105
</body>
111
106
<a rel="me" href="https://fuzzies.wtf/@gayfamicom"></a>
112
107
<a rel="me" href="https://app.wafrn.net/blog/gayfamicom"></a>
+33
styles.css
+33
styles.css
···
133
133
.dropdown-content a:hover {
134
134
background-color: light-dark(var(--light-subtext), var(--dark-subtext));
135
135
}
136
+
.main:hover img {
137
+
transition: ease-in-out 0.2s;
138
+
filter: blur(0.1em);
139
+
justify-content: center;
140
+
align-items: center;
141
+
}
142
+
.main img:hover {
143
+
transition: ease-in-out 0.5s;
144
+
border: solid 2px;
145
+
border-radius: 10px;
146
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
147
+
height: auto;
148
+
width: 100px;
149
+
filter: blur(0);
150
+
justify-content: center;
151
+
align-items: center;
152
+
box-shadow: 0px 0px 10px light-dark(var(--light-text), var(--dark-text));
153
+
}
154
+
155
+
.pfp {
156
+
border-radius: 15px;
157
+
border: 2px solid;
158
+
border-color: light-dark(var(--light-accent), var(--dark-accent));
159
+
width: 70px;
160
+
height: auto;
161
+
}
162
+
163
+
.pfp:hover {
164
+
transition: ease-in-out 0.2s;
165
+
height: auto;
166
+
width: 90px;
167
+
margin: 1px;
168
+
}
136
169
137
170
/* show dd content */
138
171
.dropdown:focus .dropdown-content {