From b22e691141cb8ff83d7c8cf4e4930b320deb6c5f Mon Sep 17 00:00:00 2001
From: ION606 <ion606@protonmail.com>
Date: Sun, 7 Apr 2024 08:05:43 -0700
Subject: [PATCH] added projects page

---
 README.html   |   7 +++
 index.html    |   2 +-
 pageMenu.css  |  44 ++++++++++++++++++
 pageMenu.js   |  57 ++++++++++++++++++++++++
 projects.css  | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++
 projects.html |  67 ++++++++++++++++++++++++++++
 6 files changed, 296 insertions(+), 1 deletion(-)
 create mode 100644 pageMenu.css
 create mode 100644 pageMenu.js
 create mode 100644 projects.css
 create mode 100644 projects.html

diff --git a/README.html b/README.html
index 0fa45b1..873f112 100644
--- a/README.html
+++ b/README.html
@@ -5,7 +5,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ION606.com</title>
+
+    <link rel="stylesheet" href="pageMenu.css">
     <script src="https://gist.github.com/ION606/4aae09270d1b72c2d8196aaf2e59782b.js"></script>
+    <script type="text/javascript" src="pageMenu.js"></script>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', createPageMenu);
+    </script>
 </head>
 
 <style>
diff --git a/index.html b/index.html
index 59ed3af..6213a5c 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta property="og:url" content="https://ion606.com/">
     <meta property="og:type" content="website">
     
-    <title>ION606.com</title>
+    <title>ION606.com - Home</title>
     <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
     <link rel="stylesheet" href="style.css">
     <script type="text/javascript" src="script.js"></script>
