new page :3

2026-07-10 10:49:11 -03:00
parent df8932fc01
commit 367ecfa876
14 changed files with 1231 additions and 582 deletions
--- a/css/main.css
+++ b/css/main.css
@@ -1,5 +1,6 @@
@import url('variables.css');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..700&display=swap');

 * {
    margin: 0;
@@ -7,26 +8,24 @@
    box-sizing: border-box;
 }

+html {
+    scrollbar-gutter: stable;
+}
+
 body {
    font-family: var(--font-family);
    background: var(--background-color);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
-    /* Improve text rendering on mobile */
+    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
-    /* Prevent text size adjust on orientation change */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
 }

-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-color);
 }
@@ -34,7 +33,7 @@ h6 {
 a {
    text-decoration: none;
    color: var(--primary-color);
-    transition: color 0.3s;
+    transition: color var(--dur-fast) var(--ease-out-soft);
 }

 a:hover {
@@ -50,16 +49,19 @@ img {
    height: auto;
 }

+/* ------------------------------------------------------------------ */
+/* Glass surface (refined shadow animation: calmer two-state pulse)   */
+/* ------------------------------------------------------------------ */
 .glass {
    background: var(--glass-background);
-    backdrop-filter: blur(4px);
-    -webkit-backdrop-filter: blur(4px);
-    border-radius: var(--border-radius);
+    backdrop-filter: blur(8px) saturate(140%);
+    -webkit-backdrop-filter: blur(8px) saturate(140%);
+    border-radius: var(--border-radius-large);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
-    box-shadow: 0 8px 36px 0 var(--glass-shadow), var(--inset-shadow);
+    box-shadow: var(--shadow-lg), var(--inset-shadow);
    will-change: box-shadow;
-    animation: glass-shadow 8s ease-in-out infinite !important;
+    animation: glass-shadow 10s ease-in-out infinite;
 }

 .main-container {
@@ -69,7 +71,7 @@ img {
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 100%;
-    padding: 0 20px;
+    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
@@ -78,98 +80,63 @@ img {
@keyframes fadeInUp {
    from {
        opacity: 0;
-        transform: translateY(30px);
+        transform: translateY(28px);
    }
-
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }

-/* subtle, natural moving/pulsing shadow for .glass */
+/* Subtle, calm 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, 55, 255, 0.1);
+    0%, 100% {
+        box-shadow:
+            0 8px 24px -6px var(--glass-shadow),
+            0 18px 48px -16px var(--dark-shadow-20),
+            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
-
-    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, 55, 255, 0.1);
-    }
-
    50% {
-        box-shadow: 0 8px 36px 0 var(--glass-shadow), 0 28px 72px -24px var(--dark-shadow-20), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    }
-
-    75% {
-        box-shadow: -6px 10px 38px -6px var(--primary-color-16), 0 22px 60px -18px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    }
-
-    100% {
-        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 12px 32px -6px var(--tertiary-color-20),
+            0 28px 72px -24px var(--dark-shadow-18),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
 }

 .content {
    color: var(--text-color);
-    background: rgba(0, 0, 0, 0.10);
-    backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
-    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.1);
+    background: rgba(0, 0, 0, 0.12);
+    backdrop-filter: blur(32px) saturate(180%) brightness(1.08);
+    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.08);
    border-radius: var(--border-radius-large);
-    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-    padding: 32px 24px;
-    transition: background 0.3s, box-shadow 0.3s;
+    box-shadow: var(--shadow-md), var(--inset-shadow);
+    padding: var(--space-2xl) var(--space-xl);
+    transition: background var(--dur-med) var(--ease-out-soft),
+                box-shadow var(--dur-med) var(--ease-out-soft);
    min-width: 26rem;
    max-width: 26rem;
 }

-/* Mobile responsive content */
-@media (max-width: 1024px) {
-    .content {
-        min-width: unset;
-        max-width: unset;
-        width: 100%;
-        padding: 24px 20px;
-    }
-
-    .main-container {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
-        padding: 20px 15px;
-        min-height: 100vh;
-        display: flex;
-        align-items: flex-start;
-        padding-top: 40px;
-        padding-bottom: 40px;
-    }
+/* ------------------------------------------------------------------ */
+/* Accessibility                                                       */
+/* ------------------------------------------------------------------ */
+:focus-visible {
+    outline: 2px solid var(--primary-500);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
 }

-@media (max-width: 480px) {
-    body {
-        font-size: 14px;
-    }
-    
-    .main-container {
-        padding: 15px 10px;
-        padding-top: 30px;
-        padding-bottom: 30px;
-    }
-
-    .content {
-        padding: 20px 16px;
-        min-width: unset;
-        max-width: unset;
-        width: 100%;
-    }
-}
-
-/* Accessibility: disable animated shadows for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .glass {
        animation: none !important;
    }
+    *, *::before, *::after {
+        animation-duration: 0.001ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.001ms !important;
+        scroll-behavior: auto !important;
+    }
 }

 /* High DPI display optimizations */
@@ -180,13 +147,56 @@ img {
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
    .glass {
-        /* Enhanced blur for high DPI screens */
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
+        backdrop-filter: blur(12px) saturate(140%);
+        -webkit-backdrop-filter: blur(12px) saturate(140%);
    }
-    
    .content {
-        backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
-        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.1);
+        backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
+        -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
    }
-}
+}
+
+/* ------------------------------------------------------------------ */
+/* Mobile responsive layout                                            */
+/* Single breakpoint switches the centered card to a stacked column.  */
+/* Width constraints (set via tokens in section CSS) are overridden   */
+/* in one place here rather than repeated across multiple sections.   */
+/* ------------------------------------------------------------------ */
+@media (max-width: 1024px) {
+    .main-container {
+        position: relative;
+        top: auto;
+        left: auto;
+        transform: none;
+        padding: var(--space-xl) var(--space-md);
+        min-height: 100vh;
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .content,
+    .homelab-section,
+    .projects-section {
+        min-width: unset;
+        max-width: unset;
+        width: 100%;
+    }
+
+    .content {
+        padding: var(--space-xl) var(--space-lg);
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        font-size: 14px;
+    }
+
+    .main-container {
+        padding: var(--space-xl) var(--space-sm);
+    }
+
+    .content {
+        padding: var(--space-lg) var(--space-md);
+    }
+}