From 76649ce4d4b11ae13aa4ab9b9cc76895cdd7a0c8 Mon Sep 17 00:00:00 2001 From: Louis Grasset Date: Sat, 13 Jul 2024 18:19:41 +0200 Subject: [PATCH] chore(config): migrate for css nesting support; enhanced support --- .eslintrc.js | 103 +++--- .stylelintrc.js | 29 +- src/components/Arrow/Arrow.scss | 45 ++- src/components/Header/Header.scss | 24 +- src/components/Information/Information.scss | 10 +- src/components/Navigation/Navigation.scss | 338 ++++++++++---------- src/components/Profile/Profile.scss | 46 +-- src/components/ProjectItem/ProjectItem.scss | 225 ++++++------- src/components/Slider/Slider.scss | 100 +++--- src/index.scss | 80 ++--- src/sections/Business/Business.scss | 8 +- src/sections/Contact/Contact.scss | 208 ++++++------ src/sections/Experiences/Experiences.scss | 238 +++++++------- src/sections/Hero/Hero.scss | 228 ++++++------- src/sections/Portfolio/Portfolio.scss | 62 ++-- src/sections/Skills/Skills.scss | 228 ++++++------- src/sections/Statistics/Statistics.scss | 190 +++++------ src/sections/Studies/Studies.scss | 200 ++++++------ src/styles/_buttons.scss | 80 ++--- src/styles/_fonts.scss | 90 +++--- src/styles/_mixins.scss | 66 ++-- src/styles/_rc.scss | 50 +-- vite.config.mts | 7 + vite.config.ts | 7 - 24 files changed, 1327 insertions(+), 1335 deletions(-) create mode 100644 vite.config.mts delete mode 100644 vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.js index 53b4d24..580cbc8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,63 +1,48 @@ module.exports = { - "env": { - "browser": true, - "es2021": true, - "node": true + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + "eslint:recommended", + "plugin:react-hooks/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react/jsx-runtime", + ], + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaFeatures: { + jsx: true, }, - "extends": [ - "eslint:recommended", - "plugin:react-hooks/recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:react/jsx-runtime", + ecmaVersion: "latest", + sourceType: "module", + }, + plugins: ["react", "@typescript-eslint", "simple-import-sort"], + rules: { + indent: ["error", 4], + "linebreak-style": ["error", "unix"], + quotes: ["error", "double"], + semi: ["error", "always"], + "eol-last": 1, + "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }], + "space-unary-ops": [ + 2, + { + words: true, + nonwords: true, + }, ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [ - "react", - "@typescript-eslint", - "simple-import-sort", - ], - "rules": { - "indent": [ - "error", - 4 - ], - "linebreak-style": [ - "error", - "unix" - ], - "quotes": [ - "error", - "double" - ], - "semi": [ - "error", - "always" - ], - "eol-last": 1, - "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }], - "space-unary-ops": [ - 2, { - "words": true, - "nonwords": true, - } - ], - "no-trailing-spaces": "error", - "keyword-spacing": "off", - "@typescript-eslint/keyword-spacing": ["error"], - "object-curly-spacing": ["error", "always"], - "simple-import-sort/imports": "error", - "simple-import-sort/exports": "error", - "no-unused-vars": "off", - "react-hooks/rules-of-hooks": "error", - "react-hooks/exhaustive-deps": "warn", - "react/no-unescaped-entities": "off", - } + "no-trailing-spaces": "error", + "keyword-spacing": "off", + "@typescript-eslint/keyword-spacing": ["error"], + "object-curly-spacing": ["error", "always"], + "simple-import-sort/imports": "error", + "simple-import-sort/exports": "error", + "no-unused-vars": "off", + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "react/no-unescaped-entities": "off", + }, }; diff --git a/.stylelintrc.js b/.stylelintrc.js index ef6874e..4c76ed1 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -1,17 +1,14 @@ module.exports = { - extends: [ - "stylelint-config-standard", - "stylelint-config-sass-guidelines" - ], - defaultSeverity: "warning", - rules: { - "at-rule-no-unknown": null, - "indentation": 4, - "max-nesting-depth": 5, - "scss/at-rule-no-unknown": null, - "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$", - "selector-max-compound-selectors": 5, - "no-invalid-position-at-import-rule": null, - "color-function-notation": "legacy" - } -} + extends: ["stylelint-config-sass-guidelines"], + defaultSeverity: "warning", + rules: { + "at-rule-no-unknown": null, + "max-nesting-depth": 6, + "scss/at-rule-no-unknown": null, + "selector-class-pattern": "^[a-z][a-z0-9\\-_]*[a-z0-9]$", + "selector-max-compound-selectors": 5, + "no-invalid-position-at-import-rule": null, + "function-no-unknown": true, + "color-function-notation": "legacy", + }, +}; diff --git a/src/components/Arrow/Arrow.scss b/src/components/Arrow/Arrow.scss index 18e6a17..320bb86 100644 --- a/src/components/Arrow/Arrow.scss +++ b/src/components/Arrow/Arrow.scss @@ -2,31 +2,30 @@ @use '../../styles/colors'; .arrow { - cursor: pointer; - fill: colors.$teal; - height: 30px; - position: absolute; - top: 50%; - transform: translateY(-50%); - transform: translateY(-50%); - width: 30px; - z-index: 2; + cursor: pointer; + fill: colors.$teal; + height: 30px; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 30px; + z-index: 2; - @media screen and (max-width: breakpoints.$md) { - top: calc(100% + 1.7rem); - } + @media screen and (max-width: breakpoints.$md) { + top: calc(100% + 1.7rem); + } - &--left { - left: 5px; - } + &--left { + left: 5px; + } - &--right { - left: auto; - right: 5px; - } + &--right { + left: auto; + right: 5px; + } - &--disabled { - cursor: not-allowed; - fill: rgba(colors.$teal, 30%); - } + &--disabled { + cursor: not-allowed; + fill: rgba(colors.$teal, 30%); + } } diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index b23c31d..b4f30cc 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -1,19 +1,19 @@ @use '../../styles/colors'; .header { - &-title { - font-size: 4rem; - font-weight: 600; - margin-bottom: 0.5rem; - max-width: 40rem; + &-title { + font-size: 4rem; + font-weight: 600; + margin-bottom: 0.5rem; + max-width: 40rem; - span { - color: colors.$secondary; - } + span { + color: colors.$secondary; } + } - &-detail { - font-size: 1.8rem; - margin-top: 0; - } + &-detail { + font-size: 1.8rem; + margin-top: 0; + } } diff --git a/src/components/Information/Information.scss b/src/components/Information/Information.scss index 29ba201..d748151 100644 --- a/src/components/Information/Information.scss +++ b/src/components/Information/Information.scss @@ -1,7 +1,7 @@ .information { - display: inline-block; - height: 1.6rem; - margin: 0 1rem; - vertical-align: sub; - width: 1.6rem; + display: inline-block; + height: 1.6rem; + margin: 0 1rem; + vertical-align: sub; + width: 1.6rem; } diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index f050040..79a938a 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -3,196 +3,198 @@ @use '../../styles/breakpoints'; .navigation { - $nav: &; + $nav: &; - @include mixins.section; + @include mixins.section; - display: flex; - font-size: 2rem; - justify-content: space-between; - padding: 4rem 0; - @media screen and (max-width: breakpoints.$md) { - padding-bottom: 1rem; - padding-top: 2rem; - } + display: flex; + font-size: 2rem; + justify-content: space-between; + padding: 4rem 0; - &__logo { - font-weight: 600; + @media screen and (max-width: breakpoints.$md) { + padding-bottom: 1rem; + padding-top: 2rem; + } - span { - color: colors.$secondary; - } - } - &__toggle { - appearance: none; - background-color: colors.$teal; - border: 0; - border-radius: 0.3rem; - color: colors.$white; - cursor: pointer; - display: none; - font-weight: 600; - letter-spacing: 0.15rem; - padding: 0.7rem 1rem; - position: relative; - text-transform: uppercase; - z-index: 2; + &__logo { + font-weight: 600; - @media screen and (max-width: breakpoints.$xl) { - display: block; - } + span { + color: colors.$secondary; } - - &__wrapper { - @media screen and (max-width: breakpoints.$xl) { - background-color: colors.$primary; - display: none; - height: 100vh; - left: 0; - overscroll-behavior: contain; - position: fixed; - top: 0; - width: 100%; - z-index: 99; - - &::after { - background-color: rgba(colors.$primary, 0.7); - content: ''; - height: 100vh; - left: 0; - position: absolute; - top: -100vh; - width: 100%; - z-index: 2; + } + + &__toggle { + appearance: none; + background-color: colors.$teal; + border: 0; + border-radius: 0.3rem; + color: colors.$white; + cursor: pointer; + display: none; + font-weight: 600; + letter-spacing: 0.15rem; + padding: 0.7rem 1rem; + position: relative; + text-transform: uppercase; + z-index: 2; + + @media screen and (max-width: breakpoints.$xl) { + display: block; + } + } + + &__wrapper { + @media screen and (max-width: breakpoints.$xl) { + background-color: colors.$primary; + display: none; + height: 100vh; + left: 0; + overscroll-behavior: contain; + position: fixed; + top: 0; + width: 100%; + z-index: 99; + + &::after { + background-color: rgba(colors.$primary, 0.7); + content: ''; + height: 100vh; + left: 0; + position: absolute; + top: -100vh; + width: 100%; + z-index: 2; + } + + #{$nav} { + box-sizing: border-box; + + &__list { + flex-direction: column; + margin-top: 5rem; + overflow-y: auto; + + &::before { + color: colors.$teal; + content: 'Menu'; + font-size: 20rem; + font-weight: 800; + opacity: 0.05; + position: absolute; + right: -1rem; + text-orientation: mixed; + text-transform: uppercase; + writing-mode: vertical-rl; + } + + &-item { + color: colors.$white; + font-size: 4.5rem; + font-weight: 700; + margin: 0 5rem; + padding: 2rem 0; + text-align: left; + + a { + &::after { + color: colors.$secondary; + content: '.'; + } } - #{$nav} { - box-sizing: border-box; - - &__list { - flex-direction: column; - margin-top: 5rem; - overflow-y: auto; - - &::before { - color: colors.$teal; - content: 'Menu'; - font-size: 20rem; - font-weight: 800; - opacity: 0.05; - position: absolute; - right: -1rem; - text-orientation: mixed; - text-transform: uppercase; - writing-mode: vertical-rl; - } - - &-item { - color: colors.$white; - font-size: 4.5rem; - font-weight: 700; - margin: 0 5rem; - padding: 2rem 0; - text-align: left; - - a { - &::after { - color: colors.$secondary; - content: '.'; - } - } - - &:hover::after { - display: none; - } - } - } + &:hover::after { + display: none; } + } } + } + } - @media screen and (max-width: breakpoints.$sm) { - #{$nav} { - &__list { - &-item { - font-size: 3rem; - } - } - } + @media screen and (max-width: breakpoints.$sm) { + #{$nav} { + &__list { + &-item { + font-size: 3rem; + } } + } } + } + + &--active { + #{$nav} { + &__toggle { + appearance: none; + background-color: colors.$secondary; + border: 0; + bottom: 0; + color: colors.$white; + font-size: 2rem; + font-weight: 700; + left: 0; + padding: 1.5rem; + position: fixed; + text-transform: uppercase; + width: 100%; + z-index: 100; + } - &--active { - #{$nav} { - &__toggle { - appearance: none; - background-color: colors.$secondary; - border: 0; - bottom: 0; - color: colors.$white; - font-size: 2rem; - font-weight: 700; - left: 0; - padding: 1.5rem; - position: fixed; - text-transform: uppercase; - width: 100%; - z-index: 100; + &__wrapper { + @media screen and (max-width: breakpoints.$xl) { + animation: navigation 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; + display: block; + + @keyframes navigation { + from { + opacity: 0; + transform: translateY(100vh); } - &__wrapper { - @media screen and (max-width: breakpoints.$xl) { - animation: navigation 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; - display: block; - - @keyframes navigation { - from { - opacity: 0; - transform: translateY(100vh); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - } + to { + opacity: 1; + transform: translateY(0); } + } } + } } + } - &__list { - column-gap: 4rem; - display: flex; - font-weight: 500; - list-style: none; - margin: 0; - max-height: calc(100% - 5rem); - overscroll-behavior: contain; - padding: 0; - - &-item { - cursor: pointer; - display: inline-block; - position: relative; - - &::after { - background-color: colors.$teal; - bottom: -3rem; - content: ''; - height: 0.3rem; - left: 0; - position: absolute; - transition: width 0.3s ease-out; - width: 0; - } - - &:hover { - &::after { - width: 100%; - } - } + &__list { + column-gap: 4rem; + display: flex; + font-weight: 500; + list-style: none; + margin: 0; + max-height: calc(100% - 5rem); + overscroll-behavior: contain; + padding: 0; + + &-item { + cursor: pointer; + display: inline-block; + position: relative; + + &::after { + background-color: colors.$teal; + bottom: -3rem; + content: ''; + height: 0.3rem; + left: 0; + position: absolute; + transition: width 0.3s ease-out; + width: 0; + } + + &:hover { + &::after { + width: 100%; } + } } + } } diff --git a/src/components/Profile/Profile.scss b/src/components/Profile/Profile.scss index e5448af..8894845 100644 --- a/src/components/Profile/Profile.scss +++ b/src/components/Profile/Profile.scss @@ -1,32 +1,32 @@ @use '../../styles/colors'; .profile { - position: relative; - width: 100%; - - img { - bottom: 0; - left: 0; - position: absolute; - width: 100%; + position: relative; + width: 100%; - &:nth-child(1) { - clip-path: circle(47.1% at 50% 55%); - } + img { + bottom: 0; + left: 0; + position: absolute; + width: 100%; - &:nth-child(2) { - clip-path: polygon(0% 0%, 0 41%, 100% 41%, 100% 0%); - } + &:nth-child(1) { + clip-path: circle(47.1% at 50% 55%); } - &::before { - aspect-ratio: 1/1; - background-color: colors.$teal; - border-radius: 50%; - bottom: 0; - content: ''; - left: 0; - position: absolute; - width: 100%; + &:nth-child(2) { + clip-path: polygon(0% 0%, 0 41%, 100% 41%, 100% 0%); } + } + + &::before { + aspect-ratio: 1/1; + background-color: colors.$teal; + border-radius: 50%; + bottom: 0; + content: ''; + left: 0; + position: absolute; + width: 100%; + } } diff --git a/src/components/ProjectItem/ProjectItem.scss b/src/components/ProjectItem/ProjectItem.scss index 0c5eb5a..87ff444 100644 --- a/src/components/ProjectItem/ProjectItem.scss +++ b/src/components/ProjectItem/ProjectItem.scss @@ -3,134 +3,135 @@ @use '../../styles/mixins'; .project { - border: 0.2rem solid rgba(colors.$white, 0.25); + border: 0.2rem solid rgba(colors.$white, 0.25); + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 100%; + justify-content: space-between; + min-height: 27rem; + overflow: hidden; + padding-bottom: 2.4rem; + position: relative; + transition: transform 0.4s ease-out; + + @media screen and (max-width: breakpoints.$md) { + min-height: 22rem; + } + + &--toggle { + perspective: 650px; + transform: rotate3d(1, 0, 0, 180deg); + } + + &__label { + font-size: 3rem; + font-weight: 600; + margin: 10% auto 0; + max-width: 80%; + opacity: 0.8; + text-align: center; + text-transform: uppercase; + + @media screen and (max-width: breakpoints.$lg) { + font-size: 2.5rem; + } + + + .button { + display: block; + margin: 1rem auto 2rem; + max-width: 25rem; + + @media screen and (max-width: breakpoints.$sm) { + font-size: 1.2rem; + height: unset; + letter-spacing: 0.1rem; + padding: 1rem 2rem; + } + } + } + + &__article { + background-color: colors.$white; box-sizing: border-box; - display: flex; - flex-direction: column; + color: colors.$teal; + display: none; height: 100%; - justify-content: space-between; - min-height: 27rem; - overflow: hidden; - padding-bottom: 2.4rem; - position: relative; - transition: transform 0.4s ease-out; - - @media screen and (max-width: breakpoints.$md) { - min-height: 22rem; - } + left: 0; + padding: 2rem; + position: absolute; + top: 0; + transform: rotateX(-180deg); + width: 100%; + z-index: 2; &--toggle { - perspective: 650px; - transform: rotate3d(1, 0, 0, 180deg); + display: block; } - &__label { - font-size: 3rem; - font-weight: 600; - margin: 10% auto 0; - max-width: 80%; - opacity: 0.8; - text-align: center; - text-transform: uppercase; - - @media screen and (max-width: breakpoints.$lg) { - font-size: 2.5rem; - } + &-label { + @extend .project__label; - + .button { - display: block; - margin: 1rem auto 2rem; - max-width: 25rem; - - @media screen and (max-width: breakpoints.$sm) { - font-size: 1.2rem; - height: unset; - letter-spacing: 0.1rem; - padding: 1rem 2rem; - } - } - } + font-size: 2rem; + margin: 0; + margin-bottom: 0.5rem; + max-width: calc(100% - 3rem); + text-align: left; - &__article { - background-color: colors.$white; - box-sizing: border-box; - color: colors.$teal; - display: none; - height: 100%; - left: 0; - padding: 2rem; - position: absolute; - top: 0; - transform: rotateX(-180deg); - width: 100%; - z-index: 2; - - &--toggle { - display: block; - } + @media screen and (max-width: breakpoints.$lg) { + font-size: 1.8rem; + } + } - &-label { - @extend .project__label; + &-details { + @include mixins.scrollbar; - font-size: 2rem; - margin: 0; - margin-bottom: 0.5rem; - max-width: calc(100% - 3rem); - text-align: left; + max-height: calc(100% - 3.4rem); + overflow: auto; + - @media screen and (max-width: breakpoints.$lg) { - font-size: 1.8rem; - } + &-item { + ul { + padding-left: 1.8rem; } - &-details { - @include mixins.scrollbar; - - max-height: 100%; - max-height: calc(100% - 3.4rem); - overflow: auto; - - &-item { - ul { - padding-left: 1.8rem; - } - - &__header { - background: colors.$white; - font-size: 2rem; - font-weight: 600; - margin: 0; - position: sticky; - top: 0; - } - } + &__header { + background: colors.$white; + font-size: 2rem; + font-weight: 600; + margin: 0; + position: sticky; + top: 0; } + } + } - .button { - border: 0; - height: unset; - padding: 0.6rem; - position: absolute; - right: 1rem; - text-align: center; - top: 1rem; - } + .button { + border: 0; + height: unset; + padding: 0.6rem; + position: absolute; + right: 1rem; + text-align: center; + top: 1rem; } + } - &__footer { - background-color: lighten(colors.$teal, 10%); - bottom: 0; - box-sizing: border-box; - display: flex; - justify-content: space-between; - left: 0; - padding: 0.2rem 1rem; - position: absolute; - text-transform: uppercase; - width: 100%; - - span:first-child { - font-weight: 700; - } + + &__footer { + background-color: lighten(colors.$teal, 10%); + bottom: 0; + box-sizing: border-box; + display: flex; + justify-content: space-between; + left: 0; + padding: 0.2rem 1rem; + position: absolute; + text-transform: uppercase; + width: 100%; + + span:first-child { + font-weight: 700; } + } } diff --git a/src/components/Slider/Slider.scss b/src/components/Slider/Slider.scss index 6923776..abb09d4 100644 --- a/src/components/Slider/Slider.scss +++ b/src/components/Slider/Slider.scss @@ -2,62 +2,62 @@ @use '../../styles/colors'; .slider { - position: relative; - - .keen-slider { - &::before, - &::after { - bottom: 0; - content: ''; - height: 100%; - position: absolute; - top: 0; - width: 1rem; - z-index: 2; - } - - &::before { - background: linear-gradient(-90deg, rgba(colors.$white, 0) 0%, rgba(colors.$white, 100%) 100%); - left: 0; - } - - &::after { - background: linear-gradient(-90deg, rgba(colors.$white, 100%) 0%, rgba(colors.$white, 0%) 100%); - right: 0; - } - - &__slide { - box-sizing: border-box; - padding: 4rem; - - @media screen and (max-width: breakpoints.$md) { - padding: 1rem; - } - } + position: relative; + + .keen-slider { + &::before, + &::after { + bottom: 0; + content: ''; + height: 100%; + position: absolute; + top: 0; + width: 1rem; + z-index: 2; } - &__dots { - display: flex; - justify-content: center; - padding: 10px 0; + &::before { + background: linear-gradient(-90deg, rgba(colors.$white, 0) 0%, rgba(colors.$white, 100%) 100%); + left: 0; } - &__dot { - background: rgba(colors.$teal, 25%); - border: 0; - border-radius: 50%; - cursor: pointer; - height: 10px; - margin: 0 5px; - padding: 5px; - width: 10px; + &::after { + background: linear-gradient(-90deg, rgba(colors.$white, 100%) 0%, rgba(colors.$white, 0%) 100%); + right: 0; } - &__dot:focus { - outline: none; - } + &__slide { + box-sizing: border-box; + padding: 4rem; - &__dot.active { - background: colors.$teal; + @media screen and (max-width: breakpoints.$md) { + padding: 1rem; + } } + } + + &__dots { + display: flex; + justify-content: center; + padding: 10px 0; + } + + &__dot { + background: rgba(colors.$teal, 25%); + border: 0; + border-radius: 50%; + cursor: pointer; + height: 10px; + margin: 0 5px; + padding: 5px; + width: 10px; + } + + &__dot:focus { + outline: none; + } + + &__dot.active { + background: colors.$teal; + } } diff --git a/src/index.scss b/src/index.scss index b1ed49d..9526955 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,56 +1,56 @@ @use './styles/colors'; @use './styles/mixins'; -@import './styles/fonts'; -@import './styles/buttons'; -@import './styles/rc'; +@import url('./styles/_fonts.scss'); +@import url('./styles/_buttons.scss'); +@import url('./styles/_rc.scss'); html { - background-color: rgba(colors.$teal, 10%); - font-size: 62.5%; + background-color: rgba(colors.$teal, 10%); + font-size: 62.5%; } *::selection { - background-color: colors.$teal; - color: colors.$white; + background-color: colors.$teal; + color: colors.$white; } body { - @include mixins.scrollbar; - - background-color: colors.$white; - color: colors.$primary; - font-family: - Outfit, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 1.6rem; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - margin: 0; - - a { - color: inherit; - text-decoration: none; - } - - &.frozen { - overflow: hidden; - } + @include mixins.scrollbar; + + background-color: colors.$white; + color: colors.$primary; + font-family: + Outfit, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 1.6rem; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 0; + + a { + color: inherit; + text-decoration: none; + } + + &.frozen { + overflow: hidden; + } } .attribution { - @include mixins.section; + @include mixins.section; - color: colors.$teal; - font-size: 1.4rem; + color: colors.$teal; + font-size: 1.4rem; } diff --git a/src/sections/Business/Business.scss b/src/sections/Business/Business.scss index 2efaa56..74cdee1 100644 --- a/src/sections/Business/Business.scss +++ b/src/sections/Business/Business.scss @@ -2,9 +2,9 @@ @use '../../styles/colors'; .section-business { - @include mixins.section; + @include mixins.section; - p { - color: colors.$teal; - } + p { + color: colors.$teal; + } } diff --git a/src/sections/Contact/Contact.scss b/src/sections/Contact/Contact.scss index a3947aa..5d5b700 100644 --- a/src/sections/Contact/Contact.scss +++ b/src/sections/Contact/Contact.scss @@ -3,123 +3,123 @@ @use '../../styles/mixins'; .section-contact { - background-color: colors.$primary; - border-top: 1rem solid colors.$teal; - overflow-y: hidden; + background-color: colors.$primary; + border-top: 1rem solid colors.$teal; + overflow-y: hidden; + position: relative; + + &__wrapper { + @include mixins.section; + + display: flex; + flex-direction: row; + height: 60rem; + justify-content: space-between; position: relative; - &__wrapper { - @include mixins.section; - - display: flex; - flex-direction: row; - height: 60rem; - justify-content: space-between; - position: relative; - - @media screen and (max-width: breakpoints.$md) { - flex-direction: column; - } + @media screen and (max-width: breakpoints.$md) { + flex-direction: column; + } - .header { - color: colors.$white; - position: relative; - z-index: 2; - } + .header { + color: colors.$white; + position: relative; + z-index: 2; } + } + + .profile { + height: 100%; + left: -28rem; + mix-blend-mode: exclusion; + opacity: 0.4; + position: absolute; + top: 0; + width: 60rem; + } + + &__form { + $form: &; + + align-self: center; + position: relative; + z-index: 2; - .profile { - height: 100%; - left: -28rem; - mix-blend-mode: exclusion; - opacity: 0.4; - position: absolute; - top: 0; - width: 60rem; + @media screen and (max-width: breakpoints.$xxl) { + justify-self: center; } - &__form { - $form: &; + &-item { + margin-bottom: 3rem; + position: relative; + width: 100%; - align-self: center; - position: relative; + label { + color: colors.$white; + display: inline; + letter-spacing: 0.25rem; + position: absolute; + text-transform: uppercase; + top: -2rem; z-index: 2; - - @media screen and (max-width: breakpoints.$xxl) { - justify-self: center; + } + + input { + height: 4.5rem; + } + + textarea { + min-height: 10rem; + } + + input, + textarea { + border: 0.1rem solid colors.$teal; + border-radius: 0.5rem; + box-sizing: border-box; + color: colors.$primary; + display: block; + font-family: + Outfit, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Oxygen, + Ubuntu, + Cantarell, + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + sans-serif; + font-size: 1.8rem; + letter-spacing: 0.1rem; + padding: 1rem 1.4rem; + width: 100%; + + &:focus { + outline-color: colors.$teal; } - &-item { - margin-bottom: 3rem; - position: relative; - width: 100%; - - label { - color: colors.$white; - display: inline; - letter-spacing: 0.25rem; - position: absolute; - text-transform: uppercase; - top: -2rem; - z-index: 2; - } - - input { - height: 4.5rem; - } - - textarea { - min-height: 10rem; - } - - input, - textarea { - border: 0.1rem solid colors.$teal; - border-radius: 0.5rem; - box-sizing: border-box; - color: colors.$primary; - display: block; - font-family: - Outfit, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - font-size: 1.8rem; - letter-spacing: 0.1rem; - padding: 1rem 1.4rem; - width: 100%; - - &:focus { - outline-color: colors.$teal; - } - - + label { - color: colors.$white; - font-size: 1.2rem; - transition: all 0.2s ease-out; - } - - &:not(:focus):placeholder-shown { - + label { - color: colors.$teal; - font-size: 1.4rem; - transform: translateX(2rem) translateY(3.35rem); - } - } - } + + label { + color: colors.$white; + font-size: 1.2rem; + transition: all 0.2s ease-out; } - &-group-item { - column-gap: 2rem; - display: flex; + &:not(:focus):placeholder-shown { + + label { + color: colors.$teal; + font-size: 1.4rem; + transform: translateX(2rem) translateY(3.35rem); + } } + } + } + + &-group-item { + column-gap: 2rem; + display: flex; } + } } diff --git a/src/sections/Experiences/Experiences.scss b/src/sections/Experiences/Experiences.scss index 749cb82..eadd5b2 100644 --- a/src/sections/Experiences/Experiences.scss +++ b/src/sections/Experiences/Experiences.scss @@ -4,136 +4,136 @@ @use 'sass:math'; .section-experiences { - @include mixins.section; + @include mixins.section; - .header { - &-title { - @media screen and (max-width: breakpoints.$md) { - margin-top: unset; - } - } + .header { + &-title { + @media screen and (max-width: breakpoints.$md) { + margin-top: unset; + } + } + } + + &__wrapper { + column-gap: 12rem; + display: flex; + flex-wrap: wrap; + } + + .experience { + margin-top: 4rem; + + &__company { + display: grid; + grid-template-columns: 8rem 1fr; + margin-bottom: 4rem; + + &-logo { + height: 6rem; + width: 6rem; + } + + &-name { + font-size: 3rem; + font-weight: 600; + margin: 0; + } + + &-location { + color: colors.$teal; + margin: 0; + } + } + + .tag { + @include mixins.tag; } - &__wrapper { - column-gap: 12rem; - display: flex; - flex-wrap: wrap; + &__positions { + list-style: none; + padding: 0; } - .experience { - margin-top: 4rem; - - &__company { - display: grid; - grid-template-columns: 8rem 1fr; - margin-bottom: 4rem; - - &-logo { - height: 6rem; - width: 6rem; - } - - &-name { - font-size: 3rem; - font-weight: 600; - margin: 0; - } - - &-location { - color: colors.$teal; - margin: 0; - } + &__position { + &-item { + $offset: 3rem; + + margin-bottom: #{$offset}; + padding-left: 6rem; + position: relative; + + &::before { + background-color: colors.$teal; + content: ''; + height: calc(100% + #{$offset}); + left: #{2.5rem + 0.2rem}; + position: absolute; + top: 1rem; + width: 0.2rem; } - .tag { - @include mixins.tag; + &::after { + $size: 1rem; + + background-color: colors.$teal; + border-radius: 50%; + content: ''; + height: #{$size}; + left: #{$size + 1.25rem}; + position: absolute; + top: 0.5rem; + width: #{$size}; } - &__positions { - list-style: none; - padding: 0; + &:first-child { + &::after { + $size: 2rem; + + background-color: lighten(colors.$teal, 30%); + border: 0.3rem solid colors.$teal; + border-spacing: 1rem; + box-sizing: border-box; + height: $size; + left: #{math.div($size, 2) + 0.8rem}; + width: $size; + } + } + } + + &-label { + font-size: 2rem; + font-weight: 600; + margin: 0; + } + + &-dates { + color: colors.$teal; + font-weight: 500; + margin: 0.5rem 0 1rem; + } + + &-detail { + &__toggle { + appearance: none; + background-color: colors.$secondary; + border: 0.4px solid colors.$secondary; + border-radius: 0.5rem; + color: colors.$white; + cursor: pointer; + font-weight: 600; + height: 2.1rem; + margin-left: 1rem; + text-align: center; } - &__position { - &-item { - $offset: 3rem; - - margin-bottom: #{$offset}; - padding-left: 6rem; - position: relative; - - &::before { - background-color: colors.$teal; - content: ''; - height: calc(100% + #{$offset}); - left: #{2.5rem + 0.2rem}; - position: absolute; - top: 1rem; - width: 0.2rem; - } - - &::after { - $size: 1rem; - - background-color: colors.$teal; - border-radius: 50%; - content: ''; - height: #{$size}; - left: #{$size + 1.25rem}; - position: absolute; - top: 0.5rem; - width: #{$size}; - } - - &:first-child { - &::after { - $size: 2rem; - - background-color: lighten(colors.$teal, 30%); - border: 0.3rem solid colors.$teal; - border-spacing: 1rem; - box-sizing: border-box; - height: $size; - left: #{math.div($size, 2) + 0.8rem}; - width: $size; - } - } - } - - &-label { - font-size: 2rem; - font-weight: 600; - margin: 0; - } - - &-dates { - color: colors.$teal; - font-weight: 500; - margin: 0.5rem 0 1rem; - } - - &-detail { - &__toggle { - appearance: none; - background-color: colors.$secondary; - border: 0.4px solid colors.$secondary; - border-radius: 0.5rem; - color: colors.$white; - cursor: pointer; - font-weight: 600; - height: 2.1rem; - margin-left: 1rem; - text-align: center; - } - - &__content { - margin-top: 1rem; - - ul { - padding-left: 1.8rem; - } - } - } + &__content { + margin-top: 1rem; + + ul { + padding-left: 1.8rem; + } } + } } + } } diff --git a/src/sections/Hero/Hero.scss b/src/sections/Hero/Hero.scss index b8c89a4..46687ab 100644 --- a/src/sections/Hero/Hero.scss +++ b/src/sections/Hero/Hero.scss @@ -3,151 +3,151 @@ @use '../../styles/breakpoints'; .section-hero { - $hero: &; + $hero: &; + + background-color: rgba(colors.$teal, 10%); + font-size: 2rem; + padding-bottom: 5rem; - background-color: rgba(colors.$teal, 10%); - font-size: 2rem; - padding-bottom: 5rem; + @media screen and (width <= 1100px) { + text-align: center; + } - @media screen and (max-width: 1100px) { - text-align: center; - } + &__wrapper { + @include mixins.section; - &__wrapper { - @include mixins.section; + display: grid; + grid-template-columns: 3fr 2fr; - display: grid; - grid-template-columns: 3fr 2fr; + .profile { + justify-self: flex-end; + max-width: 45rem; - .profile { - justify-self: flex-end; - max-width: 45rem; + @media screen and (max-width: breakpoints.$xxl) { + max-width: 35rem; + } + } - @media screen and (max-width: breakpoints.$xxl) { - max-width: 35rem; - } - } + @media screen and (max-width: breakpoints.$xl) { + padding-bottom: 0; + padding-top: 0; + } - @media screen and (max-width: breakpoints.$xl) { - padding-bottom: 0; - padding-top: 0; + @media screen and (width <= 1100px) { + display: flex; + flex-direction: column-reverse; + + .profile { + max-width: 20rem; + } + #{$hero} { + &__subcontent, + &__actions { + margin-left: auto; + margin-right: auto; + max-width: 70rem; } - @media screen and (max-width: 1100px) { - display: flex; - flex-direction: column-reverse; - - .profile { - max-width: 20rem; - } - #{$hero} { - &__subcontent, - &__actions { - margin-left: auto; - margin-right: auto; - max-width: 70rem; - } - - &__actions { - display: flex; - justify-content: space-evenly; - } - } + &__actions { + display: flex; + justify-content: space-evenly; } + } + } - @media screen and (max-width: breakpoints.$md) { - .profile { - max-width: 15rem; - } - #{$hero} { - &__actions { - flex-direction: column-reverse; - - .button { - margin: 1rem auto; - width: 80%; - } - } - } + @media screen and (max-width: breakpoints.$md) { + .profile { + max-width: 15rem; + } + #{$hero} { + &__actions { + flex-direction: column-reverse; + + .button { + margin: 1rem auto; + width: 80%; + } } + } } + } - &__header { - font-size: 10rem; - line-height: 10rem; - margin-bottom: 4rem; + &__header { + font-size: 10rem; + line-height: 10rem; + margin-bottom: 4rem; - @media screen and (max-width: breakpoints.$xxl) { - font-size: 8rem; - line-height: 8rem; - } - - @media screen and (max-width: breakpoints.$xl) { - margin-top: 0; - } + @media screen and (max-width: breakpoints.$xxl) { + font-size: 8rem; + line-height: 8rem; + } - @media screen and (max-width: breakpoints.$lg) { - font-size: 6rem; - line-height: 6rem; - } + @media screen and (max-width: breakpoints.$xl) { + margin-top: 0; + } - @media screen and (max-width: breakpoints.$md) { - margin-top: 2rem; - } + @media screen and (max-width: breakpoints.$lg) { + font-size: 6rem; + line-height: 6rem; + } - @media screen and (max-width: breakpoints.$xs) { - font-size: 4.5rem; - line-height: 4.5rem; - } + @media screen and (max-width: breakpoints.$md) { + margin-top: 2rem; + } - span { - color: colors.$secondary; - } + @media screen and (max-width: breakpoints.$xs) { + font-size: 4.5rem; + line-height: 4.5rem; } - &__socials { - svg { - height: 2rem; - margin-left: 1rem; - position: relative; - top: 0.2rem; - width: 2rem; - } + span { + color: colors.$secondary; + } + } + + &__socials { + svg { + height: 2rem; + margin-left: 1rem; + position: relative; + top: 0.2rem; + width: 2rem; + } - span { - display: inline-block; - white-space: nowrap; - } + span { + display: inline-block; + white-space: nowrap; } + } - &__first { - max-width: 60rem; + &__first { + max-width: 60rem; - @media screen and (max-width: 1100px) { - margin: 0 auto; - } + @media screen and (width <= 1100px) { + margin: 0 auto; } + } - &__second { - display: flex; - justify-content: center; + &__second { + display: flex; + justify-content: center; - @media screen and (max-width: 1100px) { - height: 25vh; - } + @media screen and (width <= 1100px) { + height: 25vh; } + } - &__subcontent { - color: colors.$teal; - font-size: 2rem; - font-weight: 500; - } + &__subcontent { + color: colors.$teal; + font-size: 2rem; + font-weight: 500; + } - &__actions { - margin: 4rem 0; + &__actions { + margin: 4rem 0; - button:not(:first-child) { - margin-left: 2rem; - } + button:not(:first-child) { + margin-left: 2rem; } + } } diff --git a/src/sections/Portfolio/Portfolio.scss b/src/sections/Portfolio/Portfolio.scss index 457554d..b93e540 100644 --- a/src/sections/Portfolio/Portfolio.scss +++ b/src/sections/Portfolio/Portfolio.scss @@ -2,45 +2,45 @@ @use '../../styles/colors'; .section-portfolio { - background-color: colors.$teal; + background-color: colors.$teal; - &__wrapper { - @include mixins.section; - } + &__wrapper { + @include mixins.section; + } - &__slide { - color: colors.$white; - } + &__slide { + color: colors.$white; + } - .header { - color: colors.$white; - } + .header { + color: colors.$white; + } - .slider { - .keen-slider { - &::before { - background: linear-gradient(-90deg, rgba(colors.$teal, 0) 0%, colors.$teal 100%); - } + .slider { + .keen-slider { + &::before { + background: linear-gradient(-90deg, rgba(colors.$teal, 0) 0%, colors.$teal 100%); + } - &::after { - background: linear-gradient(-90deg, colors.$teal 0%, rgba(colors.$teal, 0) 100%); - } - } + &::after { + background: linear-gradient(-90deg, colors.$teal 0%, rgba(colors.$teal, 0) 100%); + } + } - .arrow { - fill: colors.$white; + .arrow { + fill: colors.$white; - &--disabled { - fill: rgba(colors.$white, 0.3); - } - } + &--disabled { + fill: rgba(colors.$white, 0.3); + } + } - &__dot { - background-color: rgba(colors.$white, 0.25); + &__dot { + background-color: rgba(colors.$white, 0.25); - &.active { - background-color: colors.$white; - } - } + &.active { + background-color: colors.$white; + } } + } } diff --git a/src/sections/Skills/Skills.scss b/src/sections/Skills/Skills.scss index dad944c..ea3c868 100644 --- a/src/sections/Skills/Skills.scss +++ b/src/sections/Skills/Skills.scss @@ -3,125 +3,135 @@ @use '../../styles/mixins'; .section-skills { - @include mixins.section; - - &__slide { - align-items: flex-start; - column-gap: 4rem; - display: grid; - flex-wrap: wrap; - grid-template-columns: repeat(3, 1fr); - row-gap: 1rem; - - @media screen and (max-width: breakpoints.$md) { - grid-template-columns: unset; - grid-template-rows: repeat(4, 1fr); - } + @include mixins.section; + + &__slide { + align-items: flex-start; + gap: 1rem 4rem; + display: grid; + flex-wrap: wrap; + grid-template-columns: repeat(3, 1fr); + + @media screen and (max-width: breakpoints.$md) { + grid-template-columns: unset; + grid-template-rows: repeat(4, 1fr); } + } - &__filters { - padding-left: 0; - margin-bottom: 3rem; - &-item { - list-style: none; - display: inline-block; - margin-bottom: .2rem; - margin-right: .4rem; - - button { - background-color: colors.$teal; - border-radius: 0.5rem; - color: #fff; - font-size: 1.2rem; - font-weight: 600; - letter-spacing: 0.05rem; - padding: 0.3rem 1rem; - text-transform: uppercase; - appearance: none; - border: none; - cursor: pointer; - transition: padding-right .1s ease-out; - &::before, &::after { - opacity: 0; - } - } - &.is-enabled { - button { - background-color: colors.$teal; - padding-right: 2.2rem; - position: relative; - &::before, &::after { - position: absolute; - height: .2rem; - width: 1rem; - content: ''; - background-color: colors.$white; - border-radius: 2px; - top: .85rem; - right: .6rem; - opacity: 1; - - @media screen and (max-width: breakpoints.$md) { - top: 1.05rem; - } - } - &::before { - transform: rotate(-45deg); - } - &::after { - transform: rotate(45deg); - } - } - } - &.is-disabled { - button { - background-color: colors.$grey; - } - } + &__filters { + padding-left: 0; + margin-bottom: 3rem; + + &-item { + list-style: none; + display: inline-block; + margin-bottom: 0.2rem; + margin-right: 0.4rem; + + button { + background-color: colors.$teal; + border-radius: 0.5rem; + color: #fff; + font-size: 1.2rem; + font-weight: 600; + letter-spacing: 0.05rem; + padding: 0.3rem 1rem; + text-transform: uppercase; + appearance: none; + border: 0; + cursor: pointer; + transition: padding-right 0.1s ease-out; + + &::before, + &::after { + opacity: 0; + } + } + + &.is-enabled { + button { + background-color: colors.$teal; + padding-right: 2.2rem; + position: relative; + + &::before, + &::after { + position: absolute; + height: 0.2rem; + width: 1rem; + content: ''; + background-color: colors.$white; + border-radius: 2px; + top: 0.85rem; + right: 0.6rem; + opacity: 1; @media screen and (max-width: breakpoints.$md) { - margin-right: 1rem; - margin-bottom: .5rem; - button { - padding: .5rem 1.5rem; - } + top: 1.05rem; } + } + + &::before { + transform: rotate(-45deg); + } + + &::after { + transform: rotate(45deg); + } + } + } + + &.is-disabled { + button { + background-color: colors.$grey; + } + } + + @media screen and (max-width: breakpoints.$md) { + margin-right: 1rem; + margin-bottom: 0.5rem; + + button { + padding: 0.5rem 1.5rem; } + } } + } - .skill { - &-item { - border-radius: 1.5rem; - box-shadow: 0 0.2rem 1rem rgba(colors.$primary, 10%); - box-sizing: border-box; - column-gap: 2rem; - display: grid; - grid-template-columns: 5rem 1fr; - margin: 0 auto; - padding: 1.5rem; - width: 100%; - - &__logo { - display: flex; - justify-content: center; - align-items: center; - img { - height: auto; - width: 60%; - } - } + .skill { + &-item { + border-radius: 1.5rem; + box-shadow: 0 0.2rem 1rem rgba(colors.$primary, 10%); + box-sizing: border-box; + column-gap: 2rem; + display: grid; + grid-template-columns: 5rem 1fr; + margin: 0 auto; + padding: 1.5rem; + width: 100%; - &__name { - font-size: 1.4rem; - font-weight: 600; - margin: 0; - } + &__logo { + display: flex; + justify-content: center; + align-items: center; - &__detail { - margin: 0; - opacity: .6; - font-size: 1.3rem; - } + img { + height: auto; + width: 60%; } + } + + &__name { + font-size: 1.4rem; + font-weight: 600; + margin: 0; + } + + &__detail { + margin: 0; + opacity: 0.6; + font-size: 1.3rem; + } } + } } diff --git a/src/sections/Statistics/Statistics.scss b/src/sections/Statistics/Statistics.scss index bdad040..ca4e1e7 100644 --- a/src/sections/Statistics/Statistics.scss +++ b/src/sections/Statistics/Statistics.scss @@ -3,108 +3,108 @@ @use '../../styles/mixins'; .section-statistics { - $statistics: &; + $statistics: &; - @include mixins.section; + @include mixins.section; - &:not(:first-child) { - padding-top: 0; + &:not(:first-child) { + padding-top: 0; + } + + &__list { + display: flex; + justify-content: space-between; + list-style: none; + padding: 0; + + @media screen and (max-width: breakpoints.$md) { + flex-direction: column; } - &__list { - display: flex; - justify-content: space-between; - list-style: none; - padding: 0; + &-item { + align-items: center; + color: colors.$grey; + display: inline-block; + font-weight: 500; + margin: 0 auto; + position: relative; + text-align: left; + + @media screen and (max-width: breakpoints.$md) { + margin-bottom: 6rem; + + &::after { + background-color: rgba(colors.$secondary, 40%); + bottom: -4rem; + content: ''; + height: 0.3rem; + left: calc(50% - 1.5rem); + position: absolute; + width: 3rem; + } + } - @media screen and (max-width: breakpoints.$md) { - flex-direction: column; + &__count { + color: colors.$primary; + display: block; + font-size: 6rem; + font-weight: 600; + + &:not(:first-child) { + display: inline; + } + + span { + display: inline; + } + + @media screen and (min-width: breakpoints.$md) and (max-width: breakpoints.$lg) { + font-size: 4rem; } + } - &-item { - align-items: center; - color: colors.$grey; - display: inline-block; - font-weight: 500; - margin: 0 auto; - position: relative; - text-align: left; - - @media screen and (max-width: breakpoints.$md) { - margin-bottom: 6rem; - - &::after { - background-color: rgba(colors.$secondary, 40%); - bottom: -4rem; - content: ''; - height: 0.3rem; - left: calc(50% - 1.5rem); - position: absolute; - width: 3rem; - } - } - - &__count { - color: colors.$primary; - display: block; - font-size: 6rem; - font-weight: 600; - - &:not(:first-child) { - display: inline; - } - - span { - display: inline; - } - - @media screen and (min-width: breakpoints.$md) and (max-width: breakpoints.$lg) { - font-size: 4rem; - } - } - - &:first-child { - color: colors.$white; - font-size: 1.4rem; - position: relative; - text-align: center; - z-index: 1; - - @media screen and (min-width: breakpoints.$md) and (max-width: breakpoints.$lg) { - transform: scale(0.7); - } - - &::before { - background-color: colors.$secondary; - border-radius: 50%; - content: ''; - height: 20rem; - left: calc(50% - 10rem); - position: absolute; - top: calc(50% - 10rem); - width: 20rem; - z-index: -1; - } - - span { - color: inherit; - font-size: 10rem; - line-height: 9rem; - position: relative; - z-index: 1; - } - } - - &--separator { - color: rgba(colors.$teal, 40%); - font-size: 6rem; - text-align: center; - width: 2.5rem; - - @media screen and (max-width: breakpoints.$md) { - display: none; - } - } + &:first-child { + color: colors.$white; + font-size: 1.4rem; + position: relative; + text-align: center; + z-index: 1; + + @media screen and (min-width: breakpoints.$md) and (max-width: breakpoints.$lg) { + transform: scale(0.7); + } + + &::before { + background-color: colors.$secondary; + border-radius: 50%; + content: ''; + height: 20rem; + left: calc(50% - 10rem); + position: absolute; + top: calc(50% - 10rem); + width: 20rem; + z-index: -1; + } + + span { + color: inherit; + font-size: 10rem; + line-height: 9rem; + position: relative; + z-index: 1; + } + } + + &--separator { + color: rgba(colors.$teal, 40%); + font-size: 6rem; + text-align: center; + width: 2.5rem; + + @media screen and (max-width: breakpoints.$md) { + display: none; } + } } + } } diff --git a/src/sections/Studies/Studies.scss b/src/sections/Studies/Studies.scss index 96c8ad9..b095916 100644 --- a/src/sections/Studies/Studies.scss +++ b/src/sections/Studies/Studies.scss @@ -3,123 +3,121 @@ @use '../../styles/mixins'; .section-studies { - @include mixins.section; - - .slider { - .section-studies__slide { - align-content: flex-start; - align-items: flex-start; - box-sizing: border-box; - column-gap: 5rem; - cursor: grab; - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - row-gap: 5rem; - - &:active { - cursor: grabbing; - } - } + @include mixins.section; + + .slider { + .section-studies__slide { + place-content: flex-start space-evenly; + align-items: flex-start; + box-sizing: border-box; + gap: 5rem; + cursor: grab; + display: flex; + flex-wrap: wrap; + + &:active { + cursor: grabbing; + } } + } - .study { - $study: '.study'; + .study { + $study: '.study'; - border-radius: 1.5rem; - box-shadow: 0 0.2rem 1rem rgba(colors.$primary, 10%); - position: relative; + border-radius: 1.5rem; + box-shadow: 0 0.2rem 1rem rgba(colors.$primary, 10%); + position: relative; - @media screen and (min-width: breakpoints.$lg) { - flex-basis: calc(50% - 10rem); - min-width: 40rem; - } + @media screen and (min-width: breakpoints.$lg) { + flex-basis: calc(50% - 10rem); + min-width: 40rem; + } - @media screen and (max-width: breakpoints.$lg) { - flex-basis: calc(100% - 5rem); - } + @media screen and (max-width: breakpoints.$lg) { + flex-basis: calc(100% - 5rem); + } - @media screen and (max-width: breakpoints.$md) { - flex-basis: 100%; - } + @media screen and (max-width: breakpoints.$md) { + flex-basis: 100%; + } + + &__wrapper { + margin-bottom: 1.5rem; + padding: 3rem; + } - &__wrapper { - margin-bottom: 1.5rem; - padding: 3rem; + &__footer { + border-bottom-left-radius: inherit; + border-bottom-right-radius: inherit; + bottom: 0; + color: colors.$white; + display: flex; + font-weight: 500; + justify-content: space-between; + left: 0; + padding: 0.8rem 1.6rem; + position: absolute; + right: 0; + + span { + &::first-letter { + text-transform: uppercase; } - &__footer { - border-bottom-left-radius: inherit; - border-bottom-right-radius: inherit; - bottom: 0; - color: colors.$white; - display: flex; - font-weight: 500; - justify-content: space-between; - left: 0; - padding: 0.8rem 1.6rem; - position: absolute; - right: 0; - - span { - &::first-letter { - text-transform: uppercase; - } - - &:last-child { - font-weight: 600; - } - } + &:last-child { + font-weight: 600; } + } + } - &__header { - align-items: flex-start; - column-gap: 2rem; - display: grid; - grid-template-columns: 4rem 1fr; - - @media screen and (max-width: breakpoints.$sm) { - font-size: 1.8rem; - } - - img { - height: auto; - margin-top: 0.7rem; - width: 100%; - } - - h4 { - font-size: 2.3rem; - font-weight: 500; - margin: 0; - - span:first-child { - display: block; - font-size: 1.4rem; - } - } + &__header { + align-items: flex-start; + column-gap: 2rem; + display: grid; + grid-template-columns: 4rem 1fr; + + @media screen and (max-width: breakpoints.$sm) { + font-size: 1.8rem; + } + + img { + height: auto; + margin-top: 0.7rem; + width: 100%; + } + + h4 { + font-size: 2.3rem; + font-weight: 500; + margin: 0; + + span:first-child { + display: block; + font-size: 1.4rem; } + } + } - &__label { - font-size: 2.5rem; - margin: 2rem 0; - text-transform: uppercase; + &__label { + font-size: 2.5rem; + margin: 2rem 0; + text-transform: uppercase; - @media screen and (max-width: breakpoints.$sm) { - font-size: 1.6rem; - } - } + @media screen and (max-width: breakpoints.$sm) { + font-size: 1.6rem; + } + } - &__details { - padding-left: 2rem; + &__details { + padding-left: 2rem; - @media screen and (max-width: breakpoints.$sm) { - font-size: 1.4rem; - } - } + @media screen and (max-width: breakpoints.$sm) { + font-size: 1.4rem; + } + } - &__tag { - @include mixins.tag; - } + &__tag { + @include mixins.tag; } + } } diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss index 4c43020..1024c0f 100644 --- a/src/styles/_buttons.scss +++ b/src/styles/_buttons.scss @@ -1,50 +1,50 @@ @use './colors'; .button { - appearance: none; - border: 0.1rem solid transparent; - border-radius: 0.8rem; - box-sizing: border-box; - cursor: pointer; - font-size: 1.6rem; - font-weight: 600; - height: 4.6rem; - letter-spacing: 0.25rem; - overflow: hidden; - padding: 1.2rem 3rem; - text-overflow: ellipsis; - text-transform: uppercase; - white-space: nowrap; + appearance: none; + border: 0.1rem solid transparent; + border-radius: 0.8rem; + box-sizing: border-box; + cursor: pointer; + font-size: 1.6rem; + font-weight: 600; + height: 4.6rem; + letter-spacing: 0.25rem; + overflow: hidden; + padding: 1.2rem 3rem; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; - &:hover { - opacity: 0.95; - } + &:hover { + opacity: 0.95; + } - &:focus, - &:active { - opacity: 0.75; - } + &:focus, + &:active { + opacity: 0.75; + } - + .button { - margin-left: 2rem; - } + + .button { + margin-left: 2rem; + } - svg, - img { - height: 1.6rem; - margin-left: 1rem; - vertical-align: middle; - } + svg, + img { + height: 1.6rem; + margin-left: 1rem; + vertical-align: middle; + } - &--primary { - background-color: colors.$teal; - border-color: colors.$teal; - color: colors.$white; - } + &--primary { + background-color: colors.$teal; + border-color: colors.$teal; + color: colors.$white; + } - &--secondary { - background-color: colors.$white; - border-color: colors.$teal; - color: colors.$teal; - } + &--secondary { + background-color: colors.$white; + border-color: colors.$teal; + color: colors.$teal; + } } diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index e48aedc..662f770 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,71 +1,71 @@ @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 100; - src: url('/fonts/outfit-thin.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 100; + src: url('/fonts/outfit-thin.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 200; - src: url('/fonts/outfit-extralight.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 200; + src: url('/fonts/outfit-extralight.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 300; - src: url('/fonts/outfit-light.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 300; + src: url('/fonts/outfit-light.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 400; - src: url('/fonts/outfit-regular.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 400; + src: url('/fonts/outfit-regular.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 500; - src: url('/fonts/outfit-medium.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 500; + src: url('/fonts/outfit-medium.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 600; - src: url('/fonts/outfit-semibold.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 600; + src: url('/fonts/outfit-semibold.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 700; - src: url('/fonts/outfit-bold.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 700; + src: url('/fonts/outfit-bold.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 800; - src: url('/fonts/outfit-extrabold.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 800; + src: url('/fonts/outfit-extrabold.woff2') format('woff2'); } @font-face { - font-display: swap; - font-family: Outfit; - font-style: normal; - font-weight: 900; - src: url('/fonts/outfit-black.woff2') format('woff2'); + font-display: swap; + font-family: Outfit; + font-style: normal; + font-weight: 900; + src: url('/fonts/outfit-black.woff2') format('woff2'); } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index f44be29..94411b3 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -2,47 +2,47 @@ @use './colors'; @mixin section () { - margin-left: auto; - margin-right: auto; - max-width: 160rem; - padding-bottom: 3rem; - padding-top: 3rem; + margin-left: auto; + margin-right: auto; + max-width: 160rem; + padding-bottom: 3rem; + padding-top: 3rem; - @media screen and (max-width: breakpoints.$xxl) { - padding-left: 3rem; - padding-right: 3rem; - } + @media screen and (max-width: breakpoints.$xxl) { + padding-left: 3rem; + padding-right: 3rem; + } - @media screen and (max-width: breakpoints.$sm) { - padding-left: 2rem; - padding-right: 2rem; - } + @media screen and (max-width: breakpoints.$sm) { + padding-left: 2rem; + padding-right: 2rem; + } } @mixin tag () { - background-color: colors.$teal; - border-radius: 0.5rem; - color: colors.$white; - font-size: 1.2rem; - font-weight: 600; - letter-spacing: 0.05rem; - padding: 0.3rem 1rem; - text-transform: uppercase; + background-color: colors.$teal; + border-radius: 0.5rem; + color: colors.$white; + font-size: 1.2rem; + font-weight: 600; + letter-spacing: 0.05rem; + padding: 0.3rem 1rem; + text-transform: uppercase; } @mixin scrollbar { - &::-webkit-scrollbar { - height: 0.4em; - width: 0.4em; - } + &::-webkit-scrollbar { + height: 0.4em; + width: 0.4em; + } - &::-webkit-scrollbar, - &::-webkit-scrollbar-thumb { - border-radius: 5px; - overflow: visible; - } + &::-webkit-scrollbar, + &::-webkit-scrollbar-thumb { + border-radius: 5px; + overflow: visible; + } - &::-webkit-scrollbar-thumb { - background: lighten(colors.$teal, 10%); - } + &::-webkit-scrollbar-thumb { + background: lighten(colors.$teal, 10%); + } } diff --git a/src/styles/_rc.scss b/src/styles/_rc.scss index dba9a06..7ff8fb6 100644 --- a/src/styles/_rc.scss +++ b/src/styles/_rc.scss @@ -1,39 +1,39 @@ @use './colors'; .rc-tooltip { - background-color: lighten(desaturate(colors.$teal, 10%), 30%); - border-radius: 0.3rem; - max-width: 30rem; - opacity: 1; + background-color: lighten(desaturate(colors.$teal, 10%), 30%); + border-radius: 0.3rem; + max-width: 30rem; + opacity: 1; - &-inner { - background: transparent; - border: none; - color: colors.$teal; - font-size: 1.6rem; - font-weight: 500; - padding: 1rem 1.6rem; - } + &-inner { + background: transparent; + border: 0; + color: colors.$teal; + font-size: 1.6rem; + font-weight: 500; + padding: 1rem 1.6rem; + } - &-content { - animation: rc-tooltip 0.2s ease-out forwards; + &-content { + animation: rc-tooltip 0.2s ease-out forwards; - @keyframes rc-tooltip { - from { - opacity: 0; - transform: scale(0.9); - } + @keyframes rc-tooltip { + from { + opacity: 0; + transform: scale(0.9); + } - to { - opacity: 1; - transform: scale(1); - } - } + to { + opacity: 1; + transform: scale(1); + } } + } } .rc-tooltip-placement-bottom .rc-tooltip-arrow, .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow, .rc-tooltip-placement-bottomRight .rc-tooltip-arrow { - border-bottom-color: lighten(desaturate(colors.$teal, 10%), 30%); + border-bottom-color: lighten(desaturate(colors.$teal, 10%), 30%); } diff --git a/vite.config.mts b/vite.config.mts new file mode 100644 index 0000000..1ff0da0 --- /dev/null +++ b/vite.config.mts @@ -0,0 +1,7 @@ +import react from "@vitejs/plugin-react"; +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}); diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index b1b5f91..0000000 --- a/vite.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react()] -})