updated resume

CSS/README.css

@@ -471,4 +471,107 @@ body[data-theme="day"] #dev-console li::before {
 	margin: 0.5rem 0;
 	font-family: monospace;
 	border-left: 3px solid #ff4d4d;
+}
+
+/* lower-case comment: stage 2 shake */
+@keyframes shake-anim {
+
+	0%,
+	100% {
+		transform: translate(0, 0);
+	}
+
+	20% {
+		transform: translate(-5px, 5px);
+	}
+
+	40% {
+		transform: translate(5px, -5px);
+	}
+
+	60% {
+		transform: translate(-5px, -5px);
+	}
+
+	80% {
+		transform: translate(5px, 5px);
+	}
+}
+
+body.shake {
+	animation: shake-anim 0.2s infinite;
+}
+
+@keyframes flicker-anim {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.5;
+	}
+}
+
+body.flicker {
+	animation: flicker-anim 0.1s infinite;
+}
+
+#virusHex {
+	color: #0f0;
+	background: black;
+}
+
+
+/* glitching text effect */
+@keyframes text-glitch {
+	0% {
+		opacity: 1;
+		clip: rect(0, 9999px, 0, 0);
+	}
+
+	10% {
+		clip: rect(5px, 9999px, 10px, 0);
+	}
+
+	20% {
+		clip: rect(15px, 9999px, 20px, 0);
+	}
+
+	30% {
+		clip: rect(25px, 9999px, 30px, 0);
+	}
+
+	40% {
+		clip: rect(35px, 9999px, 40px, 0);
+	}
+
+	50% {
+		clip: rect(45px, 9999px, 50px, 0);
+	}
+
+	60% {
+		clip: rect(55px, 9999px, 60px, 0);
+	}
+
+	70% {
+		clip: rect(65px, 9999px, 70px, 0);
+	}
+
+	80% {
+		clip: rect(75px, 9999px, 80px, 0);
+	}
+
+	90% {
+		clip: rect(85px, 9999px, 90px, 0);
+	}
+
+	100% {
+		clip: rect(0, 9999px, 0, 0);
+	}
+}
+
+#virusMsg {
+	text-align: center;
 }

JS/README.js

@@ -169,38 +169,36 @@ const observer = new IntersectionObserver(
 	{ threshold: 0.1 }
 );
 
