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

overhauled the projects page

Browse Source
This commit is contained in:
ION606
2025-04-01 12:27:12 -04:00
parent 254f4457f5
commit c40e02ba8c
14 changed files with 503 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bluesky.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

assets/chromium.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

assets/gh-to-fs.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 KiB

assets/github-commit-grabber.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

assets/linkedin-plus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

assets/mailpocket.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

assets/ml-pipeline.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

assets/npm.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

assets/procgen.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

assets/static_site_hosting.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

assets/web-to-fish.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 243 KiB

assets/youtube-meta.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

projects.css
+105 -89
View File
@@ -1,152 +1,168 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #291b3e; background-color: #291b3e;
/* Dark purple background color */ /* Dark purple background color */
color: #eee; color: #eee;
/* Light text color */ /* Light text color */
} }
.title { .title {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2rem;
margin-top: 30px; margin-top: 30px;
color: #b76e79; color: #b76e79;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
} }
.container { .container {
display: flex; display: flex;
flex-wrap: wrap; /* Allow wrapping onto the next line */ flex-wrap: wrap;
justify-content: space-around; /* Allow wrapping onto the next line */
align-items: flex-start; /* Align items to the top */ justify-content: space-around;
margin-top: 50px; align-items: flex-start;
/* Align items to the top */
margin-top: 50px;
} }
.project-card { .project-card {
background-color: #3b2c57; background-color: #3b2c57;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
width: 300px; width: 300px;
padding: 20px; padding: 20px;
margin: 20px; /* Add margin to create space between cards */ margin: 20px;
transition: transform 0.3s ease; /* Add margin to create space between cards */
cursor: pointer; transition: transform 0.3s ease;
cursor: pointer;
} }
.project-card:hover { .project-card:hover {
transform: scale(1.05); transform: scale(1.05);
background-color: #372952; background-color: #372952;
} }
.project-preview { .project-preview {
overflow: hidden; overflow: hidden;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
position: relative; position: relative;
} }
.project-preview img { .project-preview img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.project-info { .project-info {
padding-top: 10px; padding-top: 10px;
} }
.project-info h2 { .project-info h2 {
color: #b76e79; color: #b76e79;
/* Light purple color */ /* Light purple color */
} }
.project-info p { .project-info p {
color: #ddd; color: #ddd;
} }
.project-info a { .project-info a {
display: inline-block; display: inline-block;
background-color: #b76e79; background-color: #b76e79;
/* Light purple button background */ /* Light purple button background */
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 10px 20px; padding: 10px 20px;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
}
.project-info a.hasImg {
background-color: black;
}
.project-info a.hasImg:hover {
background-color: darkgrey;
}
.project-info img {
height: 1em;
} }
.project-info a:hover { .project-info a:hover {
background-color: #9c4f62; background-color: #9c4f62;
/* Darker purple color on hover */ /* Darker purple color on hover */
} }
.footer { .footer {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
} }
.github-link { .github-link {
display: inline-block; display: inline-block;
color: rgb(209, 206, 206); color: rgb(209, 206, 206);
text-decoration: none; text-decoration: none;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
} }
.github-link i { .github-link i {
vertical-align: middle; vertical-align: middle;
/* margin-right: 10px; */ /* margin-right: 10px; */
cursor: pointer; cursor: pointer;
font-size: 72px; font-size: 72px;
} }
.github-link:hover { .github-link:hover {
color: white; color: white;
/* Darker purple color on hover */ /* Darker purple color on hover */
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.container { .container {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.project-card { .project-card {
margin: 30px; margin: 30px;
} }
} }
.centered-text { .centered-text {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(45deg); /* Rotate the text diagonally */ transform: translate(-50%, -50%) rotate(45deg);
font-size: 25px; /* Rotate the text diagonally */
font-weight: bold; font-size: 25px;
color: red !important; font-weight: bold;
filter: none !important; color: red !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.6); filter: none !important;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
width: 90%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
z-index: 999; width: 90%;
display: none; z-index: 999;
display: none;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
.chatJS-toGrey { .chatJS-toGrey {
/* https://stackoverflow.com/questions/5081690/how-to-gray-out-a-html-element lmao /* https://stackoverflow.com/questions/5081690/how-to-gray-out-a-html-element lmao
opacity: 0.5; /* Real browsers * / opacity: 0.5; /* Real browsers * /
filter: alpha(opacity = 60); /* MSIE */ filter: alpha(opacity = 60); /* MSIE */
filter: grayscale(100%); filter: grayscale(100%);
} }
.centered-text { .centered-text {
display: block; display: block;
} }
.chatJS-info { .chatJS-info {
background-color: #808080; background-color: #808080;
} }
} }
projects.html
+398 -99
View File
@@ -1,35 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="ION606.com" />
<meta property="og:description" content="My personal website!" />
<meta
property="og:image"
content="https://avatars.githubusercontent.com/u/58801387" />
<meta property="og:url" content="https://ion606.com/" />
<meta property="og:type" content="website" />
<head> <title>Projects - ION606.com</title>
<meta charset="UTF-8"> <link
<meta name="viewport" content="width=device-width, initial-scale=1.0"> rel="icon"
<meta property="og:title" content="ION606.com"> href="https://avatars.githubusercontent.com/u/58801387"
<meta property="og:description" content="My personal website!"> type="image/jpeg" />
<meta property="og:image" content="https://avatars.githubusercontent.com/u/58801387">
<meta property="og:url" content="https://ion606.com/">
<meta property="og:type" content="website">
<title>Projects - ION606.com</title> <link rel="stylesheet" href="projects.css" />
<link rel="icon" href="https://avatars.githubusercontent.com/u/58801387" type="image/jpeg"> <link rel="stylesheet" href="pageMenu.css" />
<link rel="stylesheet" href="projects.css"> <script
<link rel="stylesheet" href="pageMenu.css"> src="https://kit.fontawesome.com/728e740903.js"
crossorigin="anonymous"></script>
<script type="text/javascript" src="pageMenu.js"></script>
<script>
let lastScrollTop = 0;
let isHovered = false;
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script> document.addEventListener("DOMContentLoaded", createPageMenu);
<script type="text/javascript" src="pageMenu.js"></script>
<script>
let lastScrollTop = 0;
let isHovered = false;
document.addEventListener('DOMContentLoaded', createPageMenu); function openIfNotBtn(e, url) {
</script> if (e.target.href || e.target.classList.contains('noopen')) return;
</head>
<body> window.open(url, (target = "_blank"));
<h1 class="title">Project Showcase</h1> }
<div class="container"> </script>
<!-- <div class="project-card" onclick="window.open('https://premid.app/users/358402930191106049', target='_blank')"> </head>
<body>
<h1 class="title">Project Showcase</h1>
<div class="container">
<!-- <div class="project-card" onclick="openIfNotBtn(event, 'https://premid.app/users/358402930191106049')">
<div class="project-preview"> <div class="project-preview">
<img src="https://premid.app/_ipx/loading_lazy,f_webp,s_450x150/images/logo-wordmark-blue.png" <img src="https://premid.app/_ipx/loading_lazy,f_webp,s_450x150/images/logo-wordmark-blue.png"
alt="Rich Presence Collection Preview"> alt="Rich Presence Collection Preview">
@@ -41,85 +53,372 @@
</div> </div>
</div> --> </div> -->
<div class="project-card" onclick="window.open('https://github.com/ion606/learn', target='_blank')"> <!-- The ION Language -->
<div class="project-preview"> <div
<img src="https://github.com/ION606/ion606.github.io/blob/main/assets/learning_icon.png?raw=true" class="project-card"
alt="My Notes!"> onclick="openIfNotBtn(event, 'https://ionlang.ion606.com')">
</div> <div class="project-preview">
<div class="project-info"> <img
<h2>My Notes</h2> src="https://github.com/The-ION-Language/ION-Lang/blob/main/assets/ION_LANG_LOGO.png?raw=true"
<p>Many of my CS notes from uni</p> alt="The ION Language Preview" />
<a href="https://github.com/ion606/learn" target="_blank">Visit Repo</a> </div>
</div> <div class="project-info">
</div> <h2>The ION Language</h2>
<p>My attempt at a custom programming language!</p>
<a href="https://ionlang.ion606.com" target="_blank"
>Visit Website</a
>
</div>
</div>
<div class="project-card" onclick="window.open('https://ionlang.ion606.com', target='_blank')"> <!-- Online Chat Application -->
<div class="project-preview"> <div
<img src="https://avatars.githubusercontent.com/u/194176806?s=200&v=4" class="project-card chatJS-info"
alt="Streamelements Emotes Overlay Preview"> onclick="openIfNotBtn(event, 'https://chat.ion606.com')">
</div> <div class="project-preview">
<div class="project-info"> <p class="centered-text">
<h2>ION Workout App!</h2> SCREEN MUST BE LARGER THAN 500PX
<p>An open source workout app!</p> </p>
<a href="https://github.com/ION-WorkoutApp" target="_blank">Visit Homepage</a> <img
</div> class="chatJS-toGrey"
</div> src="https://github.com/Proto-Chat/chatJS-main/blob/main/client/assets/favicon.png?raw=true"
alt="Online Chat Application Preview" />
</div>
<div class="project-info chatJS-toGrey">
<h2>Online Chat Application</h2>
<p>
My online chat application (it's....it's a Discord
clone).
</p>
<a href="https://chat.ion606.com" target="_blank"
>Visit Website</a
>
</div>
</div>
<div class="project-card chatJS-info" onclick="window.open('https://chat.ion606.com', target='_blank')"> <!-- ION VCS -->
<div class="project-preview"> <div
<p class="centered-text">SCREEN MUST BE LARGER THAN 500PX</p> class="project-card"
<img class="chatJS-toGrey" onclick="openIfNotBtn(event, 'https://github.com/ION606/VCS')">
src="https://github.com/Proto-Chat/chatJS-main/blob/main/client/assets/favicon.png?raw=true" <div class="project-preview">
alt="Online Chat Application Preview"> <img
</div> src="https://github.com/ION606/ion606.github.io/blob/main/assets/vcs_icon.png?raw=true"
<div class="project-info chatJS-toGrey"> alt="ION VCS Preview" />
<h2>Online Chat Application</h2> </div>
<p>My online chat application (it's....it's a Discord clone).</p> <div class="project-info">
<a href="https://chat.ion606.com" target="_blank">Visit Website</a> <h2>ION VCS</h2>
</div> <p>
</div> A future version control system and file sharing system
built around rsync
</p>
<a href="https://github.com/ION606/VCS" target="_blank"
>Visit Website</a
>
</div>
</div>
<div class="project-card" onclick="window.open('https://github.com/ION606/VCS', target='_blank')"> <!-- ML-pipeline -->
<div class="project-preview"> <div
<img src="https://github.com/ION606/ion606.github.io/blob/main/assets/vcs_icon.png?raw=true" class="project-card"
alt="ION VCS Preview"> onclick="openIfNotBtn(event, 'https://github.com/ION606/ML-pipeline')">
</div> <div class="project-preview">
<div class="project-info"> <img
<h2>ION VCS</h2> src="/assets/ml-pipeline.png"
<p>A future version control system and file sharing system built around rsync and inspired by the github alt="ML-pipeline Preview" />
cli</p> </div>
<a href="https://github.com/ION606/VCS" target="_blank">Visit Website</a> <div class="project-info">
</div> <h2>ML-pipeline</h2>
</div> <p>
Pipeline to integrate searching, model iteration, and
code correction with local ollama models
</p>
<a
href="https://github.com/ION606/ML-pipeline"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<div class="project-card" onclick="window.open('https://ionlang.ion606.com', target='_blank')"> <!-- ION Workout App -->
<div class="project-preview"> <div
<img src="https://github.com/The-ION-Language/ION-Lang/blob/main/assets/ION_LANG_LOGO.png?raw=true" class="project-card"
alt="Streamelements Emotes Overlay Preview"> onclick="openIfNotBtn(event, 'https://ionlang.ion606.com')">
</div> <div class="project-preview">
<div class="project-info"> <img
<h2>The ION Language</h2> src="https://avatars.githubusercontent.com/u/194176806?s=200&v=4"
<p>My attempt at a custom programming language!</p> alt="ION Workout App Preview" />
<a href="https://ionlang.ion606.com" target="_blank">Visit Website</a> </div>
</div> <div class="project-info">
</div> <h2>ION Workout App!</h2>
<p>An open source workout app!</p>
<a href="https://workout.ion606.com/" target="_blank"
>Visit Website</a
>
</div>
</div>
<div class="project-card" onclick="window.open('https://streamelements.ion606.com', target='_blank')"> <!-- Streamelements Emotes Overlay -->
<div class="project-preview"> <div
<img src="https://github.com/ION-Emotes/plugin/blob/main/loading.gif?raw=true" class="project-card"
alt="Streamelements Emotes Overlay Preview"> onclick="openIfNotBtn(event, 'https://streamelements.ion606.com')">
</div> <div class="project-preview">
<div class="project-info"> <img
<h2>Streamelements Emotes Overlay</h2> src="https://github.com/ION-Emotes/plugin/blob/main/loading.gif?raw=true"
<p>Use Discord emotes on a Streamelements overlay!</p> alt="Streamelements Emotes Overlay Preview" />
<a href="https://streamelements.ion606.com" target="_blank">Visit Website</a> </div>
</div> <div class="project-info">
</div> <h2>Streamelements Emotes Overlay</h2>
</div> <p>Use Discord emotes on a Streamelements overlay!</p>
<a href="https://streamelements.ion606.com" target="_blank"
>Visit Website</a
>
</div>
</div>
<footer class="footer"> <!-- MailPocket -->
<a href="https://github.com/ION606/" class="github-link" target="_blank"><i class="fa fa-github"></i></a> <div
</footer> class="project-card"
</body> onclick="openIfNotBtn(event, 'https://github.com/ION606/MailPocket')">
<div class="project-preview">
<img
src="/assets/mailpocket.png"
alt="MailPocket Preview" />
</div>
<div class="project-info">
<h2>MailPocket</h2>
<p>
Lightweight server to collect email form submissions in
Go
</p>
<a
href="https://github.com/ION606/MailPocket"
target="_blank"
>Visit Repo</a
>
</div>
</div>
</html> <!-- browser-chromium -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/browser-chromium')">
<div class="project-preview">
<img
src="/assets/chromium.png"
alt="browser-chromium Preview" />
</div>
<div class="project-info">
<h2>browser-chromium</h2>
<p>My custom Electron browser</p>
<a
href="https://github.com/ION606/browser-chromium"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- static-site-hosting -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/static-site-hosting')">
<div class="project-preview">
<img
src="/assets/static_site_hosting.png"
alt="static-site-hosting Preview" />
</div>
<div class="project-info">
<h2>static-site-hosting</h2>
<p>Host static websites, effortlessly!</p>
<a
href="https://github.com/ION606/static-site-hosting"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- ProcGen -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/ProcGen')">
<div class="project-preview">
<img src="/assets/procgen.png" alt="ProcGen Preview" />
</div>
<div class="project-info">
<h2>ProcGen</h2>
<p>A procedural generation project</p>
<a href="https://github.com/ION606/ProcGen" target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- bluesky-client -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/bluesky-client')">
<div class="project-preview">
<img
src="/assets/bluesky.png"
alt="bluesky-client Preview" />
</div>
<div class="project-info">
<h2>bluesky-client</h2>
<p>My Bluesky client</p>
<a
href="https://github.com/ION606/bluesky-client"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- linkedin-api -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/linkedin-api')">
<div class="project-preview">
<img
src="/assets/linkedin-plus.png"
alt="linkedin-api Preview" />
</div>
<div class="project-info">
<h2>Linkedin Api</h2>
<p>An actually useful LinkedIn Nodejs package</p>
<a
href="https://github.com/ION606/linkedin-api"
target="_blank"
>Visit Repo</a
>
<a
href="https://www.npmjs.com/package/linkedin-api-js"
target="_blank"
class="hasImg"
><img alt="NPM Icon" src="/assets/npm.png" class="noopen"
/></a>
</div>
</div>
<!-- github-to-fs -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/github-to-fs')">
<div class="project-preview">
<img
src="/assets/gh-to-fs.png"
alt="github-to-fs Preview" />
</div>
<div class="project-info">
<h2>github-to-fs</h2>
<p>Interact with GitHub API like the fs module</p>
<a
href="https://github.com/ION606/github-to-fs"
target="_blank"
>Visit Repo</a
>
<a
href="https://www.npmjs.com/package/github-to-fs"
target="_blank"
class="hasImg"
><img alt="NPM Icon" src="/assets/npm.png" class="noopen"
/></a>
</div>
</div>
<!-- youtube-music-meta-extract -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/youtube-music-meta-extract')">
<div class="project-preview">
<img
src="/assets/youtube-meta.png"
alt="youtube-music-meta-extract Preview" />
</div>
<div class="project-info">
<h2>YouTube Music Meta Extractor</h2>
<p>
A simple project for processing and analyzing YouTube
Music data. Includes tools for metadata extraction,
audio analysis, and visualization.
</p>
<a
href="https://github.com/ION606/youtube-music-meta-extract"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- web-to-fish -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/web-to-fish')">
<div class="project-preview">
<img
src="/assets/web-to-fish.png"
alt="web-to-fish Preview" />
</div>
<div class="project-info">
<h2>web-to-fish</h2>
<p>Takes input from browser and pipes it into fish</p>
<a
href="https://github.com/ION606/web-to-fish"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- commit_grabber -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ION606/commit_grabber')">
<div class="project-preview">
<img
src="/assets/github-commit-grabber.png"
alt="commit_grabber Preview" />
</div>
<div class="project-info">
<h2>Commit Grabber</h2>
<p>Yoinks your github commits for you!</p>
<a
href="https://github.com/ION606/commit_grabber"
target="_blank"
>Visit Repo</a
>
</div>
</div>
<!-- My Notes -->
<div
class="project-card"
onclick="openIfNotBtn(event, 'https://github.com/ion606/learn')">
<div class="project-preview">
<img
src="https://github.com/ION606/ion606.github.io/blob/main/assets/learning_icon.png?raw=true"
alt="My Notes!" />
</div>
<div class="project-info">
<h2>My Notes</h2>
<p>Many of my CS notes from uni</p>
<a href="https://github.com/ion606/learn" target="_blank"
>Visit Repo</a
>
</div>
</div>
</div>
<footer class="footer">
<a
href="https://github.com/ION606/"
class="github-link"
target="_blank"
><i class="fa fa-github"></i
></a>
</footer>
</body>
</html>