Initial commit

src/portfolio/styling/achievements.module.scss

@@ -0,0 +1,52 @@
+@import "/src/styles/helpers";
+
+.section {
+  @include lightSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: $largeGap;
+  padding-top: 2em;
+
+  & > div {
+    text-align: center;
+  }
+}
+
+.education {
+  text-align: left;
+  background-color: transparentize($gray, 0.5);
+  padding: 1em;
+  margin: 1em;
+  border-radius: $smallGap;
+  box-shadow: 0.5em 0.5em transparentize($black, 0.5);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  column-gap: $largeGap;
+  row-gap: $smallGap;
+
+
+  .title {
+    color: $red;
+  }
+
+  .notes {
+    font-size: 0.9em;
+    margin: 0.4em 0 0em;
+  }
+
+  .otherDetails {
+    margin: auto 0 auto auto;
+
+    .location {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}

src/portfolio/styling/experience.module.scss

@@ -0,0 +1,38 @@
+@import "/src/styles/helpers";
+
+.section {
+  @include darkSection;
+  @include regularFont;
+
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding-top: 2em;
+
+  p {
+    text-align: left;
+    text-justify: distribute-all-lines;
+    margin: 0 auto 0 auto;
+    width: 40em;
+    max-width: 70vw;
+  }
+}
+
+.job {
+  @include lightSection;
+  padding: 1em;
+  margin: 1em;
+
+  .largerText {
+    font-size: 1.3em;
+  }
+
+  .redText {
+    color: $red;
+  }
+
+  .industry {
+    margin-top: 12px;
+    text-align: right;
+  }
+}

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