mirror of
https://github.com/ION606/ion606.github.io.git
synced 2026-05-14 22:16:59 +00:00
reformatted README
This commit is contained in:
@@ -0,0 +1 @@
|
||||
tmp/
|
||||
+474
@@ -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;
|
||||
}
|
||||
+504
-340
@@ -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">
|
||||
<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;
|
||||
}
|
||||
|
||||
* {
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
@@ -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));
|
||||
});
|
||||
@@ -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"/> </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"/> </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"/> </a>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" alt="TypeScript" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/solidity/solidity-original.svg" alt="Solidity" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg" alt="Swift" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg" alt="Kotlin" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dart/dart-original.svg" alt="Dart" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg" alt="Go" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-original.svg" alt="Rust" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg" alt="Ruby" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/haskell/haskell-original.svg" alt="Haskell" width="50"/>
|
||||
<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"/> </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"/> </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"/> </a>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg" alt="Vue.js" width="50"/>
|
||||
<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"/> </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"/> </a>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" alt="Node.js" width="50"/>
|
||||
<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"/> </a>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/fastapi/fastapi-original.svg" alt="FastAPI" width="50"/>
|
||||
<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"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg" alt="Kubernetes" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" alt="AWS" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg" alt="Nginx" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/podman/podman-original.svg" alt="Podman" width="50"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original-wordmark.svg" alt="MongoDB" width="50"/>
|
||||
<img src="https://www.svgrepo.com/show/303229/microsoft-sql-server-logo.svg" alt="MSSQL" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original-wordmark.svg" alt="MySQL" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original-wordmark.svg" alt="PostgreSQL" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original-wordmark.svg" alt="Redis" width="50"/>
|
||||
<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"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" alt="GitHub" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/selenium/selenium-original.svg" alt="Selenium" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/puppeteer/puppeteer-original.svg" alt="Puppeteer" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/opencv/opencv-original.svg" alt="OpenCV" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vagrant/vagrant-original.svg" alt="Vagrant" width="50"/>
|
||||
<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"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/heroku/heroku-original.svg" alt="Heroku" width="50"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" alt="Linux" width="50"/>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Matlab_Logo.png" alt="Matlab" width="50"/>
|
||||
<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"/>
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/electron/electron-original.svg" alt="Electron" width="50"/>
|
||||
<img src="https://github.com/ION606/ION606/assets/58801387/ffeb5f73-1d02-46a4-9595-b21532b6c62d" alt="Next.js" width="50"/>
|
||||
<img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg" alt="React" width="50"/>
|
||||
<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"/> -->
|
||||
|
||||
+349
@@ -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, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'"),
|
||||
};
|
||||
}
|
||||
|
||||
// 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();
|
||||
Reference in New Issue
Block a user