/* ==========================================================
VARIABLES
========================================================== */
:root {
/* Typography */
--font-base: 18px;
--font-light: 300;
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--line-height: 1.6;
/* Sizes */
--padding-container: 4rem;
/* Colors - Base */
--color-text: #1B1B1E;
--color-h2: #1B1B1E;
--color-border: #1B1B1E;
/* Colors - Tags */
--color-tag-background: #e5f7eb;
--color-border-tag: #50c878;
/* Colors - Backgrounds */
--color-navbar-background: white;
--color-footer-background: #111827;
--color-section-background: #F3F4F4;
--color-html-background: white;
/* Colors - Buttons */
--color-button-text: #F3F4F4;
--color-button-text-active: #1B1B1E;
--color-button-background: #853953;
--color-button-background-active: #85395320;
}
/* ==========================================================
GLOBAL ELEMENTS
========================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html {
font-size: var(--font-base);
line-height: var(--line-height);
min-height: 100dvh;
background-color: var(--color-html-background);
}
body {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;
color: var(--color-text);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.language-switcher,
nav,
header,
main,
footer {
width: 100%;
max-width: 2400px;
}
section {
display: flex;
flex-direction: column;
background-color: var(--color-section-background);
width: 100%;
padding: var(--padding-container);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
color: var(--color-h2);
}
h3 {
font-size: 1.5rem;
}
a {
text-decoration: none;
color: var(--color-text);
}
ul {
list-style: none;
}
/* ==========================================================
REUSABLE COMPONENTS
========================================================== */
/* Intro title (big animated hero text) */
.intro-title {
position: relative;
text-transform: uppercase;
font-size: clamp(3rem, 14vw, 15rem);
font-weight: bold;
display: inline-block;
animation: clip-path-reveal-1 2.5s ease forwards;
}
.intro-title::before {
content: "";
position: absolute;
top: calc(100% - 2px);
left: 0;
width: 100%;
height: 4px;
background-color: #50c878;
transform-origin: center;
transform: scaleX(0);
animation: line-animation 2.5s ease forwards;
}
/* Section title (heading with horizontal rule accents) */
.section-title {
display: flex;
align-items: center;
gap: 1rem;
text-transform: uppercase;
padding: var(--padding-container) 0;
}
.section-title::before,
.section-title::after {
content: "";
height: 1px;
background: var(--color-border);
}
.section-title::before {
flex: 1;
}
.section-title::after {
flex: .1;
}
/* section animation */
.section-animation {
opacity: 0;
transition: all 0.8s ease;
}
.section-animation.show {
opacity: 1;
transform: translateX(0) scale(1);
}
/* section animation veriants */
.section-animation--fade-up {
transform: translateY(80px);
}
.section-animation--fade-down {
transform: translateY(-80px);
}
.section-animation--fade-left {
transform: translateX(-80px);
}
.section-animation--fade-right {
transform: translateX(80px);
}
.section-animation--zoom {
transform: scale(.7);
}
/* Tags (pill-shaped labels with a colored dot) */
.tag {
display: inline-flex;
align-items: center;
gap: 1ch;
background: var(--color-tag-background);
padding: 0.5em 1em;
border-radius: 2rem;
border: 2px solid var(--color-border-tag);
text-align: center;
width: fit-content;
}
.tag::before {
content: "";
width: 1em;
height: 1em;
border-radius: 50%;
background: var(--color-border-tag);
flex-shrink: 0;
}
/* ==========================================================
NAVBAR
========================================================== */
.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99;
position: sticky;
top: 0;
left: 0;
width: 100%;
padding: calc(var(--padding-container) / 2) var(--padding-container);
background-color: var(--color-navbar-background);
}
.navbar__icon {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
font-size: 1.5rem;
background: none;
border: none;
color: var(--color-text);
}
.navbar__icon--close {
display: none;
margin: 0 0 1ch 0;
}
.navbar__list {
display: none;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
font-size: 1.125rem;
}
.navbar__item {
display: flex;
}
.navbar__link {
padding: 1ch 3ch;
background-color: var(--color-button-background-active);
color: var(--color-button-text-active);
border-radius: 1ch;
}
.navbar__link--active {
color: var(--color-button-text);
background-color: var(--color-button-background);
}

/* ==========================================================
LANGUAGE-SWITCHER
========================================================== */

.language-switcher {
	width: 100%;
}

.language-switcher__list {
	display: flex;
	gap: 1rem;
	padding: calc(var(--padding-container) / 4) var(--padding-container);
	list-style: none;
}

.language-switcher__link {
	text-transform: uppercase;
}

.language-switcher__link--active {
	color: var(--color-button-background);
	text-decoration: underline;
}


