Skip to content

Commit 55c400d

Browse files
author
Paul Adams
committed
Fix image URLs and JavaScript errors
1 parent 24ced6a commit 55c400d

File tree

6 files changed

+335
-201
lines changed

6 files changed

+335
-201
lines changed

‎app.js‎

Lines changed: 88 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -94,75 +94,106 @@ const router = async () => {
9494
window.addEventListener("hashchange", router);
9595
window.addEventListener("load", router);
9696

97-
const logo = document.querySelector(".logo");
98-
const logoText = logo.textContent;
99-
logo.innerHTML = logoText
100-
.split("")
101-
.map((char) => `<span>${char}</span>`)
102-
.join("");
103-
104-
const logoLetters = logo.querySelectorAll("span");
105-
106-
let lastTime = 0;
107-
let matrixTimer = 0;
108-
const matrixInterval = 33; // roughly 30fps
109-
110-
let logoAnimationTimer = 0;
111-
const logoAnimationInterval = 2500; // ms to restart the whole sequence
112-
let nextLetterIndex = 0;
113-
let letterTimer = 0;
114-
const letterInterval = 100; // ms between each letter glowing
115-
116-
function animate(timestamp) {
117-
const deltaTime = timestamp - lastTime;
118-
lastTime = timestamp;
119-
120-
// Matrix effect update
121-
matrixTimer += deltaTime;
122-
if (matrixTimer > matrixInterval) {
123-
const matrix = window.matrix;
124-
if (matrix && typeof matrix.draw === "function") {
125-
matrix.draw();
126-
}
127-
matrixTimer = 0;
97+
window.addEventListener("load", router);
98+
99+
document.addEventListener("DOMContentLoaded", () => {
100+
const logo = document.querySelector(".logo");
101+
if (logo) {
102+
const logoText = logo.textContent;
103+
logo.innerHTML = logoText
104+
.split("")
105+
.map(
106+
(char, i) =>
107+
`<span style="animation-delay: ${
108+
i * 0.1
109+
}s" onmouseover="this.classList.add('glow')" onmouseout="this.classList.remove('glow')">${char}</span>`
110+
)
111+
.join("");
128112
}
129113

130-
// Logo animation update
131-
logoAnimationTimer += deltaTime;
132-
if (logoAnimationTimer > logoAnimationInterval) {
133-
logoAnimationTimer = 0;
134-
nextLetterIndex = 0;
135-
letterTimer = 0;
114+
const menuToggle = document.querySelector(".menu-toggle");
115+
const leftPanel = document.querySelector(".left-panel");
116+
117+
if (menuToggle && leftPanel) {
118+
menuToggle.addEventListener("click", (e) => {
119+
e.stopPropagation();
120+
menuToggle.classList.toggle("active");
121+
leftPanel.classList.toggle("active");
122+
});
123+
124+
const navLinks = leftPanel.querySelectorAll("a");
125+
navLinks.forEach((link) => {
126+
link.addEventListener("click", () => {
127+
if (leftPanel.classList.contains("active")) {
128+
menuToggle.classList.remove("active");
129+
leftPanel.classList.remove("active");
130+
}
131+
});
132+
});
136133
}
137134

138-
if (nextLetterIndex < logoLetters.length) {
139-
letterTimer += deltaTime;
140-
if (letterTimer > letterInterval) {
141-
const letter = logoLetters[nextLetterIndex];
142-
if (letter) {
143-
letter.classList.add("glow");
144-
// Store the time when the glow should be removed
145-
letter.glowRemoveTime = timestamp + 300;
135+
const logoLetters = logo.querySelectorAll("span");
136+
137+
let lastTime = 0;
138+
let matrixTimer = 0;
139+
const matrixInterval = 33; // roughly 30fps
140+
141+
let logoAnimationTimer = 0;
142+
const logoAnimationInterval = 2500; // ms to restart the whole sequence
143+
let nextLetterIndex = 0;
144+
let letterTimer = 0;
145+
const letterInterval = 100; // ms between each letter glowing
146+
147+
function animate(timestamp) {
148+
const deltaTime = timestamp - lastTime;
149+
lastTime = timestamp;
150+
151+
// Matrix effect update
152+
matrixTimer += deltaTime;
153+
if (matrixTimer > matrixInterval) {
154+
const matrix = window.matrix;
155+
if (matrix && typeof matrix.draw === "function") {
156+
matrix.draw();
146157
}
147-
nextLetterIndex++;
158+
matrixTimer = 0;
159+
}
160+
161+
// Logo animation update
162+
logoAnimationTimer += deltaTime;
163+
if (logoAnimationTimer > logoAnimationInterval) {
164+
logoAnimationTimer = 0;
165+
nextLetterIndex = 0;
148166
letterTimer = 0;
149167
}
150-
}
151168

152-
// Check for letters that need the glow removed
153-
logoLetters.forEach((letter) => {
154-
if (letter.glowRemoveTime && timestamp >= letter.glowRemoveTime) {
155-
letter.classList.remove("glow");
156-
letter.glowRemoveTime = null;
169+
if (nextLetterIndex < logoLetters.length) {
170+
letterTimer += deltaTime;
171+
if (letterTimer > letterInterval) {
172+
const letter = logoLetters[nextLetterIndex];
173+
if (letter) {
174+
letter.classList.add("glow");
175+
// Store the time when the glow should be removed
176+
letter.glowRemoveTime = timestamp + 300;
177+
}
178+
nextLetterIndex++;
179+
letterTimer = 0;
180+
}
157181
}
158-
});
159182

160-
requestAnimationFrame(animate);
161-
}
183+
// Check for letters that need the glow removed
184+
logoLetters.forEach((letter) => {
185+
if (letter.glowRemoveTime && timestamp >= letter.glowRemoveTime) {
186+
letter.classList.remove("glow");
187+
letter.glowRemoveTime = null;
188+
}
189+
});
190+
191+
requestAnimationFrame(animate);
192+
}
162193

163-
requestAnimationFrame(animate);
194+
requestAnimationFrame(animate);
195+
});
164196

165-
// Matrix effect setup
166197
const matrixEffect = (canvasId, containerSelector) => {
167198
const canvas = document.getElementById(canvasId);
168199
if (!canvas) return null;

‎index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta
8+
http-equiv="Content-Security-Policy"
9+
content="img-src 'self' https://github.com https://raw.githubusercontent.com;"
10+
/>
711
<title>CODEBASE</title>
812
<link rel="stylesheet" href="style.css" />
913
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -21,6 +25,11 @@
2125
<canvas id="fullscreen-matrix-canvas"></canvas>
2226
<header>
2327
<div class="logo">.codebase</div>
28+
<button class="menu-toggle" aria-label="Toggle navigation">
29+
<span></span>
30+
<span></span>
31+
<span></span>
32+
</button>
2433
</header>
2534
<div class="container">
2635
<aside class="left-panel">
@@ -37,5 +46,6 @@
3746
</div>
3847

3948
<script src="app.js"></script>
49+
<script src="ui.js"></script>
4050
</body>
4151
</html>

‎pages/projects.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,44 @@ <h2>OldSkool Demoscene</h2>
77
a 3D engine with 3D Studio support, and even a graphical disk copier inspired
88
by the Amiga's X-Copy.
99
</p>
10+
<div class="project-gallery">
11+
<img
12+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/bbs-intro.png"
13+
alt="BBS Intro"
14+
/>
15+
<img
16+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/bbs-intro-2.png"
17+
alt="BBS Intro 2"
18+
/>
19+
<img
20+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/hack-intro.png"
21+
alt="Hack Intro"
22+
/>
23+
<img
24+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/plasma.png"
25+
alt="Plasma Effect"
26+
/>
27+
<img
28+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/2d-bumpmapping.png"
29+
alt="2D Bump Mapping"
30+
/>
31+
<img
32+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/clothsim.png"
33+
alt="Cloth Simulation"
34+
/>
35+
<img
36+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/dolphin-swim.png"
37+
alt="Dolphin Swim"
38+
/>
39+
<img
40+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/water-duck.png"
41+
alt="Water Duck"
42+
/>
43+
<img
44+
src="https://raw.githubusercontent.com/majiccode/OldSkool/master/xcopy-pc.png"
45+
alt="X-Copy PC"
46+
/>
47+
</div>
1048
<p>
1149
The code is a snapshot of the demoscene and hacking mentality of the time –
1250
not always clean, but functional and creative. It's a trip down memory lane

0 commit comments

Comments
 (0)