-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
142 lines (131 loc) · 8.62 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Hack Club Journeys - Thomas</title>
<meta name="title" content="Hack Club Journeys - Thomas" />
<meta name="description" content="Thomas's wild journeys with Hack Club" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Hack Club Journeys - Thomas" />
<meta property="og:description" content="Thomas's wild journeys with Hack Club" />
<meta property="og:image" content="https://cloud-regpmmq7q-hack-club-bot.vercel.app/0journey-cover.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Hack Club Journeys - Thomas" />
<meta property="twitter:description" content="Thomas's wild journeys with Hack Club" />
<meta property="twitter:image" content="https://cloud-regpmmq7q-hack-club-bot.vercel.app/0journey-cover.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/hc-journey/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/hc-journey/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/hc-journey/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/hc-journey/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/hc-journey/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/hc-journey/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/hc-journey/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/hc-journey/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/hc-journey/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/hc-journey/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/hc-journey/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/hc-journey/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/hc-journey/favicon-16x16.png">
<link rel="manifest" href="/hc-journey/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/hc-journey/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function calculateAge(birthDate) {
const now = new Date();
const birth = new Date(birthDate);
let age = now.getFullYear() - birth.getFullYear();
const m = now.getMonth() - birth.getMonth();
if (m < 0 || (m === 0 && now.getDate() < birth.getDate())) {
age--;
}
const daysInYear = (now.getFullYear() % 4 === 0 && (now.getFullYear() % 100 !== 0 || now.getFullYear() % 400 === 0)) ? 366 : 365;
const daysLived = (now - birth) / (1000 * 60 * 60 * 24);
const ageDecimal = (daysLived / daysInYear).toFixed(2);
return ageDecimal;
}
document.addEventListener("DOMContentLoaded", function() {
const ageSpan = document.getElementById("ageSpan");
const birthDate = "2004-09-28";
ageSpan.textContent = calculateAge(birthDate);
});
</script>
<style>
@media (max-width: 768px) {
.audio-indicator {
display: none;
opacity: 0;
}
}
</style>
</head>
<body style="display: flex; justify-content: center;">
<audio id="audio-player" src="https://cloud-avau7erv7-hack-club-bot.vercel.app/0riptide-8bit_audio.mp4"></audio>
<div class="audio-indicator" id="audio-indicator" style="position: fixed; font-size: 12px; left: 16px; bottom: 16px; color: #021995; border: 1px solid #021995; background-color: #FFFDE8; display: flex; padding: 12px 8px;">
<p style="margin: 0px"><span style="background-color: #021995; color: #FFFDE8; padding: 4px 6px;">Space</span> for jam</p>
</div>
<div style="max-width: 720px;">
<a href="./index.html">
<div class="header">
<h1>Journeys @</h1>
<img style="height: 78px" src="./assets/hc-logo.png"/>
<h1 id="date">(2023-2024)</h1>
</div>
</a>
<img style="display: flex; width: 100%; margin-top: 16px" src="./assets/journey-cover.png"/>
<p>My Journey:</p>
<ul>
<li><a href="./how-I-discovered-hack-club.html">How I discovered Hack Club</a></li>
<li><a href="./how-I-started-my-hack-club.html">How I started my Hack Club</a></li>
<li><a href="./flying-to-india-for-epoch.html">Flying to India for Epoch</a></li>
<li><a href="./south-carolinas-first-hs-hackathon.html">South Carolina’s First HS Hackathon</a></li>
<li><a href="./why-clubs-directory-failed.html">Why Clubs Directory Failed</a></li>
<li><a href="./driving-to-angel-hacks-after-graduation.html">Driving to Angel Hacks after Graduation</a></li>
<li><a href="./moving-to-vt-for-gap-year-hyde-st.html">Moving to VT for Gap Year + Hyde St</a></li>
<li><a href="./hack-club-jams-first-big-project.html">Hack Club Jams - first big project</a></li>
<li><a href="./pizza-grant-first-partnership.html">Pizza Grant - first partnership</a></li>
<li><a href="./taking-over-operations-more-responsibility.html">Taking over operations - more responsibility</a></li>
<li><a href="./summit-much-more-responsibility.html">Summit - much more responsibility</a></li>
<li><a href="./trail-the-hardest-thing-ive-ever-done.html">Trail - the hardest & best thing I’ve ever done</a></li>
<li><a href="./friends-what-lasts-after-the-gap-year.html">Friends - what lasts after the gap year...</a></li>
<li><a href="./side-projects-weekend-ships.html">Side Projects - weekend ships</a></li>
<li><a href="./whats-next-japan.html">What's Next? Japan?</a></li>
</ul>
<p>
Hey, Thomas here! I’m <span id="ageSpan"></span> years old (as of today), but as of writing this I am 19.78 years old. I joined Hack Club when I was 17 years old.
<br/><br/>
Over the past couple years, I made some decisions that will forever alter the course of my life! One of which was deciding to start a Hack Club at <a href="https://dhs.spart6.org/">my high school in South Carolina</a>... another was deciding to leave the country for the first time to go to <a href="https://github.com/hackclub/epoch">my first in-person hackathon</a>, and another being deciding to work at Hack Club for a year with my best friend (Dieter) instead of going to university.
<br/><br/>
On this page, you’ll get to hear about each one of these (& many more) adventures & decisions that I took over the past couple years. You’ll learn a bit about me, a bit about Hack Club, and a bit about what it’s like to take a gap year!
<br/><br/>
I’m now a Hack Club alum (I no longer work at Hack Club as of Wednesday July 31, 2024). I’ll still check the Slack from time to time & you’re always welcome to reach out <a href="https://hackclub.slack.com/team/U041FQB8VK2">@thomas</a>. I am grateful for all that Hack Club has offered me over the past couple years, and I am proud of the work I did to help Hack Clubbers discover the joy of building projects with their friends.
<br/><br/>
until next time... <span style="font-size: 14px; font-weight: 500;">bom</span> <span style="font-size: 12px; font-weight: 600;">bom</span> <span style="font-size: 8px; font-weight: 700;">bommmmmmmmmmm...</span>
<br/>
<br/>
~Thomas
</br>
</p>
</div>
</body>
<script>
console.log("hmm... what are you looking for in here..")
console.log("it's probably not on serenidad.app")
document.addEventListener('DOMContentLoaded', function() {
const audioPlayer = document.getElementById('audio-player');
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
const audioIndicator = document.getElementById('audio-indicator');
audioIndicator.style.display = "none"
event.preventDefault(); // Prevent default spacebar action (scrolling)
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
}
});
});
</script>
</html>