reformatted README

.gitignore

@@ -0,0 +1 @@
+tmp/

README.css

@@ -0,0 +1,474 @@
+:root {
+	--primary: #7c3aed;
+	--secondary: #4f46e5;
+	--dark: #0f172a;
+	--light: #f8fafc;
+	--space-black: #0a0e29;
+	--neon-purple: #7c3aed;
+	--star-twinkle: #fffac2;
+	--ufo-color: #ff4081;
+	--console-bg: rgba(15, 23, 42, 0.9);
+	--day-bg: linear-gradient(160deg, #87CEEB 0%, #E0F6FF 100%);
+	--day-text: #1e293b;
+	--day-primary: #4f46e5;
+	--day-secondary: #6366f1;
+	--day-section-bg: rgba(255, 255, 255, 0.9);
+	--command-color: var(--primary);
+}
+
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: "Segoe UI", sans-serif;
+}
+
+body {
+	background: var(--space-black);
+	color: var(--light);
+	line-height: 1.6;
+	overflow-x: hidden;
+	position: relative;
+	transition: background 0.5s ease, color 0.3s ease;
+}
+
+body[data-theme="day"] {
+	background: var(--day-bg);
+	color: var(--day-text);
+	--command-color: var(--day-primary);
+}
+
+body[data-theme="day"] nav a {
+	color: var(--day-primary);
+}
+
+body[data-theme="day"] nav a:hover {
+	color: var(--day-secondary);
+}
+
+body[data-theme="day"] .section {
+	background: var(--day-section-bg);
+	color: var(--day-text);
+}
+
+body[data-theme="day"] #dev-console {
+	background: rgba(0, 0, 0, 0.3);
+}
+
+body[data-theme="day"] #dev-console .consoleout {
+	color: var(--day-text);
+}
+
+
+/* navigation bar from readme.md */
+nav {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	background: transparent;
+	z-index: 1000;
+	padding: 0.5rem 1rem;
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+}
+
+nav a {
+	color: var(--primary);
+	text-decoration: none;
+	font-weight: bold;
+}
+
+nav a:hover {
+	color: var(--secondary);
+}
+
+.typewriter {
+	font-family: monospace;
+	white-space: nowrap;
+	overflow: hidden;
+	width: 0;
+}
+
+.typing-anim {
+	border-right: 0.15em solid var(--primary);
+	animation: typing 3.5s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
+}
+
+.typing-text {
+	position: relative;
+	display: inline-block;
+	margin: 0 auto;
+	font-size: 1.25rem;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.typing-cursor {
+	display: inline-block;
+	width: 0.1em;
+	height: 1em;
+	background-color: var(--primary);
+	animation: blink-caret-cursor 0.75s step-end infinite;
+	vertical-align: text-bottom;
+}
+
+@keyframes blink-caret-cursor {
+
+	from,
+	to {
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+.typing-text::after {
+	display: none !important;
+}
+
+@keyframes typing {
+	from {
+		width: 0;
+	}
+
+	to {
+		width: 100%;
+	}
+}
+
+@keyframes blink-caret {
+
+	from,
+	to {
+		border-color: transparent;
+	}
+
+	50% {
+		border-color: var(--primary);
+	}
+}
+
+.container {
+	max-width: 1200px;
+	margin: 3rem auto 0 auto;
+	padding: 2rem;
+	position: relative;
+	z-index: 1;
+}
+
+.hero {
+	text-align: center;
+	overflow: hidden;
+}
+
+.hero h1 {
+	font-size: 3.5rem;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, var(--primary), var(--secondary));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-size: 200%;
+	animation: shimmer 2s linear infinite;
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: 0%;
+	}
+
+	100% {
+		background-position: 200%;
+	}
+}
+
+li {
+	margin: 10px 0;
+}
+
+.category-title {
+	margin-top: 2em;
+}
+
+/* cosmic button style */
+.cosmic-button {
+	background: linear-gradient(45deg, var(--primary), var(--secondary));
+	border: none;
+	padding: 0.75rem 1.5rem;
+	border-radius: 50px;
+	color: var(--light);
+	cursor: pointer;
+	transition: transform 0.3s ease;
+	margin: 1rem;
+}
+
+.support-buttons img {
+	width: 30px;
+}
+
+.cosmic-button:hover {
+	transform: scale(1.05);
+}
+
+/* section styling */
+.section {
+	background: rgba(15, 23, 42, 0.7);
+	backdrop-filter: blur(10px);
+	border-radius: 1rem;
+	padding: 2rem;
+	margin: 2rem 0;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	transform: translateY(20px);
+	opacity: 0;
+	animation: slideUp 0.5s ease forwards;
+}
+
+@keyframes slideUp {
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+/* tech grid styles */
+.tech-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+	gap: 1.5rem;
+	margin-top: 1.5rem;
+}
+
+.tech-card {
+	background: rgba(79, 70, 229, 0.1);
+	padding: 1rem;
+	border-radius: 0.5rem;
+	text-align: center;
+	transition: transform 0.3s ease;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.tech-card:hover {
+	transform: translateY(-5px);
+}
+
+.tech-card img {
+	width: 50px;
+	height: 50px;
+	margin-bottom: 0.5rem;
+	object-fit: contain;
+}
+
+/* starfield styles */
+.star {
+	position: absolute;
+	background: var(--star-twinkle);
+	border-radius: 50%;
+	animation: twinkle 3s infinite ease-in-out;
+}
+
+@keyframes twinkle {
+
+	0%,
+	100% {
+		opacity: 0.3;
+	}
+
+	50% {
+		opacity: 1;
+	}
+}
+
+/* ufo styles */
+.ufo {
+	position: fixed;
+	top: 20%;
+	left: -100px;
+	width: 100px;
+	height: 50px;
+	background: var(--ufo-color);
+	border-radius: 50px / 25px;
+	box-shadow: 0 0 20px var(--ufo-color);
+	z-index: 2000;
+	animation: fly 5s ease-in-out forwards;
+}
+
+@keyframes fly {
+	0% {
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(110vw);
+	}
+}
+
+/* hidden developer console */
+#dev-console {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: var(--console-bg);
+	padding: 1rem;
+	display: none;
+	z-index: 3000;
+}
+
+#dev-console input {
+	width: 100%;
+	padding: 0.5rem;
+	border: none;
+	outline: none;
+	background: #222;
+	color: var(--light);
+}
+
+/* responsive design */
+@media (max-width: 768px) {
+	.hero h1 {
+		font-size: 2.5rem;
+	}
+
+	.container {
+		padding: 1rem;
+	}
+}
+
+.connect-grid {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+	margin: 20px 0;
+}
+
+.stats-container {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+	margin: 20px 0;
+}
+
+#dev-console .consoleout {
+	color: #fff;
+	margin-top: 10px;
+	font-family: monospace;
+	max-height: 40vh;
+	margin-bottom: 20px;
+	overflow-y: scroll;
+	position: relative;
+}
+
+#dev-console li {
+	list-style: none;
+	position: relative;
+	padding-left: 20px;
+	word-wrap: break-word;
+	margin-left: 20px;
+}
+
+#dev-console li::before {
+	content: ">";
+	position: absolute;
+	left: 0;
+	color: var(--bullet-color, var(--primary));
+}
+
+body[data-theme="day"] #dev-console li::before {
+	color: var(--day-primary);
+}
+
+.content {
+	text-align: center;
+	line-height: 50px;
+}
+
+.disco-mode {
+	animation: disco 0.5s infinite;
+}
+
+@keyframes disco {
+	0% {
+		filter: hue-rotate(0deg);
+	}
+
+	100% {
+		filter: hue-rotate(360deg);
+	}
+}
+
+/* Active modules styles */
+.active-modules {
+	font-family: monospace;
+	text-align: center;
+	margin-top: 2rem;
+}
+
+.module {
+	display: inline-block;
+	margin: 0 5px;
+	padding: 2px 5px;
+	transition: transform 0.2s ease, color 0.2s ease;
+	cursor: pointer;
+	font-family: monospace;
+}
+
+.active-modules,
+.active-modules * {
+	user-select: none;
+	-webkit-user-select: none;
+	/* Safari */
+	-moz-user-select: none;
+	/* Firefox */
+	-ms-user-select: none;
+	/* IE10+ */
+}
+
+#moduleTitle {
+	cursor: pointer;
+}
+
+.module.hovered {
+	transform: scale(1.2);
+}
+
+.active-modules .module:nth-child(1).hovered {
+	color: #ff4081;
+}
+
+.active-modules .module:nth-child(2).hovered {
+	color: #7c3aed;
+}
+
+.active-modules .module:nth-child(3).hovered {
+	color: #4f46e5;
+}
+
+.active-modules .module:nth-child(4).hovered {
+	color: #00ff88;
+}
+
+.active-modules .module:nth-child(5).hovered {
+	color: #feb47b;
+}
+
+.active-modules .module:nth-child(6).hovered {
+	color: #ff7e5f;
+}
+
+.consolerrdiv {
+	color: #ff4d4d;
+	background: rgba(0, 0, 0, 0.8);
+	padding: 0.5rem 1rem;
+	margin: 0.5rem 0;
+	font-family: monospace;
+	border-left: 3px solid #ff4d4d;
+}

