Initial commit

src/portfolio/styling/intro.module.scss

@@ -0,0 +1,87 @@
+@import "@/src/styles/helpers.scss";
+
+.section {
+  @include fullPage;
+  @include darkSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: $largeGap;
+}
+
+.topBar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  column-gap: $largeGap;
+  row-gap: $smallGap;
+  margin: 1em;
+
+  & > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: $mediumGap;
+
+    * {
+      margin: auto 0;
+    }
+
+    a {
+      color: $white;
+      text-decoration: none;
+
+      &:hover {
+        color: $red;
+        font-style: italic;
+      }
+    }
+  }
+
+  .left{
+    margin-left: auto;
+  }
+
+  .logoContainer {
+    width: 2.5em;
+    height: 2.5em;
+
+    @include nextImg;
+  }
+}
+
+.mainContent {
+  margin: auto 0 0;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+
+  flex-wrap: wrap;
+
+  padding: 0 15px;
+  font-weight: 350;
+
+  .text {
+    margin: 0 0 auto;
+    font-size: 1.5em;
+  }
+
+  .larger {
+    font-size: 1.5em;
+  }
+
+  .greeting {
+    color: $red;
+    font-style: italic;
+  }
+}
+
+.profileContainer {
+  max-width: 30em;
+
+  @include nextImg;
+}