Preparation for proper release

src/portfolio/styling/footer.module.scss

@@ -0,0 +1,9 @@
+@import "@/src/styles/helpers.scss";
+
+.section {
+  @include darkSection;
+  @include regularFont;
+
+  padding: 0.4em;
+  text-align: center;
+}

src/portfolio/styling/intro.module.scss

@@ -35,7 +35,7 @@
       text-decoration: none;
 
       &:hover {
-        color: $red;
+        color: $strong_red;
         font-style: italic;
       }
     }
@@ -65,9 +65,12 @@
   padding: 0 15px;
   font-weight: 350;
 
+  font-size: 0.7em;
+
   .text {
+    line-height: 1.5;
     margin: 0 0 auto;
-    font-size: 1.5em;
+    font-size: 2em;
   }
 
   .larger {
@@ -75,13 +78,15 @@
   }
 
   .greeting {
-    color: $red;
+    color: $strong_red;
     font-style: italic;
   }
 }
 
 .profileContainer {
   max-width: 30em;
+  height: max-content;
+  display: flex;
 
   @include nextImg;
 }

src/portfolio/styling/projects.module.scss

@@ -0,0 +1,80 @@
+@import "@/src/styles/helpers.scss";
+
+.section {
+  @include lightSection;
+  @include fullPage;
+  @include regularFont;
+}
+
+.technology {
+  font-family: 'Share Tech Mono', monospace;
+  font-size: 1.4em;
+  color: $black;
+  margin: 0.1em;
+  padding: 0.1em 0.3em;
+  background-color: $gray;
+  border-radius: 2px;
+
+  :hover{
+    background-color: opacify($gray, 0.35);
+  }
+}
+
+.projectDisplay {
+  @include darkSection;
+
+  display: flex;
+
+  flex-direction: row;
+
+  @media (max-width: 1280px) {
+    flex-direction: column;
+  }
+
+  .imageAndTech {
+    flex-basis: calc(100% / 2);
+    margin: 1em;
+
+    .imageContainer {
+      width: 100%;
+      @include nextImg;
+    }
+
+    .tech {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+    }
+  }
+
+  .text {
+    flex-basis: calc(100% / 2);
+    padding: 2em 2em;
+
+
+    .links {
+
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 2em;
+
+      .icon {
+        color: $white;
+        filter: drop-shadow(7px 7px 5px $red);
+        $size: 4em;
+        width: $size;
+        height: $size;
+        svg {
+          width: $size;
+          height: $size;
+        }
+
+        :hover {
+          color: $gray;
+        }
+      }
+    }
+  }
+}
+