Added plantpal project

zoi23333 · Oct 22, 2023 · bb83353 · bb83353
1 parent 2aeb85c
commit bb83353
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 34 deletions.
diff --git a/docs/img/mainpage/PUXPlantpal.png b/docs/img/mainpage/PUXPlantpal.png
diff --git a/docs/index.html b/docs/index.html
@@ -42,9 +42,9 @@ <h1 class = "heading-primary">
             <span id = "ziwei">Ziwei</span>
           </h1>
           <h2 class = "hero-des">
-            Front-end Developer <br/>
-            & <br/>
             UX/UI Designer<br/>
+            & <br/>
+            Front-end Developer<br/>
           </h2>
          </div>
          <div class = "hero-middleblock"></div>

diff --git a/docs/singleProject/EcoHarvest.html b/docs/singleProject/EcoHarvest.html
@@ -56,30 +56,4 @@ <h1 style="color:#61ADAD">Design Process</h1>
   <script src="template.js">
   </script>
 </body>
-</html>
-
-
-
-
-
-
-<!-- 
-
-<body>
-  <div class="image-container">
-      <img class = 'img' src="UXEcoHarvest/0.png" alt="Image 1">
-      <img class = 'img' src="UXEcoHarvest/1.png" alt="Image 2">
-      <img class = 'img' src="UXEcoHarvest/2.png" alt="Image 3">
-      <img class = 'img' src="UXEcoHarvest/3.png" alt="Image 4">
-      <img class = 'img' src="UXEcoHarvest/4.png" alt="Image 5">
-      <img class = 'img' src="UXEcoHarvest/5.png" alt="Image 6">
-      <img class = 'img' src="UXEcoHarvest/6.png" alt="Image 7">
-      <img class = 'img' src="UXEcoHarvest/7.png" alt="Image 8">
-      <img class = 'img' src="UXEcoHarvest/8.png" alt="Image 9">
-  </div>
-
-  <div class="button-container">
-    <button type="button" onclick="navigateToIndex()">More projects</button>
-</div>
-</body>
-</html> -->
+</html>
diff --git a/docs/singleProject/PlantPal.html b/docs/singleProject/PlantPal.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>EcoHarvest</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="template.css">
+</head>
+<body class="EcoHBody">
+
+  <div>
+    <img class="introImg" src="PlantPal/Plantpal-intro.png" alt="IntroPage.png">
+  </div>
+
+  <div class="button-container plant-button-container">
+    <button class="PlantBtn" type="button" onclick="navigateToIndex()">More projects</button>
+</div>
+
+
+  <script src="template.js">
+  </script>
+</body>
+</html>
+
+
+
diff --git a/docs/singleProject/PlantPal/Plantpal-intro.png b/docs/singleProject/PlantPal/Plantpal-intro.png
diff --git a/docs/singleProject/template.css b/docs/singleProject/template.css
@@ -191,6 +191,14 @@ article {
   background-color: #9c9bc3;
 }
 
+.plant-button-container button {
+  background-color: #3F874E;
+}
+
+.plant-button-container button:hover {
+  background-color: #5bbf71;
+}
+
 .chambtn {
   background-color: #a84736;
 }
@@ -199,6 +207,7 @@ article {
   background-color: #cb503a;
 }
 
+
 .ecoHBtn {
   background-color:#61ADAD
 }

diff --git a/docs/uxProject.html b/docs/uxProject.html
@@ -45,11 +45,34 @@
         <ul class = "project-list">
 
           <li class ="project-block project-block--1">
+            <div class="card-container">
+             <div class = "card-icon card-icon-single">
+               <img class="icon-img" src="img/mainpage/star.png" alt="Star Icon">
+             </div>
+             <a href="singleProject/PlantPal.html">
+               <div class = "image-container">
+                 <div class = "image-container-bg">
+                 <img class="projectBG-img" src="img/mainpage/projectBG.png" alt="The image of project background">
+                 <img class="projectBG-img-hover" src="img/mainpage/projectBGHover.png" alt="The image of project background">
+                 </div>
+               </div>
+               <div class="overlay">
+                 <div class="project-info-box">
+                   <h3 class= "project-name">PlantPal</h3>
+                   <p class = "project-des">An App to guide and reminder<br/>users to care for their plants</p>
+                   <img class="project-img" src="img/mainpage/PUXPlantpal.png" alt="The image of project">
+                   <p class = "project-language">- UX & UI Design -<br/><span class = base>- Course based -</span></p>
+                 </div>
+               </a>
+               </div>
+           </li>
+
+          <li class ="project-block project-block--2">
             <a href="https://www.youtube.com/watch?v=nTPZpB59R3A&ab_channel=VictoriaGrut">
             <div class="card-container">
               <div class = "card-icon">
                 <img class="icon-img icon-video" src="img/mainpage/videob.png" alt="Star Icon">
-                <img class="icon-img icon-star"  src="img/mainpage/star.png" alt="Star Icon">
+                <!-- <img class="icon-img icon-star"  src="img/mainpage/star.png" alt="Star Icon"> -->
               </div>
               <div class = "image-container">
                 <div class = "image-container-bg">
@@ -62,13 +85,15 @@
                   <h3 class= "project-name">CircHeat</h3>
                   <p class = "project-des">A sustainable solution for a<br/> heating system manufacturer</p>
                   <img class="project-img" src="img/mainpage/PUX1.png" alt="The image of project">
-                  <p class = "project-language">- Holistic Design -<br/><span class = base>- Collab course with company -</span></p>
+                  <p class = "project-language">- Holistic & UI Design -<br/><span class = base>- Collab course with company -</span></p>
                 </div>
               </div>
             </div>
            </a>
           </li>
-          <li class ="project-block project-block--2">
+
+
+          <li class ="project-block project-block--3">
            <div class="card-container">
             <div class = "card-icon card-icon-single">
               <img class="icon-img" src="img/mainpage/star.png" alt="Star Icon">
@@ -91,7 +116,7 @@ <h3 class= "project-name">Wondering Library</h3>
               </div>
           </li>
 
-          <li class ="project-block project-block--3">
+          <li class ="project-block project-block--4">
        <div class="card-container">
         <a href="singleProject/EcoHarvest.html">
               <div class = "image-container">
@@ -110,7 +135,7 @@ <h3 class= "project-name">EcoHarvest</h3>
             </a>
           </div>
 
-          </li class ="project-block project-block--4">
+          </li class ="project-block project-block--5">
           <li class ="project-block">
  <div class="card-container">
   <div class = "card-icon card-icon-single">