add main page navbar

author: Pinapelz <yukais@pinapelz.com> 2025-12-07 00:31:08 -0800
committer: Pinapelz <yukais@pinapelz.com> 2025-12-07 00:31:08 -0800
commit: 59f9068bd64c0e93ff5ebe578116eba5323ab220 (patch)
tree: 2adb98cc93709cb075aeffa3bf5a6baddcbce2d7
parent: da52f8beea3858f54ec4b3a5770f13cefe94ca38 (diff)
3 files changed, 103 insertions, 97 deletions
diff --git a/pinapelz.moe/about.html b/pinapelz.moe/about.html
index 3c2f305..15ae82b 100644
--- a/pinapelz.moe/about.html
+++ b/pinapelz.moe/about.html
@@ -9,20 +9,6 @@
         <link rel="stylesheet" type="text/css" href="styles/styles.css" />
         <script src="scripts/index.js"></script>
         <style>
-            @keyframes rainbow {
-                0% { color: #ff0000; }
-                20% { color: #ff8800; }
-                40% { color: #ffff00; }
-                60% { color: #00ff00; }
-                80% { color: #0088ff; }
-                100% { color: #ff00ff; }
-            }
-
-            .rainbow-text {
-                animation: rainbow 4s linear infinite;
-                font-weight: bold;
-            }
-
             @keyframes blink {
                 0%, 50% { opacity: 1; }
                 51%, 100% { opacity: 0; }
@@ -74,31 +60,32 @@
         </style>
     </head>
     <body>
+        <div class="top-navbar">
+          <nav aria-label="Main navigation">
+            <ul>
+              <li><a href="/">home</a></li>
+              <li><a href="/about.html">webmaster</a></li>
+              <li><a href="/projects.html" aria-current="page">projects</a></li>
+            </ul>
+          </nav>
+        </div>
         <div class="container">
             <div class="header" style="margin-top: 20px;">
                 <marquee behavior="alternate" direction="left" scrollamount="6">
-                    <span class="rainbow-text">☆゜・。。・゜゜・。。・゜★</span>
                     <span class="retro-shadow">About Me</span>
-                    <span class="rainbow-text">★゜・。。・゜゜・。。・゜☆</span>
                 </marquee>
             </div>
 
             <div class="sidebar">
-                <h3 class="sparkle">Navigation</h3>
-                <ul>
-                    <li><a href="/">🏠 home</a></li>
-                    <li><a href="/about.html">👤 webmaster</a></li>
-                    <li><a href="/projects.html">💻 projects</a></li>
-                </ul>
-                <img
-                    src="assets/pfp.webp"
-                    class="border-img crazy-image"
-                    width="250px"
-                    alt="Profile Picture"
-                    style="border: 3px ridge #ff1493; box-shadow: 5px 5px 15px rgba(255,20,147,0.5);"
-                />
 
                 <div class="contacts-section y2k-border">
+                    <img
+                        src="assets/pfp.webp"
+                        class="border-img crazy-image"
+                        width="250px"
+                        alt="Profile Picture"
+                        style="border: 3px ridge #ff1493; box-shadow: 5px 5px 15px rgba(255,20,147,0.5);"
+                    />
                     <h3>📧 Contact Me 📧</h3>
                     <p><small>idk maybe you need to reach me for some reason</small></p>
                     <ul>
@@ -184,10 +171,8 @@ read slice of life... yuru camp, k-on, nichijou that sorta thing</p>
 
                     <div style="margin: 30px 0;">
                         <marquee behavior="scroll" direction="left" scrollamount="4">
-                            <span class="rainbow-text">♪ ♫ ♪</span>
                             Not much else to say... if you want some random technical rambling go to
                             <a href="https://blog.pinapelz.com" style="color: #ff1493; font-weight: bold;">my blog</a>
-                            <span class="rainbow-text">♪ ♫ ♪</span>
                         </marquee>
                     </div>
 
diff --git a/pinapelz.moe/projects.html b/pinapelz.moe/projects.html
index 94c4c53..a57307c 100644
--- a/pinapelz.moe/projects.html
+++ b/pinapelz.moe/projects.html
@@ -37,69 +37,27 @@
         max-width: 90%;
         max-height: 90%;
       }
+
+
     </style>
   </head>
   <body>
-    <div class="container">
-      <div class="header">
-        <marquee behavior="alternate" direction="left">
-          fun stuff (maybe)
-        </marquee>
-      </div>
-      <div class="sidebar">
-        <h3>Navigation</h3>
+    <div class="top-navbar">
+      <nav aria-label="Main navigation">
         <ul>
           <li><a href="/">home</a></li>
           <li><a href="/about.html">webmaster</a></li>
-          <li><a href="/about.html">projects</a></li>
+          <li><a href="/projects.html" aria-current="page">projects</a></li>
         </ul>
+      </nav>
+    </div>
 
-        <div class="image-section">
-          <img
-            src="assets/pfp.webp"
-            class="border-img crazy-image"
-            width="250px"
-            alt="Cute Anime GIF"
-          />
-        </div>
-
-        <div class="contacts-section">
-          <h3>Contact Me</h3>
-          <p>idk maybe you need to reach me for some reason</p>
-          <ul>
-            <li>
-              Email:
-              <a href="mailto:pinapelz@moekyun.me">pinapelz@moekyun.me</a>
-            </li>
-            <li>X: <a href="https://x.com/pinapelz">@pinapelz</a></li>
-            <li>
-                Fedi:
-                <a href="https://sakurajima.social/@pinapelz"
-                    >@pinapelz@sakurajima.social</a
-                >
-            </li>
-            <li>
-                Bluesky:
-                <a href="https://bsky.app/profile/pinapelz.moe"
-                    >@pinapelz.moe</a
-                >
-            </li>
-            <li>Discord: @pinapelz</li>
-          </ul>
-        </div>
-        <section id="discord-status" class="discord-status">
-          <img
-            src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"
-            alt="Discord Avatar"
-          />
-          <div class="status-container">
-            <h2><span class="status-text"></span></h2>
-          </div>
-          <script>fetchDiscordStatus("246787839570739211");</script>
-        </section>
-        <p id="quote"></p>
+    <div class="container">
+      <div class="header">
+          <marquee behavior="alternate" direction="left" style="margin-top: 20px;">
+          fun stuff (maybe)
+        </marquee>
       </div>
-
       <div class="content">
         <div class="projects-section">
           <h1 style="color: #ff69b4">cool and interesting stuff</h1>
diff --git a/pinapelz.moe/styles/styles.css b/pinapelz.moe/styles/styles.css
index a2999ea..a8a4f48 100644
--- a/pinapelz.moe/styles/styles.css
+++ b/pinapelz.moe/styles/styles.css
@@ -251,34 +251,34 @@ blink {
         width: 30px;
         height: 30px;
     }
-    
+
     .discord-status {
         flex-direction: column;
         align-items: flex-start;
     }
-    
+
     .discord-status img {
         margin-right: 0;
         margin-bottom: 10px;
     }
-    
+
     .discord-status h2 {
         font-size: 1rem;
     }
-    
+
     .discord-status p {
         font-size: 0.9rem;
     }
-    
+
     .crazy-image {
         max-width: 200px;
     }
-    
+
     /* Ensure no horizontal overflow */
     body {
         overflow-x: hidden;
     }
-    
+
     .container {
         max-width: 100%;
         overflow-x: hidden;
@@ -290,22 +290,22 @@ blink {
         width: 25px;
         height: 25px;
     }
-    
+
     .crazy-image {
         max-width: 150px;
     }
-    
+
     /* Further mobile optimizations */
     .general-section {
         padding: 8px;
         margin-top: 15px;
     }
-    
+
     .sidebar {
         padding: 8px;
         margin-top: 20px;
     }
-    
+
     .content {
         padding: 8px;
     }
@@ -409,4 +409,67 @@ blink {
     max-width: 100%;
     height: auto;
     display: block;
-}
-\ No newline at end of file
+}
+.top-navbar {
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 10px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(5px);
+}
+
+.top-navbar nav {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.top-navbar ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.top-navbar li {
+  margin: 0;
+}
+
+.top-navbar a {
+  color: white;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+  display: block;
+}
+
+.top-navbar a:hover,
+.top-navbar a:focus {
+  background-color: #ff69b4;
+  outline: none;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
+}
+
+.top-navbar a[aria-current="page"] {
+  background-color: #ff69b4;
+  color: white;
+  font-weight: bold;
+}
+
+@media (max-width: 768px) {
+  .top-navbar ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .top-navbar {
+    padding: 15px 0;
+  }
+}
author	Pinapelz <yukais@pinapelz.com>	2025-12-07 00:31:08 -0800
committer	Pinapelz <yukais@pinapelz.com>	2025-12-07 00:31:08 -0800
commit	59f9068bd64c0e93ff5ebe578116eba5323ab220 (patch)
tree	2adb98cc93709cb075aeffa3bf5a6baddcbce2d7
parent	da52f8beea3858f54ec4b3a5770f13cefe94ca38 (diff)