+
+
+
+
+
+
+
HTML
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Sass
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
TypeScript
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
JavaScript
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Angular
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
React
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
Illsutrator
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Photoshop
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Permiere Pro
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Figma
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
-
-
-
-
+
+
+
Spark AR
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
-
-
+
+
+
+
+
+
+
+
+
Word
+
+ {
+ t({
+ en: "Advanced Professional Competence",
+ es: "Competencia profesional avanzada",
+ "pt-br": "Competência profissional avançada",
+ })
+ }
+
+
+
+
+
+
+
Excel
+
+ {
+ t({
+ en: "Intermediate proficiency",
+ es: "Competencia intermedia profesional",
+ "pt-br": "Competência profissional intermediária",
+ })
+ }
+
+
+
+
+
+
+
Power Point
+
+ {
+ t({
+ en: "Advanced Professional Competence",
+ es: "Competencia profesional avanzada",
+ "pt-br": "Competência profissional avançada",
+ })
+ }
+
+
+
+
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..35aa77c
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,1093 @@
+/*==================== GOOGLE FONTS ====================*/
+
+/*==================== VARIABLES CSS ====================*/
+:root {
+ --header-height: 3rem;
+
+ /*========== Colors ==========*/
+ /* Base Hue Colors */
+ --hue-color: 270; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/
+
+ /* Light Theme */
+ --first-color: hsl(var(--hue-color), 80%, 60%); /* Strong accent */
+ --first-color-second: hsl(
+ var(--hue-color),
+ 70%,
+ 50%
+ ); /* Complementary accent */
+ --first-color-alt: hsl(var(--hue-color), 60%, 45%); /* Subtle accent */
+ --first-color-lighter: hsl(
+ var(--hue-color),
+ 90%,
+ 85%
+ ); /* Background highlight */
+
+ --title-color: hsl(
+ var(--hue-color),
+ 10%,
+ 12%
+ ); /* Darker text for better readability */
+ --text-color: hsl(var(--hue-color), 10%, 38%); /* Standard text color */
+ --text-color-light: hsl(var(--hue-color), 10%, 55%); /* Secondary text */
+
+ --input-color: hsl(var(--hue-color), 70%, 96%); /* Input backgrounds */
+ --body-color: hsl(var(--hue-color), 60%, 98%); /* Background */
+ --container-color: #ffffff; /* Pure white container for contrast */
+ --scroll-bar-color: hsl(var(--hue-color), 15%, 85%); /* Scroll bar */
+ --scroll-thumb-color: hsl(var(--hue-color), 15%, 70%); /* Thumb for scroll */
+ /*========== Font and typography ==========*/
+ --body-font: "Poppins", sans-serif;
+
+ /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
+ --big-font-size: 2rem;
+ --h1-font-size: 1.5rem;
+ --h2-font-size: 1.25rem;
+ --h3-font-size: 1.125rem;
+ --normal-font-size: 1rem;
+ --small-font-size: 0.875rem;
+ --smaller-font-size: 0.75rem;
+
+ /*========== Font weight ==========*/
+ --font-medium: 500;
+ --font-semi-bold: 600;
+ --font-bold: 800;
+
+ /*========== Margenes Bottom ==========*/
+ /* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
+ --mb-0-25: 0.25rem;
+ --mb-0-5: 0.5rem;
+ --mb-0-75: 0.75rem;
+ --mb-1: 1rem;
+ --mb-1-5: 1.5rem;
+ --mb-2: 2rem;
+ --mb-2-5: 2.5rem;
+ --mb-3: 3rem;
+
+ /*========== z index ==========*/
+ --z-tooltip: 10;
+ --z-fixed: 100;
+ --z-modal: 1000;
+}
+
+/* Font size for large devices */
+@media screen and (min-width: 968px) {
+ :root {
+ --big-font-size: 3rem;
+ --h1-font-size: 2.25rem;
+ --h2-font-size: 1.5rem;
+ --h3-font-size: 1.25rem;
+ --normal-font-size: 1rem;
+ --small-font-size: 0.875rem;
+ --smaller-font-size: 0.813rem;
+ }
+}
+
+/* Dark Theme */
+body.dark-theme {
+ --first-color: hsl(
+ var(--hue-color),
+ 70%,
+ 55%
+ ); /* Adjusted for dark mode contrast */
+ --first-color-second: hsl(var(--hue-color), 50%, 40%);
+ --first-color-alt: hsl(var(--hue-color), 50%, 30%);
+ --first-color-lighter: hsl(var(--hue-color), 85%, 70%); /* Softer highlight */
+
+ --title-color: hsl(var(--hue-color), 15%, 90%); /* Bright text */
+ --text-color: hsl(var(--hue-color), 10%, 65%); /* Standard text */
+ --text-color-light: hsl(var(--hue-color), 10%, 75%); /* Secondary text */
+
+ --input-color: hsl(var(--hue-color), 25%, 18%); /* Dark input background */
+ --body-color: hsl(var(--hue-color), 10%, 8%); /* Background */
+ --container-color: hsl(
+ var(--hue-color),
+ 15%,
+ 12%
+ ); /* Slightly lighter container */
+ --scroll-bar-color: hsl(var(--hue-color), 10%, 35%);
+ --scroll-thumb-color: hsl(var(--hue-color), 10%, 25%);
+}
+
+/*========== Button Dark/Light ==========*/
+.nav__btns {
+ display: flex;
+ align-items: center;
+}
+.change-theme {
+ font-size: 1.25rem;
+ color: var(--title-color);
+ margin-right: var(--mb-1);
+ cursor: pointer;
+}
+.change-theme:hover {
+ color: var(--first-color);
+}
+/*==================== BASE ====================*/
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+body {
+ margin: 0 0 var(--header-height) 0;
+ font-family: var(--body-font);
+ font-size: var(--normal-font-size);
+ background-color: var(--body-color);
+ color: var(--text-color);
+}
+
+h1,
+h2,
+h3,
+h4 {
+ color: var(--title-color);
+ font-weight: var(--font-semi-bold);
+}
+ul {
+ list-style: none;
+}
+a {
+ text-decoration: none;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+button {
+ text-decoration: none;
+}
+/*==================== REUSABLE CSS CLASSES ====================*/
+.section {
+ padding: 2rem 0 4rem;
+}
+.section__title {
+ font-size: var(--h1-font-size);
+}
+.section__subtitle {
+ display: block;
+ font-size: var(--small-font-size);
+ margin-bottom: var(--mb-3);
+}
+
+.section__subtitle,
+.section__title {
+ text-align: center;
+}
+/*==================== LAYOUT ====================*/
+.container {
+ max-width: 768px;
+ margin-left: var(--mb-1-5);
+ margin-right: var(--mb-1-5);
+}
+.grid {
+ display: grid;
+ gap: 1.5rem;
+}
+.header {
+ width: 100%;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ z-index: var(--z-fixed);
+ background-color: var(--body-color);
+}
+
+/*==================== NAV ====================*/
+.nav {
+ max-width: 968;
+ height: 5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.nav__logo,
+.nav__toggle {
+ color: var(--title-color);
+ font-weight: var(--font-medium);
+}
+
+.MarcaHead {
+ width: 40px;
+ padding: 5px;
+}
+
+.nav__logo {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.nav__logo,
+.nav__logo:hover {
+ color: var(--first-color);
+}
+.nav__toggle {
+ font-size: 1.1rem;
+ cursor: pointer;
+}
+.nav__toggle:hover {
+ color: var(--first-color);
+}
+
+@media screen and (max-width: 767px) {
+ .nav__menu {
+ position: fixed;
+ bottom: -100%;
+ left: 0;
+ width: 100%;
+ background-color: var(--body-color);
+ padding: 2rem 1.5rem 4rem;
+ box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
+ border-radius: 1.5rem 1.5rem 0 0;
+ transition: 0.3s;
+ }
+}
+.nav__list {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+}
+.nav__link {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: var(--small-font-size);
+ color: var(--title-color);
+ font-weight: var(--font-medium);
+}
+.nav__link:hover {
+ color: var(--first-color);
+}
+.nav__icon {
+ font-size: 1.2rem;
+}
+.nav__close {
+ position: absolute;
+ right: 1.3rem;
+ bottom: 0.5rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: var(--first-color);
+}
+.nav__close:hover {
+ color: var(--first-color-alt);
+}
+
+.nav__translate,
+.locale-switcher {
+ font-family: "Poppins";
+ border-radius: 5px;
+ background-color: var(--first-color);
+ font-size: var(--small-font-size);
+ color: #fff;
+ font-weight: var(--font-medium);
+}
+
+/* show menu */
+.show-menu {
+ bottom: 0;
+}
+
+/* Active link */
+.active-link {
+ color: var(--first-color);
+}
+/* Change background header */
+.scroll-header {
+ box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2);
+}
+
+/*==================== HOME ====================*/
+.home__container {
+ gap: 1rem;
+}
+.home__content {
+ grid-template-columns: 0.5fr 3fr;
+ padding-top: 3.5rem;
+ align-items: center;
+}
+.home__social {
+ display: grid;
+ grid-template-columns: max-content;
+ row-gap: 1rem;
+}
+.home__social-icon {
+ font-size: 1.25rem;
+ color: var(--first-color);
+}
+.home__social-icon:hover {
+ color: var(--first-color-alt);
+}
+.home__blob {
+ width: 200px;
+ fill: var(--first-color);
+}
+.home__blob-img {
+ width: 200px;
+}
+.home__data {
+ grid-column: 1/3;
+}
+.home__title {
+ font-size: var(--big-font-size);
+}
+.home__eyebrow {
+ font-size: var(--h1-font-size);
+}
+.home_subtitle {
+ font-size: var(--h3-font-size);
+ color: var(--text-color);
+ font-weight: var(--font-medium);
+ margin-bottom: var(--mb-0-75);
+}
+.home__description {
+ margin-bottom: var(--mb-2);
+}
+.home__scroll {
+ display: none;
+}
+.home__scroll-button {
+ color: var(--first-color);
+ transition: 0.3s;
+}
+.home__scroll-button:hover {
+ transform: translateY(0.25rem);
+}
+.home__scroll-mouse {
+ font-size: 2rem;
+}
+.home__scroll-name {
+ font-size: var(--small-font-size);
+ color: var(--title-color);
+ font-weight: var(--font-medium);
+ margin-right: var(--mb-0-25);
+}
+.home__scroll-arrow {
+ font-size: 1.25rem;
+}
+/*==================== BUTTONS ====================*/
+.button {
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #fff;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ font-weight: var(--font-medium);
+ transition: background-color 200ms ease-in-out;
+}
+.button:hover {
+ background-color: var(--first-color-alt);
+}
+.button__icon {
+ font-size: 1.25rem;
+ margin-left: var(--mb-0-5);
+ transition: 0.3s;
+}
+.button--white {
+ background-color: #fff;
+ color: var(--first-color);
+}
+.button--white:hover {
+ background-color: #fff;
+}
+.button--flex {
+ display: inline-flex;
+ align-items: center;
+}
+.button__small {
+ padding: 0.75rem 1rem;
+}
+.button--link {
+ padding: 0;
+ background-color: transparent;
+ color: var(--first-color);
+}
+.button--link:hover {
+ background-color: transparent;
+ color: var(--first-color-alt);
+}
+.button-form {
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ display: inline-block;
+ background-color: var(--first-color);
+ color: #fff;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ font-weight: var(--font-medium);
+ font-size: var(--normal-font-size);
+ font-family: var(--body-font);
+ border-color: var(--first-color);
+ text-decoration: none;
+ border-right-style: solid;
+ border-bottom-style: solid;
+ cursor: pointer;
+ transition: all 300ms ease-in-out;
+}
+
+.button-form:hover {
+ background-color: var(--first-color-alt);
+}
+
+/*==================== ABOUT ====================*/
+.about__img {
+ width: 200px;
+ border-radius: 0.5rem;
+ justify-self: center;
+ align-self: center;
+}
+.about__description {
+ text-align: center;
+ margin-bottom: var(--mb-2-5);
+}
+.about__info {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: var(--mb-2-5);
+ gap: 1rem;
+}
+.about__info-title {
+ font-size: var(--h2-font-size);
+ font-weight: var(--font-semi-bold);
+ color: var(--title-color);
+}
+.about__info-name {
+ font-size: var(--smaller-font-size);
+}
+.about__info-title,
+.about__info-name {
+ display: block;
+ text-align: center;
+}
+.about__buttons {
+ display: flex;
+ justify-content: center;
+}
+/*==================== SKILLS ====================*/
+.skills__container {
+ row-gap: 0;
+}
+.skills__header {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--mb-2-5);
+ cursor: pointer;
+}
+.skills__icon,
+.skills__arrow {
+ font-size: 2rem;
+ color: var(--first-color);
+}
+.skills__icon {
+ margin-right: var(--mb-0-75);
+}
+.skills__title {
+ font-size: var(--h3-font-size);
+}
+.skills__subtitle {
+ font-size: var(--small-font-size);
+ color: var(--text-color);
+}
+.skills__arrow {
+ margin-left: auto;
+ transition: 0.4s;
+}
+.skills__list {
+ row-gap: 1.5rem;
+ padding-left: 2.7rem;
+}
+.skills__titles {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: var(--mb-0-5);
+ gap: 1rem;
+}
+.skills__name {
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-medium);
+}
+
+.skills__number {
+ font-size: var(--small-font-size);
+ font-weight: var(--font-medium);
+ line-break: normal;
+ text-align: right;
+ max-width: 250px;
+}
+
+.skills__bar,
+.skills__close .skills__list {
+ height: 0;
+ overflow: hidden;
+}
+.skills__open .skills__list {
+ height: max-content;
+ margin-bottom: var(--mb-2-5);
+}
+.skills__open .skills__arrow {
+ transform: rotate(-180deg);
+}
+/*==================== BLOG ====================*/
+
+.blog__container {
+ gap: 1rem;
+ row-gap: 5rem;
+}
+.blog__social {
+ display: grid;
+ grid-template-columns: max-content;
+ row-gap: 1rem;
+ transform: translate(-6rem, -8rem);
+}
+
+.blog__header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ cursor: pointer;
+}
+.blog__icon,
+.blog__arrow {
+ font-size: 2rem;
+ color: var(--first-color);
+}
+.blog__icon {
+ margin-right: var(--mb-0-75);
+}
+.blog__title {
+ font-size: var(--h1-font-size);
+}
+.blog__subtitle {
+ font-size: var(--medium-font-size);
+ color: var(--first-color);
+}
+.blog__arrow {
+ margin-left: auto;
+ transition: 0.4s;
+}
+.blog__list {
+ row-gap: 1.5rem;
+ padding-left: 2.7rem;
+}
+.blog__titles {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: var(--mb-0-5);
+}
+.blog__name {
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-medium);
+}
+
+.blog__data {
+ grid-column: 1/3;
+}
+/*==================== QUALIFICATION ====================*/
+.qualification__tabs {
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: var(--mb-2);
+}
+.qualification__button {
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
+ cursor: pointer;
+}
+.qualification__button:hover {
+ color: var(--first-color);
+}
+.qualification__icon {
+ font-size: 1.8rem;
+ margin-right: var(--mb-0-25);
+}
+.qualification__data {
+ display: grid;
+ grid-template-columns: 1fr max-content 1fr;
+ column-gap: 1.5rem;
+}
+.qualification__title {
+ font-size: var(--normal-font-size);
+ font-weight: var(--font-medium);
+}
+.qualification__subtitle {
+ display: inline-block;
+ font-size: var(--small-font-size);
+ margin-bottom: var(--mb-1);
+}
+.qualification__calendar {
+ font-size: var(--small-font-size);
+ color: var(--text-color-light);
+}
+.qualification__rounder {
+ display: inline-block;
+ width: 13px;
+ height: 13px;
+ background-color: var(--first-color);
+ border-radius: 50%;
+}
+.qualification__line {
+ display: block;
+ width: 1px;
+ height: 100%;
+ background-color: var(--first-color);
+ transform: translate(6px, -7px);
+}
+.qualification [data-content] {
+ display: none;
+}
+.qualification__active[data-content] {
+ display: block;
+}
+.qualification__button.qualification__active {
+ color: var(--first-color);
+}
+/*==================== SERVICES ====================*/
+.services__container {
+ gap: 1.5rem;
+ grid-template-columns: repeat(2, 1fr);
+}
+.services__content {
+ position: relative;
+ background-color: var(--container-color);
+ padding: 3.5rem 0.5rem 1.25rem 1.5rem;
+ border-radius: 0.25rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ transition: 0.3s;
+}
+.services__content:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+.services__icon {
+ display: block;
+ font-size: 1.5rem;
+ color: var(--first-color);
+ margin-bottom: var(--mb-1);
+}
+.services__title {
+ font-size: var(--h3-font-size);
+ margin-bottom: var(--mb-1);
+ font-weight: var(--font-medium);
+}
+.services__button {
+ cursor: pointer;
+ font-size: var(--small-font-size);
+}
+.services__button:hover .button__icon {
+ transform: translateX(0.25rem);
+}
+.services__modal {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(23, 23, 23, 0.656);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1rem;
+ z-index: var(--z-modal);
+ opacity: 0;
+ visibility: hidden;
+ transition: 0.3s;
+}
+.services__modal-content {
+ position: relative;
+ background-color: var(--container-color);
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+}
+.services__modal-services {
+ row-gap: 1rem;
+}
+.services__modal-service {
+ display: flex;
+}
+.services__modal-title {
+ font-size: var(--h3-font-size);
+ font-weight: var(--font-medium);
+ margin-bottom: var(--mb-1-5);
+}
+.services__modal-close {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ font-size: 1.5rem;
+ color: var(--first-color);
+ cursor: pointer;
+}
+.services__modal-icon {
+ color: var(--first-color);
+ margin-right: var(--mb-0-25);
+}
+/* Active Modal */
+.active-modal {
+ opacity: 1;
+ visibility: visible;
+}
+
+/*==================== PORTFOLIO ====================*/
+
+/*==================== PROJECT IN MIND ====================*/
+.project {
+ text-align: center;
+}
+.project__bg {
+ background-color: var(--first-color);
+ padding-top: 3rem;
+}
+.project__title {
+ font-size: var(--h2-font-size);
+ margin-bottom: var(--mb-0-75);
+}
+.project__description {
+ margin-bottom: var(--mb-1-5);
+}
+.project__title,
+.project__description {
+ color: #fff;
+}
+.project__img {
+ width: 232px;
+ justify-self: center;
+}
+
+/*==================== FOOTER ====================*/
+.footer {
+ padding-top: 2rem;
+}
+.footer__container {
+ row-gap: 3.5rem;
+}
+.footer__bg {
+ background-color: var(--first-color);
+ padding: 2rem 0 3rem;
+}
+.footer__title {
+ font-size: var(--h2-font-size);
+ margin-bottom: var(--mb-0-25);
+ display: flex;
+ flex-direction: row;
+}
+
+.MarcaFoot {
+ width: 50%;
+ height: 50%;
+}
+
+.footer__subtitle {
+ font-size: var(--small-font-size);
+}
+.footer__links {
+ display: flex;
+ flex-direction: column;
+ row-gap: 1.5rem;
+}
+.footer__links:hover {
+ color: var(--first-color-lighter);
+}
+.footer__social {
+ font-size: 1.25rem;
+ margin-right: var(--mb-1-5);
+ align-items: center;
+}
+.footer__social:hover {
+ color: var(--first-color-lighter);
+}
+.footer__copy {
+ font-size: var(--smaller-font-size);
+ text-align: center;
+ color: var(--text-color-light);
+ margin-top: var(--mb-3);
+}
+.footer__title,
+.footer__subtitle,
+.footer__link,
+.footer__social {
+ color: #fff;
+}
+/*========== SCROLL UP ==========*/
+.scrollup {
+ position: fixed;
+ right: 1rem;
+ bottom: -20%;
+ background-color: var(--first-color);
+ opacity: 0.8;
+ padding: 0 0.3rem;
+ border-radius: 0.4rem;
+ z-index: var(--z-tooltip);
+ transition: 0.4s;
+}
+.scrollup:hover {
+ background-color: var(--first-color-alt);
+}
+.scrollup__icon {
+ font-size: 1.5rem;
+ color: #fff;
+}
+
+/* Show scroll */
+.show-scroll {
+ bottom: 5rem;
+}
+
+/*========== SCROLL BAR ==========*/
+::-webkit-scrollbar {
+ width: 0.6rem;
+ background-color: var(--scroll-bar-color);
+ border-radius: 0.5rem;
+}
+::-webkit-scrollbar-thumb {
+ background-color: var(--scroll-thumb-color);
+ border-radius: 0.5rem;
+}
+::-webkit-scrollbar-thumb:hover {
+ background-color: var(--text-color-light);
+}
+/*==================== MEDIA QUERIES ====================*/
+/* For small devices */
+@media screen and (max-width: 350px) {
+ .container {
+ margin-left: var(--mb-1);
+ margin-left: var(--mb-1);
+ }
+ .nav__menu {
+ padding: 2rem 0.25rem 4rem;
+ }
+ .nav__list {
+ column-gap: 0;
+ }
+ .home__content {
+ grid-template-columns: 25fr 3fr;
+ }
+ .home__blob {
+ width: 180px;
+ }
+ .skills__title {
+ font-size: var(--normal-font-size);
+ }
+ .qualification__data {
+ gap: 0.5rem;
+ }
+ .services__container {
+ grid-template-columns: max-content;
+ justify-content: center;
+ }
+ .services__content {
+ padding-right: 3.5rem;
+ }
+ .services__modal {
+ padding: 0 0.5rem;
+ }
+ .project__img {
+ width: 200px;
+ }
+ .testimonial__data,
+ .testimonial__header {
+ flex-direction: column;
+ align-items: center;
+ }
+ .testimonial__img {
+ margin-right: 0;
+ margin-bottom: var(--mb-0-25);
+ }
+ .testimonial__data,
+ .testimonial__description {
+ text-align: center;
+ }
+}
+/* For medium devices */
+@media screen and (min-width: 568px) {
+ .home__content {
+ grid-template-columns: max-content 1fr 1fr;
+ }
+ .home__data {
+ grid-column: initial;
+ }
+ .home__img {
+ order: 1;
+ justify-self: center;
+ }
+ .about__container,
+ .skills__container,
+ .portafolio__content,
+ .project__container,
+ .contact__container,
+ .footer__container,
+ .wibx__container,
+ .qualification__sections {
+ display: grid;
+ justify-content: center;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .container {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ body {
+ margin: 0;
+ }
+ .section {
+ padding: 6rem 0 2rem;
+ }
+ .section__subtitle {
+ margin-bottom: 4rem;
+ }
+ .header {
+ top: 0;
+ bottom: initial;
+ }
+ .header,
+ .main,
+ .footer__container {
+ padding: 0 1rem;
+ }
+ .nav {
+ height: calc(var(--header-height) + 1.5rem);
+ column-gap: 1rem;
+ }
+ .nav__icon,
+ .nav__close,
+ .nav__toggle {
+ display: none;
+ }
+ .nav__list {
+ display: flex;
+ column-gap: 2rem;
+ }
+ .nav__menu {
+ margin-left: 0;
+ }
+ .change-theme {
+ margin: 0;
+ }
+ .home__container {
+ row-gap: 5rem;
+ }
+ .home__content {
+ padding-top: 5.5rem;
+ column-gap: 2rem;
+ }
+ .home__blob {
+ width: 270px;
+ }
+ .home__scroll {
+ display: block;
+ }
+ .home__scroll-button {
+ margin-left: 3rem;
+ }
+ .about__container {
+ column-gap: 5rem;
+ }
+ .about__img {
+ width: 350px;
+ }
+ .about__description {
+ text-align: initial;
+ }
+ .about__info {
+ justify-content: space-between;
+ gap: 1rem;
+ }
+ .about__buttons {
+ justify-content: center;
+ }
+ .qualification__tabs {
+ justify-content: center;
+ }
+ .qualification__button {
+ margin: 0 var(--mb-1);
+ }
+ .qualification__sections {
+ grid-template-columns: 0.5fr;
+ }
+ .services__container {
+ justify-content: center;
+ }
+ .services__icon {
+ font-size: 2rem;
+ }
+ .services__content {
+ padding: 6rem 0 2rem 2.5rem;
+ }
+ .services__modal-content {
+ width: 450px;
+ }
+ .portafolio__img {
+ width: 320px;
+ }
+ .portafolio__content {
+ align-items: center;
+ }
+ .project {
+ text-align: initial;
+ }
+ .project__bg {
+ background: none;
+ }
+ .project__container {
+ background-color: var(--first-color-second);
+ border-radius: 1rem;
+ padding: 3rem 2.5rem 0;
+ grid-template-columns: 1fr max-content;
+ column-gap: 3rem;
+ }
+ .project__data {
+ padding-top: 0.8rem;
+ }
+ .footer__container {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .footer__bg {
+ padding: 3rem 0 3.5rem;
+ }
+ .footer__links {
+ flex-direction: row;
+ column-gap: 2rem;
+ }
+ .footer__socials {
+ justify-self: flex-end;
+ }
+ .footer__copy {
+ margin-top: 4.5rem;
+ color: #fff;
+ }
+}
+
+/* For large devices */
+@media screen and (min-width: 1024px) {
+ .header,
+ .main,
+ .footer__container {
+ padding: 0;
+ }
+ .home__blob {
+ width: 320px;
+ }
+ .home__social {
+ transform: translateX(-6rem);
+ }
+ .services__container {
+ grid-template-columns: repeat(3, 238px);
+ }
+ .portafolio__content {
+ column-gap: 5rem;
+ }
+ .contact__form {
+ width: 460px;
+ }
+ .contact__inputs {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+.scroll-lock {
+ overflow-y: hidden;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..9acd9cd
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1 @@
+@import "base";
diff --git a/tsconfig.json b/tsconfig.json
index 951f9a9..eb36cd4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,9 @@
"@types/*": [
"src/types/*"
],
+ "@styles/*": [
+ "src/styles/*"
+ ],
}
}
}
\ No newline at end of file
+