My personal site hosted @ https://indexx.dev
indexx.dev
1---
2import Layout from "../layouts/Layout.astro";
3---
4
5<Layout title="hello" description="insert wave emoji">
6 <main id="page" class="text-center">
7 <h1 class="animated-border unselectable spin">
8 <svg
9 width="24"
10 height="24"
11 viewBox="0 0 24 24"
12 fill="none"
13 xmlns="http://www.w3.org/2000/svg"
14 style="position: absolute; top: -5px; margin-left: -2px; transform: rotate(-10deg); color: gold;"
15 >
16 <path
17 fill-rule="evenodd"
18 clip-rule="evenodd"
19 d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"
20 fill="currentColor"></path>
21 </svg>
22 <span style="position: relative; z-index: 2;">index</span>
23 </h1>
24 <span style="display: block; margin-top: -5px;"
25 >hey, i'm index. have a great day 👋
26 </span>
27 <small
28 style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;"
29 >i usually mess around in Typescript, and recently i've been exploring the <a
30 href="https://atproto.com/"
31 target="_blank"><b>AT protocol</b>.</a
32 >
33 </small
34 >
35 <small
36 style="display: block; margin-top: -5px;color: rgb(0, 84, 106);font-size: 0.8rem;"
37 >
38 i'm interested in making an open-source Goodreads alternative on the protocol :)
39 </small
40 >
41 <ul
42 class="d-flex mt-4 mb-1"
43 style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;"
44 >
45 <a
46 href="https://github.com/indexxing/"
47 target="_blank"
48 class="circle-hover"
49 >
50 <svg viewBox="0 0 70 36">
51 <path
52 d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"
53 ></path>
54 </svg>
55 GitHub
56 </a>
57 <a
58 id="discord-link"
59 href="#"
60 class="circle-hover"
61 data-bs-toggle="tooltip"
62 data-bs-title="index.lua"
63 >
64 <svg viewBox="0 0 70 36">
65 <path
66 d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"
67 ></path>
68 </svg>
69 <span> Discord </span>
70 </a>
71 <a
72 href="https://bsky.app/profile/did:plc:sfjxpxxyvewb2zlxwoz2vduw"
73 target="_blank"
74 class="circle-hover"
75 >
76 <svg viewBox="0 0 70 36">
77 <path
78 d="M6.9739 30.8153H63.0244C65.5269 30.8152 75.5358 -3.68471 35.4998 2.81531C-16.1598 11.2025 0.894099 33.9766 26.9922 34.3153C104.062 35.3153 54.5169 -6.68469 23.489 9.31527"
79 ></path>
80 </svg>
81 Bluesky
82 </a>
83 </ul>
84 <a
85 href="#"
86 id="projects-button"
87 data-bs-toggle="tooltip"
88 data-bs-title="(Some of) My Projects"
89 data-bs-placement="bottom">. . .</a
90 >
91 </main>
92 <section id="projects-pane" data-bs-theme="dark">
93 <h6
94 class="text-muted text-center"
95 style="text-transform: uppercase; letter-spacing: 5px;"
96 >
97 (SOME OF) MY PROJECTS
98 </h6>
99
100 <ul class="list-unstyled">
101 <li>
102 <a
103 href="https://github.com/Box-Critters-Localbox/"
104 target="_blank"
105 class="text-reset"
106 >
107 <div class="project-card">
108 <small class="text-muted">since November 2024</small>
109 <h4>Box Critters Localbox</h4>
110 Looking to relive Box Critters, a defunct virtual world made by Rocketsnail
111 Games, well you're in luck! In this GitHub organization, you can find:
112 a Typescript, unofficial server remake of the game server, documentation
113 surrounding the game, and an Electron desktop app for playing the game
114 locally.
115 </div>
116 </a>
117 <a
118 href="https://github.com/ToonkinsRetooned/"
119 target="_blank"
120 class="text-reset"
121 >
122 <div class="project-card">
123 <small class="text-muted">since October 2024</small>
124 <h4>Toonkins Retooned</h4>
125 Looking to relive Toonkins, a defunct virtual world made by Shenanigames,
126 well you're in luck! In this Github organization, you can find: a Typescript,
127 unofficial server remake of the game server, and a decompiled Unity project
128 reassembly of the game (Unity project source coming soon).
129 <br />
130 <small class="text-muted"
131 >Note: "Retooned" is purposely spelled wrong, I know how to spell
132 I swear 😭</small
133 >
134 </div>
135 </a>
136 <a
137 href="https://github.com/indexxing/PolyPlus-Rewrite/"
138 target="_blank"
139 class="text-reset"
140 >
141 <div class="project-card">
142 <small class="text-muted">since October 2024, coming soon</small>
143 <h4>Poly+ Rewrite</h4>
144 A rewrite of Poly+, my quality-of-life browser extension for Polytoria.com.
145 Built entirely fresh using the WXT extension framework, Typescript, and
146 with added better overall code quality. This version is not public yet.
147 </div>
148 </a>
149 <a
150 href="https://polycode.vercel.app/"
151 target="_blank"
152 class="text-reset"
153 >
154 <div class="project-card">
155 <small class="text-muted">since August 2023, archived</small>
156 <h4>PolyCode</h4>
157 PolyCode provides free code snippets, tutorials, and toolbox resources
158 for Polytoria.
159 <br />
160 <small class="text-muted"
161 >Note: This was made awhile ago, and if I were to redo it, I'd
162 implement SSR instead of doing JSON file fetching.</small
163 >
164 </div>
165 </a>
166 <a
167 href="https://github.com/indexxing/PolyPlus/"
168 target="_blank"
169 class="text-reset mb-3"
170 >
171 <div class="project-card">
172 <small class="text-muted">since February 2023, archived</small>
173 <h4>Poly+</h4>
174 Poly+ is a quality-of-life Chromium-based extension for Polytoria!
175 </div>
176 </a>
177 </li>
178 </ul>
179 </section>
180 <script>
181 const tooltips = document.querySelectorAll(
182 '[data-bs-toggle="tooltip"]'
183 ) as NodeListOf<Element>;
184 [...tooltips].forEach((element) => {
185 //@ts-ignore
186 new bootstrap.Tooltip(element);
187
188 element.addEventListener("click", () => (element as HTMLElement).blur());
189 });
190
191 const page = document.getElementById("page")!;
192 const projectsButton = document.getElementById("projects-button")!;
193 projectsButton.addEventListener("click", function () {
194 projectsButton.blur();
195 page.classList.toggle("side");
196 if (!page.classList.contains("side")) {
197 // fade in
198 fade("projects-pane", 1, 0, 0.5);
199 } else {
200 // fade out
201 fade("projects-pane", 0, 1, 0.5);
202 }
203 });
204
205 /*
206 I'm lazy so thank you, Neel
207 credits: https://blog.abhranil.net/2011/11/03/simplest-javascript-fade-animation/
208 * slightly modified
209 */
210 function fade(
211 id: string,
212 initialOpacity: number,
213 finalOpacity: number,
214 totalTime: number
215 ) {
216 const element = document.getElementById(id);
217 if (!element) {
218 throw new Error("why");
219 }
220 if (initialOpacity == 0) {
221 element.style.visibility = "visible";
222 element.style.pointerEvents = "auto";
223 } else {
224 element.style.pointerEvents = "none";
225 setTimeout(() => {
226 element.style.visibility = "hidden";
227 }, totalTime);
228 }
229
230 const currentTick = new Date().getTime();
231 const elapsed = currentTick - totalTime;
232 const newOpacity =
233 initialOpacity +
234 ((finalOpacity - initialOpacity) * elapsed) / totalTime;
235 if (
236 Math.abs(newOpacity - initialOpacity) >
237 Math.abs(finalOpacity - initialOpacity)
238 ) {
239 element.style.opacity = finalOpacity.toString();
240 return;
241 }
242
243 element.style.opacity = newOpacity.toString();
244 }
245 </script>
246</Layout>