added links to projects

j0nnn · Aug 11, 2022 · 73301e7 · 73301e7
1 parent b73b959
commit 73301e7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -172,13 +172,15 @@ <h2 class="section__title">Personal Projects</h2>
       <div class="project">
         <div class="project__card" id="animation__container1">
           <div>
-            <h4 id="project__name">AnovaLabs</h4>
+            <h4 id="anovalabs">AnovaLabs</h4>
             <div class="project__content">
               <img id="project__image" style="height: 140px;" src="images/anova.png" />
             </div>
+            <i class="fas fa-chevron-down" style="margin-top: 30px;"></i>
           </div>
         </div> 
-        <div class="project__card none" id="animation__container2">
+        <div class="project__description none" id="animation__container2">
+          <i class="fas fa-chevron-up" style="margin-bottom: 10px;"></i>
           <p class="project__desc">A web-app currently used by 6 under-served school districts in the East Bay. Current provides 100+ students in ANova mentorship programs with access to curated computer science content, and keeps track of attendance, student notes, and past lessons.</p>
           <a href="https://github.com/ANovaBerkeley/anovalabs" target="_blank" class="btn--icon link--icon">
             <i class="fab fa-github"></i>
@@ -187,13 +189,15 @@ <h4 id="project__name">AnovaLabs</h4>
         </div> 
         <div class="project__card" id="animation__container3">
           <div>
-            <h4 id="project__name">Venmo-Integration</h4>
+            <h4 id="venmo-integration">Venmo-Integration</h4>
             <div class="project__content">
               <img id="project__image" style="height: 140px;" src="images/tasa-logo.png" />
             </div>
+            <i class="fas fa-chevron-down" style="margin-top: 30px;"></i>
           </div>
         </div> 
-        <div class="project__card none" id="animation__container4">
+        <div class="project__description none" id="animation__container4">
+          <i class="fas fa-chevron-up" style="margin-bottom: 10px;"></i>
           <p class="project__desc">A web-portal for the Taiwanese American Student Association that queries and sorts through Venmo transactional data using Venmo API. Allows for keyword and date range searches that would filter the data. Saved the Treasurer 20+ hours of manual labor.</p>
           <a href="https://github.com/j0nnn/Venmo-Integration" target="_blank" class="btn--icon link--icon">
             <i class="fab fa-github"></i>
@@ -202,14 +206,16 @@ <h4 id="project__name">Venmo-Integration</h4>
         </div> 
         <div class="project__card" id="animation__container5">
           <div>
-            <h4 id="project__name">Java VCS</h4>
+            <h4 id="java-vcs">Java VCS</h4>
             <div class="project__content">
               <img id="project__image" style="height: 140px;" src="images/git-logo.svg" />
             </div>
+            <i class="fas fa-chevron-down" style="margin-top: 30px;"></i>
           </div>
         </div>
-        <div class="project__card none" id="animation__container6">
-          <p class="project__desc">A version control system similar to that of Git. Implemented commands such as .add, .commit, .branch, .checkout, .merge, etc.. Utilized OOP to keep track of the relationship between commits and files that are tracked. Utilized hash functions to ensure commit uniqueness.</p>
+        <div class="project__description none" id="animation__container6">
+          <i class="fas fa-chevron-up" style="margin-bottom: 10px;"></i>
+          <p class="project__desc">A version control system similar to that of Git. Implemented commands such as .add, .commit, .branch, .checkout, .merge, etc.. Utilized OOP to keep track of the relationship between commits and files that are tracked. Used hashes to ensure commit uniqueness.</p>
           <a href="https://github.com/j0nnn/Gitlet" target="_blank" class="btn--icon link--icon">
             <i class="fab fa-github"></i>
           </a>

diff --git a/styles.css b/styles.css
@@ -35,7 +35,8 @@ body {
   --clr-project-stack: rgb(150, 150, 150);
   --clr-primary: #2978b5;
   --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-  --darker-shadow: rgba(189, 82, 255, 0.2) 0px 7px 29px 0px;
+  --darker-shadow--card: rgba(189, 82, 255, 0.2) 0px 7px 29px 0px;
+  --darker-shadow--description: rgba(76, 45, 255, 0.2) 0px 7px 29px 0px;
 }
 
 .dark {
@@ -453,7 +454,23 @@ main {
 }
 
 .project__card {
-  padding: 30px;
+  padding: 30px 30px 0 30px;
+  margin: 0 10px;
+  text-align: center;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 300px;
+  width: 25%;
+  margin-bottom: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.project__description {
+  padding: 15px 30px 30px 30px;
   margin: 0 10px;
   text-align: center;
   box-shadow: var(--shadow);
@@ -469,7 +486,11 @@ main {
 }
 
 .project__card:hover {
-  box-shadow: var(--darker-shadow);
+  box-shadow: var(--darker-shadow--card);
+}
+
+.project__description:hover {
+  box-shadow: var(--darker-shadow--description);
 }
 
 .fade {
@@ -511,7 +532,7 @@ main {
 }
 
 .project__desc {
-  font-size: 13px;
+  font-size: 12px;
 }
 
 .project__links {