added project info and design to it

added more text to the second page and style it

css/about.css

@@ -1,35 +1,155 @@
-/* text box and make it so it doesn't overflow out of the box */
+/* about page specific styling */
-#about.description{
+.box_body {
-    font-family: monospace;
+    padding: 2rem;
-    font-size: 1.5rems;
+    display: flex;
-    font-weight: normal;
+    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: 100rem;
-    width: 40rem;
 }
 
-/* tittle (contain name, and simple text with icon)  */
+.about_header {
-#about.tittle_text{
+    display: flex;
-    padding-bottom: 0rem;
+    align-items: center;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    width: 100%;
 }
-#about.tittle_text h1{
+
-    font-size: 2.5rem;
+.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.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 */
-#textbox.brooklyncollege{
+.education_card {
-   border-left: 3px solid rgba(17, 17, 17, 0.5);
+    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.brooklyncollege{
+.education_card h3 {
-    padding-left: 4px;
+    margin: 0 0 0.5rem 0;
-    font-size: .9rem;
+    font-size: 1.3rem;
+    color: var(--text-color);
 }
 
-/* hobbie section */
+.education_card p {
-#bulletpoint.hobbie{
+    margin: 0;
-    font-size:1.2rem;
+    font-size: 1.1rem;
+    color: var(--text-color);
+    opacity: 0.8;
+}
+
+/* hobby section */
+.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;
+    }
 }

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;
-#social_text{
+    align-items: center;
-    margin-top: 0;
+    padding: 1rem;
-    color:var(--text-color)
+    border-radius: 1rem;
+    width: 100px;
+    transition: transform 0.2s ease, background-color 0.2s ease;
 }
 
-.social{
+.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;
+    justify-content: center;
-    gap: 4rem;
+    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;
+    }
 }

css/mainpage.css

@@ -1,26 +1,42 @@
 /* the text box isn't center yet */
