From 5754e7acd0c828501fc206ef909b5a641ef64ff1 Mon Sep 17 00:00:00 2001
From: Akshar Patel <aksharcommit@gmail.com>
Date: Fri, 6 Sep 2024 16:28:01 -0400
Subject: [PATCH] feat: add projects section

Add an area to display all projects

---

* Closes #7

---
---
 index.html               |  69 ++++++++++++++++++-
 src/assets/css/style.css | 143 ++++++++++++++++++++++++++++++++++++++-
 2 files changed, 206 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 3445aed..4d0be2b 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     
     <header class="header">
       <a href="#" class="logo">Akshar</a>
-      <i class="fa-solid fa-bars" class="menu-icon"></i>
+      <i class="fa-solid fa-bars" id="menu-icon"></i>
       <nav class="navbar">
         <a href="#home" class="active">Home</a>
         <a href="#projects">Projects</a>
@@ -32,8 +32,71 @@ <h3 class="typing-text">I'm a <span class="typing-span"></span></h3>
         <div class="social-icon">
           <a href="#"><i class="fa-brands fa-linkedin"></i></a>
           <a href="#"><i class="fa-brands fa-square-github"></i></i></a>
-        </div>
-        
+        </div>   
+      </div>
+    </section>
+
+
+    <section class="projects" id="projects">
+      <h2 class="heading">Projects</h2>
+      <div class="projects-container">
+        <a href="https://github.com/ourPLCC" target="_blank" rel="noopener noreferrer"> <div class="project-box">
+          <div class="project-info">
+            <h4>PLCC</h4>
+            <ul>
+              <li>A Programming Language Compiler Compiler</li>
+              <li>Introduced a fourth semantics section that accepts user-written Python code</li>
+              <li>Implemented comprehensive tests for all 32 predefined languages using bats</li>
+              <li>Optimized testing efficiency through GitHub Actions pipeline integration</li>
+              <li>Expanded the parser to generate files in Java and Python</li>
+              <li>Deployed a Dockerized testing environment for streamlined testing processes</li>
+            </ul>
+          </div>
+        </div></a>
+
+        <a href="https://github.com/AksharP5/GetSpotifyStats" target="_blank" rel="noopener noreferrer"> <div class="project-box">
+          <div class="project-info">
+            <h4>Get Spotify Stats</h4>
+            <ul>
+              <li>A Flask Web App for getting Spotify stats</li>
+              <li>Developed a full-stack web application using Flask</li>
+              <li>Leveraged the Spotify API to deliver real-time account statistics to users</li>
+              <li>Automated the generation of a personalized Discover Weekly Homepage on each visit, enhancing user engagement
+                and satisfaction</li>
+              <li>Implemented features displaying users' recent songs, top songs, top artists, and recommended songs across various time frames for a comprehensive overview</li>
+              <li>Displayed real-time Spotify statistics and personalized recommendations for users</li>
+            </ul>
+          </div>
+        </div></a>
+
+        <a href="https://github.com/AksharP5/portfolio-react" target="_blank" rel="noopener noreferrer"> <div class="project-box">
+          <div class="project-info">
+            <h4>React Portfolio Website</h4>
+            <ul>
+              <li>A Portfolio Website In React</li>
+              <li>Developed a modern and responsive portfolio website using React for an enhanced user experience</li>
+              <li>Enhanced user interface with custom React components for a unique design</li>
+              <li>Implemented engaging and interactive features by incorporating letter animations on hover in the portfolio website</li>
+              <li>Implemented a captivating visual element in the form of a spinning cube on the portfolio website</li>
+              <li>Integrated a contact form for easy communication and collaboration opportunities</li>
+            </ul>
+          </div>
+        </div></a>
+
+        <a href="https://github.com/AksharP5" target="_blank" rel="noopener noreferrer"> <div class="project-box">
+          <div class="project-info">
+            <h4>Top Songs 2023 Database</h4>
+            <ul>
+              <li>Created a MySQL Database For the Top Songs of 2023</li>
+              <li>Created relational tables for efficient data management and linking</li>
+              <li>Created a function to calculate the age of artists, handling both living and deceased cases</li>
+              <li>Implemented and tested stored procedures for dynamic querying of song and artist information</li>
+              <li>Developed logical schemas to outline data structures and relationships between all tables</li>
+              <li>Created views to simplify access to categorized data, such as artist demographics and song genres</li>
+            </ul>
+          </div>
+        </div></a>
+
       </div>
     </section>
     
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f4a48b8..8707595 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -248,13 +248,13 @@ span {
         content: 'Software Engineer';
     }
     41%, 60% {
-        content: 'Critical Thinker';
+        content: 'Student';
     }
     61%, 80% {
-        content: 'Problem Solver';
+        content: 'Web Developer';
     }
     81%, 100% {
-        content: 'Leader';
+        content: 'Software Engineer';
     }
 }
 
@@ -266,3 +266,140 @@ span {
         width: calc(100% + 8px);
     }
 }
+@media (max-width: 1000px) {
+    .home {
+        gap: 4rem;
+    }
+}
+
+@media (max-width: 995px) {
+    .home {
+        flex-direction: column;
+        margin: 5rem 4rem;
+    }
+    .home .home-content h3 {
+        font-size: 2.5rem;
+    }
+    .home-content h1 {
+        font-size: 5rem;
+    }
+    .home-img img {
+        width: 70vw;
+        margin-top: 4rem;  
+    }
+
+}
+
+/* Projects Section */
+
+.projects {
+    background: var(--second-bg-color);
+}
+
+.heading {
+    text-align: center;
+    font-size: 4.5rem;
+    margin-bottom: 2rem;
+    vertical-align: middle;
+}
+
+.projects-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+    gap: 3.5rem;
+
+}
+
+.project-box {
+    background-color: var(--main-color);
+    border-radius: 3rem;
+    height: 100%;
+    border-radius: 3rem;
+    cursor: pointer;
+    transition: 0.3s ease;
+    padding: 2rem;
+    display: grid;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.project-box:hover {
+    background: transparent;
+    color: var(--main-color);
+    transform: scale(1.03);
+    border: 1px solid var(--main-color);
+}
+
+.project-box .project-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    width: 100%;
+    padding: 1rem;
+}
+
+.project-info h4 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.projects-container a {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.project-info ul{
+    font-size: 1.4rem;
+    font-weight: 400;
+    margin: 0 auto;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+    max-width: 90%;
+    
+}
+.project-info ul li {
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+
+
+
+@media (max-width: 991px) {
+    section {
+        padding: 10rem 3% 2rem;
+    }
+    .projects {
+        padding-bottom: 7rem;
+    }
+}
+
+@media (max-width: 895px) {
+    .projects h2 {
+        margin-bottom: 3rem;
+    }
+    .projects-container {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}
+
+@media (max-width: 600px) {
+    .heading {
+        font-size: 3.5rem;
+    }
+    .project-info h4 {
+        font-size: 2.2rem;
+    }
+    .project-info ul {
+        font-size: 1.2rem;
+    }
+    .project-info ul li {
+        margin-bottom: 1rem;
+    }
+}
+