added two projects, more added soon

NinaZhang04 · Dec 25, 2023 · c4f146f · c4f146f
1 parent bd013ef
commit c4f146f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 51 deletions.
diff --git a/index.html b/index.html
@@ -59,37 +59,31 @@ <h1>Hi! My name is Nina Zhang</h1>
         <h1 class="sub-title"><br>Projects</h1>
         <br>
         <div class="project-list">
-            <div class="project-item">
-                <a href="https://github.com/NinaZhang04/BeaverVolunteerApp" target="_blank">
-
-                    <div class="overlay-title">Beaver Volunteer App</div>
-                    <div class="overlay-text">
-                        <ul>
-                            <li><p>Android app that helps high school students find volunteer opportunities</p></li>
-                            <li><p>Led and directed two other members to develop the front end of the app</p></li>
-                            <li><p>Used Google Firebase store volunteer opportunities</p></li>
-                            <li><p>Android app developed for a non-profit organization - BeaverWithU</p></li>
-                        </ul>
-                    </div>
-
-                </a>
-            </div>
-
-            <div class="project-item">
-                <a href="https://github.com/NinaZhang04/StudyBuddy" target="_blank">
-
-                    <div class="overlay-title">StudyBuddy</div>
-                    <div class="overlay-text">
-                        <ul>
-                            <li>Android app that helps high school students find volunteer opportunities</li>
-                            <li>Led and directed two other members to develop the front end of the app </li>
-                            <li>Used Google Firebase store volunteer opportunities</li>
-                            <li>Android app developed for a non-profit organization - BeaverWithU</li>
-                        </ul>
-                    </div>
-
-                </a>
-            </div>
+            <a href="https://github.com/NinaZhang04/BeaverVolunteerApp" target="_blank">
+                <div class="project-item">
+                        <div class="overlay-title">Beaver Volunteer App</div>
+                        <div class="overlay-text">
+                            <ul>
+                                <li><p>Android app that helps high school students find volunteer opportunities</p></li>
+                                <li><p>Led and directed two other members to develop the front end of the app</p></li>
+                                <li><p>Used Google Firebase store volunteer opportunities</p></li>
+                                <li><p>Android app developed for a non-profit organization - BeaverWithU</p></li>
+                            </ul>
+                        </div>  
+                </div>
+            </a>  
+            <a href="https://github.com/NinaZhang04/StudyBuddy" target="_blank"> 
+                <div class="project-item" href="https://github.com/NinaZhang04/BeaverVolunteerApp" target="_blank">
+                        <div class="overlay-title">StudyBuddy</div>
+                        <div class="overlay-text">
+                            <ul>
+                                <li><p>Make studying more efficient with a Pomodoro clock, To-do list, and a calendar</p></li>
+                                <li><p>Leveraged JavaScript and JSON objects to store and display information stored locally</p></li>
+                                <li><p>Integrated AWS DynamoDB to store and read information from online</p></li>
+                            </ul>
+                        </div>
+                </div>
+            </a>
         </div>
     </div>
 </div>

diff --git a/style.css b/style.css
@@ -5,7 +5,7 @@
     --darkpurple: #1C142C;
     --skyblue: #149FB2;
     --bluecyan: #4EB6B5;
-    --beige: #FAF0E6;
+    --greybeige: #F5F4F2;
     --textcolor: var(--darkpurple);
     --hovercolor: var(--skyblue);
 }
@@ -128,31 +128,39 @@ nav ul li.header-name a{
 .project-list div {
     max-width: 100%;
     height: auto;
-    background: var(--beige);
 }
 
-.overlay-title {
-    position: absolute;
-    top: 20%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white; /* Text color */
-    font-size: 20px; /* Text size */
-    text-align: center;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Optional text shadow */
+.project-list a {
+    text-decoration: none;
 }
 
-.overlay-text {
-    color: var(--redpink); 
-    font-size: 16px; /* Text size */
-
+.project-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center; 
+    padding: 40px;
+    max-width: 100%;
+    height: auto;
+    border: solid var(--redpink) 2px;
+    background: var(--greybeige);
+    border-radius: 20px;
 }
 
 
-.overlay-text ul li p{
-    text-decoration: none;
-    color: var(--redpink); 
-    font-size: 16px; /* Text size */
-
+
+.overlay-title {
+    color: var(--redpink);
+    font-size: 20px;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 10px;
+    margin-top: -10px;
+}
+
+.overlay-text ul {
+    color: var(--darkpurple);
+    font-size: 16px;
 }