added project info and design to it

css/about.css

@@ -26,7 +26,7 @@
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .pfp_placeholder svg {
@@ -88,7 +88,7 @@
     padding: 1.5rem;
     border-radius: 1rem;
     border-left: 5px solid var(--secondary-accent-color);
-    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .education_card h3 {

css/project.css

@@ -0,0 +1,52 @@
+.project_container {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border-left: 5px solid var(--secondary-accent-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    margin-bottom: 2rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.project_title {
+    font-size: 1.8rem;
+    font-family: 'Courier New', Courier, monospace;
+    color: var(--primary-accent-color);
+    margin-bottom: 1rem;
+    font-weight: bold;
+}
+
+.tool_bullet {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+    padding: 0;
+    list-style: none;
+    margin-bottom: 1rem;
+}
+
+.tool_bullet li {
+    background: var(--secondary-accent-color);
+    color: var(--text-color);
+    padding: 0.4rem 0.8rem;
+    border-radius: 1rem;
+    font-size: 0.9rem;
+    font-family: monospace;
+}
+
+.project-body {
+    color: var(--text-color);
+    font-family: monospace;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin: 0;
+}
+
+.project-body li {
+    margin-bottom: 0.5rem;
+}
+
+.project-body p {
+    margin: 0;
+}

js/darkmode.js

@@ -1,27 +1,35 @@
 // Function to apply the theme based on localStorage
 const applyTheme = () => {
-    const darkmode = localStorage.getItem('dark');
+    let darkmode = localStorage.getItem('dark');
+    
+    // Default to 'inactive' (light mode) if no value is set
+    if (darkmode === null) {
+        localStorage.setItem('dark', 'inactive');
+        darkmode = 'inactive';
+    }
+
     if (darkmode === 'active') {
-        document.body.classList.add('dark');
+        document.documentElement.classList.add('dark');
     } else {
-        document.body.classList.remove('dark');
+        document.documentElement.classList.remove('dark');
     }
 };
 
 // Run on initial load
-// Since the script is 'defer', document.body will be available
 applyTheme();
 
 // Set up the toggle button listener
-const switch_button = document.getElementById("theme_switch");
+document.addEventListener('DOMContentLoaded', () => {
-if (switch_button) {
+    const switch_button = document.getElementById("theme_switch");
-    switch_button.addEventListener("click", () => {
+    if (switch_button) {
-        const darkmode = localStorage.getItem('dark');
+        switch_button.addEventListener("click", () => {
-        if (darkmode !== "active") {
+            const darkmode = localStorage.getItem('dark');
-            localStorage.setItem('dark', 'active');
+            if (darkmode !== "active") {
-        } else {
+                localStorage.setItem('dark', 'active');
-            localStorage.setItem('dark', 'inactive');
+            } else {
-        }
+                localStorage.setItem('dark', 'inactive');
-        applyTheme();
+            }
-    });
+            applyTheme();
-}
+        });
+    }
+});

page/info.html

@@ -41,7 +41,7 @@
             </div>
         </div>
 
-        <!-- my info from who i am and my social linke -->
+        <!-- my info from who i am and my social links -->
         <div class="content_container">
             <div class="square_content">
                 <div class="website_top">

page/project.html

@@ -4,12 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
-    <title>Rain links</title>
+    <title>Rain projects</title>
     <!-- css and js -->
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/mainpage.css">
     <link rel="stylesheet" href="../css/main_button.css">
     <link rel="stylesheet" href="../css/about.css">
+    <link rel="stylesheet" href="../css/project.css">
 
     <script type="text/javascript" src="../js/darkmode.js" defer></script>
     <script type="text/javascript" src="../js/main.js" defer></script>
@@ -32,15 +33,78 @@
         </div>
 
         <div class="content_container">
-            <div class="square_content">
+          <div class="square_content">
-                <div class="website_top">
+            <div class="website_top">
-                    <div class="website_text">
+              <div class="website_text">
-                        Projects
+                Projects
-                    </div>                        
+              </div>                        
-                </div>
-                <div class="box_body">
-                </div>
             </div>
+
+            <div class="box_body">
+              <div class="project_container">
+                <!-- the title for the project-->
+                <div class="project_title">
+                  Hackathon project creation
+                </div>
+                <!-- tool use for the project -->
+                <ul class="tool_bullet">
+                  <li>Next.js</li>
+                  <li>gemini</li>
+                  <li>tailwind</li>
+                </ul>
+
+                <!-- what i learn from the project-->
+                <div class="project-body">
+                  <p>
+                    Developed a website using next.js and gemini. It will take a form that user fill out and gemini will make five project idea and user can choose one and go more in depth on the project through a chatbot
+                  </p>
+                </div>
+              </div>
+
+              <div class="project_container">
+                <!-- the title for the project-->
+                <div class="project_title">
+                  BookLog Web app
+                </div>
+                <!-- tool use for the project -->
+                <ul class="tool_bullet">
+                  <li>html</li>
+                  <li>css</li>
+                  <li>js</li>
+                </ul>
+
+                <!-- what i learn from the project-->
+                <ul class="project-body">
+                  <li>Developed a book tracking web app that stores book data in LocalStorage as JSON.</li>
+                  <li>Built dynamic JavaScript card rendering to display stored books in a responsive UI.</li>
+                  <li>Implemented client-side CRUD-style functionality for managing book entries</li>
+                </ul>
+              </div>
+
+              <div class="project_container">
+                <!-- the title for the project-->
+                <div class="project_title">
+                  Homelab Infrastructure
+                </div>
+                <!-- tool use for the project -->
+                <ul class="tool_bullet">
+                  <li>Proxmox</li>
+                  <li>Linux</li>
+                  <li>WireGuard</li>
+                  <li>NAS</li>
+                </ul>
+
+                <!-- what i learn from the project-->
+                <ul class="project-body">
+                  <li>Deployed a Proxmox-based virtualization server hosting multiple Linux VMs.</li>
+                  <li>Configured NAS storage for centralized file management and backups.</li>
+                  <li>Implemented WireGuard VPN for secure remote access to the home network.</li>
+                </ul>
+              </div>
+
+
+            </div>
+          </div>
         </div>
         
     </div>