From 5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 Mon Sep 17 00:00:00 2001
From: Arne Rief <arne.rief@gmail.com>
Date: Fri, 10 Feb 2023 21:40:00 +0100
Subject: Desktop version

---
 sass/abstracts/_animations.scss            | 32 ++++++++++++++++
 sass/abstracts/_index.scss                 |  3 ++
 sass/abstracts/_mixins.scss                | 32 ++++++++++++++++
 sass/abstracts/_variables.scss             | 19 ++++++++++
 sass/base/_base.scss                       | 43 +++++++++++++++++++++
 sass/base/_typography.scss                 | 39 +++++++++++++++++++
 sass/components/_button.scss               | 21 ++++++++++
 sass/components/_contact-form.scss         | 40 ++++++++++++++++++++
 sass/components/_portrait-container.scss   | 15 ++++++++
 sass/components/_project-container.scss    |  6 +++
 sass/components/_screenshot-container.scss | 15 ++++++++
 sass/components/_text-container.scss       | 20 ++++++++++
 sass/layout/_footer.scss                   | 60 +++++++++++++++++++++++++++++
 sass/layout/_main-sections.scss            | 32 ++++++++++++++++
 sass/layout/_nav.scss                      | 61 ++++++++++++++++++++++++++++++
 sass/main.scss                             | 13 +++++++
 16 files changed, 451 insertions(+)
 create mode 100644 sass/abstracts/_animations.scss
 create mode 100644 sass/abstracts/_index.scss
 create mode 100644 sass/abstracts/_mixins.scss
 create mode 100644 sass/abstracts/_variables.scss
 create mode 100644 sass/base/_base.scss
 create mode 100644 sass/base/_typography.scss
 create mode 100644 sass/components/_button.scss
 create mode 100644 sass/components/_contact-form.scss
 create mode 100644 sass/components/_portrait-container.scss
 create mode 100644 sass/components/_project-container.scss
 create mode 100644 sass/components/_screenshot-container.scss
 create mode 100644 sass/components/_text-container.scss
 create mode 100644 sass/layout/_footer.scss
 create mode 100644 sass/layout/_main-sections.scss
 create mode 100644 sass/layout/_nav.scss
 create mode 100644 sass/main.scss

(limited to 'sass')

diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss
new file mode 100644
index 0000000..819b356
--- /dev/null
+++ b/sass/abstracts/_animations.scss
@@ -0,0 +1,32 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+// text start on the left and transparent when the page loads, then moves into regular position
+@keyframes moveInLeft {
+  0% {
+    opacity: 0;
+    transform: translateX(-10rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0);
+  }
+}
+
+// skew to match the design of the .text-container class
+@keyframes moveInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(10rem) skewX(-12deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0) skewX(-12deg);
+  }
+}
diff --git a/sass/abstracts/_index.scss b/sass/abstracts/_index.scss
new file mode 100644
index 0000000..9563860
--- /dev/null
+++ b/sass/abstracts/_index.scss
@@ -0,0 +1,3 @@
+@forward "animations";
+@forward "mixins";
+@forward "variables";
diff --git a/sass/abstracts/_mixins.scss b/sass/abstracts/_mixins.scss
new file mode 100644
index 0000000..98351c4
--- /dev/null
+++ b/sass/abstracts/_mixins.scss
@@ -0,0 +1,32 @@
+@use "variables" as *;
+
+@mixin main-link-hover {
+  color: $text-special-light;
+  transform: translateY(-0.3rem);
+}
+
+@mixin flex-sp-around-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@mixin standard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin narrow-container {
+  margin: 3rem auto;
+}
+
+@mixin wide-container {
+  margin: 10rem auto;
+  width: 80%;
+
+  h2 {
+    margin-bottom: 5rem;
+  }
+}
diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss
new file mode 100644
index 0000000..5aea3e6
--- /dev/null
+++ b/sass/abstracts/_variables.scss
@@ -0,0 +1,19 @@
+// colors
+$col-main-light: #023059;
+$col-main-dark: #093d5ec5;
+$bg-text-container: #173d5a;
+$text-main: #ececec;
+$text-dark: #252424;
+$text-special-dark: #e79759;
+$text-special-light: #ecbf4b;
+
+// font
+$big-text: 2rem;
+$medium-text: 1.5rem;
+$medium-text-mobile: 1.3rem;
+$small-text: 1.1rem;
+
+// layout
+$margin-main: 3rem 4rem 2rem 4rem;
+$margin-mobile: 2rem;
+$radius-text-container: 10px;
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
new file mode 100644
index 0000000..2211bca
--- /dev/null
+++ b/sass/base/_base.scss
@@ -0,0 +1,43 @@
+@use "../abstracts" as *;
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  // min-height to ensure footer sticks to bottom and background doesn't repeat
+  min-height: 100vh;
+  width: 100vw;
+}
+
+body {
+  background: linear-gradient(
+    45deg,
+    rgba($col-main-light, 0.89) 0%,
+    rgba($col-main-dark, 0.84) 100%
+  );
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-sizing: border-box;
+  color: $text-main;
+  // grid to ensure footer sticks to the bottom in all cases; body consists of header (auto), main (1fr) and footer (auto); needs min-height 100vh too, here added to "html, body"
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  font-family: "Inter", sans-serif;
+  font-size: $small-text;
+  line-height: 1.5;
+}
+
+main {
+  height: 100%;
+  margin: $margin-main;
+
+  & * {
+    animation: fade-in 2s ease-out;
+  }
+}
diff --git a/sass/base/_typography.scss b/sass/base/_typography.scss
new file mode 100644
index 0000000..38f3a3f
--- /dev/null
+++ b/sass/base/_typography.scss
@@ -0,0 +1,39 @@
+@use "../abstracts/variables" as *;
+
+.text-link {
+  color: $text-special-dark;
+
+  &:hover {
+    background-color: $text-special-dark;
+    border-radius: 2px;
+    color: $text-dark;
+    text-decoration: none;
+  }
+}
+
+.text-emphasis {
+  color: $text-special-light;
+  font-weight: bold;
+}
+
+.title {
+  font-family: "Archivo Black", sans-serif;
+  color: $text-special-light;
+  font-size: $big-text;
+  width: fit-content;
+}
+
+.subtitle {
+  font-family: "Archivo Black", sans-serif;
+  color: $text-special-dark;
+  font-size: $medium-text;
+}
+
+.name {
+  font-size: calc(2 * $big-text);
+}
+
+.note-auriga {
+  color: $text-special-dark;
+  font-style: italic;
+}
diff --git a/sass/components/_button.scss b/sass/components/_button.scss
new file mode 100644
index 0000000..2d5b50c
--- /dev/null
+++ b/sass/components/_button.scss
@@ -0,0 +1,21 @@
+@use "../abstracts/" as *;
+
+button {
+  color: $text-dark;
+  background-color: $text-special-light;
+  border: none;
+  border-radius: 10px;
+  font-style: inherit;
+  font-weight: bold;
+  padding: 0.7rem;
+  text-transform: uppercase;
+  width: 35%;
+
+  &:hover {
+    background-color: $text-special-dark;
+  }
+
+  &:active {
+    outline: 3px solid $text-dark;
+  }
+}
diff --git a/sass/components/_contact-form.scss b/sass/components/_contact-form.scss
new file mode 100644
index 0000000..a2a9c40
--- /dev/null
+++ b/sass/components/_contact-form.scss
@@ -0,0 +1,40 @@
+@use "../abstracts/" as *;
+
+.messenger-form {
+  @include standard-grid;
+  gap: 2rem;
+  width: 50%;
+
+  // container for each label & input
+  div {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
+
+    // div container with textarea input spans entire column, pushes button to next row
+    &.text-area {
+      grid-column: 1 / 3;
+    }
+  }
+
+  label {
+    font-weight: bold;
+  }
+
+  input,
+  textarea {
+    background-color: $text-main;
+    border: none;
+    border-radius: 10px;
+    padding: 0.5rem;
+    width: 100%;
+
+    &:focus {
+      color: $text-main;
+      background-color: $bg-text-container;
+      outline: 3px solid $text-special-dark;
+    }
+  }
+}
diff --git a/sass/components/_portrait-container.scss b/sass/components/_portrait-container.scss
new file mode 100644
index 0000000..819b18e
--- /dev/null
+++ b/sass/components/_portrait-container.scss
@@ -0,0 +1,15 @@
+@use "../abstracts/animations" as *;
+
+.portrait-container {
+  height: 50vh;
+  width: fit-content;
+  animation: moveInLeft 2s ease-out;
+  backface-visibility: hidden;
+
+  img {
+    border-radius: 25px;
+    height: 100%;
+    width: 100%;
+    object-fit: scale-down;
+  }
+}
diff --git a/sass/components/_project-container.scss b/sass/components/_project-container.scss
new file mode 100644
index 0000000..d6d4e68
--- /dev/null
+++ b/sass/components/_project-container.scss
@@ -0,0 +1,6 @@
+@use "../abstracts/" as *;
+
+.project-container {
+  @include flex-sp-around-center;
+  gap: 2rem;
+}
diff --git a/sass/components/_screenshot-container.scss b/sass/components/_screenshot-container.scss
new file mode 100644
index 0000000..8c28462
--- /dev/null
+++ b/sass/components/_screenshot-container.scss
@@ -0,0 +1,15 @@
+@use "../abstracts/" as *;
+
+.project-screenshot {
+  border-radius: $radius-text-container;
+  outline: 5px solid $text-special-dark;
+  outline-offset: 1.5rem;
+  object-fit: scale-down;
+  width: 40%;
+  transition: transform 0.6s ease;
+
+  &:hover {
+    transform: scale(1.2);
+    z-index: 100;
+  }
+}
diff --git a/sass/components/_text-container.scss b/sass/components/_text-container.scss
new file mode 100644
index 0000000..0108f94
--- /dev/null
+++ b/sass/components/_text-container.scss
@@ -0,0 +1,20 @@
+@use "../abstracts" as *;
+
+.text-container {
+  background-color: $bg-text-container;
+  border-radius: $radius-text-container;
+  box-shadow: 0 2rem 3.5rem rgba(#000, 0.6);
+  padding: 3.5rem;
+  transform: skewX(-12deg);
+  width: 50%;
+
+  // margin between paragraphs but not below the last paragraph
+  & p:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.text-about {
+  animation: moveInRight 2s ease-out;
+  backface-visibility: hidden;
+}
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
new file mode 100644
index 0000000..ecfb0a5
--- /dev/null
+++ b/sass/layout/_footer.scss
@@ -0,0 +1,60 @@
+@use "../abstracts" as *;
+
+footer {
+  background-color: $bg-text-container;
+  // delete positioning to make grid footer from body work
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  width: 100%;
+
+  & * {
+    margin: $margin-main;
+  }
+
+  dl {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2rem;
+
+    & * {
+      color: inherit;
+      font-size: $medium-text;
+      margin: 0.5rem;
+      transition: transform 0.3s;
+    }
+
+    & dd i:hover {
+      @include main-link-hover;
+    }
+  }
+
+  p {
+    text-align: center;
+  }
+
+  .big-icon {
+    font-size: $big-text;
+  }
+}
+
+@media screen and (max-width: 420px) {
+  footer {
+    top: 100;
+
+    & * {
+      margin: $margin-mobile;
+    }
+
+    dl {
+      flex-direction: column;
+      height: max-content;
+
+      & * {
+        font-size: $medium-text-mobile;
+        margin: 0.3rem;
+      }
+    }
+  }
+}
diff --git a/sass/layout/_main-sections.scss b/sass/layout/_main-sections.scss
new file mode 100644
index 0000000..fb2d433
--- /dev/null
+++ b/sass/layout/_main-sections.scss
@@ -0,0 +1,32 @@
+@use "../abstracts/" as *;
+
+.about-section {
+  @include flex-sp-around-center;
+  @include narrow-container;
+}
+
+.welcome-section {
+  @include standard-grid;
+  gap: 8rem;
+  @include narrow-container;
+  width: 60%;
+
+  .welcome-intro {
+    border-radius: $radius-text-container;
+    outline: 3px solid $text-special-dark;
+    outline-offset: 1rem;
+  }
+}
+
+.projects-section {
+  @include wide-container;
+
+  // less margin between h2 and the 2nd child = first project-container
+  & > div:not(:nth-child(2)) {
+    margin-top: 10rem;
+  }
+}
+
+.contact-section {
+  @include wide-container;
+}
diff --git a/sass/layout/_nav.scss b/sass/layout/_nav.scss
new file mode 100644
index 0000000..d57f3d7
--- /dev/null
+++ b/sass/layout/_nav.scss
@@ -0,0 +1,61 @@
+@use "../abstracts" as *;
+
+nav {
+  background-color: $bg-text-container;
+  font-family: "Archivo Black", sans-serif;
+  height: 10vh;
+  width: 100%;
+
+  ul {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    list-style-type: none;
+    padding: 0 3rem;
+    width: 100%;
+  }
+
+  // logo to the left side of navbar
+  li:first-child {
+    text-align: left;
+    margin-right: auto;
+  }
+
+  li a {
+    display: block;
+    color: inherit;
+    font-size: $medium-text;
+    padding: 0 1.5rem;
+    text-align: center;
+    transition: transform 0.3s;
+    text-decoration: none;
+    white-space: nowrap;
+
+    &:hover {
+      @include main-link-hover;
+    }
+  }
+}
+
+// mobile
+@media screen and (max-width: 770px) {
+  nav {
+    ul {
+      gap: 1rem;
+      justify-content: center;
+      padding: 0;
+    }
+
+    li:first-child {
+      text-align: center;
+      margin-right: 1.5rem;
+    }
+
+    li a {
+      font-size: 1rem;
+      padding: 0;
+    }
+  }
+}
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..40ac841
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,13 @@
+@use "base/base";
+@use "base/typography";
+
+@use "layout/nav";
+@use "layout/main-sections";
+@use "layout/footer";
+
+@use "components/text-container";
+@use "components/portrait-container";
+@use "components/project-container.scss";
+@use "components/screenshot-container.scss";
+@use "components/contact-form";
+@use "components/button";
-- 
cgit v1.2.3