✨ New Feature : Add project section

This feature adds project section in the portfolio.

Contributor: @Kapileswar-Moharana 
Closes: #15

css/style.css

@@ -397,7 +397,120 @@ a:visited {
     max-height: 40px;
   }
 }
+/* Project Section */
+.projects-section {
+  position: relative;
+  text-align: center;
+  background-color: none; /* Add your desired background color */
+  padding: 150px; /* Adjust the top and bottom padding as needed */
+}
+
+.project-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px /* Adjust the gap as needed */
+
+}
+
+.project {
+  width: calc(30% - 10px); /* Updated width for three smaller projects per row with reduced gap */
+  text-align: center;
+  border: 1px solid #ccc; /* Add any border or styling for individual project containers */
+  padding: 20px;
+  border-radius: 2rem; /* Add rounded edges */
+  overflow: hidden; /* Hide overflowing content */
+}
+
+.project-img {
+  width: 90%; /* Adjust the image width as needed */
+  height: 90%; /* Maintain the aspect ratio of the images */
+  border-radius: 2rem; /* Add rounded edges to the images */
+}
+
+.project-title {
+  font-size: 1.5rem;
+  margin: 10px 0;
+  color: black; /* Set the desired text color */
+}
+
+.project-buttons {
+  color: black;
+  border-color: rgb(163, 163, 163);
+  display: flex;
+  justify-content: center;
+  gap: 10px; /* Adjust the gap between buttons as needed */
+}
+.button-container {
+  display: flex;
+  gap: 10px; /* Adjust the gap between buttons as needed */
+
+}
+.project-btn {
+  top: 10px;
+  background-color: #01b3af;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 2rem;
+  cursor: pointer;
+  transition: 0.2s;
+
+}
+/* Add a hover effect to match the portfolio theme */
+.project-btn:hover {
+
+  color: #272341;
+  transform: translateY(-2px);
+}
+/* Add hover transition for the buttons */
+.project-btn {
+  transition: background-color 0.3s;
+}
+
+/* Add hover effect for the project containers */
+.project:hover {
+  transform: scale(1.05); /* Adjust the scaling factor as desired */
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow on hover */
+}
+/* About Section */
+.projects-section h1 {
+  font-family: Montserrat; /* Use the same font as the "About" section */
+  font-weight: 700; /* Apply the desired font weight */
+  font-size: 55px; /* Adjust the font size as needed */
+  color: #272341; /* Set the desired text color */
+  margin-top: 20px; /* Add some top margin to align with other text */
+}
 
+.projects-section .titleGap {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 25px;
+  background-color: none;
+}
+
+.projects-section .titleSmall {
+  display: flex;
+  top: 0;
+  position: relative;
+  width: 750px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 57.5px;
+  align-items: center;
+  justify-content: center;
+  font-family: Poppins;
+  font-weight: 300;
+  font-size: 18px;
+  background-color: none;
+  text-align: center;
+  color: #96989b;
+  flex-wrap: wrap;
+  letter-spacing: 0.3px;
+}
 /*================*/
 /*===Projects===*/
 /*===============*/

index.html

@@ -47,6 +47,51 @@
       </div>
       <div class="bottomC"></div>
     </div>
+    <!-- Project Section -->
+<section id="projects" class="projects-section">
+  <h1 class="sub-title">PROJECTS</h1>
+  <div class="titleGap"></div>
+  <div class="titleSmall">Browse My Recent</div>
+  <div class="titleGap"></div>
+  <div class="project-container">
+    <!-- Project 1 -->
+    <div class="project">
+      <img src="./assets/project-1.png" alt="Project 1" class="project-img" />
+      <h2 class="project-title">Project One</h2>
+      <div class="project-buttons">
+        <div class="button-container">
+          <button class="project-btn" onclick="location.href='https://github.com/'">Github</button>
+          <button class="project-btn" onclick="location.href='https://github.com/'">Live Demo</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project 2 -->
+    <div class="project">
+      <img src="./assets/project-2.png" alt="Project 2" class="project-img" />
+      <h2 class="project-title">Project Two</h2>
+      <div class="project-buttons">
+        <div class="button-container">
+          <button class="project-btn" onclick="location.href='https://github.com/'">Github</button>
+          <button class="project-btn" onclick="location.href='https://github.com/'">Live Demo</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Project 3 -->
+    <div class="project">
+      <img src="./assets/project-3.png" alt="Project 3" class="project-img" />
+      <h2 class="project-title">Project Three</h2>
+      <div class="project-buttons">
+        <div class="button-container">
+          <button class="project-btn" onclick="location.href='https://github.com/'">Github</button>
+          <button class="project-btn" onclick="location.href='https://github.com/'">Live Demo</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
     <!-- Back to Top Button -->
     <button id="back-to-top" class="button">
       <ion-icon name="chevron-up-outline"></ion-icon>