Rain/Rainyy21.github.io
1
0
Fork 0
mirror of https://github.com/Rainyy21/Rainyy21.github.io.git synced 2026-10-11 00:40:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from Rainyy21/main-content

Browse Source 
second page
This commit is contained in:
Simon Zheng
2025-09-24 21:01:35 -04:00
committed by GitHub
parent f7eafbc477 f37e6cf128
commit 12e83f183b
13 changed files with 204 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+26 -7
View File
@@ -1,11 +1,30 @@
# this project will be a resume of my website # My Personal Website
## made a template on where everything should be This document outlines what I'm currently working on and what my plans are.
## commit a a change by adding color variable and dark mode button, need to finish the darkmode buton ---
I have finish my darkmode button ## Goal
- Improve the link buttons by styling and adding color
- Set up navigation to other pages
- Plan the layout for those additional pages
---
## Done
- Completed dark and light mode toggle
- Finalized color scheme with variables
- Built main content box to hold info
- Created template layout
- Added welcome text and introduction
---
## Notes
- I committed a change to add color variables and the dark mode button.
- The dark mode button is working.
- The structure and main content have been added.
## main content box and what the design sould be
I have added the main context
i have added the Welcome and what I am
css/about.css
+15
View File
@@ -0,0 +1,15 @@
#about .description{
font-family: monospace;
font-size: 1.5rems;
font-weight: normal;
overflow-y: auto;
overflow-x: hidden;
white-space: normal;
word-wrap: break-word;
height: 100rem;
width: 40rem;
}
#about .tittle_text{
padding-bottom: 2rem;
}
css/main_button.css
+17
View File
@@ -0,0 +1,17 @@
#social_button{
cursor: pointer;
background: none;
border: none;
}
#social_text{
margin-top: 0;
color:var(--text-color)
}
.social{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 4rem;
}
css/mainpage.css
+1
View File
@@ -4,6 +4,7 @@
align-items:center; align-items:center;
justify-content:center; justify-content:center;
flex-direction: column; flex-direction: column;
height: 50vh;
} }
css/style.css
+26
View File
@@ -11,6 +11,11 @@
overflow: hidden; overflow: hidden;
} }
/* trying to make the color change */
*{
transition: background-color 0.4s ease, color 0.4s ease;
}
/* darkmode color */ /* darkmode color */
.dark{ .dark{
--primary-background-color: #78B9B5; --primary-background-color: #78B9B5;
@@ -85,3 +90,24 @@
color: var(--text-color); color: var(--text-color);
} }
.header{
display: flex;
flex-direction: row;
}
#home_button{
border-style: none;
background: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
#home_button svg{
width: 3.5rem;
height: auto;
fill:var(--secondary-background-color);
}
image/assignment_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 589 B

image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 180 B

image/info_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 641 B

image/link_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

image/mail_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e3e3e3"><path d="M146.67-160q-27 0-46.84-19.83Q80-199.67 80-226.67v-506.66q0-27 19.83-46.84Q119.67-800 146.67-800h666.66q27 0 46.84 19.83Q880-760.33 880-733.33v506.66q0 27-19.83 46.84Q840.33-160 813.33-160H146.67ZM480-454.67 813.33-670v-63.33L480-521.33l-333.33-212V-670L480-454.67Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

index.html
+23
View File
@@ -10,6 +10,8 @@
<!-- css and js --> <!-- 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">
<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>
@@ -52,6 +54,27 @@
<!-- social box might need to move it --> <!-- social box might need to move it -->
<div class = "social"> <div class = "social">
<div class = "about_button_placement">
<button class = "about_button" id="social_button" onclick="location.href='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>
</button>
</div>
<div class = "link_button_placement" >
<button class = "link_button" id="social_button">
<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>
</button>
</div>
<div class = "work_button_placement">
<button class = "work_button" id="social_button">
<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>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
info.html
+77
View File
@@ -0,0 +1,77 @@
<!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">
<!-- topright would be the dark mode -->
<div class = "darkmode">
<button id = "theme_switch">
<!-- 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 class = "home_locat">
<!-- button to return home -->
<button id = "home_button" onclick="location.href='index.html'">
<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>
<!-- my info from who i am and my social linke -->
<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" id = "about">
<!-- this is the text for the main page -->
<p class = "tittle_text" id = "about">
HI I'm <span class = "main_page_name"> Simon Zheng</span>
</p>
<h2 class = "description" id = "about">
I'm a student at brookyln college.<br>
I'm currently in my senior year and considering going for my master.<br>
</h2>
<!-- social box might need to move it -->
</div>
</div>
</div>
<!-- footer for design look -->
<footer>
<!-- i could have a wavery floor background for art -->
</footer>
</div>
</body>
</html>
js/darkmode.js
+13 -11
View File
@@ -1,19 +1,21 @@
let darkmode = localStorage.getItem('dark') let darkmode = localStorage.getItem('dark');
const switch_button = document.getElementById("theme_switch") const switch_button = document.getElementById("theme_switch");
const enableDarkmode = () => { const enableDarkmode = () => {
document.body.classList.add('dark') document.body.classList.add('dark');
localStorage.setItem('darkmode' , 'active') localStorage.setItem('dark' , 'active');
} }
const disableDarkmode = () => { const disableDarkmode = () => {
document.body.classList.remove('dark') document.body.classList.remove('dark');
localStorage.setItem('darkmode', null) localStorage.removeItem('dark');
} };
if(darkmode === 'avtive') enableDarkmode() if (darkmode === 'active') enableDarkmode();
switch_button.addEventListener("click", () => { switch_button.addEventListener("click", () => {
darkmode = localStorage.getItem('darkmode') darkmode = localStorage.getItem('dark');
darkmode !== "active" ? enableDarkmode() : disableDarkmode() darkmode !== "active" ? enableDarkmode() : disableDarkmode();
}) });