DIGITALITY
RESOURCES & CREDITS
A massive thank you to all the creators, developers, and artists who made the assets that power this website.
>> site resources & credits
x
| Item | Type | Used |
|---|---|---|
- free hosting platform |
Host | / |
- real-time db & auth |
JS/DB | /index /guestbook |
- site statistics |
API | /index |
- anonymous image hosting |
API | /guestbook |
- public ip fetcher |
API | /index /guestbook |
- ip geolocation |
API | /index |
- dynamic country flags |
Image | /index |
- website favicon fetcher |
API | /index /guestbook |
- primary pixel font |
Font | / |
- retro header font |
Font | /index /resources /guestbook |
- retro pointers |
CSS | / |
- scalable vector icons |
CSS | / |
- brick-style layout |
CSS | /resources |
>> site inspirations
x
-
my main inspiration to start a neocities site and the spark for this entire digital aesthetic! ✨
-
my specific inspiration for this resources page layout. the window aesthetic and tables are top tier.
-
my own custom music player script, originally inspired by classic winamp clones and retro web audio players.
-
the general aesthetic for the terminal windows, draggable elements, and classic UI borders.
>> art & multimedia
x
-
used for hosting the raw mp3 and mp4 files for the music player.
-
used to hotlink high-quality album cover art for the music player.
-
used for embedding the featured music videos on the homepage carousel.
-
the classic "ding" sound used when a new message arrives in the chatbox (Microsoft Corporation).
-
fantastic tool for generating fallback placeholder images automatically.
-
fair use & copyrights:
all music, game icons, and character art belong to their respective original artists and owners. all 88x31 web buttons displayed in the footer are hotlinked directly to their respective creators' sites.
>> tech & code breakdowns
x
the guestbook uses
marked.js to parse markdown into HTML, and then immediately runs it through DOMPurify to strip out any malicious scripts before rendering it to the page securely. render.js
const parsedMd = marked.parse(entry.message, { breaks: true });
const safeMessage = DOMPurify.sanitize(parsedMd);
when you upload a large avatar to the guestbook, the browser draws it onto an invisible
<canvas> element and squishes it down to a tiny JPEG before uploading it to Catbox.moe to save bandwidth. upload.js
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob((blob) => {
uploadToCatbox(blob, 'compressed_' + file.name);
}, 'image/jpeg', 0.85);
secure email hashing
to protect privacy, the guestbook uses
CryptoJS to generate an MD5 hash of your email locally in your browser. only the hash is sent to the database to fetch your gravatar, keeping the original email completely secret! auth.js
const email = gravatarEmailInput.value.trim();
const hash = CryptoJS.MD5(email.toLowerCase()).toString();
finalAvatar = `https://www.gravatar.com/avatar/${hash}?d=identicon`;
the homepage reads the user's local
getHours() and getMonth() to figure out the time of day and current season. it then attaches classes like .time-sunset or .theme-halloween to the body to instantly swap out CSS root variables (like colors) across the whole site! theme.js
const date = new Date(); const hour = date.getHours(); let timeClass = 'time-night'; if (hour >= 6 && hour < 12) timeClass = 'time-morning'; else if (hour >= 12 && hour < 17) timeClass = 'time-afternoon'; else if (hour >= 17 && hour < 20) timeClass = 'time-sunset'; document.body.classList.add(timeClass);
pure CSS! a
linear-gradient background is animated horizontally across a pseudo-element over the button. styles.css
.site-pill.special-glow-pill::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.4) 35%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.4) 55%, transparent 70%);
background-size: 250% 100%;
animation: mc-enchant 3s infinite linear;
}
@keyframes mc-enchant {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
for the top countries tracker, i needed to count unique users without storing raw IP addresses in the database. i used the native Web Crypto API to hash them with a salt first!
crypto.js
async function hashIP(ip) {
const msgUint8 = new TextEncoder().encode(ip + "_digitality_salt");
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
return Array.from(new Uint8Array(hashBuffer))
.map(b => b.toString(16).padStart(2, '0')).join('');
}
no heavy canvas needed. when you click, it spawns HTML
<span> elements and assigns random CSS custom variables (--tx, --ty, --rot) for the trajectory. A simple CSS @keyframes handles the actual movement using a translate transform. style & script
el.style.setProperty('--tx', `${Math.cos(angle) * distance}px`);
@keyframes click-burst-anim {
0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.4) rotate(var(--rot)); }
}
achieved using pure CSS! it uses a
::before pseudo-element fixed over the viewport with pointer-events: none. the lines are drawn using a repeating-linear-gradient, and an infinite @keyframes animation translates it downwards to simulate a screen refresh.built with the native
Web Audio API. it connects the html media element to an AnalyserNode, extracting live frequency data. a requestAnimationFrame loop then calculates the frequencies and draws the glowing bars onto an HTML5 <canvas>.the chatbox and guestbook use Firebase Firestore's
onSnapshot() method. instead of constantly pinging the server (polling), the browser holds an open websocket connection, and Firebase instantly pushes new messages to the screen as soon as they are added.this resources page uses the CSS
column-count: 2 property to create the uneven brick-laying effect. the terminal panels themselves use break-inside: avoid so they cleanly stack without being sliced in half across two columns.
>> misc
x
-
the retro mood tracker badge on my profile card.
-
literal lifesaver for hosting images directly from the board.
-
site where you can see the network of people with 88x31 buttons linking to each other!