add Resolve

index.html

@@ -366,12 +366,12 @@ <h3>Leadership</h3>
       />
     </section>
     <section id="projects">
+      <div class="project-title">
       <p class="section__text__p1">Browse My Recent</p>
       <h1 class="title">Projects</h1>
-      <div class="experience-details-container">
-        <div class="about-containers">
-          <div class="details-container color-container">
-          <div class="center-project">
+    </div>
+      <div class="project-container">
+          <div class="grid-item">
             <div class="article-container">
               <img
                 src="./assets/airbnb.jpeg"
@@ -395,8 +395,7 @@ <h2 class="experience-sub-title project-title">AirBNB Data Analysis</h2>
               </button>
             </div>
           </div>
-          </div>
-          <div class="details-container color-container">
+          <div class="grid-item">
             <div class="article-container">
               <img
                 src="./assets/cc.png"
@@ -420,8 +419,25 @@ <h2 class="experience-sub-title project-title">Takeoff Boost ConstructConnect</h
               </button>
             </div>
           </div>
-          <div class="details-container color-container">
-            <div class="center-project">
+          <div class="grid-item">
+            <div class="article-container">
+              <img
+                src="./assets/Resolve.png"
+                alt="Project 3"
+                class="project-img"
+              />
+            </div>
+            <h2 class="experience-sub-title project-title">Resolve Android Application</h2>
+            <div class="btn-container">
+              <button
+                class="btn btn-color-2 project-btn"
+                onclick="location.href='https://github.com/wnorowskie/Resolve-Android-Application'"
+              >
+                Github
+              </button>
+            </div>
+          </div>
+          <div class="grid-item">
             <div class="article-container">
               <img
                 src="./assets/portfolio.png"

mediaqueries.css

@@ -1,4 +1,4 @@
-@media screen and (max-width: 1400px) {
+@media screen and (max-width: 1700px) {
   #profile {
     height: 83vh;
     margin-bottom: 6rem;
@@ -7,7 +7,7 @@
     height: fit-content;
     justify-content: flex;
   }
-  .about-containers {
+  .about-containers, .project-container {
     flex-wrap: wrap;
   }
   #contact,
@@ -40,7 +40,7 @@
     height: fit-content;
     justify-content: flex;
   }
-  .section-container {
+  .section-container, .project-container {
     display: block;
     height: fit-content;
     justify-content: flex;
@@ -131,3 +131,9 @@
     width: 100%;
   }
 }
+
+@media screen and (min-width: 800px) and (max-height: 700px) {
+  #section, #contact, #profile, #about, #projects, .dnav, #hamburger-nav, #experience, #footer {
+    margin: 0 10;
+  }
+}

style.css

@@ -175,7 +175,7 @@ section {
   justify-content: center;
   position: relative;
   gap: 5rem;
-  height: 80vh;
+  height: 86vh;
   padding-top: 2vh;
   margin: 0 5rem;
   box-sizing: border-box;
@@ -318,6 +318,13 @@ p {
   height: 80%;
 }
 
+.about-containersa {
+  height: 50%;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+
 .about-details-container {
   position: relative;
   justify-content: center;
@@ -413,6 +420,7 @@ p {
   flex-direction: row;
   gap: 2.5rem;
   justify-content: space-around;
+
 }
 
 article {
@@ -433,18 +441,52 @@ article .icon {
 /* PROJECTS SECTION */
 
 #projects {
-  position: relative;
+  height: 96vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.projects-title {
+  margin: 0 auto;
+
 }
 
+.project-container {
+  flex-grow: 1;
+  display: grid;
+  flex-direction: column;
+  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Use minmax(0, 1fr) for better responsiveness */
+  max-height: 100%;
+  gap: 10px; /* Reduce the gap for a more compact layout */
+  height: 50%;
+  place-items: center;
+
+}
+
+.grid-item {
+  width: 100%; /* Set a default width, can be adjusted based on your design */
+  max-width: 500px; /* Set a maximum width if needed */
+  margin: 1rem auto;
+  border: #7d212b 0.5rem solid;
+  border-color: #7d212b;
+  border-radius: 2rem;
+  background: rgb(250, 250, 250);
+  padding: 1rem;
+  text-align: center;
+  justify-content: center;
+  flex-direction: column;
+}
 .color-container {
   border-color: #7d212b;
   background: rgb(250, 250, 250);
 }
 
 .project-img {
   border-radius: 2rem;
-  width: 90%;
-  height: 100%;
+  width: 30%;
+  height: 30%;
 }
 
 .project-title {