Desktop version

6 files changed, 117 insertions, 0 deletions

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