From cbf265495fe6e31fb5fe8525384c2ff6259e943e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Henrique?= Date: Mon, 16 Mar 2026 20:13:07 -0300 Subject: [PATCH] CSS changes :) --- css/main.css | 4 ++-- css/sections/hero.css | 36 ++++++++++++++++++++++++++---------- css/sections/projects.css | 5 ++--- css/variables.css | 2 +- 4 files changed, 31 insertions(+), 16 deletions(-) diff --git a/css/main.css b/css/main.css index 998bdda..983ca24 100644 --- a/css/main.css +++ b/css/main.css @@ -90,11 +90,11 @@ img { /* subtle, natural moving/pulsing shadow for .glass */ @keyframes glass-shadow { 0% { - box-shadow: 0 6px 24px -2px var(--glass-shadow), 0 18px 48px -12px var(--dark-shadow-15), inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 0 6px 24px -2px var(--glass-shadow), 0 18px 48px -12px var(--dark-shadow-15), inset 0 1px 0 rgba(255, 55, 255, 0.1); } 25% { - box-shadow: 6px 10px 38px -6px var(--tertiary-color-20), 0 22px 60px -18px var(--dark-shadow-18), inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: 6px 10px 38px -6px var(--tertiary-color-20), 0 22px 60px -18px var(--dark-shadow-18), inset 0 1px 0 rgba(255, 55, 255, 0.1); } 50% { diff --git a/css/sections/hero.css b/css/sections/hero.css index 1606206..e6d609d 100644 --- a/css/sections/hero.css +++ b/css/sections/hero.css @@ -1,11 +1,7 @@ - .social-links { - position: relative; } .social-link { - display: inline-flex; - align-items: center; } .email-tooltip { @@ -45,22 +41,24 @@ white-space: nowrap; } - .hero-details { display: flex; flex-direction: row; - gap: 32px; + gap: 8px; align-items: flex-start; width: 100%; + justify-content: flex-start; } .hero-main-column { display: flex; flex-direction: column; gap: 24px; + flex: 1 1 auto; + min-width: 0; } .hero-card { - padding: 48px; + padding: 42px; width: 100%; display: grid; grid-template-columns: 200px 1fr; @@ -70,13 +68,14 @@ } .name { - font-size: 2.5rem; + font-size: 2.8rem; font-weight: 700; - margin-bottom: 8px; - background: linear-gradient(135deg, var(--text-color) 0%, var(--text-color-light) 100%); + margin-bottom: 12px; + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + letter-spacing: -0.5px; } .description { @@ -84,6 +83,8 @@ margin-bottom: 32px; color: var(--text-color-light); font-weight: 400; + line-height: 1.6; + letter-spacing: 0.2px; } .social-links { @@ -92,6 +93,20 @@ flex-wrap: wrap; justify-content: center; align-items: center; + margin-top: 8px; + position: relative; +} + +.social-link { + display: inline-flex; + align-items: center; + gap: 8px; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.social-link:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px var(--dark-shadow-20); } .social-link { display: inline-flex; @@ -147,6 +162,7 @@ .description { margin-bottom: 24px; + font-size: 1rem; } .social-links { diff --git a/css/sections/projects.css b/css/sections/projects.css index 3af2edf..bc9c55f 100644 --- a/css/sections/projects.css +++ b/css/sections/projects.css @@ -10,9 +10,8 @@ border-radius: var(--border-radius-large); box-shadow: 0 8px 36px 0 var(--glass-shadow), var(--inset-shadow); border-bottom: 1px solid var(--glass-border); - min-width: 280px; - max-width: 340px; - margin-left: 20px; + min-width: 380px; + max-width: 440px; align-self: stretch; } diff --git a/css/variables.css b/css/variables.css index 44504c0..d13944a 100644 --- a/css/variables.css +++ b/css/variables.css @@ -9,7 +9,7 @@ --button-hover-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.75), rgba(10, 10, 40, 0.4)); --background-color: #000000; - --glass-background: rgba(4, 0, 10, 0.5); + --glass-background: rgba(4, 0, 10, 0.32); --glass-border: rgba(255, 255, 255, 0.13); --glass-shadow: rgba(31, 38, 135, 0.30);