{% include 'components/svg/logo.njk' %}
Logo of EmptyWork
diff --git a/src/assets/scss/abstracts/_mixin.scss b/src/assets/scss/abstracts/_mixin.scss
new file mode 100644
index 0000000..af102ce
--- /dev/null
+++ b/src/assets/scss/abstracts/_mixin.scss
@@ -0,0 +1,25 @@
+@use "sass:map";
+
+$breakpoints-up: (
+ 'medium': '40em',
+ 'large': '64em',
+ 'xlarge': '87.5em',
+);
+
+$breakpoints-down: (
+ 'small': '39.9375em',
+ 'medium': '63.9375em',
+ 'large': '87.4375em',
+);
+
+@mixin breakpoint-up($size) {
+ @media screen and (min-width: map.get($breakpoints-up, $size)) {
+ @content;
+ }
+}
+
+@mixin breakpoint-down($size) {
+ @media screen and (max-width: map.get($breakpoints-down, $size)) {
+ @content;
+ }
+}
diff --git a/src/assets/scss/abstracts/_vars.scss b/src/assets/scss/abstracts/_vars.scss
new file mode 100644
index 0000000..d5efc55
--- /dev/null
+++ b/src/assets/scss/abstracts/_vars.scss
@@ -0,0 +1,72 @@
+html:root {
+ --_h: 270;
+ --_hs: var(--_h) 20%;
+ --clr-accent: hsl(var(--_h), 50%, 40%);
+ --clr-accent-light: hsl(var(--_h), 84%, 72%);
+ --clr-accent-dark: hsl(var(--_h), 71%, 22%);
+ --clr-complementary: hsl(90, 50%, 40%);
+
+ --clr-href: hsl(var(--_h), 80%, 50%);
+ --clr-href-visited: hsl(var(--_h), 70%, 22%);
+
+ --clr-background: hsl(var(--_hs) 95%);
+ --clr-background-900: hsl(var(--_hs) 88%);
+ --clr-background-800: hsl(var(--_hs) 75%);
+ --clr-background-700: hsl(var(--_hs) 63%);
+ --clr-foreground: hsl(var(--_hs) 10%);
+ --clr-foreground-900: hsl(var(--_hs) 13%);
+ --clr-foreground-800: hsl(var(--_hs) 25%);
+ --clr-foreground-700: hsl(var(--_hs) 38%);
+
+ --clr-disabled-text: hsl(var(--_hs) 50%);
+ --clr-white: hsl(var(--_hs) 100%);
+ --clr-black: hsl(var(--_hs) 0%);
+ --clr-black-light: hsl(var(--_hs) 13%);
+
+ --clr-red: hsl(357, 70%, 41%);
+ --clr-red-dark: hsl(357, 70%, 30%);
+
+ --bx-shadow-two-side: 0 0.3125rem 0.625rem hsla(var(--_hs) 0%, 0.2),
+ -0.3125rem -0.3125rem 0.625rem hsla(var(--_hs) 100%, 0.8);
+ --table-header: hsl(270, 80%, 30%);
+
+ &[data-theme=sunglow] {
+ --clr-accent: hsl(40, 56%, 40%);
+ --clr-accent-light: hsl(40, 56%, 72%);
+ --clr-accent-dark: hsl(40, 56%, 22%);
+
+ --clr-href: hsl(40, 56%, 72%);
+ --clr-href-visited: hsl(40, 56%, 22%);
+
+ --clr-background: hsl(40, 56%, 95%);
+ --clr-background-900: hsl(40, 56%, 88%);
+ --clr-background-800: hsl(40, 56%, 75%);
+ --clr-background-700: hsl(40, 56%, 63%);
+ --clr-foreground: hsl(40, 56%, 10%);
+ --clr-foreground-900: hsl(40, 56%, 13%);
+ --clr-foreground-800: hsl(40, 56%, 25%);
+ --clr-foreground-700: hsl(40, 56%, 38%);
+
+ &[data-theme=dark] {
+ --clr-href: hsl(40, 56%, 72%);
+ --clr-href-visited: hsl(40, 56%, 40%);
+ }
+ }
+
+ &[data-theme=dark] {
+ --clr-href: hsl(var(--_h), 84%, 72%);
+ --clr-href-visited: hsl(var(--_h), 50%, 40%);
+ --clr-background: hsl(var(--_hs) 10%);
+ --clr-background-900: hsl(var(--_hs) 13%);
+ --clr-background-800: hsl(var(--_hs) 25%);
+ --clr-background-700: hsl(var(--_hs) 38%);
+ --clr-foreground: hsl(var(--_hs) 95%);
+ --clr-foreground-900: hsl(var(--_hs) 88%);
+ --clr-foreground-800: hsl(var(--_hs) 75%);
+ --clr-foreground-700: hsl(var(--_hs) 63%);
+
+ --bx-shadow-two-side: 0 0.3125rem 0.625rem rgb(0 0 0 / 20%),
+ -0.3125rem -0.3125rem 0.625rem rgb(58 58 58 / 63%);
+ --table-header: var(--clr-accent-light);
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/abstracts/index.scss b/src/assets/scss/abstracts/index.scss
new file mode 100644
index 0000000..15fbdc2
--- /dev/null
+++ b/src/assets/scss/abstracts/index.scss
@@ -0,0 +1,2 @@
+@use "./_mixin";
+@use "./_vars";
\ No newline at end of file
diff --git a/src/assets/scss/article.scss b/src/assets/scss/article.scss
new file mode 100644
index 0000000..e321077
--- /dev/null
+++ b/src/assets/scss/article.scss
@@ -0,0 +1,11 @@
+@use "./abstracts/" as *;
+
+@use "./base/" as *;
+
+@use "./layouts/" as *;
+
+@use "./components/nav";
+@use "./components/preload";
+@use "./components/title";
+
+@use "./pages/article";
\ No newline at end of file
diff --git a/src/assets/scss/base/_global.scss b/src/assets/scss/base/_global.scss
new file mode 100644
index 0000000..4fce297
--- /dev/null
+++ b/src/assets/scss/base/_global.scss
@@ -0,0 +1,165 @@
+@use "../abstracts/_mixin" as mix;
+
+html {
+ scroll-behavior: smooth;
+ scroll-padding-top: 10rem;
+ scroll-padding-bottom: 10rem;
+}
+
+html:root {
+ .themes {
+ background-color: #ffc107;
+ color: #7e620e;
+ }
+
+ [data-moon] {
+ display: none;
+ }
+
+ [data-sun] {
+ display: block;
+ }
+
+ &[data-theme="dark"] {
+ .themes {
+ background-color: var(--clr-accent);
+ color: var(--clr-accent-dark);
+ }
+
+ [data-sun] {
+ display: none;
+ }
+
+ [data-moon] {
+ display: block;
+ }
+ }
+}
+
+*,
+*:is(::after, ::before) {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: var(--clr-background-900);
+ font-family: 'Montserrat', sans-serif;
+ color: var(--clr-foreground);
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+a,
+a:is(:active, :hover, :focus-visible) {
+ color: inherit;
+ text-decoration: none;
+}
+
+a:is(:hover, :focus-visible) {
+ color: var(--clr-accent);
+}
+
+a[href] {
+ position: relative;
+
+ .new-tab-warning {
+ position: absolute;
+ width: max-content;
+ background-color: hsl(0, 0%, 13%);
+ font-weight: normal;
+ letter-spacing: normal;
+ color: var(--clr-white) !important;
+ padding: 0.3rem;
+ font-size: 0.7rem;
+ border-radius: 0.3rem;
+ margin-top: 0.5rem;
+ top: 100%;
+ left: 0;
+ visibility: hidden;
+ pointer-events: none;
+ text-transform: capitalize;
+ transition: all 300ms ease-out;
+ translate: 0 -0.3rem;
+ z-index: 90;
+ user-select: none;
+ }
+
+ &:focus-visible {
+ .new-tab-warning {
+ visibility: visible;
+ translate: 0 0;
+ }
+ }
+}
+
+::selection {
+ background-color: var(--clr-accent);
+ color: var(--clr-white);
+}
+
+.t-all {
+ transition: all 300ms ease-in;
+}
+
+.no-scroll {
+ @include mix.breakpoint-down('small') {
+ overflow: hidden !important;
+
+ :is(header, main, footer) {
+ visibility: hidden;
+ user-select: none;
+ }
+ }
+}
+
+.not-loaded {
+ overflow: hidden;
+
+ :is(header, main, footer, nav) {
+ visibility: hidden;
+ user-select: none;
+ }
+}
+
+:is(ul, li) {
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ list-style: none;
+}
+
+*:focus-visible {
+ outline: 0.125rem solid var(--clr-accent-dark);
+}
+
+.highlight {
+ background-color: var(--clr-black);
+ padding: 0.2rem 0.6rem;
+ color: var(--clr-white);
+
+ &:is(:hover, :focus) {
+ color: var(--clr-white);
+ }
+}
+
+.header-link__access {
+ text-decoration: none !important;
+}
+
+.sr-only {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 0.0625rem;
+ margin: -0.0625rem;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 0.0625rem;
+}
\ No newline at end of file
diff --git a/src/assets/scss/base/index.scss b/src/assets/scss/base/index.scss
new file mode 100644
index 0000000..6940b46
--- /dev/null
+++ b/src/assets/scss/base/index.scss
@@ -0,0 +1 @@
+@use "./_global";
\ No newline at end of file
diff --git a/src/assets/scss/blog.scss b/src/assets/scss/blog.scss
new file mode 100644
index 0000000..17e63b9
--- /dev/null
+++ b/src/assets/scss/blog.scss
@@ -0,0 +1,12 @@
+@use "./abstracts/" as *;
+
+@use "./base/" as *;
+
+@use "./layouts/" as *;
+
+@use "./components/nav";
+@use "./components/preload";
+@use "./components/title";
+
+@use "./components/card";
+@use "./components/post";
diff --git a/src/assets/scss/components/_aboutme.scss b/src/assets/scss/components/_aboutme.scss
new file mode 100644
index 0000000..03b5ec3
--- /dev/null
+++ b/src/assets/scss/components/_aboutme.scss
@@ -0,0 +1,217 @@
+@use "../abstracts/mixin" as mix;
+
+.aboutme {
+ background-color: var(--clr-accent);
+ color: var(--clr-white);
+
+ .adds {
+ font-size: 0.9rem;
+ padding: 1rem;
+
+ .new-line {
+ margin-top: 0.5em;
+ }
+ }
+
+ a {
+ text-decoration: underline;
+ text-underline-offset: 0.4rem;
+ }
+
+ a:hover,
+ a:focus-visible {
+ color: #d0d0d0;
+ }
+
+ ::selection {
+ background-color: #333333;
+ }
+
+ .extra {
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+ }
+
+ .main-container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .flex {
+ display: flex;
+ flex-direction: row;
+ border-radius: 0.3rem;
+ margin-top: 1rem;
+
+ &-header {
+ display: flex;
+ padding: 0.5rem 1rem;
+ width: 100%;
+ justify-content: space-between;
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ flex: 0 0 auto;
+
+ span[aria-hidden=true] {
+ display: block;
+ margin-top: 0.3rem;
+ }
+
+ div {
+ display: flex;
+ align-items: center;
+ font-weight: 600;
+ gap: 0.2rem;
+
+ .dot {
+ height: 0.9375rem;
+ width: 0.9375rem;
+ background-color: hsl(0, 100%, 43%);
+ border-radius: 50%;
+
+ &:first-of-type {
+ background-color: green;
+ }
+
+ &:nth-of-type(2) {
+ background-color: yellow;
+ }
+ }
+ }
+ }
+
+ .lists {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ }
+
+ &.tools {
+ background-color: hsl(0, 0%, 13%);
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ margin-bottom: -9rem;
+ z-index: 2;
+
+ h2 {
+ padding: 1rem;
+ }
+
+ .lists {
+ background-color: hsl(0, 0%, 11%);
+ border-radius: 0.3rem;
+ padding: 2rem;
+ }
+ }
+
+ &.languages {
+ filter: brightness(110%);
+ box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ background-color: var(--clr-accent-dark);
+ padding: 2rem;
+
+ .header-title {
+ gap: 1em;
+ display: flex;
+ }
+
+ h2 {
+ padding: 1rem 0;
+ }
+
+ ul {
+ margin-top: 0.2rem;
+ }
+
+ .lists {
+ overflow: unset;
+ height: fit-content;
+ }
+ }
+
+ &:not(:first-of-type) {
+ margin-top: 5rem;
+ justify-content: space-around;
+ flex-direction: column;
+
+ ul {
+ font-size: 1.1rem;
+ font-weight: 600;
+
+ li {
+ font-weight: 500;
+ font-size: 1rem;
+ margin-top: 0.5rem;
+
+ &:first-of-type {
+ font-weight: 600;
+ }
+
+ &:nth-child(2) {
+ margin-top: 0.5rem;
+ }
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ align-items: flex-start;
+
+ .lists {
+ flex-direction: column;
+ }
+
+ ul>li {
+ display: inline-block;
+ margin-top: 0;
+ }
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+
+ .data {
+ position: relative;
+ min-width: 25rem;
+ height: 20rem;
+
+ @include mix.breakpoint-down('medium') {
+ width: 100%;
+ max-width: 25rem;
+ min-width: unset;
+ }
+
+ &:hover {
+ .note {
+ scale: 1.1;
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: hsl(0, 100%, 43%);
+ left: -0.7rem;
+ border-radius: 40% 20% / 10%;
+ }
+ }
+
+ .explain {
+ display: flex;
+ align-items: center;
+ margin-top: 1rem;
+ padding: 1rem;
+ font-size: 1.2rem;
+
+ @include mix.breakpoint-up('large') {
+ padding-left: 3rem;
+ }
+ }
+
+ .note {
+ rotate: -3deg;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_animation.scss b/src/assets/scss/components/_animation.scss
new file mode 100644
index 0000000..5b19ab2
--- /dev/null
+++ b/src/assets/scss/components/_animation.scss
@@ -0,0 +1,59 @@
+[data-animation] {
+ opacity: 0;
+ transition: translate var(--_translate, 1s) ease-in-out, scale var(--_scale, 1s) ease-in-out, rotate var(--_rotate, 1s) ease-in-out, opacity var(--_opacity, 1s) ease-in-out;
+}
+
+[data-animation='fade-in'] {
+ translate: 0 4em;
+}
+
+[data-animation='right-show'] {
+ translate: -5em 0;
+}
+
+[data-animation='top-show'] {
+ translate: 0 -5em;
+}
+
+[data-animation='bottom-show'] {
+ translate: 0 5em;
+}
+
+[data-animation='left-show'] {
+ translate: 5em 0;
+}
+
+[data-animation='prototype-card'] {
+ translate: -5em 0;
+
+ &:nth-of-type(odd) {
+ translate: 5em 0;
+ }
+}
+
+.has-been-animated {
+ opacity: unset;
+ scale: unset;
+ rotate: unset;
+ translate: unset !important;
+}
+
+@media (prefers-reduced-motion) {
+ .prototype-reader,
+ .data {
+ transform: unset !important;
+ }
+
+ *,
+ *::after,
+ *::before {
+ animation: unset !important;
+ rotate: 0deg !important;
+ translate: 0em 0em !important;
+ }
+
+ [data-animation] {
+ translate: unset !important;
+ opacity: 1 !important;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_card.scss b/src/assets/scss/components/_card.scss
new file mode 100644
index 0000000..b9e7d78
--- /dev/null
+++ b/src/assets/scss/components/_card.scss
@@ -0,0 +1,228 @@
+@use "../abstracts/mixin" as mix;
+
+.card {
+ background-color: #333333;
+ background-image: linear-gradient(transparent, var(--clr-accent-dark));
+ background-position: center;
+ background-size: cover;
+ background-clip: border-box;
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ border-radius: 0.3rem;
+ padding: 10rem 0 0;
+ width: 28ch;
+ position: relative;
+ isolation: isolate;
+ flex: 0 0 auto;
+ scroll-snap-align: center;
+ color: var(--clr-white);
+
+ &:hover,
+ &:has(:focus) {
+ scale: 1.1;
+ z-index: 10;
+ }
+
+ &-image {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: -1;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ border-radius: 0.3rem;
+ overflow: hidden;
+
+ &::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ background-image: linear-gradient(transparent, var(--clr-accent-dark));
+ }
+ }
+
+ &-background {
+ height: inherit;
+ width: fit-content;
+ }
+
+ &-empty {
+ width: calc(100% - 4rem);
+ padding: 2rem;
+ box-shadow: var(--bx-shadow-two-side);
+ background: var(--clr-background-900);
+ color: var(--clr-foreground-700);
+
+ &:hover,
+ &:focus-visible {
+ scale: 1;
+ }
+ }
+
+ &s {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin-top: 2rem;
+ scrollbar-width: none;
+
+ &.nocentered {
+ justify-content: flex-start;
+ }
+
+ &-more {
+ width: 100%;
+ }
+
+ &.cards-horizontal {
+ padding: 2rem 2rem 4.5rem 2rem;
+ scroll-snap-type: x proximity;
+ overflow-y: hidden;
+
+
+ &::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ &.cards-horizontal {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ }
+ }
+
+ @include mix.breakpoint-up('medium') {
+ &.cards-horizontal {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+
+ }
+
+ &-more {
+ justify-content: space-evenly;
+ }
+ }
+ }
+
+ &-body {
+ background-image: linear-gradient(hsla(0, 0%, 0%, 0),
+ hsla(0, 0%, 0%, 0.4) 10%,
+ hsla(0, 0%, 0%, 1));
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border-radius: 0.3rem;
+
+ header,
+ .description-area {
+ flex: 0 0 auto;
+ padding: 0 1.5rem;
+ }
+
+ header {
+ h3 {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
+
+ .description-area {
+ height: 3.2rem;
+ overflow: hidden;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .card-time {
+ display: block;
+ color: var(--clr-accent-light);
+ font-weight: 600;
+ margin-bottom: 1rem;
+ margin-top: 0.3rem;
+ font-size: 0.8rem;
+ padding: 0.2rem 1rem 0.2rem 0;
+ width: fit-content;
+ border-radius: 0.3em;
+ background-color: transparent;
+ background-image: linear-gradient(90deg,
+ hsl(270deg 71% 22% / 0%),
+ var(--clr-accent));
+ }
+
+ .more-links {
+ display: flex;
+ flex: 1 0 auto;
+ align-items: flex-end;
+ width: 100%;
+ justify-content: space-between;
+
+ .disabled {
+ display: block;
+ margin-top: 1rem;
+ padding: 1rem 1.25rem;
+ color: var(--clr-disabled-text);
+ cursor: not-allowed;
+ user-select: none;
+ }
+
+ a {
+ display: flex;
+ margin-top: 1rem;
+ padding: 1rem 1.5rem;
+ user-select: none;
+ position: relative;
+ z-index: 10;
+ gap: 0.3rem;
+
+ svg {
+ flex: 0 0 auto;
+ height: 1.5rem;
+ }
+
+ &:hover,
+ &:focus-visible {
+ color: var(--clr-white);
+
+ &::before {
+ width: 100%;
+ }
+ }
+
+ &:focus {
+ .new-tab-warning {
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ visibility: visible;
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 0%;
+ left: 0;
+ margin-top: -1rem;
+ background-color: var(--clr-accent);
+ height: 100%;
+ transition: all 150ms ease-in;
+ border-radius: 0.3rem;
+ z-index: -1;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_clients.scss b/src/assets/scss/components/_clients.scss
new file mode 100644
index 0000000..ca00cd8
--- /dev/null
+++ b/src/assets/scss/components/_clients.scss
@@ -0,0 +1,17 @@
+.clients {
+ background-color: var(--clr-background);
+ margin-bottom: -6em;
+
+ &-list {
+ padding: 2em;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 2em;
+
+ svg {
+ max-height: 5em;
+ }
+ }
+}
diff --git a/src/assets/scss/components/_featured.scss b/src/assets/scss/components/_featured.scss
new file mode 100644
index 0000000..34b5b78
--- /dev/null
+++ b/src/assets/scss/components/_featured.scss
@@ -0,0 +1,206 @@
+@use "../abstracts/mixin" as mix;
+
+.featured {
+ --clr-variant: var(--clr-accent);
+ --clr-variant-dark: var(--clr-accent-dark);
+
+ &.red {
+ --clr-variant: var(--clr-red);
+ --clr-variant-dark: var(--clr-red-dark);
+ }
+
+ &-container {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ justify-content: space-between;
+ overflow: hidden;
+ margin: 2em auto;
+ margin-top: 5em;
+ border-radius: 0.3em;
+ padding: 0;
+ background-color: transparent;
+ min-height: 20rem;
+ margin-bottom: -5rem;
+ // border: 0.0625em solid var(--clr-background);
+ // box-shadow: 0 0.3125rem 0.625rem rgb(0 0 0 / 40%)
+ box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4);
+
+ @include mix.breakpoint-down('medium') {
+ width: calc(100% - 2em);
+ }
+ }
+
+ &-right {
+ display: flex;
+ padding: 2em;
+ background-color: var(--clr-variant);
+ flex: 1 auto;
+ position: relative;
+ justify-content: center;
+ align-items: center;
+
+ @include mix.breakpoint-down('small') {
+ min-height: 10em;
+ }
+
+ img {
+ all: unset;
+ overflow: clip !important;
+ width: min(100%, 26.1875rem);
+ aspect-ratio: 1/1;
+ }
+
+ #svg {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ }
+ }
+
+ &-left {
+ color: var(--clr-white);
+ padding: 2em;
+ width: min(90ch, 100%);
+ background-color: var(--clr-variant-dark);
+
+ >.featured-header {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 1em;
+ gap: 0.5em;
+ align-items: flex-start;
+ }
+ }
+
+ &-header {
+ &_project-name {
+ border-radius: 0.3em;
+ background-color: var(--clr-variant);
+ background-image: linear-gradient(90deg,
+ var(--clr-variant-dark),
+ var(--clr-variant));
+ padding: 1em;
+ width: 100%;
+
+ p:last-of-type {
+ font-size: 0.8em;
+ }
+ }
+ }
+
+ &-main {
+ &>* {
+ max-width: 45ch;
+ }
+
+ &_tag {
+ border-radius: 0.3em;
+ padding: 0.5em 1.5em;
+ color: var(--clr-white);
+ border: 0.0625em solid var(--clr-white);
+ user-select: none;
+ pointer-events: none;
+ width: fit-content;
+ font-size: 0.7rem;
+
+ &-area {
+ display: flex;
+ margin-top: 2em;
+ gap: 0.5em;
+ flex-wrap: wrap;
+ }
+ }
+ }
+
+ &-body {
+ display: flex;
+ position: relative;
+ flex: 1 1 auto;
+
+ @include mix.breakpoint-down('small') {
+ flex-direction: column-reverse;
+ }
+ }
+
+ &-footer {
+ padding: 1em 2em;
+ display: flex;
+ justify-content: flex-end;
+ background-color: var(--clr-black-light);
+ gap: 0.4rem;
+ flex-wrap: wrap;
+
+ p {
+ border-radius: 0.3em;
+ padding: 0.5em 1.5em;
+ color: var(--clr-white);
+ border: 0.0625em solid var(--clr-white);
+ user-select: none;
+ pointer-events: none;
+ width: fit-content;
+ font-size: 0.9rem;
+
+ &:first-of-type {
+ border: none;
+ color: var(--clr-white);
+ background: var(--clr-variant-dark);
+ background-image: linear-gradient(-90deg,
+ var(--clr-variant),
+ var(--clr-variant-dark));
+ }
+
+ @include mix.breakpoint-down('small') {
+ width: 100%;
+ }
+ }
+ }
+
+ &-background {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ user-select: none;
+ pointer-events: none;
+ }
+
+ &-external {
+ &_link {
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
+ padding: 0.5em;
+ margin-top: 1em;
+ border-radius: 0.3em;
+ font-size: 1.2rem;
+ color: var(--clr-white);
+ border: none;
+ background: var(--clr-black-light);
+
+ svg {
+ width: 1.2em;
+ height: 1.2em;
+ }
+
+ &:is(:hover, :focus) {
+ color: var(--clr-white);
+ outline: 0.0625em solid var(--clr-background);
+ }
+ }
+ }
+
+ &-tag {
+ border-radius: 0.3em;
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ padding: 0.2em 0.5em;
+ z-index: 10;
+ font-weight: 500;
+ background-color: var(--clr-black-light);
+ color: var(--clr-white);
+ // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.2);
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_hero.scss b/src/assets/scss/components/_hero.scss
new file mode 100644
index 0000000..6fdd2d6
--- /dev/null
+++ b/src/assets/scss/components/_hero.scss
@@ -0,0 +1,90 @@
+@use "../abstracts/mixin" as mix;
+
+.hero {
+ overflow: hidden;
+ display: flex;
+ isolation: isolate;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ background-color: var(--clr-background);
+ height: 80dvh;
+ z-index: 3;
+ position: relative;
+
+ @include mix.breakpoint-down('medium') {
+ height: 100%;
+ }
+
+ &-decoration {
+ --width: 95vmin;
+ --increase: 1.2;
+ --duration: 12s;
+ --delay: calc((var(--duration) * 0.1));
+ position: absolute;
+ right: calc(var(--width) / -2);
+ bottom: calc(var(--width) / -2);
+ z-index: -1;
+ width: var(--width);
+ aspect-ratio: 1/1;
+ border-radius: 50%;
+ background-color: var(--clr-accent);
+ animation: twiching var(--duration) var(--delay) infinite;
+ }
+
+ @keyframes twiching {
+ 50% {
+ width: calc(var(--width) * var(--increase));
+ }
+ }
+
+ &-bigger {
+ --width: 120vmin;
+ --increase: 2;
+ --duration: 10s;
+ --delay: calc((var(--duration) * 0.2));
+ background-color: transparent;
+ border: max(0.5vmin, 0.125rem) solid var(--clr-accent);
+ }
+
+ .decoration {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ user-select: none;
+ pointer-events: none;
+
+ .relative {
+ position: relative;
+ }
+ }
+
+ &-svg {
+ &_bottom {
+ z-index: -1;
+ position: absolute;
+ bottom: 0;
+ margin-bottom: -.625rem;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ line-height: 0;
+ transform: rotate(180deg);
+
+ svg {
+ position: relative;
+ display: block;
+ width: calc(100% + 0.08125rem);
+ height: 9.375rem;
+
+ @include mix.breakpoint-down('small') {
+ height: 3.125rem;
+ }
+ }
+
+ .shape-fill {
+ fill: var(--clr-background-900);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_nav.scss b/src/assets/scss/components/_nav.scss
new file mode 100644
index 0000000..7e63f2f
--- /dev/null
+++ b/src/assets/scss/components/_nav.scss
@@ -0,0 +1,193 @@
+@use "../abstracts/mixin" as mix;
+
+.nav {
+ background-color: var(--clr-background);
+ flex-grow: 0;
+ flex-shrink: 0;
+ position: sticky;
+ top: 0;
+ padding: 0.8rem;
+ z-index: 20;
+
+ &-container {
+ width: 100%;
+ max-width: 64rem;
+ margin: 0 auto;
+ gap: 1rem;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: space-between;
+
+ .menubar {
+ font-weight: 600;
+ flex: 1;
+ justify-content: flex-end;
+ }
+ }
+
+ &-skipto {
+ background-color: var(--clr-accent);
+ color: var(--clr-white);
+ display: flex;
+ padding: 0 0.3rem;
+ align-self: center;
+ scale: 0 1;
+ order: 2;
+ transform-origin: left;
+ transition: scale 200ms ease;
+
+ &:focus {
+ color: var(--clr-white);
+ scale: 1;
+ }
+ }
+
+ .leftside {
+ display: flex;
+ gap: 1rem;
+ }
+
+ .rightside {
+ display: flex;
+ gap: 0.2rem;
+ }
+
+ .brand {
+ display: flex;
+ gap: 0.5rem;
+ flex: 1 0 auto;
+ order: 1;
+
+ &-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ }
+
+ &-logo {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .themes {
+ transition: background-color 200ms ease-in;
+ border-radius: 50%;
+ }
+
+ .themes,
+ &-mobile {
+ cursor: pointer;
+ background: none;
+ border: none;
+ display: block;
+ height: 2rem;
+ width: 2rem;
+ padding: 0.4rem;
+ color: inherit;
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+
+ &__section {
+ margin-top: 3.605625rem;
+ right: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: calc(100% - 3.605625rem);
+ background-color: var(--clr-background);
+ color: var(--clr-foreground);
+ z-index: 20;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2rem;
+ justify-content: center;
+
+ &.not-showing {
+ height: 0%;
+ overflow-y: hidden;
+ visibility: hidden;
+ }
+
+ @include mix.breakpoint-up('medium') {
+ height: 0%;
+ overflow-y: hidden;
+ visibility: hidden;
+ }
+
+ li {
+ width: 100%;
+ list-style: none;
+
+ a {
+ display: block;
+ text-transform: uppercase;
+ height: 5em;
+
+ div {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ translate: -50% -50%;
+ }
+
+ &:is(:hover, :focus) {
+ font-weight: 700;
+ }
+ }
+ }
+ }
+ }
+
+ &-mobile {
+ @include mix.breakpoint-up('medium') {
+ display: none;
+ }
+ }
+
+ ul {
+ display: none;
+ gap: 1rem;
+ align-items: center;
+
+ @include mix.breakpoint-up('medium') {
+ display: flex;
+ }
+
+ li {
+ list-style: none;
+ text-transform: uppercase;
+ letter-spacing: 0rem;
+
+ a {
+ position: relative;
+ z-index: 1;
+ transition: color 300ms 150ms ease-in;
+
+ &:hover,
+ &:focus-visible {
+ color: var(--clr-white);
+ z-index: 1;
+
+ &::before {
+ width: 100%;
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 0%;
+ background-color: var(--clr-accent);
+ height: 110%;
+ transition: all 150ms ease-in;
+ z-index: -1;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_note.scss b/src/assets/scss/components/_note.scss
new file mode 100644
index 0000000..aa5e287
--- /dev/null
+++ b/src/assets/scss/components/_note.scss
@@ -0,0 +1,90 @@
+
+.note {
+ color: var(--clr-white);
+ display: flex;
+ flex: 0 0 auto;
+ position: relative;
+ width: min(25rem, 100%);
+ flex-direction: column;
+ background-color: hsl(0, 0%, 13%);
+ border-radius: 0.6rem;
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ height: max(20rem, 100%);
+ transition: all 300ms ease-in-out;
+
+ article {
+ padding: 1rem;
+ z-index: 80;
+ }
+
+ &>svg {
+ position: absolute;
+ right: 0.1rem;
+ bottom: 0.1rem;
+ color: hsl(0, 0%, 11%);
+ }
+
+ article {
+ padding: 1rem;
+ height: 100%;
+ overflow-y: auto;
+
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+
+ li {
+ padding-left: 0.6rem;
+ }
+ }
+
+ &-heading {
+ font-weight: 600;
+ display: block;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ line-height: 1.2;
+ }
+
+ &-subheading {
+ font-style: italic;
+ }
+
+ li {
+ font-size: 0.85em;
+ }
+
+ &-header {
+ display: flex;
+ height: 2.5rem;
+ padding: 0 1rem;
+ width: 100%;
+ justify-content: space-between;
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ flex: 0 0 auto;
+
+ div {
+ display: flex;
+ align-items: center;
+ font-weight: 600;
+ gap: 0.2rem;
+
+ .dot {
+ height: 0.9375rem;
+ width: 0.9375rem;
+ background-color: hsl(0, 100%, 43%);
+ border-radius: 50%;
+
+ &:first-of-type {
+ background-color: green;
+ }
+
+ &:nth-of-type(2) {
+ background-color: yellow;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_partof.scss b/src/assets/scss/components/_partof.scss
new file mode 100644
index 0000000..0946bb6
--- /dev/null
+++ b/src/assets/scss/components/_partof.scss
@@ -0,0 +1,170 @@
+@use "../abstracts/mixin" as mix;
+
+.part-of {
+ background-color: var(--clr-background);
+ width: 100%;
+ margin-bottom: -6em;
+ padding-bottom: 4em;
+ position: relative;
+ isolation: isolate;
+
+ .description {
+ font-size: 0.9rem;
+ }
+
+ &-more {
+ display: block;
+ width: 100%;
+ padding: 1em;
+ background-color: var(--clr-background);
+ border: 0.0625em solid var(--clr-background-900);
+ margin-top: 1em;
+ border-radius: 0.3em;
+
+ &:is(:hover, :focus) {
+ background-color: var(--clr-accent);
+ border-color: var(--clr-accent-light);
+ color: var(--clr-white);
+ }
+ }
+
+ &-container {
+ max-width: 64rem;
+ margin: 0 auto;
+ padding: 3em 2em 2em 2em;
+ width: 100%;
+
+ h2 {
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+
+ @include mix.breakpoint-down('medium') {
+ margin-bottom: 0.5em;
+ }
+ }
+
+ .organization {
+ &-container {
+ margin-top: 1em;
+ display: grid;
+ gap: 1em;
+ grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
+
+ svg {
+ max-height: 8em;
+
+ @include mix.breakpoint-down('medium') {
+ max-width: 100%;
+ margin-top: 2em;
+ }
+ }
+ }
+
+ &-item {
+ border: 0.0625em solid var(--clr-background-900);
+ border-radius: 0.3em;
+ padding: 1em;
+ position: relative;
+ background: var(--clr-background);
+
+ &.full {
+ grid-column: 1 / -1;
+ display: flex;
+ align-items: center;
+ gap: 1em;
+
+ svg {
+ flex: 0 0 auto;
+ }
+
+ .organization-content {
+ flex: 1 auto;
+ margin-top: 2em;
+ }
+
+ @include mix.breakpoint-down('medium') {
+ flex-direction: column;
+ }
+ }
+ }
+
+ &-desc {
+ margin-bottom: 1em;
+ }
+
+ &-position {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 0.5em;
+
+ span {
+ border-radius: 0.3em;
+ padding: 0.5em 1.5em;
+ color: var(--clr-foreground);
+ border: 0.0625em solid var(--clr-foreground);
+ align-items: center;
+ gap: 0.4rem;
+ user-select: none;
+ pointer-events: none;
+
+ &:first-of-type {
+ border: none;
+ color: var(--clr-white);
+ background: var(--clr-accent-dark);
+ background-image: linear-gradient(
+ -90deg,
+ var(--clr-accent),
+ var(--clr-accent-dark)
+ );
+ background-size: 400%;
+ animation: positionanimate 1s infinite alternate;
+ }
+ }
+ }
+
+ &-join {
+ display: flex;
+ flex-direction: row;
+ color: var(--clr-foreground);
+ border: 0.0625em solid var(--clr-foreground);
+ border-radius: 0.3em;
+ padding: 0.5em 1.5em;
+ align-items: center;
+ width: fit-content;
+ position: absolute;
+ right: 1em;
+ font-size: 0.8rem;
+ top: 1em;
+ user-select: none;
+ pointer-events: none;
+ }
+ }
+ }
+
+ &-svg {
+ &_bottom {
+ position: absolute;
+ bottom: -0.0625em;
+ z-index: -1;
+ color: var(--clr-accent);
+
+ @include mix.breakpoint-up('medium') {
+ bottom: -4.0625em;
+ }
+
+ @include mix.breakpoint-up('large') {
+ bottom: -8.0625em;
+ }
+ }
+ }
+}
+
+@keyframes positionanimate {
+ 0% {
+ background-position: left;
+ }
+ 100% {
+ background-position: right;
+ }
+}
diff --git a/src/assets/scss/components/_post.scss b/src/assets/scss/components/_post.scss
new file mode 100644
index 0000000..95cec2d
--- /dev/null
+++ b/src/assets/scss/components/_post.scss
@@ -0,0 +1,81 @@
+@use "../abstracts/mixin" as mix;
+
+.post {
+ &s {
+ margin-top: 2.5rem;
+
+ &-yeargroup {
+ margin-bottom: 0.5em;
+ }
+
+ &-detail {
+ margin-top: 1rem;
+ margin-left: 2rem;
+ background-color: var(--clr-background);
+ color: var(--clr-foreground-700);
+ border: 0.0625em solid var(--clr-background-900);
+ padding: 1rem;
+ border-radius: 0.3rem;
+
+ @include mix.breakpoint-down('small') {
+ margin-inline: 0;
+ }
+
+ &_header {
+ font-size: 1.6rem;
+ line-height: 1.1;
+ margin-bottom: 0.5em;
+ display: block;
+ font-weight: 600;
+ color: var(--clr-foreground);
+ }
+
+ &_accent {
+ color: var(--clr-white);
+ margin-bottom: 1em;
+ width: fit-content;
+ flex-wrap: wrap;
+ gap: 0.5em;
+ display: flex;
+
+ &-item {
+ font-size: 0.9rem;
+ gap: 0.5em;
+ border-radius: 0.3em;
+ padding: 0.4em;
+ display: flex;
+ color: var(--clr-foreground);
+ border: 0.0625em solid var(--clr-foreground);
+ align-items: center;
+
+ &_filled {
+ border: none;
+ color: var(--clr-white);
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ background-color: var(--clr-accent-light);
+ background-image: linear-gradient(45deg,
+ var(--clr-accent-dark),
+ var(--clr-accent));
+ }
+ }
+ }
+
+ &_svg {
+ width: 1.5em;
+ height: fit-content;
+ }
+ }
+
+ &-list {
+ margin: 0;
+ }
+
+ &:not(:first-of-type) {
+ margin-top: 1.5rem;
+ }
+
+ &:is(:last-of-type) {
+ margin-bottom: 1.5rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/_preload.scss b/src/assets/scss/components/_preload.scss
new file mode 100644
index 0000000..485b280
--- /dev/null
+++ b/src/assets/scss/components/_preload.scss
@@ -0,0 +1,55 @@
+.preload {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--clr-background);
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100dvh;
+ z-index: 999;
+ flex-direction: column;
+ translate: 0 0;
+ opacity: 1;
+ transition: transform 1s ease-in-out;
+
+ svg {
+ rotate: 0deg;
+ max-width: 10em;
+ animation: preload 2s infinite;
+ }
+
+ &-text {
+ margin-top: 1em;
+ max-width: 30ch;
+ text-align: center;
+ }
+
+ &.hidden {
+ translate: 0 -100vh;
+ }
+
+ &.disabled {
+ display: none;
+ }
+}
+
+@keyframes preload {
+ 25% {
+ rotate: 15deg;
+ }
+
+ 50% {
+ rotate: 0deg;
+ }
+
+ 75% {
+ rotate: -15deg;
+ }
+
+ 100% {
+ rotate: 0deg;
+ }
+}
diff --git a/src/assets/scss/components/_prototype.scss b/src/assets/scss/components/_prototype.scss
new file mode 100644
index 0000000..1a3abe5
--- /dev/null
+++ b/src/assets/scss/components/_prototype.scss
@@ -0,0 +1,261 @@
+@use "../abstracts/mixin" as mix;
+
+.prototype {
+ margin-top: 4rem;
+ position: relative;
+ isolation: isolate;
+
+ &s {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 7rem;
+
+ @include mix.breakpoint-up('large') {
+ margin: 3rem;
+ }
+
+ @include mix.breakpoint-down('medium') {
+ flex-direction: row;
+ }
+ }
+
+ &-header {
+ margin-bottom: 1rem;
+ }
+
+ &-card {
+ align-items: center;
+ display: flex;
+ border-radius: 0.3rem;
+ width: 100%;
+
+ &:first-of-type {
+ @include mix.breakpoint-down('medium') {
+ margin-top: 2em;
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ flex-direction: column;
+ }
+
+ &:nth-of-type(odd) {
+ .prototype-header {
+ order: 2;
+
+ &::before {
+ background-color: var(--clr-accent-dark);
+ rotate: -6deg;
+ }
+
+ @include mix.breakpoint-down('medium') {
+ order: 0;
+ }
+ }
+
+ .prototype-description {
+ .text {
+ padding: 1rem;
+ padding-right: 2rem;
+ }
+
+ .links {
+ justify-content: flex-start;
+ padding-left: 1rem;
+ }
+ }
+ }
+ }
+
+ &-description {
+ flex: 1 1 auto;
+ z-index: 5;
+
+ ul {
+ li {
+ margin-top: 0.3rem;
+ }
+ }
+
+ .text {
+ padding: 1rem;
+ padding-left: 2rem;
+
+ .language {
+ display: inline-block;
+ padding: 0 0.1rem;
+ background-color: var(--clr-accent-dark);
+ color: var(--clr-white);
+ border-radius: 0.3rem;
+ user-select: none;
+ font-size: 0.8rem;
+ }
+
+ @include mix.breakpoint-down('medium') {
+ padding-left: 0;
+ }
+
+ ul {
+ margin-top: 0.8rem;
+ border-radius: 0.3rem;
+ background-color: hsl(0, 0%, 10%);
+ padding: 1rem;
+ box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ }
+ }
+
+ .links {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ padding-right: 1rem;
+
+ a {
+ background-color: var(--clr-accent);
+ color: var(--clr-white);
+ padding: 0.5rem 1rem;
+ border-radius: 0.3rem;
+ transition: all 300ms ease-out;
+ display: flex;
+
+ svg {
+ flex: 0 0 auto;
+ height: 1.5rem;
+ }
+
+ &:hover {
+ filter: brightness(120%);
+ }
+ }
+ }
+
+ &_header {
+ display: flex;
+ margin-bottom: 1em;
+ gap: 0.5em;
+ font-weight: 700;
+ align-items: center;
+ line-height: 1.2;
+ }
+ }
+
+ &-more {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.4rem;
+
+ i {
+ display: inline-block;
+ font-style: normal;
+ padding: 0.2rem 0.7rem;
+ background-color: var(--clr-background-900);
+ border-radius: 0.3rem;
+
+ &.error {
+ background-color: hsl(0, 100%, 43%);
+ color: var(--clr-white);
+ }
+
+ &.active {
+ background-color: #067e06;
+ color: var(--clr-white);
+ }
+ }
+
+ .status {
+ background-image: linear-gradient(
+ -90deg,
+ var(--clr-accent),
+ var(--clr-accent-dark)
+ );
+ padding: 0 0.7rem;
+ display: flex;
+ align-items: center;
+ border-radius: 0.3rem;
+ color: white;
+ margin-right: 0.3rem;
+ }
+ }
+
+ &-header {
+ flex: 0 0 auto;
+ position: relative;
+ width: 25rem;
+ height: 20rem;
+ color: var(--clr-white);
+
+ @include mix.breakpoint-down('medium') {
+ width: 100%;
+ max-width: 25rem;
+ }
+
+ &:hover {
+ .note {
+ scale: 1.1;
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ rotate: 6deg;
+ background: var(--clr-accent);
+ left: -0.7rem;
+ border-radius: 40% 20% / 10%;
+ }
+ }
+
+ .note {
+ article {
+ padding: 1rem;
+ height: 100%;
+ overflow-y: auto;
+ scrollbar-width: none;
+ position: relative;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+ }
+
+ pre {
+ overflow: scroll;
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+ }
+ }
+
+ &-svg {
+ &_top {
+ position: absolute;
+ top: -16.0625em;
+ z-index: -1;
+ color: var(--clr-accent);
+
+ @include mix.breakpoint-up('large') {
+ top: -20.0625em;
+ }
+
+ @include mix.breakpoint-down('small') {
+ top: -10em;
+ }
+
+ @include mix.breakpoint-up('xlarge') {
+ top: -25em;
+ }
+ }
+
+ &_bottom {
+ position: absolute;
+ bottom: -0.0625em;
+ z-index: -1;
+ color: var(--clr-background);
+ }
+ }
+}
diff --git a/src/assets/scss/components/_title.scss b/src/assets/scss/components/_title.scss
new file mode 100644
index 0000000..193bfd2
--- /dev/null
+++ b/src/assets/scss/components/_title.scss
@@ -0,0 +1,340 @@
+@use "../abstracts/mixin" as mix;
+
+.title {
+ &-container {
+ display: flex;
+ gap: 2rem;
+ max-width: 70rem;
+ padding: 3rem 2rem;
+ align-items: flex-start;
+ z-index: 0;
+
+ @include mix.breakpoint-up('large') {
+ // background-color: var(--clr-background);
+ border-radius: 0.3em;
+ }
+
+ .title {
+ &-left {
+ flex: 1 0 auto;
+ max-width: 45ch;
+ }
+
+ &-right {
+ position: relative;
+ width: 25rem;
+ height: 20rem;
+
+ @include mix.breakpoint-down('medium') {
+ width: 100%;
+ }
+
+ &:hover {
+ .note.has-been-animated {
+ rotate: 0deg;
+ scale: 1.1;
+ }
+ }
+
+ .note.has-been-animated {
+ rotate: 3deg;
+ --_scale: 300ms;
+ --_rotate: 700ms;
+ }
+
+ .note {
+ rotate: -10deg;
+ }
+
+ &::before {
+ rotate: 9deg;
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: var(--clr-complementary);
+ left: -0.7rem;
+ border-radius: 40% 20% / 90%;
+ animation: rolling 3s infinite ease-in;
+ }
+
+ @keyframes rolling {
+ 50% {
+ rotate: -9deg;
+ scale: 1.01;
+ }
+ }
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ flex-direction: column-reverse;
+ }
+ }
+
+ &-side {
+ &_top {
+ display: flex;
+ flex: 0 0 auto;
+ flex-direction: column;
+ gap: 0.4rem;
+ width: 100%;
+ }
+
+ &_bottom {
+ width: 100%;
+ font-size: 1.2rem;
+
+ h2 {
+ margin-bottom: 0.5rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+
+ @include mix.breakpoint-down('small') {
+ font-size: 1.2rem;
+ }
+ }
+
+ .status-area {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 0.5em;
+ font-size: 1rem;
+ margin-bottom: 0.5em;
+
+ >.status-icon {
+ width: 0.75em;
+ height: 0.75em;
+ background-color: var(--clr-accent);
+ border-radius: 50%;
+ }
+
+ .status-hoverable {
+ position: relative;
+ cursor: pointer;
+
+ &:is(:hover, :focus),
+ &:has(:is(:hover, :focus)) {
+ .status-card {
+ visibility: visible;
+ user-select: text;
+ pointer-events: unset;
+ translate: -50% 0%;
+ }
+ }
+
+ .status-card {
+ visibility: hidden;
+ user-select: none;
+ pointer-events: none;
+ background-color: var(--clr-background);
+ box-shadow: 0 0.625rem 1.25rem hsla(0, 0%, 0%, 0.4);
+ // box-shadow: 0 0.625rem 1.25rem hsla(270, 71%, 22%, 0.7);
+ padding: 1em;
+ left: 50%;
+ border-radius: 0.2em;
+ width: 25ch;
+ position: absolute;
+ z-index: 70;
+ margin-top: 0.2em;
+ translate: -50% 20%;
+ transition: all 200ms ease-in-out;
+
+ &-header {
+ font-size: 0.9em;
+ letter-spacing: normal;
+ margin-bottom: unset;
+ }
+
+ &-body {
+ margin-top: 1em;
+ display: flex;
+ gap: 1em;
+
+ .status-card-left {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--clr-foreground-900);
+ border-radius: 0.4em;
+ width: 6ch;
+ height: 6ch;
+ flex: 0 0 auto;
+
+ svg {
+ width: 75%;
+ height: 75%;
+ }
+ }
+
+ .status-card-right {
+ font-size: 0.7em;
+ font-weight: normal;
+ }
+ }
+
+ &-button {
+ text-align: center;
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ margin-top: 1em;
+ font-size: 0.9em;
+ background-color: var(--clr-accent);
+ padding: 0.4em;
+ border-radius: 0.2em;
+ color: var(--clr-white);
+
+ &:is(:hover, :focus) {
+ background-color: var(--clr-accent-dark);
+ color: var(--clr-white);
+ }
+ }
+
+ &:is(:hover, :focus) {
+ visibility: visible;
+ user-select: text;
+ pointer-events: unset;
+ translate: -50% 0%;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &-link {
+ display: block;
+ width: max-content;
+ }
+
+ &-activity {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: -0.4rem;
+
+ &__details {
+ margin-left: 0.4rem;
+ font-weight: 300;
+ user-select: none;
+ color: var(--clr-foreground-900);
+
+ #month {
+ font-weight: 600;
+ }
+
+
+ #activity {
+ display: inline-block;
+ position: relative;
+ font-weight: 400;
+ z-index: 0;
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 70%;
+ height: 0.2rem;
+ bottom: 0;
+ border-bottom: 0.1rem dashed var(--clr-accent);
+ }
+ }
+ }
+
+ #year,
+ svg,
+ #month {
+ color: var(--clr-foreground-900)
+ }
+
+ svg {
+ width: 1.2rem;
+ }
+ }
+
+ &-text {
+ font-size: 2.4rem;
+ font-weight: 700;
+ margin-left: -0.1rem;
+ transition: font-size 300ms ease-in;
+ }
+
+ &-action {
+ display: flex;
+ flex-direction: row;
+ margin-top: 1.2rem;
+ color: var(--clr-white);
+ background: var(--clr-accent-dark);
+ background-image: linear-gradient(-90deg,
+ var(--clr-accent),
+ var(--clr-accent-dark));
+ border-radius: 0.3rem;
+ padding: 0.5rem 1.5rem;
+ align-items: center;
+ gap: 0.4rem;
+ cursor: pointer;
+ font-size: 1.3rem;
+ transition: all 300ms ease-out;
+
+ &:hover,
+ &:focus-visible {
+ color: hsl(0, 0%, 80%);
+ background-color: var(--clr-accent);
+ filter: brightness(140%);
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ scale: 1.04;
+ }
+
+ svg {
+ height: 1.3rem;
+ width: 1.3rem;
+ }
+
+ &[disabled] {
+ cursor: not-allowed;
+
+ &:hover {
+ scale: 0.96;
+ box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ filter: grayscale(100);
+ }
+ }
+
+ &.secondary {
+ background-color: var(--clr-background-800);
+ color: var(--clr-foreground-800);
+ background-image: none;
+ box-shadow: none;
+
+ &:hover,
+ &:focus-visible {
+ filter: brightness(100%);
+ scale: 0.98;
+ }
+ }
+
+ &__group {
+ display: flex;
+ gap: 0.6rem;
+ }
+ }
+
+ &-submenu {
+ display: flex;
+ position: relative;
+ margin-top: -0.4rem;
+ margin-left: 0.4rem;
+ align-items: center;
+ gap: 0.3rem;
+ color: var(--clr-foreground-800);
+ user-select: none;
+ z-index: 0;
+
+ svg {
+ height: 1rem;
+ rotate: 180deg;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/components/index.scss b/src/assets/scss/components/index.scss
new file mode 100644
index 0000000..fdd1d5e
--- /dev/null
+++ b/src/assets/scss/components/index.scss
@@ -0,0 +1,13 @@
+@use "_aboutme";
+@use "_animation";
+@use "_card";
+@use "_clients";
+@use "_hero";
+@use "_nav";
+@use "_note";
+@use "_partof";
+@use "_preload";
+@use "_title";
+@use "_prototype";
+
+@use "_featured";
\ No newline at end of file
diff --git a/src/assets/scss/contact.scss b/src/assets/scss/contact.scss
new file mode 100644
index 0000000..6900216
--- /dev/null
+++ b/src/assets/scss/contact.scss
@@ -0,0 +1,11 @@
+@use "./abstracts/" as *;
+
+@use "./base/" as *;
+
+@use "./layouts/" as *;
+
+@use "./components/nav";
+@use "./components/preload";
+@use "./components/title";
+
+@use "./pages/contact";
\ No newline at end of file
diff --git a/src/assets/scss/error.scss b/src/assets/scss/error.scss
index 9780e4e..3840e64 100644
--- a/src/assets/scss/error.scss
+++ b/src/assets/scss/error.scss
@@ -1,14 +1,12 @@
-@import './modules/vars';
-@import './modules/mixin';
-@import './modules/global';
+@use "./abstracts/" as *;
-@import './modules/component/preload';
+@use "./base/" as *;
-@import './modules/header';
-@import './modules/component/nav';
-@import './modules/component/title';
-@import './modules/main';
-@import './modules/footer';
+@use "./layouts/" as *;
-@import './modules/component/contact';
-@import './modules/component/error';
+@use "./components/nav";
+@use "./components/preload";
+@use "./components/title";
+
+@use "./pages/contact";
+@use "./pages/error";
\ No newline at end of file
diff --git a/src/assets/scss/layouts/_footer.scss b/src/assets/scss/layouts/_footer.scss
new file mode 100644
index 0000000..d5107a1
--- /dev/null
+++ b/src/assets/scss/layouts/_footer.scss
@@ -0,0 +1,72 @@
+@use "../abstracts/mixin" as mix;
+
+.footer {
+ background-color: var(--clr-background);
+ color: var(--clr-foreground);
+ padding: 0.8rem;
+
+ .brand {
+ display: flex;
+ gap: 0.5rem;
+ width: max-content;
+
+ &-title {
+ font-size: 1.3rem;
+ font-weight: 700;
+ }
+
+ &-logo {
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ &-top {
+ padding: 0.8rem;
+ padding-top: 3rem;
+ font-size: 2rem;
+ max-width: 35ch;
+ line-height: 1.2;
+ position: relative;
+ isolation: isolate;
+
+ &::before {
+ content: '"';
+ position: absolute;
+ font-size: 4em;
+ left: 0;
+ top: 0;
+ color: var(--clr-background-800);
+ font-weight: 600;
+ user-select: none;
+ z-index: -1;
+ }
+ }
+
+ &-bottom {
+ padding: 0.8rem;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ gap: 0.3em;
+ }
+
+ &-container {
+ max-width: 64rem;
+ margin: 0 auto;
+ }
+
+ .copyright {
+ font-size: 0.9rem;
+ margin: 1rem auto;
+ text-align: left;
+ border: 0.0625rem solid var(--clr-foreground);
+ width: 100%;
+ max-width: max-content;
+ padding: 0.2rem 2rem;
+
+ @include mix.breakpoint-up('medium') {
+ flex-direction: row;
+ }
+ }
+}
diff --git a/src/assets/scss/layouts/_header.scss b/src/assets/scss/layouts/_header.scss
new file mode 100644
index 0000000..d86013c
--- /dev/null
+++ b/src/assets/scss/layouts/_header.scss
@@ -0,0 +1,21 @@
+.header {
+ &_article {
+ all: unset;
+ position: relative;
+ width: 100vw;
+ aspect-ratio: 16/9;
+ height: fit-content;
+ max-height: 60vh;
+ overflow: hidden;
+ margin: 0 auto;
+
+ img {
+ top: 50%;
+ translate: 0 -50%;
+ position: absolute;
+ aspect-ratio: 16 / 9;
+ width: 100%;
+ height: auto;
+ }
+ }
+}
diff --git a/src/assets/scss/layouts/_main.scss b/src/assets/scss/layouts/_main.scss
new file mode 100644
index 0000000..d86820e
--- /dev/null
+++ b/src/assets/scss/layouts/_main.scss
@@ -0,0 +1,176 @@
+@use "../abstracts/mixin" as mix;
+
+.main {
+ background-color: var(--clr-background-900);
+ flex: 1 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 6rem;
+ overflow: hidden;
+
+ &-container {
+ max-width: 64rem;
+ margin: 0 auto;
+ padding: 3rem 2rem;
+ width: 100%;
+ }
+
+ .section {
+ &-more {
+ display: block;
+ width: 100%;
+ padding: 1em;
+ border: 0.0625em solid var(--clr-foreground);
+ margin-top: 1em;
+ border-radius: 0.3em;
+
+ &:is(:hover, :focus) {
+ background-color: var(--clr-accent);
+ border-color: var(--clr-accent-light);
+ color: var(--clr-white);
+ }
+ }
+
+ &-header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ z-index: 3;
+ gap: 2em;
+ font-size: 1.2rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+
+ .header-title {
+ display: flex;
+ line-height: 1;
+ gap: 0.6em;
+
+ a {
+ height: max-content;
+ }
+ }
+
+ span {
+ text-transform: none;
+ letter-spacing: 0;
+ }
+
+ @include mix.breakpoint-down('large') {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0;
+
+ span {
+ &::before {
+ display: none;
+ }
+ }
+ }
+
+ .header-desc {
+ display: block;
+ position: relative;
+ font-size: 0.9rem;
+ color: var(--clr-foreground-700);
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ border: 0.1875em solid var(--clr-foreground);
+ top: 50%;
+ translate: 0 -50%;
+ margin-left: -1em;
+ border-radius: 50%;
+ }
+ }
+ }
+ }
+}
+
+.blog {
+ .main-container {
+ padding-inline: 0;
+
+ >*:not(ul) {
+ width: min(min(100vw - 4rem, 60rem), 58rem);
+ margin-inline: auto;
+ }
+ }
+}
+
+.work {
+ position: relative;
+ isolation: isolate;
+ padding-top: 4rem;
+
+ &-svg {
+ &_bottom {
+ position: absolute;
+ bottom: calc(-0.0625em - 6em);
+ z-index: -1;
+ color: var(--clr-background);
+ }
+ }
+
+ .section-header {
+ width: min(min(100vw - 4rem, 60rem), 58rem);
+ margin: auto;
+ }
+
+ .section-more {
+ margin: auto;
+ margin-top: -2em;
+ display: block;
+ width: min(min(calc(100vw - 4rem), 60rem), 58rem);
+ padding: 1em;
+ background-color: var(--clr-background);
+ border: 0.0625em solid var(--clr-background-900);
+ border-radius: 0.3em;
+
+ &:is(:hover, :focus) {
+ background-color: var(--clr-accent);
+ border-color: var(--clr-accent-light);
+ color: var(--clr-white);
+ }
+ }
+
+ @include mix.breakpoint-down('medium') {
+ .main-container {
+ padding-inline: 0;
+ }
+ }
+}
+
+.contact {
+ .form-input {
+ display: flex;
+ flex-direction: column;
+
+ &__captcha {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ label {
+ margin: 2em 0 0.5em 0;
+ }
+
+ input,
+ textarea {
+ width: 100%;
+ padding: 1rem;
+ border: none;
+ background-color: var(--clr-background);
+ color: var(--clr-foreground-900);
+ resize: none;
+ }
+
+ input[type='submit'] {
+ border: none;
+ color: var(--clr-white);
+ background-color: var(--clr-accent);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/layouts/index.scss b/src/assets/scss/layouts/index.scss
new file mode 100644
index 0000000..3605300
--- /dev/null
+++ b/src/assets/scss/layouts/index.scss
@@ -0,0 +1,3 @@
+@use "_header";
+@use "_main";
+@use "_footer";
\ No newline at end of file
diff --git a/src/assets/scss/pages/_article.scss b/src/assets/scss/pages/_article.scss
new file mode 100644
index 0000000..e27946e
--- /dev/null
+++ b/src/assets/scss/pages/_article.scss
@@ -0,0 +1,434 @@
+@use "../abstracts/mixin" as mix;
+
+.article {
+ --_article-color: hsla(270, 50%, 40%, 0.5);
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ color: var(--clr-foreground-900);
+ background-color: var(--clr-background-900);
+ line-height: 2;
+ margin: auto;
+
+ main {
+ position: relative;
+
+ .table-of-contents {
+ position: absolute;
+ top: 0;
+ right: 0;
+
+ @include mix.breakpoint-down('medium') {
+ position: unset;
+ }
+ }
+ }
+
+
+ a {
+ font-weight: 600;
+ color: var(--clr-href);
+
+ &:not(.header-anchor, .breadcrumb) {
+ text-decoration: 0.0625em underline var(--clr-href);
+ text-underline-offset: 0.35em;
+ }
+
+ &:hover {
+ color: var(--clr-href-visited);
+ }
+
+ &:focus-visible {
+ outline: thin dotted;
+ }
+
+ &:hover,
+ &:active {
+ outline: 0;
+ }
+ }
+
+ span {
+
+ a:hover,
+ a:visited,
+ a:active,
+ a:focus-visible {
+ color: var(--clr-href);
+ }
+ }
+
+ ::selection {
+ background: var(--clr-accent-dark);
+ color: var(--clr-white);
+ }
+
+ a::selection {
+ background: var(--clr-accent-dark);
+ color: var(--clr-white);
+ }
+
+ :is(p:not(:first-of-type), table, blockquote) {
+ max-width: 60ch;
+ }
+
+ p {
+ margin: 1rem 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-weight: 600;
+ color: var(--clr-foreground-900);
+ padding: 1rem 0;
+ line-height: 1.1em;
+ }
+
+ h4,
+ h5,
+ h6 {
+ font-weight: bold;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ }
+
+ h2 {
+ font-size: 2rem;
+ }
+
+ h3 {
+ font-size: 1.5rem;
+ }
+
+ h4 {
+ font-size: 1.2rem;
+ }
+
+ h5 {
+ font-size: 1rem;
+ }
+
+ h6 {
+ font-size: 0.9rem;
+ }
+
+ blockquote {
+ color: var(--clr-foreground-900);
+ margin: 0;
+ padding-left: 2em;
+ border-left: 0.5em var(--clr-accent) solid;
+ }
+
+ hr {
+ display: block;
+ height: 0.15em;
+ border: 0;
+ border-top: 0.0625em solid var(--clr-accent);
+ border-bottom: 0.0625em solid var(--clr-accent-light);
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ pre,
+ code,
+ kbd,
+ samp {
+ padding: 0 0.3em;
+ font-family: monospace, "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+ // font-size: 0.8rem;
+ // line-height: 1.4;
+ }
+
+ pre {
+ border: 0.1rem solid var(--_article-color);
+ // background-color: var(--_article-color);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+
+ code {
+ box-shadow: none;
+ background-color: transparent;
+ }
+ }
+
+ b,
+ strong {
+ font-weight: bold;
+ color: var(--clr-foreground-900);
+ }
+
+ dfn {
+ font-style: italic;
+ }
+
+ ins {
+ background: #ff9;
+ color: #000;
+ text-decoration: none;
+ }
+
+ mark {
+ background-color: var(--clr-black);
+ color: var(--clr-white);
+
+ &:is(:hover, :focus) {
+ color: var(--clr-white);
+ }
+ }
+
+ sub,
+ sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+
+ >a {
+ text-decoration: none !important;
+ }
+ }
+
+ sup {
+ top: -0.5rem;
+ }
+
+ sub {
+ bottom: -0.25rem;
+ }
+
+ ul,
+ ol {
+ margin: 1em 0;
+ padding: 0 0 0 2rem;
+ }
+
+ ul li {
+ list-style-type: disc;
+ }
+
+ ol li {
+ list-style-type: decimal;
+ }
+
+ li p:last-child {
+ margin: 0;
+ }
+
+ dd {
+ margin: 0 0 0 2rem;
+ }
+
+ img {
+ border: 0;
+ vertical-align: middle;
+ }
+
+ table {
+ border-collapse: collapse;
+ overflow-x: scroll;
+ border-spacing: 0;
+ width: 100%;
+ background-color: var(--clr-background);
+ border-radius: 0.5rem;
+ overflow: hidden;
+
+ td,
+ th {
+ padding: 0.4rem 0.8rem;
+ }
+
+ tr {
+ :is(td, th):first-child {
+ text-align: center;
+ }
+ }
+
+ th {
+ background-color: var(--_article-color);
+ color: var(--table-header);
+ // border-bottom: 0.25rem solid var(--clr-accent);
+ }
+
+ td {
+ vertical-align: top;
+ }
+
+ &.properties {
+ th {
+ border-bottom: 0.0625rem solid var(--clr-background-800);
+ border-left: 0.25rem solid var(--clr-accent);
+ }
+ }
+ }
+
+ .table-of-contents {
+ .toc-container-header {
+ font-weight: 700;
+ }
+
+ ul {
+ margin: 0;
+
+ li {
+ margin-top: 0.15em;
+ list-style: circle;
+ }
+ }
+ }
+
+ @media print {
+ * {
+ background: transparent !important;
+ color: var(--clr-accent-dark) !important;
+ filter: none !important;
+ -ms-filter: none !important;
+ }
+
+ body {
+ font-size: 12pt;
+ max-width: 100%;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ hr {
+ height: 0.0625em;
+ border: 0;
+ border-bottom: 0.0625em solid var(--clr-accent-dark);
+ }
+
+ a[href]:after {
+ content: ' (' attr(href) ')';
+ }
+
+ abbr[title]:after {
+ content: ' (' attr(title) ')';
+ }
+
+ .ir a:after,
+ a[href^='javascript:']:after,
+ a[href^='#']:after {
+ content: '';
+ }
+
+ pre,
+ blockquote {
+ border: 0.0625em solid #999;
+ padding-right: 1em;
+ page-break-inside: avoid;
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ @page :left {
+ margin: 15mm 20mm 15mm 10mm;
+ }
+
+ @page :right {
+ margin: 15mm 10mm 15mm 20mm;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
+
+ &-flex_list {
+ flex-wrap: wrap;
+ gap: 0.5em;
+ display: flex;
+ margin: unset !important;
+ padding: unset !important;
+ }
+
+ &-detail {
+ &_list {
+ flex-wrap: wrap;
+ gap: 0.5em;
+ display: flex;
+ margin: unset !important;
+ padding: unset !important;
+ }
+
+ &_item {
+ font-size: 0.9rem;
+ gap: 0.5em;
+ border-radius: 0.3em;
+ padding: 0.4em;
+ display: flex;
+ color: var(--clr-foreground);
+ border: 0.0625em solid var(--clr-foreground);
+ align-items: center;
+
+ &:first-of-type {
+ border: none;
+ color: var(--clr-white);
+ box-shadow: 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.4);
+ background-color: var(--clr-accent-light);
+ background-image: linear-gradient(45deg,
+ var(--clr-accent-dark),
+ var(--clr-accent));
+ }
+
+ &_svg {
+ width: 1.2rem;
+ }
+ }
+ }
+
+ &-summary {
+ font-style: italic;
+ font-size: 1.2rem;
+ color: var(--clr-foreground-700);
+ }
+
+ .more {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(20em, 60ch), 29.5rem));
+ margin-top: 1em;
+ gap: 1em;
+
+ div {
+ padding: 1rem;
+ background: var(--clr-background);
+
+ a {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+ }
+
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/pages/_contact.scss b/src/assets/scss/pages/_contact.scss
new file mode 100644
index 0000000..17389b8
--- /dev/null
+++ b/src/assets/scss/pages/_contact.scss
@@ -0,0 +1,182 @@
+.contact {
+ .form-input {
+ display: flex;
+ flex-direction: column;
+
+ &__captcha {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ label {
+ margin: 2em 0 0.5em 0;
+ }
+
+ input,
+ textarea {
+ width: 100%;
+ padding: 1rem;
+ border: none;
+ background-color: var(--clr-background);
+ color: var(--clr-foreground-900);
+ resize: none;
+ }
+
+ input[type='submit'] {
+ border: none;
+ color: var(--clr-white);
+ background-color: var(--clr-accent);
+ }
+ }
+
+ &-container {
+ --_main-color: var(--clr-background);
+ --_transparent-limit: 30%;
+
+ display: grid;
+ gap: 0.5rem;
+
+ .contact-summary {
+ background-color: var(--_main-color);
+ padding: 2rem;
+ // border: 0.0625rem solid var(--clr-background-800);
+ border-radius: 0.5em;
+ margin-top: 2em;
+
+ sup {
+ font-size: 0.6em;
+ }
+
+ a {
+ color: var(--clr-accent-light);
+ text-decoration: underline;
+ text-underline-offset: 0.2em;
+ font-weight: 500;
+ transition: text-underline-offset 100ms ease-in-out;
+
+ &:is(:hover, :focus) {
+ text-underline-offset: 0.3em;
+ }
+ }
+ }
+
+ .social {
+ &-container {
+ --_size: 20em;
+ --_minGridSize: min(var(--_size), calc(100% - 4rem + 0.5rem));
+ --_minMax: minmax(var(--_minGridSize), 1fr);
+ --_gridSize: repeat(auto-fit, var(--_minMax));
+ display: grid;
+ grid-template-columns: var(--_gridSize);
+ gap: 0.5rem;
+
+ &__small {
+ --_size: 18em;
+
+ .social-item {
+ aspect-ratio: unset;
+ padding: 1em;
+
+ &-text {
+
+ h2 {
+ font-size: 0.9em;
+ }
+ }
+ }
+ }
+
+ li:nth-of-type(odd) {
+ .social-item {
+ grid-template-areas: "text text";
+ }
+ }
+
+ }
+
+ &-item {
+ --_disabledColor: var(--clr-background-800);
+ aspect-ratio: 3/1;
+ border: 0.0625rem solid var(--_disabledColor);
+ border-radius: 0.5em;
+ overflow: hidden;
+ color: var(--_disabledColor);
+ cursor: not-allowed;
+
+ &[href] {
+ border: 0.0625rem solid var(--_main-color);
+ cursor: pointer;
+ color: var(--clr-foreground);
+ }
+
+ user-select: none;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-areas: "text text";
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+ padding: 2em;
+
+ &-text {
+ font-variant: all-small-caps;
+ font-weight: 700;
+ font-size: 1.2rem;
+ grid-area: text;
+ text-align: center;
+ z-index: 99;
+
+ h2 {
+ font-size: inherit;
+ line-height: 1;
+ }
+
+ span {
+ font-size: 0.8rem;
+ font-style: italic;
+ color: var(--clr-foreground-700);
+ font-weight: 500;
+ font-variant: normal;
+ text-transform: lowercase;
+ }
+ }
+
+ svg {
+ position: absolute;
+ color: var(--clr-background-800);
+ z-index: 0;
+ bottom: -80%;
+ left: -20%;
+ height: 160%;
+ }
+
+ * {
+ z-index: 4;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ &[href]::after {
+ content: "";
+ position: absolute;
+ background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--_main-color));
+ width: 300%;
+ aspect-ratio: 1/1;
+ z-index: 1;
+ transition: width 250ms ease-in-out;
+ }
+
+ &[href]:is(:hover, :focus) {
+ color: inherit;
+
+ outline-offset: 0.1em;
+
+ &::after {
+ width: 100%;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/pages/_error.scss b/src/assets/scss/pages/_error.scss
new file mode 100644
index 0000000..8539576
--- /dev/null
+++ b/src/assets/scss/pages/_error.scss
@@ -0,0 +1,123 @@
+@use "../abstracts/mixin" as mix;
+@use "./contact";
+
+.error {
+ &-container {
+ @extend .contact-container;
+ }
+
+ &-summary {
+ @extend .contact-summary;
+
+ h2 {
+ line-height: 1;
+ font-size: 1.8rem;
+ font-variant: all-small-caps;
+ margin-bottom: 1rem;
+ }
+ }
+
+ &-decorative {
+ aspect-ratio: 10/1;
+ width: 100%;
+ margin-bottom: 1em;
+ border-radius: 0.7em;
+ background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent));
+ position: relative;
+ box-shadow: inset 0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5);
+
+ .decorative {
+ user-select: none;
+ position: absolute;
+ filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5));
+
+ &-left {
+ position: absolute;
+ font-size: 9rem;
+ font-variant: all-small-caps;
+ font-weight: 900;
+ height: 100%;
+
+ animation: bounce-up-down 1.5s infinite forwards;
+
+ @include mix.breakpoint-down('small') {
+ font-size: 7rem;
+ }
+ }
+
+ &-exclamation {
+ top: 50%;
+ translate: 0% -50%;
+ rotate: -20deg;
+ }
+
+ &-question {
+ top: 0%;
+ left: 0.2em;
+ translate: 0% -50%;
+ rotate: 15deg;
+ }
+ }
+
+ svg {
+ position: absolute;
+ aspect-ratio: 1/1;
+ height: 120%;
+ width: auto;
+ rotate: -20deg;
+ top: 50%;
+ right: 0;
+ translate: 0% -50%;
+ animation: svg-move 4s infinite forwards;
+
+ filter: drop-shadow(0 0.3125rem 0.625rem hsla(0, 0%, 0%, 0.5));
+ }
+
+ @include mix.breakpoint-down('small') {
+ aspect-ratio: 4/1;
+ }
+
+ @keyframes svg-move {
+ 40% {
+ rotate: 30deg;
+ }
+
+ 50% {
+ rotate: 20deg;
+ }
+
+ 90% {
+ rotate: -30deg;
+ }
+
+ 100% {
+ rotate: -20deg;
+ }
+ }
+
+ @keyframes bounce-up-down {
+ 50% {
+ margin-top: -0.6rem;
+ rotate: 2deg;
+ }
+
+ 100% {
+ margin-top: 0;
+ rotate: 0;
+ }
+ }
+ }
+
+ &-button {
+ @extend .social-container;
+ @extend .social-container__small;
+
+ li:first-of-type .error-link:first-of-type:after {
+ background-image: linear-gradient(-45deg, var(--clr-accent) 2%, transparent var(--_transparent-limit), var(--clr-accent));
+ }
+ }
+
+ &-link {
+ @extend .social-item;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/pages/index.scss b/src/assets/scss/pages/index.scss
new file mode 100644
index 0000000..205b36b
--- /dev/null
+++ b/src/assets/scss/pages/index.scss
@@ -0,0 +1,3 @@
+@use "_article";
+@use "_contact";
+@use "_error";
\ No newline at end of file
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 32df595..a20d8e7 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -1,25 +1,9 @@
-@import './modules/vars';
-@import './modules/mixin';
-@import './modules/global';
+@use "./abstracts/" as *;
-@import './modules/header';
-@import './modules/component/nav';
-@import './modules/component/title';
-@import './modules/main';
-@import './modules/footer';
+@use "./base/" as *;
-@import './modules/component/prototype';
-@import './modules/component/card';
-@import './modules/component/partof';
-@import './modules/component/preload';
+@use "./layouts/" as *;
-@import './modules/component/aboutme';
-@import './modules/component/hero';
-@import './modules/component/featured';
-@import './modules/component/post';
-@import './modules/component/article';
-@import './modules/component/clients';
-@import './modules/component/animation';
-@import './modules/component/contact';
+@use "./components/" as *;
-@import './modules/component/error';
\ No newline at end of file
+@use "./pages/" as *;
\ No newline at end of file
diff --git a/src/blog.njk b/src/blog.njk
index 9951f27..096bc4d 100644
--- a/src/blog.njk
+++ b/src/blog.njk
@@ -2,6 +2,7 @@
title : 'Recent Articles - Blog | EmptyWork'
description : "List of all articles that was written by me, its mostly contain topics about Accessibility, PHP, HTML, CSS and Fullstack development"
layout: 'layouts/secondary.njk'
+style: 'blog.css'
---
{% set posts = [] %}
diff --git a/src/contact.njk b/src/contact.njk
index f4f6a6c..393619f 100644
--- a/src/contact.njk
+++ b/src/contact.njk
@@ -2,6 +2,7 @@
title : 'Get in touch with me - Contact | EmptyWork'
description: "Leave me a message or any feedback, or ask me anything you want."
layout: 'layouts/secondary.njk'
+style: 'contact.css'
---