-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
366 lines (324 loc) · 21.9 KB
/
index.html
File metadata and controls
366 lines (324 loc) · 21.9 KB
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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joel's Hiding Place</title>
<link rel="stylesheet" href="styles.css?=v3">
<link rel="icon" type="image/jpg" href="unnamed.jpg">
</head>
<body>
<div class="main-wrapper">
<header class="site-header">
<h1 class="site-title">Joel Alexander</h1>
</header>
<!-- Navigation -->
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#now">Now</a></li>
<li><a href="#writings">Writings</a></li>
<li><a href="#projects">Programmings</a></li>
<li><a href="#progress">Progress</a></li>
<li><a href="#devotional">Devotional</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<div class="content">
<!-- Home Section -->
<section id="home">
<h1>Welcome to Joel's Hiding Place</h1>
<p>Why hello there! I'm Joel - the coder of computers, the writer of words, and the listener of songs.
</p>
<p>I write songs with my cousin and sister, wish I could sing, and jam out on the piano. <em>(That
sounded cooler in my head)</em></p>
<p>In my free time, I drink coffee, write stories, and program games.</p>
</section>
<!-- Now Section -->
<section id="now">
<h2>What I'm Doing Now</h2>
<p><strong>👨💻 Programming: </strong>TART - <em>The Automatic Ripping Tool</em>.</p>
<p><strong>✍️ Writing: </strong><em>Bloodstained Honor</em>, the first novel set in the Echoverse. I am
also plotting a Sci-Fi anthology.</p>
<p><strong>📚 Reading: </strong><em>Isles of the Emberdark</em> by Brandon Sanderson.</p>
<p><strong>🎵 Music: </strong>Preparing myself for Breach by listening to the TOP Discography.</p>
<p><strong>🎮 Games: </strong>Lethal Company. Repo. Peak. Basically anything that has proximity chat.
Also Minecraft Bedwars.
</p>
<p><strong>🧠 Learning: </strong>Attempting to teach myself Piano. Experimenting with creating
interpreters. Considering actually learning C++.</p>
<br>
<p><em>Last updated: September 10th, 2025 | Inspired by <a
href="https://nownownow.com">nownownow.com</a></em></p>
<br>
<h2>Now Playing</h2>
<div class="spotify-widget">
<img id="spotify-album" src="" alt="Album Art">
<div class="spotify-info">
<p id="spotify-track">Track Name</p>
<p id="spotify-artist">Artist Name</p>
</div>
<div class="progress-bar">
<div class="progress-fill" id="spotify-progress"></div>
</div>
</div>
<p>This widget displays what song I am currently listening to.</p>
<p><em>Thanks to <a href="https://justjoshindev.github.io">Josh</a> for the idea.</em></p>
</section>
<!-- Writings Section -->
<section id="writings">
<h2>Writings ✍️</h2>
<p>A place to share my writings and worlds.</p>
<div class="word-count">
<div>Bloodstained Honor Word Count</div>
<div class="count">30,463</div>
<div>And counting...</div>
</div>
<div class="project">
<div class="project-header" onclick="toggleProject('bloodstained-honor')">
<h2 class="project-title">Bloodstained Honor <span class="project-status">First Draft</span>
</h2>
<div class="project-stats">
<span>📖 30,463 words</span>
<span>🎯 Goal: 100,000</span>
</div>
<p style="margin: 10px 0 0 0; font-size: 1.1rem;">A dark fantasy of blood, power, and political
strife.</p>
</div>
<div class="project-content" id="bloodstained-honor-content">
<div class="content-tabs">
<button class="tab-button active"
onclick="showTab(event, 'bloodstained-honor', 'overview')">Overview</button>
<button class="tab-button"
onclick="showTab(event, 'bloodstained-honor', 'characters')">Characters</button>
<button class="tab-button"
onclick="showTab(event, 'bloodstained-honor', 'lore')">World</button>
<button class="tab-button"
onclick="showTab(event, 'bloodstained-honor', 'excerpts')">Excerpts</button>
</div>
<div class="tab-content active" id="bloodstained-honor-overview">
<h3>Project Overview</h3>
<div class="progress-bar">
<div class="progress-fill" style="width: 30%"></div>
</div>
<p><strong>Progress:</strong> 30% complete (30,463 / 100,000 words)</p>
<p><strong>Genre:</strong> Dark Fantasy</p>
<p><strong>Themes:</strong> Control, power, political drama.</p>
<p><strong>Synopsis:</strong> Edvin Fairbairns is a killer by trade, bound by contracts and
sharpened by years of violence. He doesn't ask questions. He doesn't miss. And he never
breaks a deal. But when a shadowy noble hires him to assassinate the Emperor of
Lorthenor Edvin begins to realize this job is
unlike any he's ever taken before. Political tensions are rising. Old alliances are
breaking. And someone is watching his every move. Pushed to the edge, Edvin must decide
if he's just a weapon for hire - or something more. Because the deeper he goes, the more
he realizes that this isn't just another job. It's a war. </p>
<p><strong>Current Chapter:</strong> Chapter 13 - "The Power to Persuade"</p>
<p><strong>Recent Milestone:</strong> Completed Chapter 12, a major turning point where
Edvin awakens.</p>
</div>
<div class="tab-content" id="bloodstained-honor-characters">
<h3>Main Characters</h3>
<div class="character-card">
<h4 class="character-name">Edvin Fairbairns</h4>
<p><strong>Role:</strong> Protagonist, Assassin</p>
<p><strong>Age:</strong> Late 20s</p>
<p>Edvin is a merciless assassin forged by years under the brutal tutelage of Kelton
Blaine. Once a starving street orphan, he was shaped into a weapon that lives only
for contracts and the blood they spill. Outwardly cold and efficient, he carries
deep scars from a life where survival always outweighed morality. His eyes sometimes
flare crimson, a hint of the darker forces within him, though he resists believing
it means anything more than madness. His struggle
lies between remaining a blade for hire or finding redemption in a world that has
never shown him mercy.</p>
</div>
<div class="character-card">
<h4 class="character-name">Kael</h4>
<p><strong>Role:</strong> Edvin's mentor</p>
<p><strong>Age:</strong> Unknown</p>
<p>Kael is a Bloodweaver, a mysterious figure who consumes sentient blood to manipulate
the Primal Rhythms of existence. To most, he appears as a phantom who slips through
shadows and bends the laws of nature. His motives are rarely clear, though he has a
tendency to nudge events forward as if he alone sees the wider song being played. He
carries an otherworldly presence, sometimes speaking in riddles, sometimes with
piercing clarity that suggests he knows far more than any mortal should. His
interest in Edvin is both as a warning and as a test, pushing the assassin toward
choices that could shape the fate of empires. Whether ally or manipulator, Kael
remains a figure impossible to ignore.</p>
</div>
<div class="character-card">
<h4 class="character-name">Duke Raymon</h4>
<p><strong>Role:</strong> Primary Antagonist</p>
<p><strong>Age:</strong> 52</p>
<p>Duke Raymon is the shadow at the center of the Irae’s conspiracy, a noble whose
ambition long ago eclipsed any sense of morality. Cunning, ruthless, and utterly
convinced of his own destiny, he views human lives as pieces on a board to be moved
or sacrificed as needed. Behind his schemes lies the mysterious benefactor across
the sea, but Raymon himself is more than just a pawn-he is a man who thrives on
power and the thrill of control. His voice carries the weight of authority, his
anger sparks fear even in his closest allies, and his threats are rarely empty.
Where others see chaos in bloodshed, Raymon sees opportunity, and he has no
hesitation in wielding assassins, spies, or forbidden magics to bend the world
toward his will. To Edvin, he is not only an employer but a looming reminder of the
web of power and corruption he cannot escape, and perhaps the most dangerous enemy
of all-because he believes wholeheartedly that the world belongs to him.</p>
</div>
</div>
<div class="tab-content" id="bloodstained-honor-lore">
<h3>World Building</h3>
<div class="lore-section">
<h4 class="lore-title">Astural</h4>
<p>Known as the City of the Gods, Astural is a sprawling metropolis of towering stone
buildings and glittering spires that seem to reach for the heavens. Built on sacred
ground, it is both a center of faith and a hub of trade, where temples rise beside
taverns and whispers of divine favor mix with mortal ambition. To outsiders, it
feels eternal, as though the gods themselves laid its foundation, yet beneath its
grandeur lie alleys of secrets, hidden guilds, and a constant struggle for power.
</p>
</div>
<div class="lore-section">
<h4 class="lore-title">Empalinor</h4>
<p>The City of Kings rests within a vast valley, surrounded by sheer rock walls that
serve as natural fortifications. At its heart stands the imperial palace, a massive
fortress of stone and steel, teeming with guards and advisers devoted to the
Emperor’s protection. Unlike Astural’s spiritual aura, Empalinor exudes authority
and order-its streets are carefully laid, its soldiers disciplined, and its walls
seemingly unbreakable. It is the seat of Lorthenor’s power, and thus the most
coveted-and most dangerous-target in the known world.</p>
</div>
<div class="lore-section">
<h4 class="lore-title">Bloodweaving</h4>
<p>Bloodweaving is the forbidden art of consuming sentient blood to tap into the Primal
Rhythms, the underlying forces that bind the world together. Practitioners
experience surges of strength, speed, or even stranger powers, but each vial carries
a cost-the rhythm of the blood threatens to consume the weaver as much as they
command it. The practice is shrouded in secrecy, dismissed by most as myth, yet
those who wield it can bend the natural laws of body and spirit. To some it is
power, to others corruption, but to all it is a reminder that blood itself carries
more than just life.</p>
</div>
</div>
<div class="tab-content" id="bloodstained-honor-excerpts">
<h3>Story Excerpts</h3>
<div class="excerpt">
Edvin Fairbairns, merciless assassin and mercenary for hire, toyed with his knife as he
waited to kill one of the most powerful men in the Frenta Republic: The Grand Duke. He
didn’t have anything against the man; in fact, he thought he was a noble ruler. But
Edvin’s opinion didn’t matter. All that mattered was the job, and he happened to be very
good at his job.
</div>
<div class="excerpt">
The Duke said nothing for a long moment. “This does not bother me. Would you rather he
rush in
blind, and get himself killed? I think not. Do you have any… useful news?” He moved one
wooden piece—a soldier—two spaces sideways on the map.
</div>
<div class="excerpt">
“Its too early for you to bleed like that.” The voice echoed from the trees. Kael
stepped from behind a crooked oak, his robe darker than before, lined in something that
shimmered like oil.
</div>
<p><em>These excerpts are from chapters 1, Interlude II, and 10 respectively.</em>
</p>
</div>
</div>
</div>
<p><em>All word counts are pulled from my Google Drive every 30 seconds.</em></p>
</section>
<!-- Devotional Section -->
<section id="devotional">
<h2>Weekly Devotional</h2>
<blockquote>
<p>"Finally, all of you, be like-minded, be sympathetic, love one another, be compassionate and
humble."</p>
<cite>- 1 Peter 3:8</cite>
</blockquote>
<p>We live in a world filled with hate, anger, and division. Every day we see people tearing each other
down instead of
lifting each other up. But God calls us to a different way, a way of compassion and
humility.</p>
<p>God calls us to love instead of hate, to be slow to anger, and to walk in humility.
When we live this way, we reflect the heart of Jesus in a world that desperatly needs His light.
</p>
<p><em>Devotional published once a week.</em></p>
</section>
<!-- Projects Section -->
<section id="projects">
<h2>Programmings 💻</h2>
<p>My recent programmings. From applications to websites to backend tools.</p>
<div class="grid">
<div class="project-tile">
<h3>Retro Website</h3>
<p>This very website! A CRT 80s vibe!</p>
<p><strong>Tech:</strong> Vanilla HTML, CSS, and JS.</p>
</div>
<div class="project-tile">
<h3>Bitpad</h3>
<p>A developer-focused text editor for notes, ideas, and inspiration built with PySide6. It
features session persistence, find-replace, and everything else you'd expect from a
notepad-like tool.</p>
<p><strong>Tech:</strong> Python, Qt6.</p>
</div>
<div class="project-tile">
<h3>mDirt</h3>
<p>A desktop application that provides a UI to make Minecraft Datapacks with - no code required.
</p>
<p><strong>Tech:</strong> Python, Qt6.</p>
</div>
</div>
</section>
<!-- Progress Section -->
<section id="progress">
<h2>Progress Updates 🚀</h2>
<p>Development logs, milestones, and the journey of bringing ideas to life.</p>
<div class="progress-timeline">
<div class="progress-entry">
<div class="progress-date">August 22, 2025</div>
<div class="progress-content">
<h3>Unnamed Sandbox Game - Beginnings</h3>
<div class="progress-tags">
<span class="tag game-dev">Game Dev</span>
</div>
<p>Begun writing out the plan for a rather ambitious 2d sandbox game! Currently planning on
going with a dark grungy vibe. Planning on having the world infinite, vertically and
horizontally. More info coming soon.</p>
</div>
</div>
<div class="progress-entry">
<div class="progress-date">August 16, 2025</div>
<div class="progress-content">
<h3>One Last Time - Soundtrack</h3>
<div class="progress-tags">
<span class="tag game-dev">Game Dev</span>
<span class="tag in-progress">In Progress</span>
</div>
<p>Working on composing the soundtrack for the game! So far, I have a draft of the start
screen theme, and I am starting work on the main theme.</p>
</div>
</div>
</div>
<p><em>Progress updates posted whenever something cool happens (or when I remember to update this
section).</em></p>
</section>
<!-- About Section -->
<section id="about">
<h2>About Me 👋</h2>
<p>Hello! I'm Joel - a developer, writer, coffee-drinker, and procrastinator.</p>
<ul class="fun-facts">
<li>🚀 Started coding at age 8 with Scratch</li>
<li>☕ Coffee consumption directly correlates with code quality</li>
<li>🎮 Retro gaming enthusiast - nothing beats the classics</li>
<li>🌟 I love Git. I hate Git. - Every programmer ever</li>
<li>🎸 I also write songs. I cannot sing, sadly</li>
<li>🎮 Games get made when I find motivation</li>
</ul>
<p>When I'm not programming, writing, or thinking about programming and writing, you can usually find me
playing games with friends, solving a Rubik's cube, or doing card tricks.</p>
</section>
</div>
</div>
<footer>
<p>© Joel's Hiding Place, 2025</p>
</footer>
<script src="script.js"></script>
</body>
</html>