update

css/style.css

@@ -415,18 +415,6 @@ body, html {
 }
 
 
-.social-media-box::before {
-  content: '';
-  position: relative;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  width: 1200px;
-  height: 10%;
-  backdrop-filter: blur(5px);
-  border-top: 2px solid rgba(56, 188, 253, 0.3);
-}
 
 .social-media-box ul {
   position: relative;
@@ -785,8 +773,8 @@ body, html {
   text-align: center;
   color: #a4508b;
   font-size: 50px;
-  padding-top: 20px;
-  word-spacing: 20px;
+   word-spacing: 20px;
+   margin-bottom: 1em;
 }
 
 .project {
@@ -810,23 +798,47 @@ body, html {
   display: flex;
   text-align: center;
   margin-bottom: 1em;
+  margin-top: 2em;
 }
 
 .digest {
 background-color: rgba(164, 80, 139, 0.7);
 background-image: linear-gradient(0deg, rgba(95, 10, 135, 0.7) 0%, rgba(164, 80, 139, 0.7) 100%);
   display: inline-block;
   width: 35%;
-  height: 30vh;
+  height: 40vh;
   border-radius: 1em;
-  margin-right: 20px;
+  margin-right: 1.5em;
 }
 
-#digest1{
-  background-image:
-  url('../img/pp.png');
-  background-size: contain;
-  background-repeat: no-repeat;
+.digest h4{
+  padding: 0 1em 1em 1em;
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.3em;
+}
+
+#digest1, #digest2{
+  transition: transform 0.3s ease;
+}
+
+#digest1:hover{
+  transform: scale(1.08);
+}
+
+#digest2:hover{
+  transform: scale(1.08);
+}
+
+#digest1-icon{
+  width: 10em;
+  height: 10em;
+}
+
+#digest2-icon{
+  width: 10em;
+  height: 10em;
+  margin-top: 0.3em;
 }
 
 .project h3{
@@ -837,6 +849,7 @@ background-image: linear-gradient(0deg, rgba(95, 10, 135, 0.7) 0%, rgba(164, 80,
   color: white;
   font-size: 28px;
   margin-bottom: 8px;
+  margin-top: 2em;
 }
 
 .project h6{

index.html

@@ -286,13 +286,15 @@ <h6 class="progress-text">10%</h6>
       <h5>Projects</h5>
       <div class="project-digest">
         <div class="digest" id="digest1">
-          <p>Digest1</p>
+          <img id="digest1-icon" src="./img/pp.png">
+          <h4>Automated PowerPoint Generator powered by GPT-3.5 turbo</h4>
         </div>
-        <div class="digest">
-          <p>Digest2</p>
+        <div class="digest" id="digest2">
+          <img id="digest2-icon" src="./img/world-map.png">
+          <h4>GlobeMarks: Travel Tracker FullStack Project</h4>
       </div>
       </div>
-      <h3>PowerPoint Generator powered by GPT-3.5-turbo</h3>
+      <h3>Automated PowerPoint Generator powered by GPT-3.5-turbo</h3>
       <h6><img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python"> <img src="https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white" alt="Flask"> <img src="https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E" alt="JavaScript"> <img src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5"> <img src="https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3"></h6>
       <p>This project is a web application that allows users to generate PowerPoint presentations 
         based on text inputs. The application uses the GPT-3 language model developed by OpenAI to create content for the slides.</p>