README.js

@@ -0,0 +1,206 @@
+// Initialize animations and interactions
+document.addEventListener("DOMContentLoaded", () => {
+	createStars();
+	initObservers();
+	initKonamiCode();
+});
+
+function createStars() {
+	const starfield = document.getElementById("starfield");
+	starfield.innerHTML = "";
+
+	for (let i = 0; i < 200; i++) {
+		const star = document.createElement("div");
+		star.className = "star";
+		star.style.width = Math.random() * 3 + "px";
+		star.style.height = star.style.width;
+		star.style.left = Math.random() * 100 + "%";
+		star.style.top = Math.random() * 100 + "%";
+		star.style.animationDuration = Math.random() * 3 + 1 + "s";
+		starfield.appendChild(star);
+	}
+}
+
+function initObservers() {
+	const observer = new IntersectionObserver(
+		(entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					entry.target.style.opacity = 1;
+					entry.target.style.transform = "translateY(0)";
+				}
+			});
+		},
+		{ threshold: 0.1 }
+	);
+
+	document.querySelectorAll(".section, .timeline-item").forEach((el) => {
+		observer.observe(el);
+	});
+}
+
+function initKonamiCode() {
+	const konamiCode = [
+		"ArrowUp",
+		"ArrowUp",
+		"ArrowDown",
+		"ArrowDown",
+		"ArrowLeft",
+		"ArrowRight",
+		"ArrowLeft",
+		"ArrowRight",
+		"b",
+		"a",
+	];
+	let index = 0;
+
+	document.addEventListener("keydown", (e) => {
+		e.key === konamiCode[index] ? index++ : (index = 0);
+		if (index === konamiCode.length) {
+			document.body.classList.add("konami-mode");
+			const ufo = document.querySelector(".ufo");
+			ufo.style.animation = "flyby 15s linear infinite";
+		}
+	});
+}
+
+// create starfield effect
+const createStarfield = () => {
+	const starfield = document.querySelector("#starfield");
+	const numStars = 150;
+	for (let i = 0; i < numStars; i++) {
+		const star = document.createElement("div");
+		star.classList.add("star");
+		// randomize size and position
+		const size = Math.random() * 3 + 1;
+		star.style.width = `${size}px`;
+		star.style.height = `${size}px`;
+		star.style.top = `${Math.random() * 100}vh`;
+		star.style.left = `${Math.random() * 100}vw`;
+		// random duration for twinkling
+		star.style.setProperty("--duration", `${Math.random() * 3 + 2}s`);
+		// add click event to form constellations
+		star.addEventListener("click", (e) => {
+			console.log("star clicked at", e.pageX, e.pageY);
+		});
+		starfield.appendChild(star);
+	}
+};
+
+// implement typewriter effect for hero section
+function typewriterEffect() {
+	const el = document.querySelector(".typing-text");
+	const text = el.getAttribute("data-text");
+	el.innerHTML = ""; // Clear any existing content
+
+	// Create a span for the typed text
+	const textSpan = document.createElement("span");
+	textSpan.className = "typed-text";
+	el.appendChild(textSpan);
+
+	// Create a blinking caret appended after the text
+	const caretSpan = document.createElement("span");
+	caretSpan.className = "typing-cursor";
+	el.appendChild(caretSpan);
+
+	let index = 0;
+	const speed = 100; // ms/char
+
+	function type() {
+		if (index < text.length) {
+			textSpan.textContent += text.charAt(index);
+			index++;
+			setTimeout(type, speed);
+		} else setTimeout(() => caretSpan.remove(), 2000);
+	}
+	type();
+}
+
+const createParticleEffect = () => {
+	const particles = document.createElement("div");
+	particles.style.position = "fixed";
+	particles.style.top = `${Math.random() * window.innerHeight}px`;
+	particles.style.left = `${Math.random() * window.innerWidth}px`;
+	particles.style.width = "5px";
+	particles.style.height = "5px";
+	particles.style.background = "var(--primary)";
+	particles.style.borderRadius = "50%";
+	particles.style.opacity = "0.8";
+	particles.style.pointerEvents = "none";
+	particles.style.transition = "opacity 1s ease-out";
+	document.body.appendChild(particles);
+	setTimeout(() => {
+		particles.style.opacity = "0";
+	}, 50);
+	setTimeout(() => {
+		particles.remove();
+	}, 1000);
+};
+
+// implement particle effect on scroll
+const particleEffectOnScroll = () => {
+	window.addEventListener("scroll", () => createParticleEffect);
+};
+
+// konami code detection for UFO easter egg
+let keyBuffer = [];
+
+// launch UFO easter egg
+const launchUFO = () => {
+	const ufo = document.createElement("div");
+	ufo.classList.add("ufo");
+	document.body.appendChild(ufo);
+	// remove UFO after animation
+	ufo.addEventListener("animationend", () => {
+		ufo.remove();
+	});
+};
+
+// intersection observer for sections
+const observer = new IntersectionObserver(
+	(entries) => {
+		entries.forEach((entry) => {
+			if (entry.isIntersecting) {
+				entry.target.style.opacity = 1;
+				entry.target.style.transform = "translateY(0)";
+			}
+		});
+	},
+	{ threshold: 0.1 }
+);
+
+document.addEventListener("DOMContentLoaded", () => {
+	document.querySelectorAll(".section").forEach((section, index) => {
+		observer.observe(section);
+		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));
+});

