diff --git a/README.md b/README.md index 0c4b93d..9a806ae 100644 --- a/README.md +++ b/README.md @@ -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 \ No newline at end of file diff --git a/css/about.css b/css/about.css new file mode 100644 index 0000000..a9292b6 --- /dev/null +++ b/css/about.css @@ -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; +} \ No newline at end of file diff --git a/css/main_button.css b/css/main_button.css new file mode 100644 index 0000000..5edc3fd --- /dev/null +++ b/css/main_button.css @@ -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; +} diff --git a/css/mainpage.css b/css/mainpage.css index f7d0d96..3b6edde 100644 --- a/css/mainpage.css +++ b/css/mainpage.css @@ -4,6 +4,7 @@ align-items:center; justify-content:center; flex-direction: column; + height: 50vh; } diff --git a/css/style.css b/css/style.css index 41b740e..93cb864 100644 --- a/css/style.css +++ b/css/style.css @@ -11,6 +11,11 @@ overflow: hidden; } +/* trying to make the color change */ +*{ + transition: background-color 0.4s ease, color 0.4s ease; +} + /* darkmode color */ .dark{ --primary-background-color: #78B9B5; @@ -85,3 +90,24 @@ 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); + +} diff --git a/image/assignment_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/assignment_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg new file mode 100644 index 0000000..2f75759 --- /dev/null +++ b/image/assignment_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg new file mode 100644 index 0000000..d383e18 --- /dev/null +++ b/image/home_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/image/info_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/info_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg new file mode 100644 index 0000000..6549e8e --- /dev/null +++ b/image/info_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/image/link_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/link_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg new file mode 100644 index 0000000..8e7e894 --- /dev/null +++ b/image/link_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/image/mail_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg b/image/mail_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg new file mode 100644 index 0000000..ca840a4 --- /dev/null +++ b/image/mail_40dp_E3E3E3_FILL1_wght400_GRAD0_opsz40.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 9653a01..496226d 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@ + + @@ -51,7 +53,28 @@
- + +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/info.html b/info.html new file mode 100644 index 0000000..3c1c772 --- /dev/null +++ b/info.html @@ -0,0 +1,77 @@ + + + + + + + Rain about + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+
+ + +
+
+ + +
+
+
+
+ About +
+
+ +
+ +

+ HI I'm Simon Zheng +

+

+ I'm a student at brookyln college.
+ I'm currently in my senior year and considering going for my master.
+ + +

+ +
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/js/darkmode.js b/js/darkmode.js index 3ad04a9..f7ba5d4 100644 --- a/js/darkmode.js +++ b/js/darkmode.js @@ -1,19 +1,21 @@ -let darkmode = localStorage.getItem('dark') -const switch_button = document.getElementById("theme_switch") +let darkmode = localStorage.getItem('dark'); +const switch_button = document.getElementById("theme_switch"); const enableDarkmode = () => { - document.body.classList.add('dark') - localStorage.setItem('darkmode' , 'active') + document.body.classList.add('dark'); + localStorage.setItem('dark' , 'active'); } const disableDarkmode = () => { - document.body.classList.remove('dark') - localStorage.setItem('darkmode', null) -} + document.body.classList.remove('dark'); + localStorage.removeItem('dark'); +}; -if(darkmode === 'avtive') enableDarkmode() +if (darkmode === 'active') enableDarkmode(); switch_button.addEventListener("click", () => { - darkmode = localStorage.getItem('darkmode') - darkmode !== "active" ? enableDarkmode() : disableDarkmode() -}) \ No newline at end of file + darkmode = localStorage.getItem('dark'); + darkmode !== "active" ? enableDarkmode() : disableDarkmode(); +}); + +