website/index.html at main · tsukiiru/website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!doctype html>
<!-- what are you doing in the source code? -->
<!-- anyway this is just my personal site for PERSONAL STUFF, I WANNA HAVE FUN, SO, dont expect anything serious or good looking code here -->
<html>
  <head>
    <title>tsuki's little corner :3</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <meta charset="UTF-8" />
    <meta description="a cozy and comfy corner on the internet" />

    <link href="/assets/images/favicon.ico?v=2" rel="icon" />
    <link rel="stylesheet" href="beauty.css" />
    <script src="/assets/interact.min.js"></script>
    <script>
      interact(".window").draggable({
        allowFrom: ".title>span",
        modifiers: [
          interact.modifiers.restrictRect({
            restriction: document.documentElement,
            endOnly: true,
          }),
        ],
        listeners: {
          move(event) {
            const target = event.target;
            const x = parseFloat(target.getAttribute("data-x") || 0) + event.dx;
            const y = parseFloat(target.getAttribute("data-y") || 0) + event.dy;

            target.style.transform = `translate(${x}px, ${y}px)`;
            target.setAttribute("data-x", x);
            target.setAttribute("data-y", y);
          },
        },
      });
    </script>
  </head>
  <body>
    <img src="/assets/images/background/silly_cat.avif" class="wallpaper" />

    <div class="spinny">
      <a class="content" href="//github.com/tsukiiru/website">tsuki</a>
    </div>

    <div class="stack">
      <div class="navigate">
        >_
        <a href="#">info</a>
        //
        <a href="#contacts">contacts</a>
        //
      </div>

      <!-- okay,, now that you are here, you'll have to endure the horrible code by a high school student -->
      <div class="status-cafe">
        <div class="tl"></div>
        <div class="t"></div>
        <div class="tr"></div>
        <div class="l"></div>

        <div class="title">
          <a href="https://status.cafe">~/.cache/status.cafe</a>
        </div>

        <div class="r"></div>
        <div class="l"></div>
        <div class="content">
          <span id="sc-info" class="info">...</span>
          <p id="sc-content" class="full">loading...</p>

          <script>
            fetch("https://status.cafe/users/tsukian/status.json")
              .then((r) => r.json())
              .then((r) => {
                if (!r.content.length) {
                  document.getElementById("sc-info").innerHTML =
                    "nothing to see here";
                  return;
                }
                document.getElementById("sc-info").innerHTML =
                  "> tsuki - " + r.timeAgo;
                document.getElementById("sc-content").innerHTML = r.content;
              });
          </script>
        </div>
        <div class="r"></div>
        <div class="bl"></div>
        <div class="b"></div>
        <div class="br"></div>
      </div>
    </div>

    <div class="window hidden" id="contacts" data-x="0" data-y="0">
      <div class="tl"></div>
      <div class="t"></div>
      <div class="tr"></div>
      <div class="l"></div>

      <div class="title">
        <span>~/files/socials.txt</span>
        <button class="exit-button"></button>
      </div>

      <div class="r"></div>
      <div class="l"></div>
      <div class="content">
        <p>some places you can find me i think :thinker:</p>
        <h3>#spawnpoints</h3>
        <ul>
          <li>
            <a href="https://discord.com/users/451335202342436866">discord</a>
            <i
              >(in case you cant message me, join
              <a href="/waitroom"><em>this</em></a
              >)</i
            >
          </li>
          <li>
            <a href="https://x.com/tsukiiru">twitter</a>
            <i>(who even calls it "X" anyway)</i>
          </li>
          <li>
            <a href="mailto:parsley.dew@proton.me">email </a>
          </li>
          <li>
            <a href="https://github.com/tsukiiru">github</a>
          </li>
          <li>
            <a href="https://matrix.to/#/@tsukiiru:matrix.org">matrix</a>
          </li>
          <li>
            <a href="https://www.last.fm/user/lunar1um">last.fm</a>
          </li>
          <li>
            <a href="/form">form</a>
            <i>(featured!!)</i>
          </li>
        </ul>
      </div>
      <div class="r"></div>
      <div class="bl"></div>
      <div class="b"></div>
      <div class="br"></div>
    </div>

    <div class="window hidden" id="home" data-x="0" data-y="0">
      <div class="tl"></div>
      <div class="t"></div>
      <div class="tr"></div>
      <div class="l"></div>

      <div class="title">
        <span>~/files/weeee.txt</span>
        <button class="exit-button"></button>
      </div>

      <div class="r"></div>
      <div class="l"></div>
      <div class="content">
        <p>hello hi!! its me, <b>tsuki</b>!</p>
        <h3>#notice!</h3>
        <ul>
          <li>im sensitive to sounds, cant really read social cues (autism)</li>
          <li>
            i tend to avoid discussions, specifically really intense and serious
            ones, i cant handle pressure really well ;-;
          </li>
          <li>
            please, <b>please</b> think before saying anything, im really
            sensitive towards anyone's words <i>(down below)</i>, if you have
            possibly made me uncomfortable, there is a very high chance that ill
            just ignore you and avoid talking to you from that point onwards
          </li>
          <li>
            i have high sensory processing sensitivity, apologies if i get
            emotional sometimes
          </li>
          <li>
            i dont like being ignored, if you have any problem with me, just
            tell me, thats still better than leaving me hanging ;-;
          </li>
        </ul>
        <h3>#whoami</h3>
        <ul>
          <li>
            im a silly and quirky creature from the planet
            <em><a href="https://radio.garden">earth</a></em
            >, or more specifically from Vietnam!!1
          </li>
          <li>
            im not really active online, ill try to reply asap if you need me
            though!!
          </li>
          <li>i absolutely looove cute and cozy things :3</li>
          <li>
            im fond of nature and animals, especially cats, dogs, and foxes!
          </li>
          <li>
            hmm, i love my frens, mhm yes, i cant live without my friends, or
            ill die from loneliness and boredom
          </li>
        </ul>
        <h3>#interests</h3>
        <ul>
          <li>
            i listen to music, my fav artists are Good Kid, The Vanished People,
            BoyWithUke, and Radiohead, about genres... i dunno? i can consume
            <i>pretty much</i>
            <a href="/assets/images/pic/real.avif">anything</a>, except for
            <i>phonk</i> or those ai-generated songs (ai is an absolute no-no)
          </li>
          <li>reading books and watching movies is my cup of tea~</li>
          <li>
            im also interested in photography, journaling, drawing, and playing
            music!
          </li>
          <li>
            about games... hmm,,,, id say i enjoy adventure games, a bit more
            towards resources management type of game, you know. i especially
            love games that put effort into their graphics, but not realistic
            ones. sometimes i enjoy it being challenging, sometimes it's easy
            and sweet, depending on my mood :p
          </li>
          <li>
            also my computer is <i>pretty</i> bad for most mainstream games
            nowadays, so you can still spot me playing games from over 10 years
            ago hehe
          </li>
        </ul>
      </div>
      <div class="r"></div>
      <div class="bl"></div>
      <div class="b"></div>
      <div class="br"></div>
    </div>

    <div class="webbadges">
      <p>+things</p>
      <div>
        <iframe
          src="//incr.easrng.net/badge?key=tsuki"
          style="background: url(//incr.easrng.net/bg.gif)"
          title="increment badge"
          frameborder="0"
        ></iframe>
        <a href="https://ezgif.com"
          ><img src="assets/images/things/ezgif.avif"
        /></a>
        <a href="https://archlinux.org"
          ><img src="assets/images/things/arch.avif" title="i use arch btw :3"
        /></a>
        <a href="https://justuse.org"
          ><img src="assets/images/things/justuse.avif"
        /></a>
        <a href="https://gutenberg.org"
          ><img src="assets/images/things/gutenberg.avif"
        /></a>
        <img src="assets/images/things/firefox.avif" />
        <img src="assets/images/things/get_a_computer.avif" />
        <a href="https://bongo.cat"
          ><img src="assets/images/things/bogo.avif"
        /></a>
        <a href="https://soggy.cat"
          ><img src="assets/images/things/soggy.avif" title="sopping wet cat"
        /></a>
        <a href="https://archive.org"
          ><img src="assets/images/things/internet_archive.avif"
        /></a>

        <a href="https://niri-wm.github.io/niri"
          ><img src="assets/images/things/niri.webp" title="aka the best wm"
        /></a>
      </div>

      <p>+peeps</p>
      <div>
        <img
          src="assets/images/things/fish.avif"
          style="image-rendering: pixelated"
        />
        <a href="https://coolsite.cv"
          ><img src="assets/images/things/cv.avif"
        /></a>
        <a href="https://levi.nekoweb.org/"
          ><img src="assets/images/things/levibtn1.avif"
        /></a>
      </div>
    </div>

    <script>
      const WINDOW_ANIMATION_TIME_MS = 300;

      document.querySelectorAll(".navigate>a").forEach((link) => {
        link.addEventListener("click", (e) => {
          e.preventDefault();

          const id = link.getAttribute("href").slice(1);

          history.pushState(null, "", link.getAttribute("href"));

          let elementClassList = !id
            ? document.getElementById("home").classList
            : document.getElementById(id)?.classList;

          // hidden
          if (elementClassList.contains("hidden")) {
            elementClassList.remove("animate-window-out", "hidden");
            elementClassList.add("animate-window-in");
          } else {
            elementClassList.remove("animate-window-in");
            elementClassList.add("animate-window-out");

            setTimeout(
              () => elementClassList.add("hidden"),
              WINDOW_ANIMATION_TIME_MS,
            );
          }
        });
      });

      const CLICK_AUDIO = new Audio("assets/sounds/click.wav");
      const WHOOSH_AUDIO = new Audio("assets/sounds/whoosh.wav");
      WHOOSH_AUDIO.volume = 0.8;

      document.querySelectorAll(".exit-button").forEach((button) => {
        button.addEventListener("click", () => {
          WHOOSH_AUDIO.play();
          let targetClassList = button.closest(".window").classList;

          targetClassList.remove("animate-window-in");
          targetClassList.add("animate-window-out");

          setTimeout(
            () => targetClassList.add("hidden"),
            WINDOW_ANIMATION_TIME_MS,
          );
        });
      });

      document.querySelectorAll("a").forEach((button) => {
        button.addEventListener("click", () => {
          CLICK_AUDIO.play();
        });
      });
    </script>
  </body>
</html>