added more projects and changed styling to allow for future project a…

…dditions, also updated resume

index.html

@@ -68,6 +68,7 @@ <h1 class="title">Matthew Bernard</h1>
         </div>
       </div>
     </section>
+
     <section id="about">
       <p class="section__text__p1">Get To Know More</p>
       <h1 class="title">About Me</h1>
@@ -91,14 +92,14 @@ <h3>Education</h3>
           <div class="text-container">
             <p>
               Hello, I am a UC San Diego Computer Science graduate. Leveraging my academic background, I've had the
-              privilege of diving into Application Development and UX/UI during internships, particularly utilizing
-              industry-standard tools like Figma and React. I'm all about combining software engineering practices with
+              privilege of diving into Software Development and UX/UI during internships, particularly utilizing
+              industry-standard tools like React and Figma. I'm all about combining software engineering practices with
               user-friendly design to make great software. Looking forward to working on exciting projects!
             </p>
           </div>
         </div>
       </div>
-      <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#experience'" />
+      <!-- <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#experience'" /> -->
     </section>
     <section id="experience">
       <p class="section__text__p1">Explore My</p>
@@ -201,18 +202,22 @@ <h3>C++</h3>
           </div>
         </div>
       </div>
-      <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#projects'" />
+      <!-- <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#projects'" /> -->
     </section>
     <section id="projects">
       <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="project-container color-container">
             <div class="article-container">
               <img src="./assets/booktracker.jpg" alt="Project 1" class="project-img" />
             </div>
-            <h2 class="experience-sub-title project-title">Book Tracker App</h2>
+            <h2 class="project-title">Book Tracker App</h2>
+            <p>
+              Vanilla HTML/CSS/JS <br />
+              local-first CRUD progressive web app
+            </p>
             <div class="btn-container">
               <a href="https://github.com/mibernard/book-crud-app" target="_blank"
                 ><button class="btn btn-color-2 project-btn">Github</button></a
@@ -224,11 +229,27 @@ <h2 class="experience-sub-title project-title">Book Tracker App</h2>
               >
             </div>
           </div>
-          <div class="details-container color-container">
+          <div class="project-container color-container">
+            <div class="article-container">
+              <img src="./assets/project-4.jpg" alt="Project 4" class="project-img" />
+            </div>
+            <h2 class="project-title">Event Management Application</h2>
+            <p>Node.js, Next.js, TypeScript, TailwindCSS, Shadcn, uploadthing, MongoDB, Clerk, Stripe</p>
+            <div class="btn-container">
+              <a href="https://github.com/mibernard/event-app" target="_blank"
+                ><button class="btn btn-color-2 project-btn">Github</button></a
+              >
+              <a href="https://event-app-six-chi.vercel.app/" target="_blank"
+                ><button class="btn btn-color-2 project-btn">Live Demo</button></a
+              >
+            </div>
+          </div>
+          <div class="project-container color-container">
             <div class="article-container">
               <img src="./assets/socialmedia.jpg" alt="Project 2" class="project-img" />
             </div>
-            <h2 class="experience-sub-title project-title">Instagram Clone</h2>
+            <h2 class="project-title">Instagram Clone</h2>
+            <p>React.js, Chakra UI, Firebase, Zustand</p>
             <div class="btn-container">
               <a href="https://github.com/mibernard/social-media-app" target="_blank"
                 ><button class="btn btn-color-2 project-btn">Github</button></a
@@ -238,11 +259,13 @@ <h2 class="experience-sub-title project-title">Instagram Clone</h2>
               >
             </div>
           </div>
-          <div class="details-container color-container">
+
+          <div class="project-container color-container">
             <div class="article-container">
               <img src="./assets/contactbook.jpg" alt="Project 3" class="project-img" />
             </div>
-            <h2 class="experience-sub-title project-title">Contact Manager App</h2>
+            <h2 class="project-title">Contact Manager App</h2>
+            <p>React.js, Bootstrap, React Router, Axios</p>
             <div class="btn-container">
               <a href="https://github.com/mibernard/Contact-Book" target="_blank"
                 ><button class="btn btn-color-2 project-btn">Github</button></a
@@ -252,9 +275,24 @@ <h2 class="experience-sub-title project-title">Contact Manager App</h2>
               >
             </div>
           </div>
+          <div class="project-container color-container">
+            <div class="article-container">
+              <img src="./assets/project-5.jpg" alt="Project 5" class="project-img" />
+            </div>
+            <h2 class="project-title">Interactive Valentine's Website</h2>
+            <p>Vanilla HTML/JS, NES.css</p>
+            <div class="btn-container">
+              <a href="https://github.com/mibernard/valentines" target="_blank"
+                ><button class="btn btn-color-2 project-btn">Github</button></a
+              >
+              <a href="https://ilovenatalie.netlify.app/" target="_blank"
+                ><button class="btn btn-color-2 project-btn">Live Demo</button></a
+              >
+            </div>
+          </div>
         </div>
       </div>
-      <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#projects'" />
+      <!-- <img src="./assets/arrow.png" alt="Arrow icon" class="icon arrow" onclick="location.href='./#contact'" /> -->
     </section>
     <section id="contact">
       <p class="section__text__p1">Get in Touch</p>

mediaqueries.css

@@ -1,7 +1,4 @@
 @media screen and (max-width: 1400px) {
-  .about-containers {
-    flex-wrap: wrap;
-  }
   #contact,
   #projects {
     height: fit-content;
@@ -73,7 +70,7 @@
     height: fit-content;
     margin-bottom: 2rem;
   }
-  .about-containers,
+  /* .about-containers, */
   .contact-info-upper-container,
   .btn-container {
     flex-wrap: wrap;

styles.css

@@ -5,6 +5,7 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
 }
 
 body {
@@ -282,6 +283,8 @@ section {
 .about-containers,
 .about-details-container {
   display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .about-pic {
@@ -296,7 +299,9 @@ section {
 
 .details-container {
   padding: 1.5rem;
+  /* width: 30%; */
   flex: 1;
+  /* max-width: 100%; */
   background: white;
   border-radius: 2rem;
   border: rgb(53, 53, 53) 0.1rem solid;
@@ -305,6 +310,21 @@ section {
   /* justify-content: space-around; */
 }
 
+.project-container {
+  padding: 1.5rem;
+  width: 30%;
+  min-width: 20rem;
+  background: white;
+  border-radius: 2rem;
+  border: rgb(53, 53, 53) 0.1rem solid;
+  border-color: rgb(163, 163, 163);
+  text-align: center;
+}
+
+.project-container p {
+  margin-bottom: 1rem;
+}
+
 .section-container {
   gap: 4rem;
   height: 70%;
@@ -377,7 +397,7 @@ article .icon {
 }
 
 .project-title {
-  margin: 1rem;
+  margin-top: 1rem;
   color: black;
 }