diff --git a/css/about.css b/css/about.css index f5bc2aa..d9cfa80 100644 --- a/css/about.css +++ b/css/about.css @@ -1,36 +1,155 @@ -/* text box and make it so it doesn't overflow out of the box */ -.description { - font-family: monospace; - font-size: 1.5rem; - font-weight: normal; +/* about page specific styling */ +.box_body { + padding: 2rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + height: auto; overflow-y: auto; - overflow-x: hidden; - white-space: normal; - word-wrap: break-word; - height: inherit; - width: inherit; } -/* title (contain name, and simple text with icon) */ -.title_text { - padding-bottom: 0rem; +.about_header { + display: flex; + align-items: center; + gap: 2rem; + margin-bottom: 2rem; + width: 100%; +} + +.pfp_placeholder { + width: 120px; + height: 120px; + background: var(--primary-accent-color); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); +} + +.pfp_placeholder svg { + width: 60px; + height: 60px; + fill: var(--secondary-accent-color); } .title_text h1 { - font-size: 2.5rem; + font-size: 2.8rem; + margin: 0; + color: var(--text-color); + font-family: 'Courier New', Courier, monospace; +} + +.intro_text { + font-size: 1.4rem; + color: var(--text-color); + opacity: 0.9; + margin-top: 0.5rem; + font-family: monospace; +} + +.description { + width: 100%; + height: auto; +} + +.about_section { + margin-bottom: 2.5rem; + width: 100%; +} + +.section_title { + display: flex; + align-items: center; + gap: 0.8rem; + border-bottom: 2px solid var(--secondary-accent-color); + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; +} + +.section_title h2 { + font-size: 1.8rem; + margin: 0; + font-family: 'Courier New', Courier, monospace; + color: var(--primary-accent-color); +} + +.section_title svg { + fill: var(--primary-accent-color); + width: 28px; + height: 28px; } /* education section */ -.brooklyn_college_container { - border-left: 3px solid rgba(17, 17, 17, 0.5); +.education_card { + 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); } -.education_detail { - padding-left: 4px; - font-size: .9rem; +.education_card h3 { + margin: 0 0 0.5rem 0; + font-size: 1.3rem; + color: var(--text-color); +} + +.education_card p { + margin: 0; + font-size: 1.1rem; + color: var(--text-color); + opacity: 0.8; } /* hobby section */ -.hobby_list { - font-size: 1.2rem; +.hobby_container { + display: flex; + flex-wrap: wrap; + gap: 1rem; + padding: 0; + list-style: none; +} + +.hobby_item { + background: var(--secondary-accent-color); + color: var(--text-color); + padding: 0.6rem 1.2rem; + border-radius: 2rem; + font-size: 1.1rem; + font-family: monospace; + transition: transform 0.2s ease, background-color 0.2s ease; + cursor: default; +} + +.hobby_item:hover { + transform: scale(1.05); + background: var(--primary-accent-color); + color: var(--secondary-accent-color); +} + +@media (max-width: 768px) { + .about_header { + flex-direction: column; + text-align: center; + gap: 1rem; + } + + .title_text h1 { + font-size: 2rem; + } + + .intro_text { + font-size: 1.1rem; + } + + .section_title h2 { + font-size: 1.4rem; + } + + .box_body { + padding: 1.5rem; + } } diff --git a/css/main_button.css b/css/main_button.css index c67c6ef..9de99ae 100644 --- a/css/main_button.css +++ b/css/main_button.css @@ -1,17 +1,61 @@ -#social_button { +.social_button { cursor: pointer; - background: none; + background: var(--secondary-accent-color); border: none; + display: flex; + flex-direction: column; + align-items: center; + padding: 1rem; + border-radius: 1rem; + width: 100px; + transition: transform 0.2s ease, background-color 0.2s ease; } -#social_text { - margin-top: 0; +.social_button:hover { + transform: translateY(-5px); + background-color: var(--primary-accent-color); +} + +.social_button:hover .social_text { + color: var(--secondary-accent-color); +} + +.social_button:hover svg { + fill: var(--secondary-accent-color); +} + +.social_text { + margin-top: 0.5rem; color: var(--text-color); + font-size: 1rem; + font-family: monospace; } .social { display: flex; flex-direction: row; - justify-content: space-between; - gap: 4rem; + justify-content: center; + gap: 2rem; + margin-top: 2rem; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .social { + gap: 1rem; + } + + .social_button { + width: 80px; + padding: 0.8rem; + } + + .social_button svg { + width: 30px; + height: 30px; + } + + .social_text { + font-size: 0.8rem; + } } diff --git a/css/mainpage.css b/css/mainpage.css index 88e7314..38ef91d 100644 --- a/css/mainpage.css +++ b/css/mainpage.css @@ -4,7 +4,8 @@ align-items: center; justify-content: center; flex-direction: column; - height: 50vh; + flex-grow: 1; + padding: 2rem; } /* welcome text and name text color */ @@ -12,6 +13,7 @@ font-size: 2.5rem; font-family: 'Courier New', Courier, monospace; margin-bottom: 10px; + text-align: center; } .main_page_name { @@ -22,4 +24,19 @@ font-family: monospace; font-size: 1.5rem; font-weight: normal; + text-align: center; +} + +@media (max-width: 768px) { + .title_text { + font-size: 1.8rem; + } + + .description { + font-size: 1.2rem; + } + + .box_body { + padding: 1rem; + } } 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/css/style.css b/css/style.css index ee8970e..5c8ccf4 100644 --- a/css/style.css +++ b/css/style.css @@ -11,7 +11,6 @@ body { margin: 0; - overflow: hidden; } /* trying to make the color change */ @@ -31,25 +30,12 @@ body { /* background color */ .bg_color { background-color: var(--primary-background-color); -} - -/* the darkmode button */ -#theme_switch { - padding: 0; - background: none; + min-height: 100vh; display: flex; - justify-content: center; - align-items: center; - border-style: none; - cursor: pointer; -} - -#theme_switch svg { - width: 3.5rem; - height: auto; - fill: var(--secondary-background-color); + flex-direction: column; } +/* the darkmode button behavior */ #theme_switch svg:last-child { display: none; } @@ -67,15 +53,38 @@ body { display: flex; justify-content: center; align-items: center; - height: 100vh; + flex-grow: 1; + padding: 2rem 0; + box-sizing: border-box; } .square_content { width: 50vw; - height: 65vh; + min-height: 65vh; background: var(--secondary-background-color); border-radius: 1rem; box-sizing: border-box; + display: flex; + flex-direction: column; +} + +@media (max-width: 1024px) { + .square_content { + width: 70vw; + } +} + +@media (max-width: 768px) { + .square_content { + width: 90vw; + min-height: 80vh; + } + + #theme_switch, #home_button { + width: 3rem; + height: 3rem; + padding: 0.4rem; + } } .website_top { @@ -94,19 +103,34 @@ body { .header { display: flex; flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + width: 100%; + box-sizing: border-box; + z-index: 10; } -#home_button { - border-style: none; - background: none; - cursor: pointer; +.header div { display: flex; - justify-content: center; align-items: center; } -#home_button svg { +#theme_switch, #home_button { + padding: 0.5rem; + background: none; + display: flex; + justify-content: center; + align-items: center; + border-style: none; + cursor: pointer; width: 3.5rem; - height: auto; + height: 3.5rem; + box-sizing: border-box; +} + +#theme_switch svg, #home_button svg { + width: 100%; + height: 100%; fill: var(--secondary-background-color); } diff --git a/index.html b/index.html index f3453fe..677ed71 100644 --- a/index.html +++ b/index.html @@ -23,9 +23,10 @@
+
-
-
-
@@ -88,4 +89,4 @@ - \ No newline at end of file + diff --git a/info.html b/info.html index b15295a..c079672 100644 --- a/info.html +++ b/info.html @@ -25,20 +25,20 @@
+
+ + +
-
-
- - -
@@ -51,60 +51,42 @@
- - - -
-

Simon Zheng

- +
+
+ +
+
+

Simon Zheng

+

Student & Programmer

+
-

- Hi I'm Simon, Student studying in computer science. -

- -
- -
-

- Education -

-
-
-

- Bachelor of Science in Computer Science -

- - GRADUATE Brooklyn College 2026 - -
+
+
+ +

Education

+
+
+

Bachelor of Science in Computer Science

+

Brooklyn College • Class of 2026

-
-

- Other interest -

-
    -
  • - Game -
    • -
  • - Coffee -
    • -
  • - Mahjong -
    • -
  • - coding -
    • + +
    +
    + +

    Interests

    +
    +
      +
    • Gaming
      • +
    • Coffee
      • +
    • Mahjong
      • +
    • Coding
      • +
    • UI Design
    -
- - -
diff --git a/js/darkmode.js b/js/darkmode.js index f7ba5d4..1aca470 100644 --- a/js/darkmode.js +++ b/js/darkmode.js @@ -1,21 +1,35 @@ -let darkmode = localStorage.getItem('dark'); -const switch_button = document.getElementById("theme_switch"); +// Function to apply the theme based on localStorage +const applyTheme = () => { + let darkmode = localStorage.getItem('dark'); + + // Default to 'inactive' (light mode) if no value is set + if (darkmode === null) { + localStorage.setItem('dark', 'inactive'); + darkmode = 'inactive'; + } -const enableDarkmode = () => { - document.body.classList.add('dark'); - localStorage.setItem('dark' , 'active'); -} - -const disableDarkmode = () => { - document.body.classList.remove('dark'); - localStorage.removeItem('dark'); + if (darkmode === 'active') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } }; -if (darkmode === 'active') enableDarkmode(); +// Run on initial load +applyTheme(); -switch_button.addEventListener("click", () => { - darkmode = localStorage.getItem('dark'); - darkmode !== "active" ? enableDarkmode() : disableDarkmode(); +// Set up the toggle button listener +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/link.html b/link.html index e69de29..a099f92 100644 --- a/link.html +++ b/link.html @@ -0,0 +1,69 @@ + + + + + + + Rain links + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ Links +
+
+
+
+

Links

+
+ +
+
+
+ +
+
+ + diff --git a/page/info.html b/page/info.html new file mode 100644 index 0000000..ec24d23 --- /dev/null +++ b/page/info.html @@ -0,0 +1,98 @@ + + + + + + + Rain about + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+ +
+ +
+
+ + +
+
+
+
+ About +
+
+ +
+
+
+ +
+
+

Simon Zheng

+

Student & Programmer

+
+
+ +
+
+
+ +

Education

+
+
+

Bachelor of Science in Computer Science

+

Brooklyn College • Class of 2026

+
+
+ +
+
+ +

Interests

+
+
    +
  • Gaming
    • +
  • Coffee
    • +
  • Mahjong
    • +
  • Coding
    • +
  • UI Design
    • +
+
+
+
+
+
+ +
+ + + + diff --git a/page/link.html b/page/link.html new file mode 100644 index 0000000..ba01116 --- /dev/null +++ b/page/link.html @@ -0,0 +1,68 @@ + + + + + + + Rain links + + + + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ Links +
+
+
+
+

Links

+
+ +
+
+
+ +
+ + diff --git a/page/project.html b/page/project.html new file mode 100644 index 0000000..15defa4 --- /dev/null +++ b/page/project.html @@ -0,0 +1,112 @@ + + + + + + + Rain 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.
    • +
+
+ + +
+
+
+ +
+ +