refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 0 insertions, 169 deletions

diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
deleted file mode 100644
index 2cd3b15..0000000
--- a/src/components/Branding/Branding.module.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --logo-size: clamp(#{fun.convert-px(68)}, 18vw, #{fun.convert-px(100)});
-
-  display: grid;
-  grid-template-columns:
-    var(--logo-size)
-    minmax(0, 1fr);
-  grid-template-rows: repeat(2, max-content);
-  align-items: center;
-  column-gap: var(--spacing-sm);
-  padding: var(--spacing-sm) 0;
-  text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-fg-inverted);
-}
-
-.logo {
-  --branding-logo-animation: none;
-
-  grid-column: 1;
-  grid-row: 1 / -1;
-  justify-self: center;
-  display: flex;
-  place-content: center;
-  width: var(--logo-size);
-  height: var(--logo-size);
-  position: relative;
-  border-radius: 50%;
-  transition: all 0.6s linear 0s;
-  transform-style: preserve-3d;
-  animation: var(--branding-logo-animation);
-
-  &__front,
-  &__back {
-    width: 100%;
-    height: 100%;
-    padding: fun.convert-px(2);
-    position: absolute;
-    top: 0;
-    left: 0;
-    backface-visibility: hidden;
-    background: var(--color-bg);
-    border: fun.convert-px(2) solid var(--color-primary-dark);
-    border-radius: 50%;
-    transition: all 0.6s linear 0s;
-  }
-
-  &__front {
-    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-        var(--color-shadow-light),
-      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-        var(--color-shadow-light);
-  }
-
-  &__back {
-    transform: rotateY(180deg);
-  }
-
-  img,
-  svg {
-    border-radius: 50%;
-  }
-
-  &:hover {
-    transform: rotateY(180deg);
-  }
-
-  &:hover & {
-    &__front {
-      box-shadow: none;
-    }
-
-    &__back {
-      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-          var(--color-shadow-light),
-        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-          var(--color-shadow-light);
-    }
-  }
-}
-
-.name {
-  --branding-name-animation: none;
-
-  grid-column: 2;
-  grid-row: 1;
-  margin: 0;
-  font-family: var(--font-family-secondary);
-  font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl));
-  font-weight: 500;
-  letter-spacing: 0.01ex;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "|";
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-bg);
-    color: var(--color-primary-darker);
-    font-weight: 400;
-    visibility: hidden;
-    transform: translateX(100%);
-    transform-origin: right;
-    animation: var(--branding-name-animation);
-  }
-}
-
-.job {
-  --branding-job-animation: none;
-
-  grid-column: 2;
-  grid-row: 2;
-  width: max-content;
-  margin: 0;
-  color: var(--color-fg-light);
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-lg);
-  font-weight: 500;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "|";
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-bg);
-    color: var(--color-primary-darker);
-    font-weight: 400;
-    visibility: hidden;
-    transform: translateX(100%);
-    transform-origin: right;
-    animation: var(--branding-job-animation);
-  }
-}
-
-.link {
-  background: linear-gradient(
-      to top,
-      var(--color-primary-light) fun.convert-px(5),
-      transparent fun.convert-px(5)
-    )
-    left / 0 100% no-repeat;
-  text-decoration: none;
-  transition: all 0.6s ease-out 0s;
-
-  &:hover,
-  &:focus {
-    background-size: 100% 100%;
-  }
-
-  &:focus {
-    color: var(--color-primary-light);
-  }
-
-  &:active {
-    background-size: 0 100%;
-    color: var(--color-primary-dark);
-  }
-}