ION_Archive/ion606.github.io
1
0
Fork 0
mirror of https://github.com/ION606/ion606.github.io.git synced 2026-05-14 22:16:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

reformatted README

Browse Source
This commit is contained in:
ION606
2025-03-31 19:36:35 -04:00
parent 2ceed4434b
commit 254f4457f5
6 changed files with 1766 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
tmp/
README.css
+474
View File
@@ -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.html
+508 -344
View File
@@ -1,447 +1,611 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ION606 - Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary: #7c3aed;
--secondary: #4f46e5;
--dark: #0f172a;
--light: #f8fafc;
}
<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" />
</head>
<body>
<!-- dynamic starfield container (appended via js) -->
<div id="starfield"></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
body {
background: linear-gradient(45deg, var(--dark), #1e293b);
color: var(--light);
line-height: 1.6;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.hero {
text-align: center;
padding: 4rem 0;
animation: fadeIn 1s ease-in;
}
.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;
}
.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;
}
.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;
}
.stats-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
text-align: center;
}
.stats-container img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
.social-links {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem 0;
}
.social-links a {
font-size: 2rem;
color: var(--light);
transition: color 0.3s ease;
}
.about-list {
list-style: none;
padding: 1rem 0;
}
.about-list li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 1rem;
}
.about-list li::before {
content: '▹';
color: var(--primary);
}
.category-title {
margin: 2rem 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary);
}
.support-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
margin: 2rem 0;
}
.support-buttons img {
transition: transform 0.3s ease;
height: 50px;
}
.profile-views {
text-align: center;
margin: 2rem 0;
font-size: 0.9rem;
opacity: 0.8;
}
a {
color: var(--primary);
text-decoration: none;
transition: opacity 0.3s ease;
}
a:hover {
opacity: 0.8;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
to {
transform: translateY(0);
opacity: 1;
}
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.hero h1 {
font-size: 2.5rem;
}
.tech-grid {
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
/* Responsive adjustments for About Me section */
.about-list li {
flex-direction: column;
align-items: center;
text-align: center;
}
.about-list li::before {
content: '';
}
.about-list li::after {
content: '▹';
color: var(--primary);
margin-top: 0.5rem;
}
.stats-container {
display: flex;
flex-direction: column;
align-items: center;
}
.stats-container img {
width: 90%; /* Ensures it does not stretch too much */
max-width: 400px; /* Prevents excessive scaling on small devices */
}
}
</style>
</head>
<body>
<div class="container">
<nav>
<a href="/">home</a>
<a href="/README">readme</a>
<a href="/projects">projects</a>
<a href="/links">links</a>
</nav>
<section class="hero">
<h1>🌍 Good Timezone! I'm ION606 🚀</h1>
<p class="subtitle">A grad student exploring neural networks, data analysis, procedural animation, and system programming.</p>
<h1>
<span style="-webkit-text-fill-color: white">🌍</span> good
timezone! I'm ION606
</h1>
<p
class="typing-text"
data-text="A grad student exploring neural networks, data analysis, procedural animation, and system programming"></p>
</section>
<!-- About Section -->
<!-- about section -->
<section class="section">
<h2>🎨 About Me</h2>
<h2>🎨 about me</h2>
<ul class="about-list">
<li>🔭 Currently working on <a href="https://github.com/ION606/bluesky-client" target="_blank">my Bluesky client</a> and <a href="https://github.com/ION-WorkoutApp" target="_blank">my workout app</a></li>
<li>🌱 Currently studying <strong>neural networks, data analysis, procedural animation, Redis</strong></li>
<li>💬 Ask me about <strong>Express.js, web design, or kernel-level operations</strong></li>
<li>📫 Reach me at <a href="mailto:ion606@protonmail.com">ion606@protonmail.com</a></li>
<li>⚡ Fun fact: <strong>I still enjoy creating with GameMaker Studio 2</strong> for fun side projects</li>
<li>
🔭 currently working on
<a
href="https://github.com/ION606/bluesky-client"
target="_blank"
>my bluesky client</a
>
and
<a
href="https://github.com/ION-WorkoutApp"
target="_blank"
>my workout app</a
>
</li>
<li>
🌱 currently studying
<strong
>neural networks, data analysis, procedural
animation, redis</strong
>
</li>
<li>
💬 ask me about
<strong
>express.js, web design, or kernel-level
operations</strong
>
</li>
<li>
📫 reach me at
<a href="mailto:ion606@protonmail.com"
>ion606@protonmail.com</a
>
</li>
<li>
⚡ fun fact:
<strong
>i still enjoy creating with gamemaker studio
2</strong
>
for fun side projects
</li>
</ul>
</section>
<!-- Technologies Section -->
<!-- technologies & tools section -->
<section class="section">
<h2>🛠️ Technologies & Tools</h2>
<h2>🛠️ technologies & tools</h2>
<!-- Programming Languages -->
<h3 class="category-title">Programming Languages</h3>
<div class="tech-grid">
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C">
<span>C</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg"
alt="C" />
<span>c</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg" alt="C++">
<span>C++</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg"
alt="C++" />
<span>c++</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg" alt="C#">
<span>C#</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/csharp/csharp-original.svg"
alt="C#" />
<span>c#</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python">
<span>Python</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg"
alt="Python" />
<span>python</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
<span>Java</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg"
alt="Java" />
<span>java</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript">
<span>JavaScript</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
alt="JavaScript" />
<span>javascript</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript">
<span>TypeScript</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg"
alt="TypeScript" />
<span>typescript</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/solidity/solidity-original.svg" alt="Solidity">
<span>Solidity</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/solidity/solidity-original.svg"
alt="Solidity" />
<span>solidity</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg" alt="Swift">
<span>Swift</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg"
alt="Swift" />
<span>swift</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg" alt="Kotlin">
<span>Kotlin</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg"
alt="Kotlin" />
<span>kotlin</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" alt="Dart">
<span>Dart</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg"
alt="Dart" />
<span>dart</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" alt="Go">
<span>Go</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg"
alt="Go" />
<span>go</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust">
<span>Rust</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg"
alt="Rust" />
<span>rust</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg" alt="Ruby">
<span>Ruby</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg"
alt="Ruby" />
<span>ruby</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP">
<span>PHP</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg"
alt="PHP" />
<span>php</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/haskell/haskell-original.svg" alt="Haskell">
<span>Haskell</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/haskell/haskell-original.svg"
alt="Haskell" />
<span>haskell</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/erlang/erlang-original.svg" alt="Erlang">
<span>Erlang</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/erlang/erlang-original.svg"
alt="Erlang" />
<span>erlang</span>
</div>
</div>
<!-- Frontend Development -->
<h3 class="category-title">Frontend Development</h3>
<div class="tech-grid">
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS3">
<span>CSS3</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"
alt="CSS3" />
<span>css3</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" alt="HTML5">
<span>HTML5</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
alt="HTML5" />
<span>html5</span>
</div>
<div class="tech-card">
<img src="https://github.com/ION606/ION606/assets/58801387/866962dd-ad92-42f6-ba56-be50125f09c6" alt="Bootstrap">
<span>Bootstrap</span>
<img
src="https://github.com/ION606/ION606/assets/58801387/866962dd-ad92-42f6-ba56-be50125f09c6"
alt="Bootstrap" />
<span>bootstrap</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue.js">
<span>Vue.js</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg"
alt="Vue.js" />
<span>vue.js</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" alt="React">
<span>React</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
alt="React" />
<span>react</span>
</div>
</div>
<!-- Backend Development -->
<h3 class="category-title">Backend Development</h3>
<div class="tech-grid">
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/django/django-original.svg" alt="Django">
<span>Django</span>
<img
src="https://raw.githubusercontent.com/devicons/devicon/refs/tags/v2.16.0/icons/django/django-plain.svg"
alt="Django" />
<span>django</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg" alt="Express.js">
<span>Express.js</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/express/express-original.svg"
alt="Express.js" />
<span>express.js</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js">
<span>Node.js</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"
alt="Node.js" />
<span>node.js</span>
</div>
<div class="tech-card">
<img src="https://github.com/ION606/ION606/assets/58801387/880c324c-fc69-403c-8453-1c9630558c7f" alt="Flask">
<span>Flask</span>
<img
src="https://github.com/ION606/ION606/assets/58801387/880c324c-fc69-403c-8453-1c9630558c7f"
alt="Flask" />
<span>flask</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg" alt="FastAPI">
<span>FastAPI</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg"
alt="FastAPI" />
<span>fastapi</span>
</div>
<div class="tech-card">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg" alt="GraphQL">
<span>GraphQL</span>
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg"
alt="GraphQL" />
<span>graphql</span>
</div>
</div>
<!-- Other technology sections (Cloud, ML, Database, Tools, Software, Frameworks) -->
<!-- Similar structure with appropriate tech cards -->
<!-- Frameworks & Cloud -->
<h3 class="category-title">Frameworks & Cloud</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg"
alt="Docker" />
<span>docker</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg"
alt="Kubernetes" />
<span>kubernetes</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original-wordmark.svg"
alt="AWS" />
<span>aws</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg"
alt="Nginx" />
<span>nginx</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/podman/podman-original.svg"
alt="Podman" />
<span>podman</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vercel/vercel-original.svg"
alt="Vercel" />
<span>vercel</span>
</div>
</div>
<!-- Machine Learning -->
<h3 class="category-title">Machine Learning (ML)</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/0/05/Scikit_learn_logo_small.svg"
alt="Scikit-learn" />
<span>scikit-learn</span>
</div>
<div class="tech-card">
<img
src="https://www.vectorlogo.zone/logos/tensorflow/tensorflow-icon.svg"
alt="TensorFlow" />
<span>tensorflow</span>
</div>
</div>
<!-- Database -->
<h3 class="category-title">Database</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-original.svg"
alt="Firebase" />
<span>firebase</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg"
alt="MongoDB" />
<span>mongodb</span>
</div>
<div class="tech-card">
<img
src="https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg"
alt="MSSQL" />
<span>mssql</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original-wordmark.svg"
alt="MySQL" />
<span>mysql</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original-wordmark.svg"
alt="PostgreSQL" />
<span>postgresql</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original-wordmark.svg"
alt="Redis" />
<span>redis</span>
</div>
<div class="tech-card">
<img
src="https://www.vectorlogo.zone/logos/sqlite/sqlite-icon.svg"
alt="SQLite" />
<span>sqlite</span>
</div>
</div>
<!-- Tools & APIs -->
<h3 class="category-title">Tools & APIs</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg"
alt="Git" />
<span>git</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg"
alt="GitHub" />
<span>github</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/selenium/selenium-original.svg"
alt="Selenium" />
<span>selenium</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/puppeteer/puppeteer-original.svg"
alt="Puppeteer" />
<span>puppeteer</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/opencv/opencv-original.svg"
alt="OpenCV" />
<span>opencv</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vagrant/vagrant-original.svg"
alt="Vagrant" />
<span>vagrant</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/gradle/gradle-original.svg"
alt="Gradle" />
<span>gradle</span>
</div>
</div>
<!-- Software -->
<h3 class="category-title">Software</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/arduino/arduino-original.svg"
alt="Arduino" />
<span>arduino</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/heroku/heroku-original.svg"
alt="Heroku" />
<span>heroku</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg"
alt="Linux" />
<span>linux</span>
</div>
<div class="tech-card">
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png"
alt="Matlab" />
<span>matlab</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/raspberrypi/raspberrypi-original.svg"
alt="Raspberry Pi" />
<span>raspberry pi</span>
</div>
</div>
<!-- Frameworks -->
<h3 class="category-title">Frameworks</h3>
<div class="tech-grid">
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dot-net/dot-net-original-wordmark.svg"
alt="DotNet" />
<span>dotnet</span>
</div>
<div class="tech-card">
<img
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg"
alt="Electron" />
<span>electron</span>
</div>
<div class="tech-card">
<img
src="https://github.com/ION606/ION606/assets/58801387/ffeb5f73-1d02-46a4-9595-b21532b6c62d"
alt="Next.js" />
<span>next.js</span>
</div>
<div class="tech-card">
<img
src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg"
alt="React" />
<span>react</span>
</div>
<div class="tech-card">
<img
src="https://raw.githubusercontent.com/devicons/devicon/master/icons/puppeteer/puppeteer-original.svg"
alt="Puppeteer" />
<span>puppeteer</span>
</div>
</div>
</section>
<!-- Stats Section -->
<!-- github stats section -->
<section class="section">
<h2>📊 GitHub Stats</h2>
<h2>📊 github stats</h2>
<div class="stats-container">
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=ion606&layout=compact&theme=tokyonight" alt="Top Languages">
<img src="https://github-readme-stats.vercel.app/api?username=ion606&show_icons=true&theme=midnight-purple&hide_border=true" alt="GitHub Stats">
<div id="top-langs-stat">
<img
src="https://github-readme-stats.vercel.app/api/top-langs/?username=ion606&layout=compact&theme=tokyonight" />
</div>
</section>
<img
src="https://github-readme-stats.vercel.app/api?username=ion606&show_icons=true&theme=midnight-purple&hide_border=true"
alt="github stats" />
</div>
</section>
<!-- Contact Section -->
<!-- contact section -->
<section class="section">
<h2>📫 Contact Me</h2>
<div class="content">
<p>📧 <a href="mailto:ion606@protonmail.com">ion606@protonmail.com</a></p>
<div class="social-links">
<a href="https://dev.to/ion606" target="_blank"><i class="fab fa-dev"></i></a>
<a href="https://stackoverflow.com/users/13159393/ion606" target="_blank"><i class="fab fa-stack-overflow"></i></a>
</div>
<div class="support-buttons">
<a href="https://www.buymeacoffee.com/ION606" target="_blank">
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee">
</a>
<a href="https://ko-fi.com/ION606" target="_blank">
<img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" alt="Ko-fi">
</a>
</div>
<p>
📧
<a href="mailto:ion606@protonmail.com"
>ion606@protonmail.com</a
>
</p>
<div class="profile-views">
Number of cute people who have viewed my profile<br>
<img src="https://profile-counter.glitch.me/ion606/count.svg" alt="Profile Views">
number of cute people who have viewed my profile<br />
<img
src="https://profile-counter.glitch.me/ion606/count.svg"
alt="profile views" />
</div>
</div>
</section>
<!-- Connect with Me section from README.md -->
<section class="section">
<h2>🔗 Connect with Me</h2>
<div class="content">
<div class="connect-grid">
<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>
<a
href="https://www.buymeacoffee.com/ION606"
target="_blank">
<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" target="_blank">
<img
src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3"
height="50"
width="210"
alt="Ko-fi" />
</a>
</div>
</div>
</section>
<div id="lol" style="display: none; text-align: center">
wouldn't you like to know lol
</div>
<p class="active-modules">
<span id="moduleTitle">active modules:</span> [
<span class="module" onclick="createStars()">starfield</span>,
<span class="module" onclick="launchUFO()">ufo</span>,
<span class="module" onclick="devConsoleToggle()"
>developer console</span
>,
<span class="module" onclick="typewriterEffect()"
>typewriter effect</span
>,
<span class="module" onclick="createParticleEffect()"
>particle scroll</span
>,
<span class="module" onclick="triggerEasterEggsReal()"
>easter eggs</span
>
]
</p>
</div>
<script>
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 });
const triggerEasterEggsReal = () => {
const lol = document.querySelector("#lol");
lol.style.display = "block";
document.querySelectorAll('.section').forEach((section, index) => {
observer.observe(section);
section.style.animationDelay = `${index * 0.2}s`;
});
document.querySelectorAll('a').forEach(link => {
link.addEventListener('mouseenter', () => {
link.style.transform = 'scale(1.05)';
});
link.addEventListener('mouseleave', () => {
link.style.transform = 'scale(1)';
});
});
document.querySelectorAll('.tech-card').forEach(card => {
card.addEventListener('mousemove', (e) => {
const x = e.pageX - card.offsetLeft;
const y = e.pageY - card.offsetTop;
card.style.setProperty('--x', `${x}px`);
card.style.setProperty('--y', `${y}px`);
});
});
setTimeout(() => {
lol.style.display = "none";
}, 3000);
};
</script>
</body>
<!-- hidden developer console -->
<div id="dev-console">
<input type="text" placeholder="enter command..." />
</div>
<script src="/README.js"></script>
<script src="/terminal.js"></script>
</body>
</html>
README.js
+206
View File
@@ -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
+150 -7
View File
@@ -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
+349
View File
@@ -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();