-.box_body{
+.box_body {
     display: flex;
-    align-items:center;
+    align-items: center;
-    justify-content:center;
+    justify-content: center;
     flex-direction: column;
-    height: 50vh;
+    flex-grow: 1;
+    padding: 2rem;
 }
 
-
 /* welcome text and name text color */
-.tittle_text{
+.title_text {
     font-size: 2.5rem;
     font-family: 'Courier New', Courier, monospace;
     margin-bottom: 10px;
+    text-align: center;
 }
 
-.main_page_name{
+.main_page_name {
-    color: var(--temp_primary-color);
+    color: var(--primary-accent-color);
 }
 
-.description{
+.description {
     font-family: monospace;
-    font-size: 1.5rems;
+    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;
+    }
 }

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

css/style.css

@@ -1,113 +1,136 @@
 /* color for normal and darkmode */
-:root{
+:root {
     --primary-background-color: #ECEEDF;
     --ground-footer-color: #CFAB8D;
     --second-footer-color: #D9C4B0;
     --secondary-background-color: #BBDCE5;
-    --temp_primary-color: #fffdd0;
+    --primary-accent-color: #fffdd0;
-    --temp_secondary-color:#0070A9;
+    --secondary-accent-color: #0070A9;
     --text-color: #fcffe9;
-    margin: 0;
-    overflow: hidden;
-
 }
+
+body {
+    margin: 0;
+}
+
 /* trying to make the color change */
-*{
+* {
     transition: background-color 0.4s ease, color 0.4s ease;
 }
 
 /* darkmode color */
-.dark{
+.dark {
     --primary-background-color: #78B9B5;
     --ground-footer-color: #320A6B;
     --second-footer-color: #065084;
     --secondary-background-color: #0F828C;
     --text-color: #1a033b;
-
 }
+
 /* background color */
-.bg_color{
+.bg_color {
     background-color: var(--primary-background-color);
-}
+    min-height: 100vh;
-
-/* the darkmode button */
-#theme_switch{
-    padding: 0;
-    background: none;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
-    align-items: center;
-    border-style: none;
-    cursor: pointer;
 }
 
-#theme_switch svg{
+/* the darkmode button behavior */
-    width: 3.5rem;
+#theme_switch svg:last-child {
-    height: auto;
-    fill:var(--secondary-background-color);
-    
-}
-
-#theme_switch svg:last-child{
     display: none;
 }
 
-.dark #theme_switch svg:first-child{
+.dark #theme_switch svg:first-child {
     display: none;
 }
 
-.dark #theme_switch svg:last-child{
+.dark #theme_switch svg:last-child {
     display: block;
 }
 
 /* the style of the main page */
-
+.content_container {
-.content_container{
+    display: flex;
-    display:flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
+    flex-grow: 1;
-}
+    padding: 2rem 0;
-.Square_content{
-    width: 50rem;
-    height: 50rem;
-    background: var(--secondary-background-color);
-    border-radius: 1rem;
     box-sizing: border-box;
 }
 
-.website_top{
+.square_content {
-    background-color: var(--temp_secondary-color);
+    width: 50vw;
-    padding:1rem;
+    min-height: 65vh;
-    border-top-left-radius: inherit;
+    background: var(--secondary-background-color);
-    border-top-right-radius: inherit;
+    border-radius: 1rem;
-
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }
 
-.website_text{
+@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 {
+    background-color: var(--secondary-accent-color);
+    padding: 1rem;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.website_text {
     font-family: monospace;
     font-size: 1.5rem;
     color: var(--text-color);
 }
 
-.header{
+.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{
+.header div {
-    border-style: none;
+    display: flex;
+    align-items: center;
+}
+
+#theme_switch, #home_button {
+    padding: 0.5rem;
     background: none;
-    cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
-
+    border-style: none;
-}
+    cursor: pointer;
-
-#home_button svg{
     width: 3.5rem;
-    height: auto;
+    height: 3.5rem;
-    fill:var(--secondary-background-color);
+    box-sizing: border-box;
-    
+}
+
+#theme_switch svg, #home_button svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--secondary-background-color);
 }

index.html

@@ -3,75 +3,76 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- tittle  -->
+    <!-- title  -->
     <title>Rain website</title>
     <!-- add a image -->
 
     <!-- css and js -->
-    <link rel = "stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/style.css">
-    <link rel = "stylesheet" href="./css/mainpage.css">
+    <link rel="stylesheet" href="./css/mainpage.css">
-    <link rel = "stylesheet" href="./css/main_button.css">
+    <link rel="stylesheet" href="./css/main_button.css">
 
 
-    <script type = "text/javascript" src = "./js/darkmode.js" defer></script>
+    <script type="text/javascript" src="./js/darkmode.js" defer></script>
-    <script type = "text/javascript" src = "./js/main.js" defer></script>
+    <script type="text/javascript" src="./js/main.js" defer></script>
 
 </head>
 
 <!-- the main body to edit -->
 <body>
-    <div class = "bg_color">
+    <div class="bg_color">
         <!-- have a header -->
-        <div class = "header">
+        <div class="header">
+            <div></div> <!-- Spacer for consistency if needed -->
             <!-- topright would be the dark mode -->
-            <div class = "darkmode">
+            <div class="darkmode">
-                <button id = "theme_switch">
+                <button id="theme_switch" aria-label="Toggle dark mode">
                     <!-- add the mood and sun icon here -->
-                    <svg xmlns="http://www.w3.org/2000/svg" class = "darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
-                    <svg xmlns="http://www.w3.org/2000/svg" class = "lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
                 </button>
             </div>
 
         </div>
 
         <!-- my info from who i am and my social linke -->
-        <div class = "content_container">
+        <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">
                         Home
                     </div>                        
                 </div>
                 <!-- this might be where the whole stuff should be in -->
-                <div class = "box_body">
+                <div class="box_body">
                 <!-- this is the text for the main page -->
-                    <p class = "tittle_text">
+                    <p class="title_text">
-                        HI I'm <span class = "main_page_name"> Simon Zheng</span>
+                        HI I'm <span class="main_page_name"> Simon Zheng</span>
                     </p>
-                    <h2 class = "description">
+                    <h2 class="description">
                         Student and Programmer
                     </h2>
                     <!-- social box might need to move it -->
-                    <div class = "social">
+                    <div class="social">
 
-                        <div class = "about_button_placement">
+                        <div class="about_button_placement">
-                            <button class = "about_button" id="social_button" onclick="location.href='info.html'">
+                            <button class="social_button" onclick="location.href='page/info.html'">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M448.67-280h66.66v-240h-66.66v240Zm31.32-316q15.01 0 25.18-9.97 10.16-9.96 10.16-24.7 0-15.3-10.15-25.65-10.16-10.35-25.17-10.35-15.01 0-25.18 10.35-10.16 10.35-10.16 25.65 0 14.74 10.15 24.7 10.16 9.97 25.17 9.97Zm.19 516q-82.83 0-155.67-31.5-72.84-31.5-127.18-85.83Q143-251.67 111.5-324.56T80-480.33q0-82.88 31.5-155.78Q143-709 197.33-763q54.34-54 127.23-85.5T480.33-880q82.88 0 155.78 31.5Q709-817 763-763t85.5 127Q880-563 880-480.18q0 82.83-31.5 155.67Q817-251.67 763-197.46q-54 54.21-127 85.84Q563-80 480.18-80Z"/></svg>
-                                <h2 id = "social_text">About</h2>
+                                <h2 class="social_text">About</h2>
                             </button>
                         </div>
 
-                        <div class = "link_button_placement" >
+                        <div class="link_button_placement" >
-                            <button class = "link_button" id="social_button">
+                            <button class="social_button" onclick="location.href='page/link.html'">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M446.67-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h166.67v66.67H280q-55.56 0-94.44 38.84-38.89 38.84-38.89 94.33 0 55.49 38.89 94.49 38.88 39 94.44 39h166.67V-280ZM323.33-446.67v-66.66h313.34v66.66H323.33Zm190 166.67v-66.67H680q55.56 0 94.44-38.84 38.89-38.84 38.89-94.33 0-55.49-38.89-94.49-38.88-39-94.44-39H513.33V-680H680q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H513.33Z"/></svg>
-                                <h2 id = "social_text">Link</h2>
+                                <h2 class="social_text">Link</h2>
                             </button>
                         </div>
 
-                        <div class = "work_button_placement">
+                        <div class="work_button_placement">
-                            <button class = "work_button" id="social_button">
+                            <button class="social_button" onclick="location.href='page/project.html'">
                                 <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M186.67-120q-27.67 0-47.17-19.5T120-186.67v-586.66q0-27.67 19.5-47.17t47.17-19.5h192.66q7.67-35.33 35.84-57.67Q443.33-920 480-920t64.83 22.33Q573-875.33 580.67-840h192.66q27.67 0 47.17 19.5t19.5 47.17v586.66q0 27.67-19.5 47.17T773.33-120H186.67ZM280-280h275.33v-66.67H280V-280Zm0-166.67h400v-66.66H280v66.66Zm0-166.66h400V-680H280v66.67Zm200-181.34q13.67 0 23.5-9.83t9.83-23.5q0-13.67-9.83-23.5t-23.5-9.83q-13.67 0-23.5 9.83t-9.83 23.5q0 13.67 9.83 23.5t23.5 9.83Z"/></svg>
-                                <h2 id = "social_text">Project</h2>
+                                <h2 class="social_text">Project</h2>
                             </button>
                         </div>
 

info.html

@@ -8,103 +8,85 @@
     <!-- add a image -->
 
     <!-- css and js -->
-    <link rel = "stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/style.css">
-    <link rel = "stylesheet" href="./css/mainpage.css">
+    <link rel="stylesheet" href="./css/mainpage.css">
-    <link rel = "stylesheet" href="./css/main_button.css">
+    <link rel="stylesheet" href="./css/main_button.css">
-    <link rel = "stylesheet" href="./css/about.css">
+    <link rel="stylesheet" href="./css/about.css">
 
 
 
-    <script type = "text/javascript" src = "./js/darkmode.js" defer></script>
+    <script type="text/javascript" src="./js/darkmode.js" defer></script>
-    <script type = "text/javascript" src = "./js/main.js" defer></script>
+    <script type="text/javascript" src="./js/main.js" defer></script>
 
 
 </head>
 
 <body>
-    <div class = "bg_color">
+    <div class="bg_color">
         <!-- have a header -->
-        <div class = "header">
+        <div class="header">
-            <!-- topright would be the dark mode -->
+            <div class="home_locat">
-            <div class = "darkmode">
+                <!-- button to return home -->
-                <button id = "theme_switch">
+                <button id="home_button" onclick="location.href='index.html'" aria-label="Go home">
-                    <!-- add the mood and sun icon here -->
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
-                    <svg xmlns="http://www.w3.org/2000/svg" class = "darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
-                    <svg xmlns="http://www.w3.org/2000/svg" class = "lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
                 </button>
             </div>
-            <div class = "home_locat">
+            <!-- topright would be the dark mode -->
-                <!-- button to return home -->
+            <div class="darkmode">
-                <button id = "home_button" onclick="location.href='index.html'">
+                <button id="theme_switch" aria-label="Toggle dark mode">
-                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
+                    <!-- add the mood and sun icon here -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
                 </button>
             </div>
         </div>
 
         <!-- my info from who i am and my social linke -->
-        <div class = "content_container">
+        <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">
                         About
                     </div>                        
                 </div>
                 <!-- this might be where the whole stuff should be in -->
-                <div class = "box_body" id = "about">
+                <div class="box_body">
-                <!-- this is the text for the main page -->
+                    <div class="about_header">
-                    
+                        <div class="pfp_placeholder">
-                    <!-- adding my pfp image -->
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                    <div class = "tittle_text" id = "about">
+                        </div>
+                        <div class="title_text">
                             <h1>Simon Zheng</h1>
-                        <!-- add paragraph here to explain what i do -->
+                            <p class="intro_text">Student & Programmer</p>
+                        </div>
                     </div>
 
-                    <div class = "description" id = "about">
+                    <div class="description">
-                        <h2>
+                        <div class="about_section">
-                            Hi I'm Simon, Student studying in computer science.
+                            <div class="section_title">
-                        </h2>
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
+                                <h2>Education</h2>
+                            </div>
+                            <div class="education_card">
+                                <h3>Bachelor of Science in Computer Science</h3>
+                                <p>Brooklyn College • Class of 2026</p>
+                            </div>
+                        </div>
 
-                        <br>
+                        <div class="about_section">
-
+                            <div class="section_title">
-                        <div class = "education" id = "textbox">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
-                            <h1>
+                                <h2>Interests</h2>
-                            Education
-                            </h1>
-                            <div class = "brooklyncollege" id = "textbox">
-                                <div class = "brooklyncollege" id = education>
-                                    <p>
-                                        Bachelor of Science in Computer Science
-                                    </p>
-                                    <span>
-                                        GRADUATE Brooklyn College 2026
-                                    </span>
                             </div>
-                            </div>
+                            <ul class="hobby_container">
-                        </div>
+                                <li class="hobby_item">Gaming</li>
-                        <div class = "interest" id = "textbox">
+                                <li class="hobby_item">Coffee</li>
-                            <h1>
+                                <li class="hobby_item">Mahjong</li>
-                                Other interest
+                                <li class="hobby_item">Coding</li>
-                            </h1>
+                                <li class="hobby_item">UI Design</li>
-                            <ul class = "hobbie" id = "bulletpoint">
-                                <li>
-                                    Game
-                                </li>
-                                <li>
-                                    Coffee
-                                </li>
-                                <li>
-                                    Mahjong
-                                </li>
-                                <li>
-                                    coding
-                                </li>
                             </ul>
                         </div>
-
                     </div>
-                    
-
-                    <!-- social box might need to move it -->
                 </div>
             </div>
         </div>

js/darkmode.js

@@ -1,21 +1,35 @@
-let darkmode = localStorage.getItem('dark');
+// Function to apply the theme based on localStorage
-const switch_button = document.getElementById("theme_switch");
+const applyTheme = () => {
+    let darkmode = localStorage.getItem('dark');
     
-const enableDarkmode = () => {
+    // Default to 'inactive' (light mode) if no value is set
-    document.body.classList.add('dark');
+    if (darkmode === null) {
-    localStorage.setItem('dark' , 'active');
+        localStorage.setItem('dark', 'inactive');
-}
+        darkmode = 'inactive';
+    }
 
-const disableDarkmode = () => {
+    if (darkmode === 'active') {
-    document.body.classList.remove('dark');
+        document.documentElement.classList.add('dark');
-     localStorage.removeItem('dark'); 
+    } else {
+        document.documentElement.classList.remove('dark');
+    }
 };
 
-if (darkmode === 'active') enableDarkmode();
+// Run on initial load
+applyTheme();
 
-switch_button.addEventListener("click", () => {
+// Set up the toggle button listener
-    darkmode = localStorage.getItem('dark');
+document.addEventListener('DOMContentLoaded', () => {
-    darkmode !== "active" ? enableDarkmode() : disableDarkmode();
+    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();
+        });
+    }
 });
-
-

link.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>Rain links</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">
+
+    <script type="text/javascript" src="./js/darkmode.js" defer></script>
+    <script type="text/javascript" src="./js/main.js" defer></script>
+</head>
+
+<body>
+    <div class="bg_color">
+        <div class="header">
+            <div class="home_locat">
+                <button id="home_button" onclick="location.href='index.html'" aria-label="Go home">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
+                </button>
+            </div>
+            <div class="darkmode">
+                <button id="theme_switch" aria-label="Toggle dark mode">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="content_container">
+            <div class="square_content">
+                <div class="website_top">
+                    <div class="website_text">
+                        Links
+                    </div>                        
+                </div>
+                <div class="box_body">
+                    <div class="title_text">
+                        <h1>Links</h1>
+                    </div>
+                    <div class="social">
+                        <button class="social_button" onclick="window.open('https://github.com', '_blank')">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22v3.285c0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"/></svg>
+                            <h2 class="social_text">GitHub</h2>
+                        </button>
+
+                        <button class="social_button" onclick="window.open('https://linkedin.com', '_blank')">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
+                            <h2 class="social_text">LinkedIn</h2>
+                        </button>
+
+
+                        <button class="social_button" onclick="location.href='mailto:email@example.com'">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
+                            <h2 class="social_text">Email</h2>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <footer></footer>
+    </div>
+</body>
+</html>

page/info.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>Rain about</title>
+    <!-- add a image -->
+
+    <!-- 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">
+
+
+
+    <script type="text/javascript" src="../js/darkmode.js" defer></script>
+    <script type="text/javascript" src="../js/main.js" defer></script>
+
+
+</head>
+
+<body>
+    <div class="bg_color">
+        <!-- have a header -->
+        <div class="header">
+            <div class="home_locat">
+                <!-- button to return home -->
+                <button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
+                </button>
+            </div>
+            <!-- topright would be the dark mode -->
+            <div class="darkmode">
+                <button id="theme_switch" aria-label="Toggle dark mode">
+                    <!-- add the mood and sun icon here -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- my info from who i am and my social links -->
+        <div class="content_container">
+            <div class="square_content">
+                <div class="website_top">
+                    <div class="website_text">
+                        About
+                    </div>                        
+                </div>
+                <!-- this might be where the whole stuff should be in -->
+                <div class="box_body">
+                    <div class="about_header">
+                        <div class="pfp_placeholder">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                        </div>
+                        <div class="title_text">
+                            <h1>Simon Zheng</h1>
+                            <p class="intro_text">Student & Programmer</p>
+                        </div>
+                    </div>
+
+                    <div class="description">
+                        <div class="about_section">
+                            <div class="section_title">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
+                                <h2>Education</h2>
+                            </div>
+                            <div class="education_card">
+                                <h3>Bachelor of Science in Computer Science</h3>
+                                <p>Brooklyn College • Class of 2026</p>
+                            </div>
+                        </div>
+
+                        <div class="about_section">
+                            <div class="section_title">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+                                <h2>Interests</h2>
+                            </div>
+                            <ul class="hobby_container">
+                                <li class="hobby_item">Gaming</li>
+                                <li class="hobby_item">Coffee</li>
+                                <li class="hobby_item">Mahjong</li>
+                                <li class="hobby_item">Coding</li>
+                                <li class="hobby_item">UI Design</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
+</body>
+
+
+</html>

page/link.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>Rain links</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">
+
+    <script type="text/javascript" src="../js/darkmode.js" defer></script>
+    <script type="text/javascript" src="../js/main.js" defer></script>
+</head>
+
+<body>
+    <div class="bg_color">
+        <div class="header">
+            <div class="home_locat">
+                <button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
+                </button>
+            </div>
+            <div class="darkmode">
+                <button id="theme_switch" aria-label="Toggle dark mode">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="content_container">
+            <div class="square_content">
+                <div class="website_top">
+                    <div class="website_text">
+                        Links
+                    </div>                        
+                </div>
+                <div class="box_body">
+                    <div class="title_text">
+                        <h1>Links</h1>
+                    </div>
+                    <div class="social">
+                        <button class="social_button" onclick="window.open('https://github.com', '_blank')">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22v3.285c0 .315.225.69.825.57C20.565 21.795 24 17.31 24 12c0-6.63-5.37-12-12-12z"/></svg>
+                            <h2 class="social_text">GitHub</h2>
+                        </button>
+
+                        <button class="social_button" onclick="window.open('https://linkedin.com', '_blank')">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#e3e3e3"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
+                            <h2 class="social_text">LinkedIn</h2>
+                        </button>
+
+
+                        <button class="social_button" onclick="location.href='mailto:email@example.com'">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
+                            <h2 class="social_text">Email</h2>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
+</body>
+</html>

page/project.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <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>
+</head>
+
+<body>
+    <div class="bg_color">
+        <div class="header">
+            <div class="home_locat">
+                <button id="home_button" onclick="location.href='../index.html'" aria-label="Go home">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M160-120v-480l320-240 320 240v480H560v-280H400v280H160Z"/></svg>
+                </button>
+            </div>
+            <div class="darkmode">
+                <button id="theme_switch" aria-label="Toggle dark mode">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="darkmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q10 0 20.5.67 10.5.66 24.17 2-37.67 31-59.17 77.83T444-660q0 90 63 153t153 63q53 0 99.67-20.5 46.66-20.5 77.66-56.17 1.34 12.34 2 21.84.67 9.5.67 18.83 0 150-105 255T480-120Z"/></svg> 
+                    <svg xmlns="http://www.w3.org/2000/svg" class="lightmode" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M480-280q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-446.67H40v-66.66h160v66.66Zm720 0H760v-66.66h160v66.66ZM446.67-760v-160h66.66v160h-66.66Zm0 720v-160h66.66v160h-66.66ZM260-655.33l-100.33-97 47.66-49 96 100-43.33 46Zm493.33 496-97.66-100.34 45-45.66 99.66 97.66-47 48.34Zm-98.66-541.34 97.66-99.66 49 47L702-656l-47.33-44.67ZM159.33-207.33 259-305l46.33 45.67-97.66 99.66-48.34-47.66Z"/></svg>
+                </button>
+            </div>
+        </div>
+
+        <div class="content_container">
+          <div class="square_content">
+            <div class="website_top">
+              <div class="website_text">
+                Projects
+              </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>
+</body>
+</html>