diff --git a/pageMenu.css b/pageMenu.css
new file mode 100644
index 0000000..2a13d5a
--- /dev/null
+++ b/pageMenu.css
@@ -0,0 +1,44 @@
+#page-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #291b3e;
+    /* Dark purple background color */
+    padding: 10px 0;
+    transition: transform 0.3s ease;
+}
+
+#page-menu ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+#page-menu ul li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+#page-menu ul li:last-child {
+    margin-right: 0;
+}
+
+#page-menu ul li a {
+    color: #eee;
+    /* Light text color */
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+#page-menu ul li a:hover {
+    background-color: #3b2c57;
+    /* Darker purple color on hover */
+}
+
+.hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/pageMenu.js b/pageMenu.js
new file mode 100644
index 0000000..ba598fd
--- /dev/null
+++ b/pageMenu.js
@@ -0,0 +1,57 @@
+function createPageMenu() {
+    const navMenu = document.createElement('nav');
+    navMenu.id = 'page-menu';
+    navMenu.className = 'hidden';
+
+    const ul = document.createElement('ul');
+
+    const links = [
+        { text: 'Home', href: 'index.html' },
+        { text: 'README', href: 'README.html' }
+    ];
+
+    links.forEach(link => {
+        const li = document.createElement('li');
+        const a = document.createElement('a');
+        a.textContent = link.text;
+        a.href = link.href;
+        li.appendChild(a);
+        ul.appendChild(li);
+    });
+
+    navMenu.appendChild(ul);
+
+    document.body.prepend(navMenu);
+
+    if (document.querySelector('.title')) {
+        document.addEventListener('scroll', function () {
+            var menu = document.querySelector('#page-menu');
+            var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
+
+            if (currentScroll > lastScrollTop && !isHovered) {
+                menu.classList.add('hidden');
+            } else if (!isHovered) {
+                menu.classList.remove('hidden');
+            }
+            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile or negative scrolling
+        });
+
+        document.querySelectorAll('#page-menu, .title').forEach(el => {
+            el.addEventListener('mouseenter', function () {
+                isHovered = true;
+                document.querySelector('#page-menu').classList.remove('hidden');
+                document.querySelector('.title').style.marginTop = '40px';
+            });
+
+            el.addEventListener('mouseleave', function () {
+                isHovered = false;
+                document.querySelector('#page-menu').classList.add('hidden');
+                document.querySelector('.title').style.marginTop = '20px';
+            });
+        });
+    }
+    else {
+        document.querySelector('#page-menu').classList.remove('hidden');
+        document.body.children[1].style.marginTop = '40px';
+    }
+}
\ No newline at end of file
diff --git a/projects.css b/projects.css
new file mode 100644
index 0000000..fcb621c
--- /dev/null
+++ b/projects.css
@@ -0,0 +1,120 @@
+body {
+    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;
+}
+
+.container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 50px;
+}
+
+.project-card {
+    background-color: #3b2c57;
+    /* Dark purple card background */
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    width: 300px;
+    padding: 20px;
+    margin: 0 20px;
+    transition: transform 0.3s ease;
+    cursor: pointer;
+}
+
+.project-card:hover {
+    transform: scale(1.05);
+    background-color: #372952;
+}
+
+.project-preview {
+    overflow: hidden;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
+.project-preview img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.project-info {
+    padding-top: 10px;
+}
+
+.project-info h2 {
+    color: #b76e79;
+    /* Light purple color */
+}
+
+.project-info p {
+    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;
+}
+
+.project-info a:hover {
+    background-color: #9c4f62;
+    /* Darker purple color on hover */
+}
+
+.footer {
+    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;
+}
+
+.github-link i {
+    vertical-align: middle;
+    /* margin-right: 10px; */
+    cursor: pointer;
+    font-size: 72px;
+}
+
+.github-link:hover {
+    color: white;
+    /* Darker purple color on hover */
+}
+
+
+@media (max-width: 900px) {
+    .container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .project-card {
+        /* width: calc(100% - 40px); */
+        /* Account for margin */
+        margin: 30px 0;
+    }
+}
\ No newline at end of file
diff --git a/projects.html b/projects.html
new file mode 100644
index 0000000..3ea3688
--- /dev/null
+++ b/projects.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ION606.com - Projects</title>
+
+    <link rel="stylesheet" href="projects.css">
+    <link rel="stylesheet" href="pageMenu.css">
+    
+    <script 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;
+
+        document.addEventListener('DOMContentLoaded', createPageMenu);
+    </script>
+</head>
+
+<body>
+    <h1 class="title">Project Showcase</h1>
+    <div class="container">
+        <div class="project-card" onclick="window.open('https://premid.app/users/358402930191106049', target='_blank')">
+            <div class="project-preview">
+                <img src="https://premid.app/_ipx/loading_lazy,f_webp,s_450x150/images/logo-wordmark-blue.png"
+                    alt="Rich Presence Collection Preview">
+            </div>
+            <div class="project-info">
+                <h2>Rich Presence Collection</h2>
+                <p>Custom rich presences for Discord!</p>
+                <a href="https://premid.app/users/358402930191106049" target="_blank">Visit Website</a>
+            </div>
+        </div>
+
+        <div class="project-card" onclick="window.open('https://streamelements.ion606.com', target='_blank')">
+            <div class="project-preview">
+                <img src="https://github.com/ION-Emotes/plugin/blob/main/loading.gif?raw=true"
+                    alt="Streamelements Emotes Overlay Preview">
+            </div>
+            <div class="project-info">
+                <h2>Streamelements Emotes Overlay</h2>
+                <p>Use Discord emotes on a Streamelements overlay!</p>
+                <a href="https://streamelements.ion606.com" target="_blank">Visit Website</a>
+            </div>
+        </div>
+
+        <div class="project-card" onclick="window.open('https://chat.ion606.com', target='_blank')">
+            <div class="project-preview">
+                <img 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">
+                <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>
+
+    <footer class="footer">
+        <a href="https://github.com/ION606/" class="github-link" target="_blank"><i class="fa fa-github"></i></a>
+    </footer>
+</body>
+
+</html>
\ No newline at end of file