-document.addEventListener("DOMContentLoaded", () => {
+document.querySelectorAll(".section").forEach((section, index) => {
-	document.querySelectorAll(".section").forEach((section, index) => {
+	observer.observe(section);
-		observer.observe(section);
+	section.style.animationDelay = `${index * 0.2}s`;
-		section.style.animationDelay = `${index * 0.2}s`;
-	});
-
-	createStarfield();
-	typewriterEffect();
-	particleEffectOnScroll();
-
-	let hovered = false;
-	const modTitle = document.querySelector("#moduleTitle"),
-		modules = modTitle.parentElement.querySelectorAll(".module");
-
-	modules.forEach((el) => {
-		el.addEventListener("mouseenter", () => el.classList.add("hovered"));
-		el.addEventListener("mouseleave", () => el.classList.remove("hovered"));
-	});
-
-	modTitle.addEventListener("mouseenter", async () => {
-		if (hovered) return;
-		hovered = true;
-
-		for (const el of modules) {
-			el.classList.add("hovered");
-
-			// anim is .2 seconds
-			setTimeout(() => el.classList.remove("hovered"), 200);
-
-			await new Promise((resolve) => setTimeout(resolve, 100));
-		}
-	});
-
-	modTitle.addEventListener("mouseleave", () => (hovered = false));
 });
+
+createStarfield();
+typewriterEffect();
+particleEffectOnScroll();
+
+let hovered = false;
+const modTitle = document.querySelector("#moduleTitle"),
+	modules = modTitle.parentElement.querySelectorAll(".module");
+
+modules.forEach((el) => {
+	el.addEventListener("mouseenter", () => el.classList.add("hovered"));
+	el.addEventListener("mouseleave", () => el.classList.remove("hovered"));
+});
+
+modTitle.addEventListener("mouseenter", async () => {
+	if (hovered) return;
+	hovered = true;
+
+	for (const el of modules) {
+		el.classList.add("hovered");
+
+		// anim is .2 seconds
+		setTimeout(() => el.classList.remove("hovered"), 200);
+
+		await new Promise((resolve) => setTimeout(resolve, 100));
+	}
+});
+
+modTitle.addEventListener("mouseleave", () => (hovered = false));

JS/glitch.js

@@ -0,0 +1,134 @@
+async function triggerVirus() {
+	const stage1 = 3000; // 3 s red alert
+	const stage2 = 3000; // next 3 s data corruption
+
+	const snapshot = await html2canvas(document.body);
+	const img = PIXI.Sprite.from(snapshot.toDataURL());
+
+	// wipe page & set black background
+	document.body.innerHTML = "";
+	document.documentElement.style.cssText =
+		"background: black; margin: 0; padding: 0; overflow: hidden;";
+
+	// container for overlays/canvas
+	const container = document.createElement("div");
+	container.id = "virusContainer";
+	Object.assign(container.style, {
+		position: "fixed", top: 0, left: 0,
+		width: "100vw", height: "100vh",
+		display: "flex", alignItems: "center",
+		justifyContent: "center", flexDirection: "column",
+		color: "white", fontFamily: "monospace",
+	});
+	document.body.appendChild(container);
+
+	// -- stage 1: red alert + countdown --
+	const alert = document.createElement("div");
+	alert.id = "virusAlert";
+	container.appendChild(alert);
+
+	let countdown = 10;
+	alert.textContent = `⚠️ SYSTEM PURGE IN ${countdown} ⚠️`;
+	alert.style.cssText = "font-size: 3rem; color: #f00;";
+
+	const timerId = setInterval(() => {
+		countdown -= 1;
+		alert.textContent = `⚠️ SYSTEM PURGE IN ${countdown} ⚠️`;
+		// flash effect
+		alert.style.visibility =
+			alert.style.visibility === "hidden" ? "visible" : "hidden";
+	}, 500);
+
+	// after stage1 ms → stage 2
+	setTimeout(() => {
+		clearInterval(timerId);
+		container.removeChild(alert);
+
+		// -- stage 2: hex stream + shake/flicker --
+		const hex = document.createElement("pre");
+		hex.id = "virusHex";
+		hex.style.cssText = "font-size:1rem; width:80vw; height:100vh; overflow:hidden;";
+		container.appendChild(hex);
+
+		// stream fake hex
+		const hexChars = "0123456789ABCDEF";
+		const streamId = setInterval(() => {
+			let line = "";
+			for (let i = 0; i < 64; i++) {
+				line += hexChars.charAt(Math.random() * 16 | 0);
+			}
+			hex.textContent += line + "\n";
+			hex.scrollTop = hex.scrollHeight;
+		}, 50);
+
+		document.body.classList.add("shake", "flicker");
+
+		setTimeout(() => {
+			console.debug("▶️ entering stage 3 (glitch filter)");
+
+			clearInterval(streamId);
+			container.removeChild(hex);
+
+			// -- stage 3: pixi.js glitch filter on canvas --
+			const canvas = document.createElement("canvas");
+			canvas.id = "virusCanvas";
+
+			canvas.addEventListener('webglcontextlost', event => {
+				event.preventDefault();            // opt into manual recovery
+				console.warn('⚠️ my WebGL context was lost');
+			}, false);
+
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+
+			Object.assign(canvas.style, {
+				position: "fixed", top: 0, left: 0,
+				width: "100vw", height: "100vh", zIndex: 9999,
+			});
+
+
+			container.appendChild(canvas);
+
+			// initialize PixiJS application
+			const app = new PIXI.Application({
+				view: canvas,
+				resizeTo: window,
+				resolution: 1,            // force 1× device pixel ratio
+				autoDensity: true         // keep CSS size but lower GPU size
+			});
+
+			app.renderer.view.addEventListener('webglcontextlost', (e) => {
+				e.preventDefault();
+				console.warn('WebGL lost, falling back to CanvasRenderer');
+				app.destroy(true, { children: true });
+			});
+
+
+			// Create a full-screen white rectangle as the sprite
+			img.width = window.innerWidth;
+			img.height = window.innerHeight;
+			app.stage.addChild(img);
+
+			// apply realistic glitch filter
+			const filter = new PIXI.filters.GlitchFilter({ slices: 20, offset: 10 });
+			app.stage.filters = [filter];
+
+			// animate the filter
+			app.ticker.add(() => {
+				filter.slices = 10 + Math.random() * 30;
+				filter.offset = Math.random() * 20;
+			});
+
+			console.log(app.renderer)
+
+			// block all input
+			const block = (e) => { e.preventDefault(); e.stopImmediatePropagation(); };
+			window.addEventListener("keydown", block, true);
+			window.addEventListener("mousedown", block, true);
+			window.addEventListener("touchstart", block, true);
+
+		}, stage2);
+	}, stage1);
+
+	return "";
+}

JS/terminal.js

@@ -1,3 +1,27 @@
+const projectLinks = {
+	"bluesky-client": "https://github.com/ION606/bluesky-client",
+	"workout-app": "https://workout.ion606.com/",
+	"AI-overlord": "https://github.com/ION606/AI-overlord",
+	"black-hole-sim": "https://github.com/ION606/black-hole-sim",
+	"chatjs-main": "https://github.com/Proto-Chat/chatJS-main",
+	"custom_discordjs": "https://github.com/ION606/custom_discordjs",
+	"learn": "https://github.com/ION606/learn",
+	"ion-lang": "https://github.com/The-ION-Language/ION-Lang",
+	"vcs": "https://github.com/ION606/VCS",
+	"ml-pipeline": "https://github.com/ION606/ML-pipeline",
+	"browser-chromium": "https://github.com/ION606/browser-chromium",
+	"static-site-hosting": "https://github.com/ION606/static-site-hosting",
+	"procgen": "https://github.com/ION606/ProcGen",
+	"linkedin-api": "https://github.com/ION606/linkedin-api",
+	"github-to-fs": "https://github.com/ION606/github-to-fs",
+	"web-to-fish": "https://github.com/ION606/web-to-fish",
+	"commit_grabber": "https://github.com/ION606/commit_grabber",
+	"youtube-music-meta-extract": "https://github.com/ION606/youtube-music-meta-extract",
+	"mailpocket": "https://github.com/ION606/MailPocket",
+};
+
+const glitchText = 'T̵̙̻̭̤̺̱̥̖̤̭̗̜͓̓̈́̏͋̔̕̚͠h̴ͽ̳͎̳̱̘̎͛͆̓̐͑͛̈́̕̕͝͝é̷̛̮̥̲͇̊̅͋̏̊̅͊͝͝ ̵̡̛̪̮̦̘̘̼̼̺̪̪̋͋̀̌̇̉̋͌̾̿̓͝͝V̶̡̨̧̨̟̙̻͓̪͇̻̞̥͑̎͋͗̿́̓̌͒͊̈́́̚͠ơ̴̛̱̞̾̎̒̋̾̔̈́̓͑̋̉ȋ̴̡̛͔̙̘̝̙̬̠̹̙̻͖̽̿̓̑̈́͋́̐̕͠d̷̲̲̘̈́̑́̿̆̓̔͋́̓̋̅̏̚';
+
 // secret developer console toggle (using backtick key)
 const devConsoleToggle = () => {
 	const devConsole = document.querySelector("#dev-console");
@@ -46,7 +70,7 @@ class TerminalFS {
 						if (!cmdContent) {
 							consoleOutput.innerHTML += `<div class="consolerrdiv">🚨 Unknown command: \`${cmd}\`</div>`;
 						} else if (cmdContent != true) {
-							consoleOutput.innerHTML += cmdContent;
+							consoleOutput.innerHTML += `<div>${cmdContent}</div>`;
 						}
 					}
 				}
@@ -97,12 +121,7 @@ class TerminalFS {
 			},
 			"/projects": {
 				type: "dir",
-				children: [
+				children: Object.keys(projectLinks),
-					"bluesky-client",
-					"workout-app",
-					"AI-overlord",
-					"black-hole-sim",
-				],
 			},
 			"/fun": {
 				type: "dir",
@@ -120,59 +139,115 @@ class TerminalFS {
 
 		this.files = {
 			"/home/ion606/todo.txt": `
-		  1. Take over the world
+1. Take over the world
-		  2. Make coffee ☕
+2. Make coffee ☕
-		  3. Fix CSS in production
+3. Fix CSS in production
-		  4. ????
+4. ????
-		  5. PROFIT!
+5. PROFIT!
-		`,
+`,
-			"/fun/joke.txt": `
+			"/home/ion606/resume.txt": `
-		  Why do Java developers wear glasses?
+ION606 - Resume
-		  Because they can't C#! 
+
-		  
+Skills:
-		  (•_•)
+- Programming: C, C++, Python, JavaScript, TypeScript, Rust, Go, Java, etc.
-		  ( •_•)>⌐■-■
+- Web: HTML, CSS, React, Vue, Express.js, Node.js, Flask, FastAPI
-		  (⌐■_■)
+- ML: TensorFlow, scikit-learn
-		`,
+- Databases: MongoDB, PostgreSQL, MySQL, SQLite, Redis
-			"/etc/motd": `
+- Tools: Git, Docker, Kubernetes, Vagrant, Electron, Next.js
-		  WARNING: This system is powered by ✨imagination✨
+
-		  Unauthorized access will result in T̵̙̻̭̤̺̱̥̖̤̭̗̜͓͎̓̈́̏͋̔̕̚͠h̴̳͎̳̱̘̽̎͛͆̓̐͑͛̈́̕̕͝͝é̷̛̮̥̲͇̊̅͋̏̊̅͊͝͝ ̵̡̛̪̮̦̘̘̼̼̺̪̪̋͋̀̌̇̉̋͌̾̿̓͝͝V̶̡̨̧̨̟̙̻͓̪͇̻̞̥͑̎͋͗̿́̓̌͒͊̈́́̚͠ơ̴̛̱̞̾̎̒̋̾̔̈́̓͑̋̉ȋ̴̡̛̙̘̝̙̬̠̹̙̻͖̔̽̿̓͑̈́͋́̐̕͠d̷̲̲̘̈́̑́̿̆̓̔͋́̓̋̅̏̚
+Contact: ion606@protonmail.com
-		`,
+`,
 			"/home/ion606/.secret_config": `
-		  [disco_settings]
+[disco_settings]
-		  sparkle_level=9001
+sparkle_level=9001
-		  rainbow_mode=enabled
+rainbow_mode=enabled
-		  pink_nodders: online
+pink_nodders: online
-		`,
+`,
-			"/fun/uwu.md": `
-		  # Nya~ Welcome to my secret docs! 
-  
-		  (´• ω •\`)ﾉ Here's some important stuff:
-		  - Pet all the cats 🐈
-		  - Drink more water 💧
-		  - Remember to uwu-ify your code
-		`,
-			"/etc/joke_of_the_day": `
-		  Why do programmers prefer dark mode?
-		  Because light attracts bugs! 🐛
-		  
-		  How many programmers does it take to change a light bulb?
-		  None, that's a hardware problem!
-		`,
 			"/home/ion606/diary.md": `
-		  Dear Diary,
+Dear Diary,
-		  
+
-		  Today I discovered the Konami code activates a UFO.
+Today I discovered the Konami code activates a UFO.
-		  Also, typing "make me a sandwich" works sometimes...
+Also, typing "make me a sandwich" works sometimes...
-		  Note to self: Buy more coffee.
+Note to self: Buy more coffee.
-		`,
+`,
-			"/home/ion606/resume": document
+			"/fun/joke.txt": `
-				.querySelector("html")
+Why do Java developers wear glasses?
-				.outerHTML.replace(/&/g, "&amp;")
+Because they can't C#! 
-				.replace(/</g, "&lt;")
+
-				.replace(/>/g, "&gt;")
+(•_•)
-				.replace(/"/g, "&quot;")
+( •_•)>⌐■-■
-				.replace(/'/g, "&#039;"),
+(⌐■_■)
+`,
+			"/fun/konami.seq": `
+↑ ↑ ↓ ↓ ← → ← → B A
+
+Hint: Try entering this sequence on the main page!
+`,
+			"/fun/uwu.md": `
+# Nya~ Welcome to my secret docs! 
+
+(´• ω •\`)ﾉ Here's some important stuff:
+- Pet all the cats 🐈
+- Drink more water 💧
+- Remember to uwu-ify your code
+`,
+			"/fun/hackerman.gif": `
+[Imagine a cool ASCII art of Hackerman here!]
+You are now... HACKERMAN.
+`,
+			"/projects/bluesky-client": `
+bluesky-client
+
+My Bluesky client. See: https://github.com/ION606/bluesky-client
+`,
+			"/projects/workout-app": `
+ION Workout App
+
+An open source workout app! See: https://workout.ion606.com/
+`,
+			"/projects/AI-overlord": `
+AI Overlord
+
+A project to automate everything (and maybe take over the world).
+`,
+			"/projects/black-hole-sim": `
+Black Hole Simulator
+
+A physics simulation of black holes and gravitational lensing.
+`,
+			"/projects/virus.exe": `
+VIRUS.EXE
+
+WARNING: This file is highly suspicious. Running it may cause unexpected behavior!
+`,
+			"/etc/motd": `
+WARNING: This system is powered by ✨imagination✨
+Unauthorized access will result in ${glitchText}
+`,
+			"/etc/syslog": `
+[INFO] System booted successfully.
+[INFO] User 'ion606' logged in.
+[WARN] Too much imagination detected.
+[INFO] All systems nominal.
+`,
+			"/etc/joke_of_the_day": `
+Why do programmers prefer dark mode?
+Because light attracts bugs! 🐛
+
+How many programmers does it take to change a light bulb?
+None, that's a hardware problem!
+`,
+			"/sys/self-destruct.exe": `
+*** WARNING ***
+You have attempted to access the self-destruct sequence.
+This feature is disabled for your safety.
+`,
+			"/sys/disco-bootloader": `
+Disco Bootloader v1.0
+
+Initializing disco mode...
+Boot sequence: 🕺💃🪩
+`,
 		};
 	}
 
@@ -257,15 +332,28 @@ class TerminalFS {
 					"404: Humor not found... just kidding!",
 					"This file is in another castle! 🍄",
 				];
-				return (
+				const asciiArts = [
-					`${jokes[Math.floor(Math.random() * jokes.length)]}\n` +
+					`
-					`        ╚═(███)═╝\n` +
+<pre>
-					`        ╚═(███)═╝\n` +
+         .--.
-					`        ╚═(███)═╝\n` +
+        |o_o |
-					`        ██╚═╝██\n` +
+        |:_/ |
-					`        ███████\n` +
+       //   \\ \\
-					`        ███████`
+      (|     | )
-				);
+     /'\\_   _/\\\`
+     \\___)=(___/
+</pre>
+`,
+					`
+<pre>
+      (╯°□°)╯︵ ┻━┻
+</pre>
+`
+				];
+
+				const joke = jokes[Math.floor(Math.random() * jokes.length)],
+					art = asciiArts[Math.floor(Math.random() * asciiArts.length)];
+				return `<div style="color:#ff4081">${joke}</div>${art}`;
 			}
 
 			return `<pre>${this.files[absPath].trim()}</pre>`;
@@ -284,6 +372,7 @@ class TerminalFS {
             <li><strong>starfield</strong> - Regenerate stars</li>
             <li><strong>random</strong> - Activate random color chaos!</li>
             <li><strong>secret</strong> - Activate disco mode!</li>
+            <li><strong>run [file]</strong> - Run a file (e.g., .exe)</li>
         </ul>`,
 
 		exit: devConsoleToggle,
@@ -342,6 +431,38 @@ class TerminalFS {
 			document.body.classList.toggle("disco-mode");
 			return "🎆 Disco mode activated!";
 		},
+
+		run: (filePath) => {
+			const absPath = terminalFS.resolvePath(filePath.trim());
+			console.log(absPath, filePath);
+
+			// Project links
+			if (
+				absPath.startsWith("/projects/") &&
+				projectLinks[filePath.replace("/projects/", "")]
+			) {
+				window.open(projectLinks[filePath], "_blank");
+				return `<span style="color: #7c3aed">🚀 Opening project: ${projectLinks[filePath]}</span>`;
+			}
+
+			// Multi-stage "virus.exe"
+			if (absPath === "/projects/virus.exe") {
+				triggerVirus()
+				setTimeout(1000, () => {
+					const el = document.querySelector('.consoleout').lastChild;
+					el.textContent = glitchText;
+				})
+				return "Error running "
+			}
+
+			if (absPath === "/sys/self-destruct.exe") {
+				return `<span style="color: red; font-weight: bold;">💥 Self-destruct is disabled for your safety.</span>`;
+			}
+			if (absPath.endsWith(".exe")) {
+				return `<span style="color: orange;">🛑 Cannot execute: ${filePath}</span>`;
+			}
+			return `<span style="color: gray;">Nothing to run for: ${filePath}</span>`;
+		},
 	};
 }
 

README.html

@@ -7,7 +7,30 @@
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
-		<link rel="stylesheet" href="/README.css" />
+		<link rel="stylesheet" href="/CSS/README.css" />
+
+		<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
+
+		<!-- load pixi.js first -->
+		<script src="https://cdn.jsdelivr.net/npm/pixi.js/dist/browser/pixi.min.js"></script>
+
+		<!-- then load the UMD bundle of pixi-filters -->
+		<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/browser/pixi-filters.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/pixi.js-legacy/dist/pixi-legacy.min.js"></script>
+
+		<script>
+			document.addEventListener("DOMContentLoaded", function () {
+				const loadScript = (src) => {
+					const script = document.createElement("script");
+					script.src = src;
+					document.head.appendChild(script);
+				};
+
+				loadScript("/JS/README.js");
+				loadScript("/JS/glitch.js");
+				loadScript("/JS/terminal.js");
+			});
+		</script>
 	</head>
 	<body>
 		<!-- dynamic starfield container (appended via js) -->
@@ -604,8 +627,5 @@
 		<div id="dev-console">
 			<input type="text" placeholder="enter command..." />
 		</div>
-
-		<script src="/README.js"></script>
-		<script src="/terminal.js"></script>
 	</body>
 </html>

index.html

@@ -1,38 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta property="description" content="ION606's personal website" />
+		<meta property="title" content="ION606.com" />
+		<meta property="og:title" content="ION606.com" />
+		<meta property="og:description" content="My personal website!" />
+		<meta
+			property="og:image"
+			content="https://avatars.githubusercontent.com/u/58801387" />
+		<meta property="og:url" content="https://ion606.com/" />
+		<meta property="og:type" content="website" />
 
-<head>
+		<title>Home - ION606.com</title>
-    <meta charset="UTF-8">
+		<link
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+			rel="icon"
-    <meta property="description" content="ION606's personal website">
+			href="https://avatars.githubusercontent.com/u/58801387"
-    <meta property="title" content="ION606.com">
+			type="image/jpeg" />
-    <meta property="og:title" content="ION606.com">
-    <meta property="og:description" content="My personal website!">
-    <meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
-    <meta property="og:url" content="https://ion606.com/">
-    <meta property="og:type" content="website">
 
-    <title>Home - ION606.com</title>
+		<link rel="stylesheet" href="/CSS/style.css" />
-    <link rel="icon" href="https://avatars.githubusercontent.com/u/58801387" type="image/jpeg">
+		<script type="text/javascript" src="/JS/script.js"></script>
+	</head>
 
-    <link rel="stylesheet" href="style.css">
+	<body>
-    <script type="text/javascript" src="script.js"></script>
+		<!-- <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script> -->
-</head>
+		<!-- <iframe width="400" height="320" src="https://lab.lepture.com/github-cards/cards/medium.html?user=ION606&identity=ghcard-ION606-3&client_id=a11a1bda412d928fb39a&client_secret=92b7cf30bc42c49d589a10372c3f9ff3bb310037"></iframe> -->
 
-<body>
+		<canvas id="matrixCanvas"></canvas>
-    <!-- <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script> -->
+		<div class="overlay">
-    <!-- <iframe width="400" height="320" src="https://lab.lepture.com/github-cards/cards/medium.html?user=ION606&identity=ghcard-ION606-3&client_id=a11a1bda412d928fb39a&client_secret=92b7cf30bc42c49d589a10372c3f9ff3bb310037"></iframe> -->
+			<div class="content">
-
+				<h1>Welcome to my Personal Website!</h1>
-    <canvas id="matrixCanvas"></canvas>
+				<p>My (user)name's ION606, feel free to looks at my stuff</p>
-    <div class="overlay">
+				<button onclick="window.location.href = 'README';">
-        <div class="content">
+					README
-            <h1>Welcome to my Personal Website!</h1>
+				</button>
-            <p>My (user)name's ION606, feel free to looks at my stuff</p>
+				<button onclick="window.location.href = 'links';">Links</button>
-            <button onclick="window.location.href = 'README';">README</button>
+				<button onclick="window.location.href = 'projects';">
-            <button onclick="window.location.href = 'links';">Links</button>
+					Projects
-            <button onclick="window.location.href = 'projects';">Projects</button>
+				</button>
-        </div>
+			</div>
-    </div>
+		</div>
-</body>
+	</body>
-
+</html>
-</html>

links.html

@@ -1,70 +1,87 @@
 <!DOCTYPE html>
 <html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta property="og:title" content="ION606.com" />
+		<meta property="og:description" content="My personal website!" />
+		<meta
+			property="og:image"
+			content="https://avatars.githubusercontent.com/u/58801387" />
+		<meta property="og:url" content="https://ion606.com/" />
+		<meta property="og:type" content="website" />
+		<title>Links - ION606.com</title>
 
-<head>
+		<link rel="stylesheet" href="/CSS/links.css" />
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta property="og:title" content="ION606.com">
-    <meta property="og:description"
-        content="My personal website!">
-    <meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
-    <meta property="og:url" content="https://ion606.com/">
-    <meta property="og:type" content="website">
-    <title>Links - ION606.com</title>
 
-    <link rel="stylesheet" href="links.css">
+		<script>
+			document.addEventListener("DOMContentLoaded", function () {
+				function createRipple() {
+					const rippleContainer =
+						document.querySelector(".ripple-background");
+					const circle = document.createElement("div");
+					circle.classList.add("circle");
 
-    <script>
+					// Random size from 50 to 200px
-        document.addEventListener('DOMContentLoaded', function () {
+					const size = Math.random() * (200 - 50) + 50;
-            function createRipple() {
+					circle.style.width = `${size}px`;
-                const rippleContainer = document.querySelector('.ripple-background');
+					circle.style.height = `${size}px`;
-                const circle = document.createElement('div');
-                circle.classList.add('circle');
 
-                // Random size from 50 to 200px
+					// Random position within the container
-                const size = Math.random() * (200 - 50) + 50;
+					circle.style.left = `${
-                circle.style.width = `${size}px`;
+						Math.random() * (window.innerWidth - size)
-                circle.style.height = `${size}px`;
+					}px`;
+					circle.style.top = `${
+						Math.random() * (window.innerHeight - size)
+					}px`;
 
-                // Random position within the container
+					// Random color
-                circle.style.left = `${Math.random() * (window.innerWidth - size)}px`;
+					const colors = [
-                circle.style.top = `${Math.random() * (window.innerHeight - size)}px`;
+						"#FF5959",
+						"#FCA130",
+						"#FFE74C",
+						"#8AC926",
+						"#1982C4",
+						"#6A4C93",
+					]; // Rainbow colors
+					const color =
+						colors[Math.floor(Math.random() * colors.length)];
+					circle.style.background = color;
 
-                // Random color
+					rippleContainer.appendChild(circle);
-                const colors = ['#FF5959', '#FCA130', '#FFE74C', '#8AC926', '#1982C4', '#6A4C93']; // Rainbow colors
-                const color = colors[Math.floor(Math.random() * colors.length)];
-                circle.style.background = color;
 
-                rippleContainer.appendChild(circle);
+					// Remove the circle after it finishes animating to avoid DOM clutter
+					setTimeout(() => {
+						circle.remove();
+					}, 15000); // Matches the animation duration
+				}
 
-                // Remove the circle after it finishes animating to avoid DOM clutter
+				// Create a new ripple every 2 seconds
-                setTimeout(() => {
+				setInterval(createRipple, 2000);
-                    circle.remove();
+			});
-                }, 15000); // Matches the animation duration
+		</script>
-            }
+	</head>
 
-            // Create a new ripple every 2 seconds
+	<body>
-            setInterval(createRipple, 2000);
+		<div class="links-container">
-        });
+			<a href="https://github.com/ION606" class="link fade-in">Github</a>
-    </script>
+			<a href="https://www.twitch.tv/ion606" class="link fade-in"
-
+				>Twitch</a
-</head>
+			>
-
+			<a href="https://www.buymeacoffee.com/ion606" class="link fade-in"
-<body>
+				>buy me a coffee</a
-    <div class="links-container">
+			>
-        <a href="https://github.com/ION606" class="link fade-in">Github</a>
+			<a href="https://steamcommunity.com/id/ion606/" class="link fade-in"
-        <a href="https://www.twitch.tv/ion606" class="link fade-in">Twitch</a>
+				>Steam</a
-        <a href="https://www.buymeacoffee.com/ion606" class="link fade-in">buy me a coffee</a>
+			>
-        <a href="https://steamcommunity.com/id/ion606/" class="link fade-in">Steam</a>
+			<a href="/" class="link fade-in home-button">🏠</a>
-        <a href="/" class="link fade-in home-button">🏠</a>
+		</div>
-    </div>
+		<div class="ripple-background">
-    <div class="ripple-background">
+			<div class="circle xxlarge shade1"></div>
-        <div class="circle xxlarge shade1"></div>
+			<div class="circle xlarge shade2"></div>
-        <div class="circle xlarge shade2"></div>
+			<div class="circle large shade3"></div>
-        <div class="circle large shade3"></div>
+			<div class="circle mediun shade4"></div>
-        <div class="circle mediun shade4"></div>
+			<div class="circle small shade5"></div>
-        <div class="circle small shade5"></div>
+		</div>
-    </div>
+	</body>
-</body>
+</html>
-
-</html>

projects.html

@@ -17,13 +17,13 @@
 			href="https://avatars.githubusercontent.com/u/58801387"
 			type="image/jpeg" />
 
-		<link rel="stylesheet" href="projects.css" />
+		<link rel="stylesheet" href="/CSS/projects.css" />
-		<link rel="stylesheet" href="pageMenu.css" />
+		<link rel="stylesheet" href="/CSS/pageMenu.css" />
 
 		<script
 			src="https://kit.fontawesome.com/728e740903.js"
 			crossorigin="anonymous"></script>
-		<script type="text/javascript" src="pageMenu.js"></script>
+		<script type="text/javascript" src="/JS/pageMenu.js"></script>
 		<script>
 			let lastScrollTop = 0;
 			let isHovered = false;
@@ -31,7 +31,8 @@
 			document.addEventListener("DOMContentLoaded", createPageMenu);
 
 			function openIfNotBtn(e, url) {
-				if (e.target.href || e.target.classList.contains('noopen')) return;
+				if (e.target.href || e.target.classList.contains("noopen"))
+					return;
 
 				window.open(url, (target = "_blank"));
 			}
@@ -297,7 +298,10 @@
 						href="https://www.npmjs.com/package/linkedin-api-js"
 						target="_blank"
 						class="hasImg"
-						><img alt="NPM Icon" src="/assets/npm.png" class="noopen"
+						><img
+							alt="NPM Icon"
+							src="/assets/npm.png"
+							class="noopen"
 					/></a>
 				</div>
 			</div>
@@ -324,7 +328,10 @@
 						href="https://www.npmjs.com/package/github-to-fs"
 						target="_blank"
 						class="hasImg"
-						><img alt="NPM Icon" src="/assets/npm.png" class="noopen"
+						><img
+							alt="NPM Icon"
+							src="/assets/npm.png"
+							class="noopen"
 					/></a>
 				</div>
 			</div>