README.md
public/README.md
README.md
public/README.md
fonts/MapleMono-Woff2/LICENSE.txt
public/fonts/MapleMono-Woff2/LICENSE.txt
fonts/MapleMono-Woff2/LICENSE.txt
public/fonts/MapleMono-Woff2/LICENSE.txt
fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Bold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-BoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraLight.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ExtraLightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Italic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Light.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-LightItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Medium.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-MediumItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Regular.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-SemiBold.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-SemiBoldItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-Thin.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2
fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2
public/fonts/MapleMono-Woff2/MapleMono-ThinItalic.ttf.woff2
fonts/MapleMono-Woff2/config.json
public/fonts/MapleMono-Woff2/config.json
fonts/MapleMono-Woff2/config.json
public/fonts/MapleMono-Woff2/config.json
img/bsky-logo.svg
public/img/bsky-logo.svg
img/bsky-logo.svg
public/img/bsky-logo.svg
-21
index.html
-21
index.html
···
1
-
<!DOCTYPE html>
2
-
<html>
3
-
<head>
4
-
<link rel="stylesheet" href="styles.css"/>
5
-
<title>cookie's site</title>
6
-
</head>
7
-
<body>
8
-
<h1>cookie's home on the web</h1>
9
-
<p>welcome to my humble abode :)</p>
10
-
<p>i like to tinker with the web and low-level programming. i'm perpetually unsatisfied and mildly suffer from impostor syndrome.</p>
11
-
<p>this site is a perpetual work in progress. thank you for visiting!</p>
12
-
<section>
13
-
<h2>socials</h2>
14
-
<p>
15
-
<img class="link-logo" src="img/bsky-logo.svg" alt="bluesky logo"/>
16
-
<a href="bsky.app/profile/did:plc:pyzvvyrh6eudle55nhqe62tv/" style="color: #2776f5">bluesky</a>
17
-
</p>
18
-
</section>
19
-
</body>
20
-
</html>
21
-
<script src="snow.js"/>
···
public/.styles.css.swp
public/.styles.css.swp
This is a binary file and will not be displayed.
+70
public/index.html
+70
public/index.html
···
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+
<link rel="stylesheet" href="styles.css"/>
6
+
<title>cookie's site</title>
7
+
</head>
8
+
<body>
9
+
<h1>cookie's home on the web</h1>
10
+
<p>welcome to my humble abode!</p>
11
+
<p>i like to tinker with the web and low-level programming, although i don't have much to show for it, yet. i mildly suffer from impostor syndrome.</p>
12
+
<p>just like me, this site is a perpetual work in progress. </p>
13
+
<p>thank you for visiting. :)</p>
14
+
<section class="sembreak-countdown">
15
+
<h2>is it sem break yet?</h2>
16
+
<div class="countdown">
17
+
<span class="time-numerals" id="days">00</span><span class="unit-of-time">D</span>
18
+
<span class="time-numerals" id="hours">00</span><span class="unit-of-time">H</span>
19
+
<span class="time-numerals" id="minutes">00</span><span class="unit-of-time">M</span>
20
+
<span class="time-numerals" id="seconds">00</span><span class="unit-of-time">S</span>
21
+
</div>
22
+
<p>... to go.</p>
23
+
</section>
24
+
<section>
25
+
<h2>socials</h2>
26
+
<p>
27
+
<img class="link-logo" src="img/bsky-logo.svg" alt="bluesky logo"/>
28
+
<a href="https://bsky.app/profile/did:plc:pyzvvyrh6eudle55nhqe62tv/" style="color: #2776f5">bluesky</a>
29
+
</p>
30
+
</section>
31
+
</body>
32
+
</html>
33
+
<script>
34
+
const daysEl = document.getElementById("days");
35
+
const hoursEl = document.getElementById("hours");
36
+
const minutesEl = document.getElementById("minutes");
37
+
const secondsEl = document.getElementById("seconds");
38
+
39
+
const now = Date.now();
40
+
const semBreakTimestamp = new Date("2026-01-05T03:00:00Z"); // time is in UTC
41
+
let timeDiffMs = semBreakTimestamp.getTime() - now;
42
+
console.log(timeDiffMs);
43
+
44
+
function divmod(a, b) {
45
+
const quotient = Math.floor(a / b);
46
+
const remainder = a % b;
47
+
return [quotient, remainder];
48
+
}
49
+
50
+
function updateCountdown() {
51
+
const [days, r1] = divmod(timeDiffMs, 1000*60*60*24);
52
+
console.log(days, r1);
53
+
const [hours, r2] = divmod(r1, 1000*60*60);
54
+
console.log(hours, r2);
55
+
const [mins, r3] = divmod(r2, 1000*60);
56
+
console.log(mins, r3);
57
+
const [secs, r4] = divmod(r3, 1000);
58
+
console.log(secs, r4);
59
+
60
+
daysEl.innerText = days;
61
+
hoursEl.innerText = hours;
62
+
minutesEl.innerText = mins;
63
+
secondsEl.innerText = secs;
64
+
65
+
timeDiffMs -= 1000;
66
+
}
67
+
68
+
69
+
const intervalId = setInterval(() => { updateCountdown(); if (timeDiffMs===0) clearInterval(intervalId); }, 1000); // 1000ms = 1s
70
+
</script>
+11
styles.css
public/styles.css
+11
styles.css
public/styles.css
···
42
text-decoration: underline dotted var(--color-dark-primary);
43
}
44
45
+
h2 {
46
+
color: #aaa;
47
+
}
48
+
49
section {
50
margin: 2em 0;
51
}
···
60
vertical-align: middle;
61
margin-right: 1em;
62
}
63
+
64
+
.countdown {
65
+
font-size: 3rem;
66
+
}
67
+
68
+
.unit-of-time {
69
+
font-size: 0.4em;