From e4239f20b1757666bd901748e0b24ddcd6c9f8e0 Mon Sep 17 00:00:00 2001 From: Rainyy21 Date: Fri, 29 May 2026 01:27:34 -0400 Subject: [PATCH] added project info and design to it --- css/about.css | 4 +-- css/project.css | 52 ++++++++++++++++++++++++++++++ js/darkmode.js | 40 ++++++++++++++--------- page/info.html | 2 +- page/project.html | 82 +++++++++++++++++++++++++++++++++++++++++------ 5 files changed, 152 insertions(+), 28 deletions(-) create mode 100644 css/project.css diff --git a/css/about.css b/css/about.css index 15c3362..d9cfa80 100644 --- a/css/about.css +++ b/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 { diff --git a/css/project.css b/css/project.css new file mode 100644 index 0000000..fcbf00a --- /dev/null +++ b/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; +} diff --git a/js/darkmode.js b/js/darkmode.js index f2e50f4..1aca470 100644 --- a/js/darkmode.js +++ b/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"); -if (switch_button) { - switch_button.addEventListener("click", () => { - const darkmode = localStorage.getItem('dark'); - if (darkmode !== "active") { - localStorage.setItem('dark', 'active'); - } else { - localStorage.setItem('dark', 'inactive'); - } - applyTheme(); - }); -} +document.addEventListener('DOMContentLoaded', () => { + const switch_button = document.getElementById("theme_switch"); + if (switch_button) { + switch_button.addEventListener("click", () => { + const darkmode = localStorage.getItem('dark'); + if (darkmode !== "active") { + localStorage.setItem('dark', 'active'); + } else { + localStorage.setItem('dark', 'inactive'); + } + applyTheme(); + }); + } +}); diff --git a/page/info.html b/page/info.html index 91061db..ec24d23 100644 --- a/page/info.html +++ b/page/info.html @@ -41,7 +41,7 @@ - +
diff --git a/page/project.html b/page/project.html index cf47c98..15defa4 100644 --- a/page/project.html +++ b/page/project.html @@ -4,12 +4,13 @@ - Rain links + Rain projects + @@ -32,15 +33,78 @@
-
-
-
- Projects -
-
-
-
+
+
+
+ Projects +
+ +
+
+ +
+ Hackathon project creation +
+ +
    +
  • Next.js
    • +
  • gemini
    • +
  • tailwind
    • +
+ + +
+

+ 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 +

+
+
+ +
+ +
+ BookLog Web app +
+ +
    +
  • html
    • +
  • css
    • +
  • js
    • +
+ + +
    +
  • Developed a book tracking web app that stores book data in LocalStorage as JSON.
    • +
  • Built dynamic JavaScript card rendering to display stored books in a responsive UI.
    • +
  • Implemented client-side CRUD-style functionality for managing book entries
    • +
+
+ +
+ +
+ Homelab Infrastructure +
+ +
    +
  • Proxmox
    • +
  • Linux
    • +
  • WireGuard
    • +
  • NAS
    • +
+ + +
    +
  • Deployed a Proxmox-based virtualization server hosting multiple Linux VMs.
    • +
  • Configured NAS storage for centralized file management and backups.
    • +
  • Implemented WireGuard VPN for secure remote access to the home network.
    • +
+
+ + +
+