/* ==========================================================
FOOTER
========================================================== */
.footer {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
	background: var(--color-footer-background);
	color: #d1d5db;
	padding: var(--padding-container);
}
.footer__group {
margin-bottom: 2rem;
}
.footer__title {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.footer__links {
margin-bottom: 1.5rem;
}
.footer__links:last-child {
margin-bottom: 0;
}
.footer__page-title {
margin: 0 0 .75rem;
font-size: 1.1rem;
font-weight: var(--font-semibold);
}
.footer__page-title a {
color: #fff;
transition: color .25s ease;
}
.footer__page-title a:hover {
text-decoration: underline;
}
.footer__page-header-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer__page-header:last-child {
margin-bottom: 0;
}
.footer__page-header-link {
color: #9ca3af;
text-decoration: none;
transition: color .25s ease, padding-left .25s ease;
}
.footer__page-header-link:hover {
color: #fff;
/*padding-left: .35rem;*/
text-decoration: underline;
}
.footer__socials-list {
	display: flex;
	justify-content: flex-start;
	gap: 1rem;
}
.footer__socials-link {
	color: #9ca3af;
	transition: color .25s ease, padding-left .25s ease;
	font-size: 25px;
}
.footer__socials-link:hover {
	color: #fff;
	text-decoration: underline;
}
.footer__copyright {
	grid-column: span 4;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
margin: 0;
padding-top: var(--padding-container);
color: #6b7280;
text-align: center;
}
/* ==========================================================
PAGE: HOME - INTRO
========================================================== */
.home-intro {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}
.home-intro__mouse {
font-size: 30px;
}
/* ==========================================================
PAGE: HOME - GREETING
========================================================== */
.home-greeting__text {}
.home-greeting__actions {
display: flex;
gap: 1rem;
padding: calc(var(--padding-container) / 2) 0;
}
.home-greeting__button {
padding: 1ch 3ch;
color: var(--color-button-text);
background-color: var(--color-button-background);
border-radius: 1ch;
text-align: center;
}
/* ==========================================================
PAGE: PORTFOLIO - INTRO
========================================================== */
.portfolio-intro {
display: flex;
justify-content: center;
align-items: center;
height: 100dvh;
}
.portfolio-intro__mouse {
font-size: 30px;
}
/* ==========================================================
PAGE: PORTFOLIO - ABOUT
========================================================== */
.portfolio-about__group {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
width: 80%;
gap: 2rem;
padding: var(--padding-container);
}
.portfolio-about__actions {
display: flex;
gap: 1rem;
}
.portfolio-about__button {
padding: 1ch 3ch;
color: var(--color-button-text);
background-color: var(--color-button-background);
border-radius: 1ch;
}
.portfolio-about__button--secondary {
background-color: var(--color-button-background-active);
color: var(--color-button-text-active);
}
/* ==========================================================
PAGE: PORTFOLIO - SKILLS
========================================================== */
.portfolio-skills__group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;
padding: var(--padding-container);
}
.portfolio-skills__category {
padding: var(--padding-container);
border: 1px solid var(--color-border);
border-radius: 1ch;
flex-grow: 1;
}
.portfolio-skills__list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1rem;
}
/* ==========================================================
PAGE: PORTFOLIO - EXPERIENCE
========================================================== */
.portfolio-experience__list {
display: flex;
flex-direction: column;
padding: var(--padding-container);
gap: 2rem;
}
.portfolio-experience__item {
display: flex;
}
.portfolio-experience__time {
width: 8rem;
min-width: 8rem;
border-right: 1px solid var(--color-border);
padding-right: 2rem;
}
.portfolio-experience__content {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 2rem;
}
/* ==========================================================
PAGE: PORTFOLIO - EDUCATION
========================================================== */
.portfolio-education__timeline {
display: flex;
flex-direction: column;
gap: 2rem;
padding: var(--padding-container);
}
.portfolio-education__group {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 2rem;
}
.portfolio-education__item {
display: flex;
}
.portfolio-education__date {
width: 8rem;
min-width: 8rem;
border-right: 1px solid var(--color-border);
padding-right: 2rem;
}
/* ==========================================================
PAGE: PORTFOLIO - HOBBIES
========================================================== */
.portfolio-hobbies__list {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 2rem;
padding: var(--padding-container);
}
.portfolio-hobbies__item {
flex: 1;
min-width: 350px;
padding: var(--padding-container);
border: 1px solid var(--color-border);
border-radius: 1ch;
}
/* ==========================================================
PAGE: CONTACT - INTRO
========================================================== */
.contact-intro {
display: flex;
justify-content: center;
align-items: center;
}
.intro-title--contact {
margin-bottom: 2rem;
}
.contact-intro__list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 2rem;
}
.contact-intro__item {
flex: 1;
min-width: 350px;
padding: var(--padding-container);
border: 1px solid var(--color-border);
border-radius: 1ch;
}
.contact-intro__link {
	color: var(--color-button-background);
}
.contact-intro__link:hover {
	text-decoration: underline;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1200px) {
.portfolio-about__group {
width: 100%;
}
.portfolio-experience__item,
.portfolio-education__item {
flex-direction: column;
}
.portfolio-experience__time,
.portfolio-education__date {
border-right: none;
padding-right: 0;
border-bottom: 1px solid var(--color-border);
padding-bottom: 1rem;
}
.portfolio-experience__content,
.portfolio-education__group {
padding-left: 0;
padding-top: 1rem;
}
}
@media (max-width: 768px) {
:root {
--padding-container: 2rem;
}
.portfolio-about__group,
.portfolio-skills__list,
.portfolio-skills__group,
.portfolio-experience__list,
.portfolio-education__timeline,
.portfolio-hobbies__list {
padding: var(--padding-container) 0;
}
.home-intro__actions,
.portfolio-about__actions {
flex-direction: column;
}
.navbar__list {
flex-direction: column;
}
.navbar__item,
.navbar__link {
width: 100%;
}
.footer {
grid-template-columns: 1fr 1fr;
}
.footer__copyright {
grid-column: span 2;
}
}
/* ==========================================================
KEYFRAMES
========================================================== */
/* Underline animation (used by .intro-title::before) */
@keyframes line-animation {
0% { transform: scaleX(0); }
15% { transform: scaleX(0); }
20%,
25% {
transform: scaleX(1);
top: calc(100% - 2px);
}
50% {
transform: scaleX(1);
top: 0;
}
70% {
transform: scaleX(0.2);
top: 0;
}
80%,
100% {
transform: scaleX(0.2);
top: 0;
}
}
/* Text reveal animation (used by .intro-title) */
@keyframes clip-path-reveal-1 {
0%,
25% {
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
50%,
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}