diff --git a/assets/bluesky.png b/assets/bluesky.png new file mode 100644 index 0000000..aad9e4d Binary files /dev/null and b/assets/bluesky.png differ diff --git a/assets/chromium.png b/assets/chromium.png new file mode 100644 index 0000000..6b94f28 Binary files /dev/null and b/assets/chromium.png differ diff --git a/assets/gh-to-fs.png b/assets/gh-to-fs.png new file mode 100644 index 0000000..51a6431 Binary files /dev/null and b/assets/gh-to-fs.png differ diff --git a/assets/github-commit-grabber.png b/assets/github-commit-grabber.png new file mode 100644 index 0000000..ffacbdc Binary files /dev/null and b/assets/github-commit-grabber.png differ diff --git a/assets/linkedin-plus.png b/assets/linkedin-plus.png new file mode 100644 index 0000000..0d7160a Binary files /dev/null and b/assets/linkedin-plus.png differ diff --git a/assets/mailpocket.png b/assets/mailpocket.png new file mode 100644 index 0000000..2170c55 Binary files /dev/null and b/assets/mailpocket.png differ diff --git a/assets/ml-pipeline.png b/assets/ml-pipeline.png new file mode 100644 index 0000000..a893594 Binary files /dev/null and b/assets/ml-pipeline.png differ diff --git a/assets/npm.png b/assets/npm.png new file mode 100644 index 0000000..1792573 Binary files /dev/null and b/assets/npm.png differ diff --git a/assets/procgen.png b/assets/procgen.png new file mode 100644 index 0000000..6f0d675 Binary files /dev/null and b/assets/procgen.png differ diff --git a/assets/static_site_hosting.png b/assets/static_site_hosting.png new file mode 100644 index 0000000..70b99b3 Binary files /dev/null and b/assets/static_site_hosting.png differ diff --git a/assets/web-to-fish.png b/assets/web-to-fish.png new file mode 100644 index 0000000..48f5af2 Binary files /dev/null and b/assets/web-to-fish.png differ diff --git a/assets/youtube-meta.png b/assets/youtube-meta.png new file mode 100644 index 0000000..95b8538 Binary files /dev/null and b/assets/youtube-meta.png differ diff --git a/projects.css b/projects.css index f29dfd8..2aa9632 100644 --- a/projects.css +++ b/projects.css @@ -1,152 +1,168 @@ body { - font-family: Arial, sans-serif; - background-color: #291b3e; - /* Dark purple background color */ - color: #eee; - /* Light text color */ + font-family: Arial, sans-serif; + background-color: #291b3e; + /* Dark purple background color */ + color: #eee; + /* Light text color */ } .title { - text-align: center; - font-size: 2rem; - margin-top: 30px; - color: #b76e79; - transition: background-color 0.3s ease; + text-align: center; + font-size: 2rem; + margin-top: 30px; + color: #b76e79; + transition: background-color 0.3s ease; } .container { - display: flex; - flex-wrap: wrap; /* Allow wrapping onto the next line */ - justify-content: space-around; - align-items: flex-start; /* Align items to the top */ - margin-top: 50px; + display: flex; + flex-wrap: wrap; + /* Allow wrapping onto the next line */ + justify-content: space-around; + align-items: flex-start; + /* Align items to the top */ + margin-top: 50px; } .project-card { - background-color: #3b2c57; - border-radius: 10px; - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); - width: 300px; - padding: 20px; - margin: 20px; /* Add margin to create space between cards */ - transition: transform 0.3s ease; - cursor: pointer; + background-color: #3b2c57; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + width: 300px; + padding: 20px; + margin: 20px; + /* Add margin to create space between cards */ + transition: transform 0.3s ease; + cursor: pointer; } .project-card:hover { - transform: scale(1.05); - background-color: #372952; + transform: scale(1.05); + background-color: #372952; } .project-preview { - overflow: hidden; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - position: relative; + overflow: hidden; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + position: relative; } .project-preview img { - width: 100%; - height: auto; - display: block; + width: 100%; + height: auto; + display: block; } .project-info { - padding-top: 10px; + padding-top: 10px; } .project-info h2 { - color: #b76e79; - /* Light purple color */ + color: #b76e79; + /* Light purple color */ } .project-info p { - color: #ddd; + color: #ddd; } .project-info a { - display: inline-block; - background-color: #b76e79; - /* Light purple button background */ - color: white; - text-decoration: none; - padding: 10px 20px; - border-radius: 5px; - margin-top: 10px; + display: inline-block; + background-color: #b76e79; + /* Light purple button background */ + color: white; + text-decoration: none; + padding: 10px 20px; + border-radius: 5px; + 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 { - background-color: #9c4f62; - /* Darker purple color on hover */ + background-color: #9c4f62; + /* Darker purple color on hover */ } .footer { - text-align: center; - margin-top: 20px; + text-align: center; + margin-top: 20px; } .github-link { - display: inline-block; - color: rgb(209, 206, 206); - text-decoration: none; - border-radius: 5px; - margin-top: 10px; + display: inline-block; + color: rgb(209, 206, 206); + text-decoration: none; + border-radius: 5px; + margin-top: 10px; } .github-link i { - vertical-align: middle; - /* margin-right: 10px; */ - cursor: pointer; - font-size: 72px; + vertical-align: middle; + /* margin-right: 10px; */ + cursor: pointer; + font-size: 72px; } .github-link:hover { - color: white; - /* Darker purple color on hover */ + color: white; + /* Darker purple color on hover */ } @media (max-width: 900px) { - .container { - flex-direction: row; - justify-content: center; - } + .container { + flex-direction: row; + justify-content: center; + } - .project-card { - margin: 30px; - } + .project-card { + margin: 30px; + } } .centered-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(45deg); /* Rotate the text diagonally */ - font-size: 25px; - font-weight: bold; - color: red !important; - filter: none !important; - text-shadow: 2px 2px 4px rgba(0,0,0,0.6); - font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; - width: 90%; - z-index: 999; - display: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + /* Rotate the text diagonally */ + font-size: 25px; + font-weight: bold; + color: red !important; + filter: none !important; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + width: 90%; + z-index: 999; + display: none; } @media (max-width: 500px) { - .chatJS-toGrey { - /* https://stackoverflow.com/questions/5081690/how-to-gray-out-a-html-element lmao + .chatJS-toGrey { + /* https://stackoverflow.com/questions/5081690/how-to-gray-out-a-html-element lmao opacity: 0.5; /* Real browsers * / filter: alpha(opacity = 60); /* MSIE */ - filter: grayscale(100%); - } + filter: grayscale(100%); + } - .centered-text { - display: block; - } + .centered-text { + display: block; + } - .chatJS-info { - background-color: #808080; - } + .chatJS-info { + background-color: #808080; + } } \ No newline at end of file diff --git a/projects.html b/projects.html index 87285de..dfafc4b 100644 --- a/projects.html +++ b/projects.html @@ -1,35 +1,47 @@ + + + + + + + + - - - - - - - - + Projects - ION606.com + - Projects - ION606.com - + + - - + + + - - - + function openIfNotBtn(e, url) { + if (e.target.href || e.target.classList.contains('noopen')) return; - -

Project Showcase

-
- -
-
- My Notes! -
-
-

My Notes

-

Many of my CS notes from uni

- Visit Repo -
-
+ +
+
+ The ION Language Preview +
+
+

The ION Language

+

My attempt at a custom programming language!

+ Visit Website +
+
-
-
- Streamelements Emotes Overlay Preview -
-
-

ION Workout App!

-

An open source workout app!

- Visit Homepage -
-
+ +
+
+

+ SCREEN MUST BE LARGER THAN 500PX +

+ Online Chat Application Preview +
+
+

Online Chat Application

+

+ My online chat application (it's....it's a Discord + clone). +

+ Visit Website +
+
-
-
-

SCREEN MUST BE LARGER THAN 500PX

- Online Chat Application Preview -
-
-

Online Chat Application

-

My online chat application (it's....it's a Discord clone).

- Visit Website -
-
+ +
+
+ ION VCS Preview +
+
+

ION VCS

+

+ A future version control system and file sharing system + built around rsync +

+ Visit Website +
+
-
-
- ION VCS Preview -
-
-

ION VCS

-

A future version control system and file sharing system built around rsync and inspired by the github - cli

- Visit Website -
-
+ +
+
+ ML-pipeline Preview +
+
+

ML-pipeline

+

+ Pipeline to integrate searching, model iteration, and + code correction with local ollama models +

+ Visit Repo +
+
-
-
- Streamelements Emotes Overlay Preview -
-
-

The ION Language

-

My attempt at a custom programming language!

- Visit Website -
-
+ +
+
+ ION Workout App Preview +
+
+

ION Workout App!

+

An open source workout app!

+ Visit Website +
+
-
-
- Streamelements Emotes Overlay Preview -
-
-

Streamelements Emotes Overlay

-

Use Discord emotes on a Streamelements overlay!

- Visit Website -
-
-
+ +
+
+ Streamelements Emotes Overlay Preview +
+
+

Streamelements Emotes Overlay

+

Use Discord emotes on a Streamelements overlay!

+ Visit Website +
+
- - + +
+
+ MailPocket Preview +
+
+

MailPocket

+

+ Lightweight server to collect email form submissions in + Go +

+ Visit Repo +
+
- \ No newline at end of file + +
+
+ browser-chromium Preview +
+
+

browser-chromium

+

My custom Electron browser

+ Visit Repo +
+
+ + +
+
+ static-site-hosting Preview +
+
+

static-site-hosting

+

Host static websites, effortlessly!

+ Visit Repo +
+
+ + +
+
+ ProcGen Preview +
+
+

ProcGen

+

A procedural generation project

+ Visit Repo +
+
+ + +
+
+ bluesky-client Preview +
+
+

bluesky-client

+

My Bluesky client

+ Visit Repo +
+
+ + +
+
+ linkedin-api Preview +
+
+

Linkedin Api

+

An actually useful LinkedIn Nodejs package

+ Visit Repo + + NPM Icon +
+
+ + +
+
+ github-to-fs Preview +
+
+

github-to-fs

+

Interact with GitHub API like the fs module

+ Visit Repo + + NPM Icon +
+
+ + +
+
+ youtube-music-meta-extract Preview +
+
+

YouTube Music Meta Extractor

+

+ A simple project for processing and analyzing YouTube + Music data. Includes tools for metadata extraction, + audio analysis, and visualization. +

+ Visit Repo +
+
+ + +
+
+ web-to-fish Preview +
+
+

web-to-fish

+

Takes input from browser and pipes it into fish

+ Visit Repo +
+
+ + +
+
+ commit_grabber Preview +
+
+

Commit Grabber

+

Yoinks your github commits for you!

+ Visit Repo +
+
+ + +
+
+ My Notes! +
+
+

My Notes

+

Many of my CS notes from uni

+ Visit Repo +
+
+ + + + +