updated resume

This commit is contained in:
2025-06-11 16:05:15 -04:00
parent c40e02ba8c
commit 14aad2e352
14 changed files with 609 additions and 202 deletions
+103
View File
@@ -472,3 +472,106 @@ body[data-theme="day"] #dev-console li::before {
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;
}
View File
View File
View File
View File
-2
View File
@@ -169,7 +169,6 @@ const observer = new IntersectionObserver(
{ threshold: 0.1 }
);
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".section").forEach((section, index) => {
observer.observe(section);
section.style.animationDelay = `${index * 0.2}s`;
@@ -203,4 +202,3 @@ document.addEventListener("DOMContentLoaded", () => {
});
modTitle.addEventListener("mouseleave", () => (hovered = false));
});
+134
View File
@@ -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 "";
}
View File
View File
+159 -38
View File
@@ -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: [
"bluesky-client",
"workout-app",
"AI-overlord",
"black-hole-sim",
],
children: Object.keys(projectLinks),
},
"/fun": {
type: "dir",
@@ -125,6 +144,31 @@ class TerminalFS {
3. Fix CSS in production
4. ????
5. PROFIT!
`,
"/home/ion606/resume.txt": `
ION606 - Resume
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
- Tools: Git, Docker, Kubernetes, Vagrant, Electron, Next.js
Contact: ion606@protonmail.com
`,
"/home/ion606/.secret_config": `
[disco_settings]
sparkle_level=9001
rainbow_mode=enabled
pink_nodders: online
`,
"/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.
`,
"/fun/joke.txt": `
Why do Java developers wear glasses?
@@ -134,15 +178,10 @@ class TerminalFS {
( _)>-
(_)
`,
"/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/konami.seq": `
B A
Hint: Try entering this sequence on the main page!
`,
"/fun/uwu.md": `
# Nya~ Welcome to my secret docs!
@@ -151,6 +190,45 @@ class TerminalFS {
- 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?
@@ -159,20 +237,17 @@ class TerminalFS {
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.
"/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: 🕺💃🪩
`,
"/home/ion606/resume": document
.querySelector("html")
.outerHTML.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;"),
};
}
@@ -257,15 +332,28 @@ class TerminalFS {
"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` +
` ███████`
);
const asciiArts = [
`
<pre>
.--.
|o_o |
|:_/ |
// \\ \\
(| | )
/'\\_ _/\\\`
\\___)=(___/
</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>`;
},
};
}
+24 -4
View File
@@ -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>
+23 -16
View File
@@ -1,22 +1,26 @@
<!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">
<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" />
<title>Home - ION606.com</title>
<link rel="icon" href="https://avatars.githubusercontent.com/u/58801387" type="image/jpeg">
<link
rel="icon"
href="https://avatars.githubusercontent.com/u/58801387"
type="image/jpeg" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="/CSS/style.css" />
<script type="text/javascript" src="/JS/script.js"></script>
</head>
<body>
@@ -28,11 +32,14 @@
<div class="content">
<h1>Welcome to my Personal Website!</h1>
<p>My (user)name's ION606, feel free to looks at my stuff</p>
<button onclick="window.location.href = 'README';">README</button>
<button onclick="window.location.href = 'README';">
README
</button>
<button onclick="window.location.href = 'links';">Links</button>
<button onclick="window.location.href = 'projects';">Projects</button>
<button onclick="window.location.href = 'projects';">
Projects
</button>
</div>
</div>
</body>
</html>
+40 -23
View File
@@ -1,25 +1,26 @@
<!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">
<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">
<link rel="stylesheet" href="/CSS/links.css" />
<script>
document.addEventListener('DOMContentLoaded', function () {
document.addEventListener("DOMContentLoaded", function () {
function createRipple() {
const rippleContainer = document.querySelector('.ripple-background');
const circle = document.createElement('div');
circle.classList.add('circle');
const rippleContainer =
document.querySelector(".ripple-background");
const circle = document.createElement("div");
circle.classList.add("circle");
// Random size from 50 to 200px
const size = Math.random() * (200 - 50) + 50;
@@ -27,12 +28,24 @@
circle.style.height = `${size}px`;
// Random position within the container
circle.style.left = `${Math.random() * (window.innerWidth - size)}px`;
circle.style.top = `${Math.random() * (window.innerHeight - size)}px`;
circle.style.left = `${
Math.random() * (window.innerWidth - size)
}px`;
circle.style.top = `${
Math.random() * (window.innerHeight - size)
}px`;
// Random color
const colors = ['#FF5959', '#FCA130', '#FFE74C', '#8AC926', '#1982C4', '#6A4C93']; // Rainbow colors
const color = colors[Math.floor(Math.random() * colors.length)];
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);
@@ -47,15 +60,20 @@
setInterval(createRipple, 2000);
});
</script>
</head>
<body>
<div class="links-container">
<a href="https://github.com/ION606" class="link fade-in">Github</a>
<a href="https://www.twitch.tv/ion606" class="link fade-in">Twitch</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="https://www.twitch.tv/ion606" class="link fade-in"
>Twitch</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>
</div>
<div class="ripple-background">
@@ -66,5 +84,4 @@
<div class="circle small shade5"></div>
</div>
</body>
</html>
+13 -6
View File
@@ -17,13 +17,13 @@
href="https://avatars.githubusercontent.com/u/58801387"
type="image/jpeg" />
<link rel="stylesheet" href="projects.css" />
<link rel="stylesheet" href="pageMenu.css" />
<link rel="stylesheet" href="/CSS/projects.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>