diff --git a/css/button.css b/css/button.css index 2c2a5b0..b4b884d 100644 --- a/css/button.css +++ b/css/button.css @@ -15,7 +15,7 @@ } .btn:hover { - background: var(--primary-gradient); - transform: translateY(-2px); + background: linear-gradient(120deg, rgba(40, 20, 60, 0.6), rgba(30, 30, 80, 0.4)); + transform: translateY(-1px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); } \ No newline at end of file diff --git a/css/sections/homelab.css b/css/sections/homelab.css index b69144f..593e232 100644 --- a/css/sections/homelab.css +++ b/css/sections/homelab.css @@ -5,7 +5,7 @@ backdrop-filter: blur(24px) saturate(140%) brightness(1.08); -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08); border-radius: 24px; - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255,255,255,0.10); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); min-width: 26rem; max-width: 26rem; align-self: stretch; @@ -13,30 +13,73 @@ flex-direction: column; gap: 18px; } + .homelab-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; letter-spacing: 0.03em; - background: linear-gradient(270deg, #764ba2, #2b2e6c, #764ba2, #2b2e6c); - background-size: 400% 400%; + background: linear-gradient(270deg, + var(--primary-color), + var(--secondary-color), + var(--tertiary-color), + var(--primary-color-light), + var(--primary-color), + var(--secondary-color), + var(--tertiary-color)); + background-size: 800% 800%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - animation: homelab-gradient-move 12s linear infinite; + animation: homelab-gradient-move 24s linear infinite; } @keyframes homelab-gradient-move { 0% { background-position: 0% 50%; } + + 10% { + background-position: 15% 50%; + } + + 20% { + background-position: 30% 50%; + } + + 30% { + background-position: 45% 50%; + } + + 40% { + background-position: 60% 50%; + } + 50% { + background-position: 75% 50%; + } + + 60% { background-position: 100% 50%; } + + 70% { + background-position: 75% 50%; + } + + 80% { + background-position: 45% 50%; + } + + 90% { + background-position: 15% 50%; + } + 100% { background-position: 0% 50%; } } + .homelab-buttons { display: flex; gap: 16px; diff --git a/css/sections/projects.css b/css/sections/projects.css index 67ca5ec..257a184 100644 --- a/css/sections/projects.css +++ b/css/sections/projects.css @@ -1,4 +1,3 @@ - .projects-section { flex: 0 0 340px; display: flex; @@ -9,7 +8,7 @@ backdrop-filter: blur(24px) saturate(140%) brightness(1.08); -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08); border-radius: var(--border-radius-large); - box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255,255,255,0.10); + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10); min-width: 280px; max-width: 340px; margin-left: 20px; @@ -36,11 +35,19 @@ display: flex; flex-direction: column; gap: 6px; - transition: transform 0.18s, box-shadow 0.18s; + transition: transform 0.28s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0.2, 0.2, 1); } + +.project:hover { + transform: scale(1.012); + box-shadow: 0 4px 24px 0 rgba(31, 38, 135, 0.13), 0 1.5px 4px 0 rgba(255, 255, 255, 0.08) inset; + filter: brightness(1.04) saturate(1.08); +} + .project:nth-child(odd) { background: linear-gradient(135deg, rgba(20, 30, 60, 0.75) 0%, rgba(40, 50, 120, 0.75) 100%); } + .project:nth-child(even) { background: linear-gradient(135deg, rgba(10, 10, 10, 0.82) 0%, rgba(30, 30, 30, 0.82) 100%); } @@ -55,6 +62,28 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; +} + +.project-icons { + display: flex; + gap: 8px; + align-items: center; +} + +.project-icon-link { + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--text-color); + transition: all 0.2s; +} + +.project-icon-link:hover { + color: var(--primary-color); } .project-desc { diff --git a/css/variables.css b/css/variables.css index de0348b..3e59813 100644 --- a/css/variables.css +++ b/css/variables.css @@ -4,7 +4,7 @@ --primary-color-light: #81d4fa; --secondary-color: #667eea; --tertiary-color: #764ba2; - --primary-gradient: linear-gradient(120deg, rgba(40, 20, 60, 0.6), rgba(20, 20, 60, 0.4)); + --primary-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.6), rgba(10, 10, 40, 0.4)); --background-color: #000000; --glass-background: rgba(20, 20, 20, 0.125); diff --git a/index.html b/index.html index 8691aad..ef1b03e 100644 --- a/index.html +++ b/index.html @@ -82,19 +82,50 @@

Projects

-
OpenCand
+
+ OpenCand + + + + + + + + +
Brazilian Candidate Viewer.
-
Vision Start
+
+ Vision Start + + + + + +
Chrome Startpage.
-
Kasbot
+
+ Kasbot + + + + + +
Discord DJ bot.
-
Candlebright
+
+ Candlebright + + + + + +
C++ project game.