Preparation for proper release

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;
+        }
+      }
+    }
+  }
+}
+