implemented projects page and footer. added under construction splash to other pages.

public/src/styles.css

@@ -1,6 +1,6 @@
 :root {
   --main-dark-color: #4A245E;
-  --main-offwhite-color: white,
+  --main-offwhite-color: white;
   --main-midtone-color: #9BC995;
   --main-accent-color: #673283;
   --secondary-accent-color: #98B9AB;
@@ -92,7 +92,7 @@ p {
 
 .navbar-brand {
     padding-left: .5vw;
-    color: #4A245E;
+    color: var(--main-dark-color);
     font-size: 2vw;
     font-weight: bold;
 
@@ -132,7 +132,7 @@ p {
 }
 
 .nav-link:hover {
-  color: var(--main-dark-color);
+  background-color: var(--main-dark-color);
 }
 
 .bar {
@@ -206,6 +206,7 @@ input[type="radio"]:hover + label {
     background-position: center;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .panel > * {
@@ -247,10 +248,19 @@ input[type="radio"]:hover + label {
 }
 
 .panel.open {
+    overflow: visible;
     flex: 5;
     font-size: 2em;
 }
 
+.panel .label-text, .panel .btn {
+    display: none;
+}
+
+.panel.open .label-text, .panel.open .btn {
+    display: block;
+}
+
 .carousel-wrapper {
     flex: 0 0 40%;
     padding-top: 5vw;
@@ -274,6 +284,24 @@ input[type="radio"]:hover + label {
     margin-right: auto;
 }
 
+.card {
+  display: flex; /* Enable flexbox layout */
+  flex-direction: column; /* Stack items vertically */
+  align-items: center; /* Center items horizontally */
+  justify-content: center; /* Center items vertically */
+  margin: 1vw;
+}
+
+.card img {
+  max-width: 50vw;
+  max-height: 35vw;
+  object-fit: cover;
+}
+
+.card-body {
+    text-align: center;
+}
+
 .card-text {
     font-size: 2vw;
 }
@@ -316,10 +344,62 @@ input[type="radio"]:hover + label {
 
 .btn:hover {
   background-color: var(--main-accent-color);
-  border: 2px solid var(--main-offwhite-color);
 }
 
 .btn > a {
     text-decoration: none;
     color: var(--main-offwhite-color);
 }
+
+.social-links {
+  list-style: none; /* Remove default list styling */
+  display: flex; /* Display list items as flex items */
+  justify-content: space-between; /* Space items evenly */ 
+}
+
+.social-links li {
+  margin: 0 10px; /* Add spacing between icons */
+}
+
+.social-links li a {
+    text-decoration: none;
+    color: var(--main-offwhite-color);
+}
+
+.project-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; /* Distribute projects evenly */
+  margin: 2vw auto; /* Center grid horizontally */
+}
+
+/* Responsive Breakpoints */
+@media (min-width: 992px) { /* Large Screens (3 columns) */
+  .project-grid {
+    width: 80%; /* Adjust width as needed */
+  }
+
+  .project-grid > * {
+    flex: 0 0 30%; /* Set a fixed width for each project */
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) { /* Medium Screens (2 columns) */
+  .project-grid {
+    width: 80%; /* Adjust width as needed */
+  }
+
+  .project-grid > * {
+    flex: 0 0 40%; /* Set a fixed width for each project */
+  }
+}
+
+@media (max-width: 767px) { /* Small Screens (1 column) */
+  .project-grid {
+    width: 80%; 
+  }
+
+  .project-grid > * {
+    flex: 1 1 80%; /* Set full width for each project */
+  }
+}