diff --git a/docs/EcoHarvest.html b/docs/EcoHarvest.html deleted file mode 100644 index da40afe..0000000 --- a/docs/EcoHarvest.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - Wondering-Library - - - - - - -
- Image 1 - Image 2 - Image 3 - Image 4 - Image 5 - Image 6 - Image 7 - Image 8 - Image 9 -
- -
- -
- - \ No newline at end of file diff --git a/docs/Qian.html b/docs/Qian.html deleted file mode 100644 index 54db619..0000000 --- a/docs/Qian.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - - - Wondering-Library - - - - - - -
- Image 1 - Image 2 - Image 3 - Image 4 - Image 5 - Image 6 - Image 7 - Image 8 -
- -
- -
- - \ No newline at end of file diff --git a/docs/UXEcoHarvest/0.png b/docs/UXEcoHarvest/0.png deleted file mode 100644 index 091e7d2..0000000 Binary files a/docs/UXEcoHarvest/0.png and /dev/null differ diff --git a/docs/UXWonderingLibrary/0.png b/docs/UXWonderingLibrary/0.png deleted file mode 100644 index 5eb7555..0000000 Binary files a/docs/UXWonderingLibrary/0.png and /dev/null differ diff --git a/docs/UXcham/0.png b/docs/UXcham/0.png deleted file mode 100644 index c215899..0000000 Binary files a/docs/UXcham/0.png and /dev/null differ diff --git a/docs/UXqian/0.png b/docs/UXqian/0.png deleted file mode 100644 index 5c0115b..0000000 Binary files a/docs/UXqian/0.png and /dev/null differ diff --git a/docs/UXqian/1.png b/docs/UXqian/1.png deleted file mode 100644 index 5926c31..0000000 Binary files a/docs/UXqian/1.png and /dev/null differ diff --git a/docs/UXqian/2.png b/docs/UXqian/2.png deleted file mode 100644 index 53d52c8..0000000 Binary files a/docs/UXqian/2.png and /dev/null differ diff --git a/docs/UXqian/3.png b/docs/UXqian/3.png deleted file mode 100644 index 853b42e..0000000 Binary files a/docs/UXqian/3.png and /dev/null differ diff --git a/docs/UXqian/4.png b/docs/UXqian/4.png deleted file mode 100644 index 70b111b..0000000 Binary files a/docs/UXqian/4.png and /dev/null differ diff --git a/docs/UXqian/5.png b/docs/UXqian/5.png deleted file mode 100644 index c9276ef..0000000 Binary files a/docs/UXqian/5.png and /dev/null differ diff --git a/docs/UXqian/6.png b/docs/UXqian/6.png deleted file mode 100644 index 53e31ab..0000000 Binary files a/docs/UXqian/6.png and /dev/null differ diff --git a/docs/UXqian/7.png b/docs/UXqian/7.png deleted file mode 100644 index 8788d8d..0000000 Binary files a/docs/UXqian/7.png and /dev/null differ diff --git a/docs/cham.html b/docs/cham.html deleted file mode 100644 index d7fae23..0000000 --- a/docs/cham.html +++ /dev/null @@ -1,126 +0,0 @@ - - - - - - - Wondering-Library - - - - - - -
- Image 1 - Image 2 - Image 3 - Image 4 - Image 5 - Image 6 - Image 7 - Image 8 - Image 9 -
- Image 10 - - Watch the Video - -
-
- -
- -
- - \ No newline at end of file diff --git a/docs/css/stylemain.css b/docs/css/stylemain.css index 7e14cae..5e3785b 100644 --- a/docs/css/stylemain.css +++ b/docs/css/stylemain.css @@ -57,10 +57,8 @@ body { line-height: 1; font-weight: 400; color: #333; - max-width: 1680px; margin: 0 auto; - } .header { @@ -80,10 +78,6 @@ body { letter-spacing: -0.5px; } -/* .main-nav-link:hover { - cursor: pointer -} */ - .Portfolio { text-transform: uppercase; font-size: 3.0rem; @@ -209,15 +203,83 @@ body { height:176px; } + +/* Project entrance cards */ + +.entrance-card-container { + margin-top: 200px; + margin-left: 53px; + margin-right: 53px +} + +.entrance-area-title { + font-weight: 500; + color: #333; + font-size: 36px; +} + +.card-container-entrance { + margin-top: 100px; + display: flex; + justify-content: space-between; + align-items: center; + text-align: center; + gap: 50px; + +} + +.entrance-card { + position: relative; + top: 0; + transition: top ease 0.5s; +} + +.entrance-card:hover { + top: -5px; +} + + +.project-entrance-img { + max-width: 100%; +} + + + +.entrance-title { + position: absolute; /* Set to absolute for overlaying the text */ + top: 50%; /* Center vertically within the container */ + left: 50%; /* Center horizontally within the container */ + transform: translate(-50%, -50%); /* Center the text */ + padding: 5px; /* Add padding for better spacing */ + border-radius: 5px; /* Add rounded corners */ + color: #fff; + font-size: 36px; + font-weight: 500; +} + + + /* Project */ .project-section { - margin-top:150px; + margin-top:60px; margin-bottom:0px; + background-color: #fff; + background-image: linear-gradient(to bottom, #f9f9f9, #fff, #f9f9f9); + margin:0 58px 0 58px; + box-shadow: 0 0.1rem 6.8rem rgba(0, 0, 0, 0.075); + border-radius: 15px; + height:720px } -.project-sectionSDE { - margin-top:0px; -} +/* .project-sectionSDE { + margin-top:60px; + margin-bottom:0px; + background-color: #fff; + margin:0 58px 0 58px; + box-shadow: 0 0.1rem 6.8rem rgba(0, 0, 0, 0.075); + border-radius: 15px; + height:700px +} */ .project-title-img { width:484px; @@ -225,19 +287,18 @@ body { display:block; margin-left: auto; margin-right: auto; - margin-top:110px; - margin-bottom:110px; + margin-top:60px; + margin-bottom:50px; + opacity: 0.9; } .project-list { display: flex; justify-content: space-between; align-items: center; - /* background-color: #fff; */ - /* height: 8.4rem; */ - padding: 0 5.8rem; list-style:none; - gap: 2.5rem; + gap: 3.5rem; + margin-bottom: 100px;; } /* Project cards */ @@ -274,8 +335,8 @@ padding: 0rem 0 0.14rem 0; .projectBG-img { display: block; - width:20rem; - height:29.5rem; + width:22rem; + /* height:29.5rem; */ /* position: relative; */ } @@ -379,7 +440,7 @@ padding: 0rem 0 0.14rem 0; width: 100%; /* display: block; */ text-align: center; - margin-top:12.4rem; + margin-top:8.4rem; } .project-section { @@ -401,7 +462,8 @@ a:visited { /* Contact */ .contact-box { - margin-bottom: 4rem; + margin-top: 20rem; + margin-bottom: 5rem; } .contact-text { text-align: center; diff --git a/docs/frontEndProject.html b/docs/frontEndProject.html new file mode 100644 index 0000000..cd0c06a --- /dev/null +++ b/docs/frontEndProject.html @@ -0,0 +1,141 @@ + + + + + + + + + + Frontend Project + + +
+ Portfolio + + +
+ +
+
+ The image of project title +
+ +
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/docs/img/mainpage/FrontEndEnterance.png b/docs/img/mainpage/FrontEndEnterance.png new file mode 100644 index 0000000..8eab730 Binary files /dev/null and b/docs/img/mainpage/FrontEndEnterance.png differ diff --git a/docs/img/mainpage/UXEnterance.png b/docs/img/mainpage/UXEnterance.png new file mode 100644 index 0000000..b75a35c Binary files /dev/null and b/docs/img/mainpage/UXEnterance.png differ diff --git a/docs/index.html b/docs/index.html index 87e51f2..439e150 100644 --- a/docs/index.html +++ b/docs/index.html @@ -14,19 +14,20 @@
-

Portfolio

+ Portfolio + @@ -64,244 +65,31 @@

The image of background text -
-
- The image of project title -
- -
- -
- -
- The image of background dots -
-
- -
-
- The image of project title -
- -
- -
+ -
- The image of background dots -
-
+

Contact

-

45 52754339

+

+45 52754339

zw.chen531@gmail.com

+ diff --git a/docs/singleProject/EcoHarvest.html b/docs/singleProject/EcoHarvest.html new file mode 100644 index 0000000..ec87be3 --- /dev/null +++ b/docs/singleProject/EcoHarvest.html @@ -0,0 +1,85 @@ + + + + + + EcoHarvest + + + + + + +
+ IntroPage.png +
+ +

Design Process

+ +
+
+ Research + Image 1 + + Interview + Image 2 + + Market Research + Image 3 + + Concept + Image 4 + + Sketches + Image 5 + + Mock-up + Image 6 + + Function Diagram + Image 7 + + Final Design + Image 8 + +
+
+ Image 0 +
+
+ +
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/docs/singleProject/UXEcoHarvest/0.png b/docs/singleProject/UXEcoHarvest/0.png new file mode 100644 index 0000000..fd88272 Binary files /dev/null and b/docs/singleProject/UXEcoHarvest/0.png differ diff --git a/docs/UXEcoHarvest/1.png b/docs/singleProject/UXEcoHarvest/1.png similarity index 100% rename from docs/UXEcoHarvest/1.png rename to docs/singleProject/UXEcoHarvest/1.png diff --git a/docs/UXEcoHarvest/2.png b/docs/singleProject/UXEcoHarvest/2.png similarity index 100% rename from docs/UXEcoHarvest/2.png rename to docs/singleProject/UXEcoHarvest/2.png diff --git a/docs/UXEcoHarvest/3.png b/docs/singleProject/UXEcoHarvest/3.png similarity index 100% rename from docs/UXEcoHarvest/3.png rename to docs/singleProject/UXEcoHarvest/3.png diff --git a/docs/UXEcoHarvest/4.png b/docs/singleProject/UXEcoHarvest/4.png similarity index 100% rename from docs/UXEcoHarvest/4.png rename to docs/singleProject/UXEcoHarvest/4.png diff --git a/docs/UXEcoHarvest/5.png b/docs/singleProject/UXEcoHarvest/5.png similarity index 100% rename from docs/UXEcoHarvest/5.png rename to docs/singleProject/UXEcoHarvest/5.png diff --git a/docs/UXEcoHarvest/6.png b/docs/singleProject/UXEcoHarvest/6.png similarity index 100% rename from docs/UXEcoHarvest/6.png rename to docs/singleProject/UXEcoHarvest/6.png diff --git a/docs/UXEcoHarvest/7.png b/docs/singleProject/UXEcoHarvest/7.png similarity index 100% rename from docs/UXEcoHarvest/7.png rename to docs/singleProject/UXEcoHarvest/7.png diff --git a/docs/UXEcoHarvest/8.png b/docs/singleProject/UXEcoHarvest/8.png similarity index 100% rename from docs/UXEcoHarvest/8.png rename to docs/singleProject/UXEcoHarvest/8.png diff --git a/docs/singleProject/UXEcoHarvest/EcoH_intro.png b/docs/singleProject/UXEcoHarvest/EcoH_intro.png new file mode 100644 index 0000000..ccca736 Binary files /dev/null and b/docs/singleProject/UXEcoHarvest/EcoH_intro.png differ diff --git a/docs/singleProject/UXLibrary.html b/docs/singleProject/UXLibrary.html new file mode 100644 index 0000000..ab11409 --- /dev/null +++ b/docs/singleProject/UXLibrary.html @@ -0,0 +1,59 @@ + + + + + + Wandering Library + + + + + + +
+ IntroPage.png +
+ +

Design Process

+ +
+
+ Background + Image 1 + + AEIOU + Image 2 + + Interview + Image 3 + + Concept + Image 4 + + Offering map + Image 5 + + IA + Image 6 + + Wireframe + Image 7 + + UI + Image 8 + +
+
+ Image 0 +
+
+ +
+ +
+ + + + + \ No newline at end of file diff --git a/docs/singleProject/UXWonderingLibrary/0.png b/docs/singleProject/UXWonderingLibrary/0.png new file mode 100644 index 0000000..74a4a24 Binary files /dev/null and b/docs/singleProject/UXWonderingLibrary/0.png differ diff --git a/docs/UXWonderingLibrary/1.png b/docs/singleProject/UXWonderingLibrary/1.png similarity index 100% rename from docs/UXWonderingLibrary/1.png rename to docs/singleProject/UXWonderingLibrary/1.png diff --git a/docs/UXWonderingLibrary/2.png b/docs/singleProject/UXWonderingLibrary/2.png similarity index 100% rename from docs/UXWonderingLibrary/2.png rename to docs/singleProject/UXWonderingLibrary/2.png diff --git a/docs/UXWonderingLibrary/3.png b/docs/singleProject/UXWonderingLibrary/3.png similarity index 100% rename from docs/UXWonderingLibrary/3.png rename to docs/singleProject/UXWonderingLibrary/3.png diff --git a/docs/UXWonderingLibrary/4.png b/docs/singleProject/UXWonderingLibrary/4.png similarity index 100% rename from docs/UXWonderingLibrary/4.png rename to docs/singleProject/UXWonderingLibrary/4.png diff --git a/docs/UXWonderingLibrary/5.png b/docs/singleProject/UXWonderingLibrary/5.png similarity index 100% rename from docs/UXWonderingLibrary/5.png rename to docs/singleProject/UXWonderingLibrary/5.png diff --git a/docs/UXWonderingLibrary/6.png b/docs/singleProject/UXWonderingLibrary/6.png similarity index 100% rename from docs/UXWonderingLibrary/6.png rename to docs/singleProject/UXWonderingLibrary/6.png diff --git a/docs/UXWonderingLibrary/7.png b/docs/singleProject/UXWonderingLibrary/7.png similarity index 100% rename from docs/UXWonderingLibrary/7.png rename to docs/singleProject/UXWonderingLibrary/7.png diff --git a/docs/UXWonderingLibrary/8.png b/docs/singleProject/UXWonderingLibrary/8.png similarity index 100% rename from docs/UXWonderingLibrary/8.png rename to docs/singleProject/UXWonderingLibrary/8.png diff --git a/docs/singleProject/UXWonderingLibrary/Library-intro.png b/docs/singleProject/UXWonderingLibrary/Library-intro.png new file mode 100644 index 0000000..966e0e8 Binary files /dev/null and b/docs/singleProject/UXWonderingLibrary/Library-intro.png differ diff --git a/docs/singleProject/UXcham/0.png b/docs/singleProject/UXcham/0.png new file mode 100644 index 0000000..05ea97b Binary files /dev/null and b/docs/singleProject/UXcham/0.png differ diff --git a/docs/UXcham/1.png b/docs/singleProject/UXcham/1.png similarity index 100% rename from docs/UXcham/1.png rename to docs/singleProject/UXcham/1.png diff --git a/docs/UXcham/2.png b/docs/singleProject/UXcham/2.png similarity index 100% rename from docs/UXcham/2.png rename to docs/singleProject/UXcham/2.png diff --git a/docs/UXcham/3.png b/docs/singleProject/UXcham/3.png similarity index 100% rename from docs/UXcham/3.png rename to docs/singleProject/UXcham/3.png diff --git a/docs/UXcham/4.png b/docs/singleProject/UXcham/4.png similarity index 100% rename from docs/UXcham/4.png rename to docs/singleProject/UXcham/4.png diff --git a/docs/UXcham/5.png b/docs/singleProject/UXcham/5.png similarity index 100% rename from docs/UXcham/5.png rename to docs/singleProject/UXcham/5.png diff --git a/docs/UXcham/6.png b/docs/singleProject/UXcham/6.png similarity index 100% rename from docs/UXcham/6.png rename to docs/singleProject/UXcham/6.png diff --git a/docs/UXcham/7.png b/docs/singleProject/UXcham/7.png similarity index 100% rename from docs/UXcham/7.png rename to docs/singleProject/UXcham/7.png diff --git a/docs/UXcham/8.png b/docs/singleProject/UXcham/8.png similarity index 100% rename from docs/UXcham/8.png rename to docs/singleProject/UXcham/8.png diff --git a/docs/UXcham/9.png b/docs/singleProject/UXcham/9.png similarity index 100% rename from docs/UXcham/9.png rename to docs/singleProject/UXcham/9.png diff --git a/docs/singleProject/UXcham/Cham_intro.png b/docs/singleProject/UXcham/Cham_intro.png new file mode 100644 index 0000000..dd7673a Binary files /dev/null and b/docs/singleProject/UXcham/Cham_intro.png differ diff --git a/docs/UXcham/icon.png b/docs/singleProject/UXcham/icon.png similarity index 100% rename from docs/UXcham/icon.png rename to docs/singleProject/UXcham/icon.png diff --git a/docs/singleProject/cham.html b/docs/singleProject/cham.html new file mode 100644 index 0000000..1a29966 --- /dev/null +++ b/docs/singleProject/cham.html @@ -0,0 +1,77 @@ + + + + + + + SafeChem Control + + + + + + +
+ IntroPage.png +
+ +

Design Process

+ +
+
+ Research + Image 1 + + Stakeholder + Image 2 + + User Research + Image 3 + + Analysis + Image 4 + + Concept + Image 5 + + Sketches + Image 6 + + Wireframe + Image 7 + + Final Design + Image 8 + +
+
+ Image 0 +
+
+ + + +
+ +
+ + Watch
Video + + + + + + + + + + + + + + + + + + diff --git a/docs/singleProject/template.css b/docs/singleProject/template.css new file mode 100644 index 0000000..0041928 --- /dev/null +++ b/docs/singleProject/template.css @@ -0,0 +1,229 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + display: grid; + place-content: start center; + background-color: #f7f7f7; /* For browsers that do not support gradients */ + background-image: linear-gradient(to right,#f6f6f7 , #f4f3f2); + font-family: 'Mukta', sans-serif; + line-height: 1; + font-weight: 400; + color: #333; + max-width: 1680px; + margin: 0 auto; +} + +.EcoHBody { + background-image: none; + background-color: #fff; +} + + +/* Intro img */ +.introImg { + width: 70vw; + height:auto; + margin-top: 50px; + margin-bottom: 70px; +} + +h1 { + margin-bottom: 60px; + text-align: center; + color: #6d6ba1; +} + + +/* Image Gallery */ + +.imageGalleryContainer { + position: relative; /* Set to relative to make it the positioning context */ + margin-bottom: 50px; +} + +article { + position: absolute; + top: 12vh; + left: 50%; + transform: translate(-50%); /* Center vertically */ + width: 70vw; + color: #333; + /* */ + display: flex; + justify-content: center; + align-items: center; + +} + +article img { + margin: 0px; + height: 100%; + width: 100%; + padding-bottom: 100px +} + +article h1, +article p { + margin: 10px; +} + +article h1 { + font-size: 1.2rem; +} + + + +article p { + font-size: 0.9rem; + line-height: 1.4; +} + +.g { + width: auto; /* no anim */ + height: 5vh; + display: grid; + grid-auto-flow: column; + grid-auto-rows: 10vh; + place-content: start center; + z-index: 1; + transition: all 1s; + position: relative; + top: 0vh; +} + +.g:hover { + background: linear-gradient(transparent, hsla(0, 0%, 100%, 0.5), transparent); + height: 70vh; + width: 70vw; +} + +.g a { + font: 0.8em monospace; + position: static; + display: block; + width: 8.75vw; + height: 3ch; + display: grid; + place-content: center; + background: hsla(0, 0%, 100%, 0.5); + color: #333; + text-decoration: none; + border-bottom: thin solid #6C6AA1; + box-sizing: border-box; +} + +.gEcoH a { + border-bottom: thin solid #61ADAD; +} + +.gcham a { + border-bottom: thin solid #A84736; +} + +.g a:hover { + background: hsla(0, 0%, 0%, 0.5); + color: #eee; + border-bottom: 0 none; +} + +.g a img { + display: block; + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: auto; + object-fit: cover; + object-position: center; + clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%, 50% 0, 50% 0, 50% 100%, 50% 100%); + transition: clip-path 0.3s ease-in; +} + +.g a:hover img, +.g a img:hover { + clip-path: polygon(50% 0, 0 0, 0 100%, 50% 100%, 50% 0, 100% 0, 100% 100%, 50% 100%); +} + + +/* fx */ +article { + transition: filter 0.5s; +} + +.g:hover + article { + display: none; +} + + +/* Back to home page button */ +.button-container { + position: fixed; + bottom: 20px; + right: 20px; +} + +.button-container button { + border: none; + border-radius: 50%; + width: 80px; + height: 80px; + color: #ffffff; + font-size: 14px; + box-shadow: 0 2.4px 4.8px rgba(0, 0, 0, 0.075); + line-height:120% +} + +.button-container button:hover { + cursor: pointer; +} + +.L-button-container button { + background-color: #6C6AA1; +} + +.L-button-container button:hover { + background-color: #9c9bc3; +} + +.chambtn { + background-color: #a84736; +} + +.C-button-container button:hover { + background-color: #cb503a; +} + +.ecoHBtn { + background-color:#61ADAD +} + +.ecoHBtn hover { + background-color:#90c7c7 + +} + + +.video-button { + position: fixed; + bottom: 130px; + right: 20px; + margin-top: 300px; + /* Button styles */ + display: inline-block; + padding: 10px 20px; + background-color: #a84736; + color: #ffffff; + text-decoration: none; + font-size: 14px; + border-radius: 10px; +} + +.video-button:hover { + background-color: #cb503a; +} \ No newline at end of file diff --git a/docs/singleProject/template.js b/docs/singleProject/template.js new file mode 100644 index 0000000..a8463e4 --- /dev/null +++ b/docs/singleProject/template.js @@ -0,0 +1,3 @@ +function navigateToIndex() { + window.location.href = "../index.html#ProjectEntrance"; +} \ No newline at end of file diff --git a/docs/uxProject.html b/docs/uxProject.html new file mode 100644 index 0000000..bdfa7a2 --- /dev/null +++ b/docs/uxProject.html @@ -0,0 +1,144 @@ + + + + + + + + + + UX project + + +
+ Portfolio + + +
+ + +
+ + + +
+ The image of project title +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/docs/wonderingLibrary.html b/docs/wonderingLibrary.html deleted file mode 100644 index c0e5b7d..0000000 --- a/docs/wonderingLibrary.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - Wondering-Library - - - - - - -
- Image 1 - Image 2 - Image 3 - Image 4 - Image 5 - Image 6 - Image 7 - Image 8 - Image 9 -
- -
- -
- - \ No newline at end of file