README.md

@@ -1,8 +1,151 @@
-# Welcome to my personal website!
-You can find it at [ion606.com](https://ion606.com)
+<h1 align="center">🌍 Good Timezone! I'm ION606 🚀</h1>
+<h3 align="center">A grad student exploring neural networks, data analysis, procedural animation, and system programming.</h3>
 
-## Table of Contents
-* [Home](https://ion606.com/)
-* [README](https://ion606.com/README)
-* [Projects](https://ion606.com/projects)
-* [Links](https://ion606.com/links)
+---
+
+### 🎨 About Me
+- 🔭 I’m currently working on [my Bluesky client](https://github.com/ION606/bluesky-client) and [my workout app](https://github.com/ION-WorkoutApp).
+- 🌱 I’m currently studying **neural networks, data analysis, procedural animation, Redis**.
+- 💬 Ask me about **Express.js, web design, or kernel-level operations**.
+- 📫 You can reach me at **ion606@protonmail.com**.
+- ⚡ Fun fact: **I still enjoy creating with GameMaker Studio 2** for fun side projects.
+
+---
+
+### 🛠️ Technologies & Tools
+
+#### 🖥️ Programming Languages
+<p align="center">
+  <a href="https://www.cprogramming.com/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C" width="50"/>&nbsp;&nbsp;</a>
+  <a href="https://www.w3schools.com/cpp/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg" alt="C++" width="50"/>&nbsp;&nbsp;</a>
+  <a href="https://www.w3schools.com/cs/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" alt="C#" width="50"/>&nbsp;&nbsp;</a>
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/solidity/solidity-original.svg" alt="Solidity" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg" alt="Swift" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg" alt="Kotlin" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" alt="Dart" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" alt="Go" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg" alt="Ruby" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/haskell/haskell-original.svg" alt="Haskell" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/erlang/erlang-original.svg" alt="Erlang" width="50"/>
+</p>
+
+#### 🎨 Frontend Development
+<p align="center">
+  <a href="https://www.w3schools.com/css/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3" width="50"/>&nbsp;&nbsp;</a>
+  <a href="https://www.w3.org/html/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5" width="50"/>&nbsp;&nbsp;</a>
+  <a href="https://getbootstrap.com" target="_blank" rel="noreferrer"> <img src="https://github.com/ION606/ION606/assets/58801387/866962dd-ad92-42f6-ba56-be50125f09c6" alt="Bootstrap" width="50"/>&nbsp;&nbsp;</a>
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue.js" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React" width="50"/>
+</p>
+
+#### 🚀 Backend Development
+<p align="center">
+  <a href="https://www.djangoproject.com/" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/django/django-original.svg" alt="Django" width="50"/>&nbsp;&nbsp;</a>
+  <a href="https://expressjs.com" target="_blank" rel="noreferrer"> <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg" alt="Express.js" width="50"/>&nbsp;&nbsp;</a>
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" width="50"/>&nbsp;&nbsp;
+  <a href="https://flask.palletsprojects.com/" target="_blank" rel="noreferrer"> <img src="https://github.com/ION606/ION606/assets/58801387/880c324c-fc69-403c-8453-1c9630558c7f" alt="Flask" width="50"/>&nbsp;&nbsp;</a>
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg" alt="FastAPI" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg" alt="GraphQL" width="50"/>
+</p>
+
+#### ☁️ Frameworks & Cloud
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" alt="Docker" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" alt="Kubernetes" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" alt="AWS" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg" alt="Nginx" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/podman/podman-original.svg" alt="Podman" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg" alt="Vercel" width="50"/>
+</p>
+
+#### 🧠 Machine Learning (ML)
+<p align="center">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg" alt="Scikit-learn" width="50"/>&nbsp;&nbsp;
+  <img src="https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg" alt="TensorFlow" width="50"/>
+</p>
+
+#### 🗄️ Database
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-original.svg" alt="Firebase" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg" alt="MongoDB" width="50"/>&nbsp;&nbsp;
+  <img src="https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg" alt="MSSQL" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original-wordmark.svg" alt="MySQL" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original-wordmark.svg" alt="PostgreSQL" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original-wordmark.svg" alt="Redis" width="50"/>&nbsp;&nbsp;
+  <img src="https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg" alt="SQLite" width="50"/>
+</p>
+
+#### 🛠️ Tools & APIs
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="GitHub" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/selenium/selenium-original.svg" alt="Selenium" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/puppeteer/puppeteer-original.svg" alt="Puppeteer" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/opencv/opencv-original.svg" alt="OpenCV" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vagrant/vagrant-original.svg" alt="Vagrant" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/gradle/gradle-original.svg" alt="Gradle" width="50"/>
+</p>
+
+#### 🖥️ Software
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/arduino/arduino-original.svg" alt="Arduino" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/heroku/heroku-original.svg" alt="Heroku" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="Linux" width="50"/>&nbsp;&nbsp;
+  <img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png" alt="Matlab" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/raspberrypi/raspberrypi-original.svg" alt="Raspberry Pi" width="50"/>
+</p>
+
+#### 📦 Frameworks
+<p align="center">
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dot-net/dot-net-original-wordmark.svg" alt="DotNet" width="50"/>&nbsp;&nbsp;
+  <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="Electron" width="50"/>&nbsp;&nbsp;
+  <img src="https://github.com/ION606/ION606/assets/58801387/ffeb5f73-1d02-46a4-9595-b21532b6c62d" alt="Next.js" width="50"/>&nbsp;&nbsp;
+  <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg" alt="React" width="50"/>&nbsp;&nbsp;
+  <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/puppeteer/puppeteer-original.svg" alt="Puppeteer" width="50"/>
+</p>
+
+---
+
+### 📫 Contact Me
+📧 **ion606@protonmail.com**
+
+---
+
+### 📊 GitHub Stats
+<p align="center">
+  <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=ion606&layout=compact&theme=tokyonight" alt="Top Languages">
+</p>
+
+<p align="center">
+  <img align="center" src="https://github-readme-stats.vercel.app/api?username=ion606&show_icons=true&theme=midnight-purple&hide_border=true&locale=en" alt="ion606" />
+</p>
+
+<!-- <p align="center">
+  <img src="https://github-readme-streak-stats.herokuapp.com/?user=ion606&theme=tokyonight" alt="GitHub Streak Stats">
+</p> -->
+
+---
+
+### 🔗 Connect with Me
+<p align="center">
+  <a href="https://dev.to/ion606" target="_blank"><img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/devto.svg" alt="Dev.to" height="30" width="40"/></a>
+  <a href="https://stackoverflow.com/users/13159393/ion606" target="_blank"><img src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/stack-overflow.svg" alt="Stack Overflow" height="30" width="40"/></a>
+</p>
+
+<p align="center">
+  <a href="https://www.buymeacoffee.com/ION606"> <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" height="50" width="210" alt="Buy Me A Coffee" /> </a>
+  <a href="https://ko-fi.com/ION606"> <img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height="50" width="210" alt="Ko-fi" /> </a>
+</p>
+
+<p align="center">
+  Number of cute people who have viewed my profile<br>
+  <img src="https://profile-counter.glitch.me/ion606/count.svg" alt="Profile Views"/>
+</p>
+
+<!-- <img align="center" src="https://user-images.githubusercontent.com/58801387/236281561-eab2e67a-4262-4418-b833-ef8e16642c09.png" alt="Banner"/> -->

terminal.js

@@ -0,0 +1,349 @@
+// secret developer console toggle (using backtick key)
+const devConsoleToggle = () => {
+	const devConsole = document.querySelector("#dev-console");
+	if (
+		devConsole.style.display === "none" ||
+		devConsole.style.display === ""
+	) {
+		devConsole.style.display = "block";
+	} else {
+		devConsole.style.display = "none";
+		devConsole.querySelector(".consoleout").innerHTML = "";
+	}
+
+	// for the command
+	return true;
+};
+
+document.addEventListener("keydown", (e) => {
+	if (e.key === "`") devConsoleToggle();
+});
+
+class TerminalFS {
+	constructor() {
+		const consoleInput = document.querySelector("#dev-console input");
+		const consoleOutput = document.createElement("div");
+		consoleOutput.className = "consoleout";
+		document.querySelector("#dev-console").prepend(consoleOutput);
+
+		// not set bc indexing
+		const userInps = [];
+		let uInpInd = 0;
+
+		consoleInput?.addEventListener("keydown", (e) => {
+			if (e.key === "Enter") {
+				const commandText = e.target.value.trim();
+				const [cmd, ...args] = commandText.split(" ");
+
+				if (cmd === "clear") consoleOutput.innerHTML = "";
+				else {
+					const eggResponse = this.easterEggs(commandText);
+					if (eggResponse) {
+						consoleOutput.innerHTML += `<div style="color: var(--command-color)">> ${commandText}</div><div>${eggResponse}</div>`;
+						e.target.value = "";
+					} else {
+						const cmdContent = this.commands[cmd]?.(args.join(" "));
+						if (!cmdContent) {
+							consoleOutput.innerHTML += `<div class="consolerrdiv">🚨 Unknown command: \`${cmd}\`</div>`;
+						} else if (cmdContent != true) {
+							consoleOutput.innerHTML += cmdContent;
+						}
+					}
+				}
+
+				if (!userInps.includes(commandText)) userInps.push(commandText);
+				e.target.value = "";
+				uInpInd = 0; // reset history index
+				consoleOutput.scrollTop = consoleOutput.scrollHeight;
+			} else if (e.key === "ArrowUp") {
+				if (userInps.length > 0 && uInpInd < userInps.length) {
+					uInpInd++;
+					consoleInput.value = userInps[userInps.length - uInpInd];
+					consoleInput.setSelectionRange(
+						consoleInput.value.length,
+						consoleInput.value.length
+					);
+				}
+			} else if (e.key === "ArrowDown") {
+				if (uInpInd > 1) {
+					uInpInd--;
+					consoleInput.value = userInps[userInps.length - uInpInd];
+					consoleInput.setSelectionRange(
+						consoleInput.value.length,
+						consoleInput.value.length
+					);
+				} else {
+					uInpInd = 0;
+					consoleInput.value = "";
+				}
+			}
+		});
+
+		this.currentDir = "/";
+		this.fs = {
+			"/": {
+				type: "dir",
+				children: ["home", "projects", "fun", "etc", "sys"],
+			},
+			"/home": { type: "dir", children: ["ion606", "guest"] },
+			"/home/ion606": {
+				type: "dir",
+				children: [
+					"resume.txt",
+					"todo.txt",
+					".secret_config",
+					"diary.md",
+				],
+			},
+			"/projects": {
+				type: "dir",
+				children: [
+					"bluesky-client",
+					"workout-app",
+					"AI-overlord",
+					"black-hole-sim",
+				],
+			},
+			"/fun": {
+				type: "dir",
+				children: ["joke.txt", "konami.seq", "uwu.md", "hackerman.gif"],
+			},
+			"/etc": {
+				type: "dir",
+				children: ["motd", "syslog", "joke_of_the_day"],
+			},
+			"/sys": {
+				type: "dir",
+				children: ["self-destruct.exe", "disco-bootloader"],
+			},
+		};
+
+		this.files = {
+			"/home/ion606/todo.txt": `
+		  1. Take over the world
+		  2. Make coffee ☕
+		  3. Fix CSS in production
+		  4. ????
+		  5. PROFIT!
+		`,
+			"/fun/joke.txt": `
+		  Why do Java developers wear glasses?
+		  Because they can't C#! 
+		  
+		  (•_•)
+		  ( •_•)>⌐■-■
+		  (⌐■_■)
+		`,
+			"/etc/motd": `
+		  WARNING: This system is powered by ✨imagination✨
+		  Unauthorized access will result in T̵̙̻̭̤̺̱̥̖̤̭̗̜͓͎̓̈́̏͋̔̕̚͠h̴̳͎̳̱̘̽̎͛͆̓̐͑͛̈́̕̕͝͝é̷̛̮̥̲͇̊̅͋̏̊̅͊͝͝ ̵̡̛̪̮̦̘̘̼̼̺̪̪̋͋̀̌̇̉̋͌̾̿̓͝͝V̶̡̨̧̨̟̙̻͓̪͇̻̞̥͑̎͋͗̿́̓̌͒͊̈́́̚͠ơ̴̛̱̞̾̎̒̋̾̔̈́̓͑̋̉ȋ̴̡̛̙̘̝̙̬̠̹̙̻͖̔̽̿̓͑̈́͋́̐̕͠d̷̲̲̘̈́̑́̿̆̓̔͋́̓̋̅̏̚
+		`,
+			"/home/ion606/.secret_config": `
+		  [disco_settings]
+		  sparkle_level=9001
+		  rainbow_mode=enabled
+		  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,
+		  
+		  Today I discovered the Konami code activates a UFO.
+		  Also, typing "make me a sandwich" works sometimes...
+		  Note to self: Buy more coffee.
+		`,
+			"/home/ion606/resume": document
+				.querySelector("html")
+				.outerHTML.replace(/&/g, "&amp;")
+				.replace(/</g, "&lt;")
+				.replace(/>/g, "&gt;")
+				.replace(/"/g, "&quot;")
+				.replace(/'/g, "&#039;"),
+		};
+	}
+
+	// Easter egg commands
+	easterEggs(command) {
+		const responses = {
+			"sudo make me a sandwich": "What? Make it yourself.",
+			"why did the chicken cross the road?":
+				'To git commit -m "migration"',
+			"open the pod bay doors":
+				"I'm sorry Dave, I'm afraid I can't do that",
+			"there is no spoon": "System matrix compromised...",
+			"beam me up": "Energizing! ♫♪♫ ♪♫♪ ♫♪♫",
+		};
+
+		return responses[command.toLowerCase()] || null;
+	}
+
+	// Path resolution logic
+	resolvePath(targetPath) {
+		const path = targetPath.replace(/\/+/g, "/").replace(/\/$/, "") || "/";
+
+		if (path.startsWith("/")) return path;
+		else {
+			let fullPath = `${this.currentDir}/${path}`.replace(/\/+/g, "/");
+			const segments = fullPath.split("/").filter(Boolean);
+			const resolvedSegments = [];
+
+			for (const segment of segments) {
+				// Current directory, skip
+				if (segment === ".") continue;
+
+				// Move up one level if possible
+				if (segment === "..") resolvedSegments.pop();
+				else resolvedSegments.push(segment);
+			}
+
+			return "/" + resolvedSegments.join("/");
+		}
+	}
+
+	// Command implementations
+	commands = {
+		ls: (path) => {
+			if (!path) path = this.currentDir;
+
+			const absPath = this.resolvePath(path);
+			const dir = this.fs[absPath];
+
+			if (!dir)
+				return `ls: cannot access '${path}': No such file or directory`;
+			if (dir.type !== "dir") return `ls: ${path}: Not a directory`;
+
+			const items = dir.children.map((item) => {
+				const fullPath =
+					absPath === "/" ? `/${item}` : `${absPath}/${item}`;
+				const isDir = this.fs[fullPath]?.type === "dir";
+				return `${isDir ? "📁" : "📄"} ${item}${isDir ? "/" : ""}`;
+			});
+
+			return `<pre>${absPath}\n${"-".repeat(40)}\n${items.join(
+				"\n"
+			)}</pre>`;
+		},
+
+		cd: (path) => {
+			const absPath = this.resolvePath(path);
+			if (!this.fs[absPath] || this.fs[absPath].type !== "dir") {
+				return `cd: ${path}: No such directory`;
+			}
+			this.currentDir = absPath;
+			return `<pre>moved to ${absPath}</pre>`;
+		},
+
+		cat: (filePath) => {
+			const absPath = this.resolvePath(filePath);
+
+			if (!this.files[absPath]) {
+				// Easter egg for missing files
+				const jokes = [
+					"File not found... but here's a joke!",
+					"404: Humor not found... just kidding!",
+					"This file is in another castle! 🍄",
+				];
+				return (
+					`${jokes[Math.floor(Math.random() * jokes.length)]}\n` +
+					`        ╚═(███)═╝\n` +
+					`        ╚═(███)═╝\n` +
+					`        ╚═(███)═╝\n` +
+					`        ██╚═╝██\n` +
+					`        ███████\n` +
+					`        ███████`
+				);
+			}
+
+			return `<pre>${this.files[absPath].trim()}</pre>`;
+		},
+		help: () => `
+        <ul>
+            <li><strong>exit</strong> - Exit the console</li>
+            <li><strong>clear</strong> - Clear the console</li>
+            <li><strong>help</strong> - Show this help message</li>
+            <li><strong>ls [path]</strong> - List directory contents</li>
+            <li><strong>cd [path]</strong> - Change directory</li>
+            <li><strong>cat [file]</strong> - Display file content</li>
+            <li><strong>theme day/night</strong> - Switch between day/night modes</li>
+            <li><strong>background [ocean/sunset/forest]</strong> - Set a new background gradient (or reset with no valid argument)</li>
+            <li><strong>ufo</strong> - Launch UFO animation</li>
+            <li><strong>starfield</strong> - Regenerate stars</li>
+            <li><strong>random</strong> - Activate random color chaos!</li>
+            <li><strong>secret</strong> - Activate disco mode!</li>
+        </ul>`,
+
+		exit: devConsoleToggle,
+
+		theme: (arg) => {
+			const themeArg = arg.trim().toLowerCase();
+			if (themeArg === "night" || themeArg === "dark") {
+				document.body.setAttribute("data-theme", "night");
+				return "🌙 Switched to night theme!";
+			} else if (themeArg === "day" || themeArg === "light") {
+				document.body.setAttribute("data-theme", "day");
+				return "☀️ Switched to day theme!";
+			} else {
+				return "Usage: theme [day/night]";
+			}
+		},
+
+		background: (arg) => {
+			const bgArg = arg.trim().toLowerCase();
+			if (bgArg === "ocean") {
+				document.body.style.background =
+					"linear-gradient(to right, #1e3c72, #2a5298)";
+				return "🌊 Ocean background set!";
+			} else if (bgArg === "sunset") {
+				document.body.style.background =
+					"linear-gradient(to right, #ff7e5f, #feb47b)";
+				return "🌇 Sunset background set!";
+			} else if (bgArg === "forest") {
+				document.body.style.background =
+					"linear-gradient(to right, #134e5e, #71b280)";
+				return "🌲 Forest background set!";
+			} else {
+				document.body.style.background = "";
+				return "Background reset to default!";
+			}
+		},
+
+		ufo: () => {
+			launchUFO();
+			return "🛸 UFO launched!";
+		},
+
+		starfield: () => {
+			createStars();
+			return "✨ Starfield regenerated!";
+		},
+
+		random: () => {
+			const colors = ["#ff4081", "#7c3aed", "#4f46e5", "#00ff88"];
+			document.body.style.color =
+				colors[Math.floor(Math.random() * colors.length)];
+			return "🌈 Color chaos activated!";
+		},
+
+		secret: () => {
+			document.body.classList.toggle("disco-mode");
+			return "🎆 Disco mode activated!";
+		},
+	};
+}
+
+// Initialize terminal system
+const terminalFS = new TerminalFS();