feat(ui): brighten portfolio and replay scroll reveals

src/App.css

 :root {
-  --ink: #f6fbff;
-  --muted: #a7b7c8;
-  --dim: #6f8194;
-  --paper: #061018;
-  --surface: rgba(12, 26, 38, 0.78);
-  --surface-strong: rgba(16, 35, 49, 0.96);
-  --line: rgba(139, 213, 255, 0.18);
-  --line-strong: rgba(139, 213, 255, 0.38);
-  --accent: #42d9ff;
-  --accent-strong: #9df2ff;
-  --signal: #ff6b45;
-  --signal-soft: #ffb199;
-  --mint: #80ffcc;
-  --shadow: 0 34px 110px rgba(0, 0, 0, 0.48);
+  --ink: #132538;
+  --muted: #5b6c7f;
+  --dim: #8b9aad;
+  --paper: #f6fbff;
+  --surface: rgba(255, 255, 255, 0.82);
+  --surface-strong: rgba(255, 255, 255, 0.96);
+  --line: rgba(42, 74, 105, 0.14);
+  --line-strong: rgba(12, 139, 160, 0.38);
+  --accent: #087ea4;
+  --accent-strong: #075f78;
+  --signal: #f65f42;
+  --signal-soft: #c64e35;
+  --mint: #12b886;
+  --shadow: 0 34px 90px rgba(37, 76, 105, 0.18);
 }
 
 * {
@@ -26,9 +26,9 @@ html {
 body {
   margin: 0;
   background:
-    linear-gradient(135deg, rgba(66, 217, 255, 0.10), transparent 32%),
-    linear-gradient(225deg, rgba(255, 107, 69, 0.10), transparent 34%),
-    radial-gradient(circle at 50% 0%, rgba(128, 255, 204, 0.07), transparent 34%),
+    radial-gradient(circle at 12% 10%, rgba(18, 184, 134, 0.16), transparent 26%),
+    radial-gradient(circle at 90% 4%, rgba(246, 95, 66, 0.13), transparent 28%),
+    linear-gradient(135deg, rgba(8, 126, 164, 0.11), transparent 36%),
     var(--paper);
   color: var(--ink);
   font-family: "Segoe UI", Candara, "Trebuchet MS", sans-serif;
@@ -38,8 +38,8 @@ body {
 body::before {
   animation: drift 22s linear infinite;
   background-image:
-    linear-gradient(rgba(139, 213, 255, 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(139, 213, 255, 0.05) 1px, transparent 1px);
+    linear-gradient(rgba(8, 126, 164, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(8, 126, 164, 0.08) 1px, transparent 1px);
   background-size: 42px 42px;
   content: "";
   inset: 0;
@@ -52,15 +52,15 @@ body::after {
   background:
     repeating-linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0.025) 0,
-      rgba(255, 255, 255, 0.025) 1px,
+      rgba(19, 37, 56, 0.025) 0,
+      rgba(19, 37, 56, 0.025) 1px,
       transparent 1px,
       transparent 4px
     );
   content: "";
   inset: 0;
   mix-blend-mode: overlay;
-  opacity: 0.55;
+  opacity: 0.32;
   pointer-events: none;
   position: fixed;
   z-index: -1;
@@ -82,8 +82,8 @@ main {
 
 .ambient-grid {
   background:
-    linear-gradient(115deg, transparent 0 38%, rgba(66, 217, 255, 0.10) 38% 39%, transparent 39% 100%),
-    linear-gradient(65deg, transparent 0 60%, rgba(255, 107, 69, 0.10) 60% 61%, transparent 61% 100%);
+    linear-gradient(115deg, transparent 0 38%, rgba(8, 126, 164, 0.10) 38% 39%, transparent 39% 100%),
+    linear-gradient(65deg, transparent 0 60%, rgba(246, 95, 66, 0.10) 60% 61%, transparent 61% 100%);
   inset: 0;
   pointer-events: none;
   position: fixed;
@@ -93,7 +93,7 @@ main {
 .topbar {
   align-items: center;
   backdrop-filter: blur(22px);
-  background: rgba(6, 16, 24, 0.74);
+  background: rgba(255, 255, 255, 0.78);
   border-bottom: 1px solid var(--line);
   display: flex;
   justify-content: space-between;
@@ -107,9 +107,9 @@ main {
 
 .brand {
   align-items: center;
-  background: linear-gradient(135deg, var(--accent), var(--mint));
+  background: linear-gradient(135deg, #0aa3c2, #62e6ba);
   border-radius: 8px;
-  color: #061018;
+  color: #ffffff;
   display: inline-flex;
   font-weight: 950;
   height: 42px;
@@ -136,7 +136,7 @@ main {
 }
 
 .nav-links a:hover {
-  background: rgba(139, 213, 255, 0.08);
+  background: rgba(8, 126, 164, 0.08);
   border-color: var(--line);
   color: var(--ink);
 }
@@ -151,9 +151,20 @@ main {
   position: relative;
 }
 
+.hero::after {
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.44), transparent 38%),
+    radial-gradient(circle at 82% 38%, rgba(18, 184, 134, 0.12), transparent 30%);
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: -1;
+}
+
 .hero::before {
   animation: sweep 8s ease-in-out infinite;
-  background: linear-gradient(90deg, transparent, rgba(66, 217, 255, 0.16), transparent);
+  background: linear-gradient(90deg, transparent, rgba(8, 126, 164, 0.18), transparent);
   content: "";
   height: 1px;
   left: -20%;
@@ -195,7 +206,7 @@ h1 {
 h1 span {
   animation: titleRise 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
   display: block;
-  text-shadow: 0 0 34px rgba(66, 217, 255, 0.18);
+  text-shadow: 0 20px 42px rgba(8, 126, 164, 0.16);
 }
 
 h1 span:nth-child(2) {
@@ -220,7 +231,7 @@ h3 {
 }
 
 .role {
-  color: var(--signal-soft);
+  color: var(--signal);
   font-size: clamp(22px, 3vw, 34px);
   font-weight: 950;
   margin-bottom: 18px;
@@ -256,8 +267,8 @@ h3 {
 
 .primary-action {
   background: linear-gradient(135deg, var(--accent), var(--mint));
-  box-shadow: 0 18px 46px rgba(66, 217, 255, 0.22);
-  color: #061018;
+  box-shadow: 0 18px 46px rgba(8, 126, 164, 0.22);
+  color: #ffffff;
 }
 
 .primary-action:hover,
@@ -266,7 +277,7 @@ h3 {
 }
 
 .secondary-action {
-  background: rgba(12, 26, 38, 0.78);
+  background: rgba(255, 255, 255, 0.72);
   border: 1px solid var(--line);
   color: var(--ink);
 }
@@ -283,7 +294,7 @@ h3 {
 .signal-row span,
 .skill-cloud span,
 .stack-list span {
-  background: rgba(12, 26, 38, 0.82);
+  background: rgba(255, 255, 255, 0.76);
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--accent-strong);
@@ -302,7 +313,7 @@ h3 {
 }
 
 .hero-metrics div {
-  background: rgba(12, 26, 38, 0.66);
+  background: rgba(255, 255, 255, 0.78);
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 14px;
@@ -337,7 +348,7 @@ h3 {
 .device-halo {
   animation: pulseGlow 4.6s ease-in-out infinite;
   background:
-    conic-gradient(from 120deg, rgba(66, 217, 255, 0), rgba(66, 217, 255, 0.55), rgba(255, 107, 69, 0.45), rgba(66, 217, 255, 0));
+    conic-gradient(from 120deg, rgba(8, 126, 164, 0), rgba(8, 126, 164, 0.38), rgba(246, 95, 66, 0.28), rgba(18, 184, 134, 0.36));
   border-radius: 40px;
   filter: blur(30px);
   height: 78%;
@@ -349,8 +360,8 @@ h3 {
 
 .phone-frame {
   animation: deviceFloat 5.5s ease-in-out infinite;
-  background: #0a151e;
-  border: 12px solid #111f2a;
+  background: #ffffff;
+  border: 12px solid #132538;
   border-radius: 32px;
   box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
   max-width: 365px;
@@ -374,7 +385,7 @@ h3 {
 
 .screen-scan {
   animation: scan 3.6s ease-in-out infinite;
-  background: linear-gradient(180deg, transparent, rgba(66, 217, 255, 0.30), transparent);
+  background: linear-gradient(180deg, transparent, rgba(8, 126, 164, 0.20), transparent);
   height: 24%;
   left: 0;
   pointer-events: none;
@@ -399,7 +410,7 @@ h3 {
   background: linear-gradient(135deg, var(--signal), #ff9a62);
   border-radius: 8px;
   bottom: 54px;
-  box-shadow: 0 22px 50px rgba(255, 107, 69, 0.26);
+  box-shadow: 0 22px 50px rgba(246, 95, 66, 0.24);
   color: #fff;
   display: flex;
   font-weight: 950;
@@ -417,8 +428,8 @@ h3 {
 .intro-grid {
   align-items: end;
   background:
-    linear-gradient(135deg, rgba(66, 217, 255, 0.13), transparent 38%),
-    #09151e;
+    linear-gradient(135deg, rgba(18, 184, 134, 0.12), transparent 38%),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(232, 247, 253, 0.88));
   border-block: 1px solid var(--line);
   display: grid;
   gap: 32px;
@@ -443,7 +454,9 @@ h3 {
 }
 
 .projects-section {
-  background: linear-gradient(180deg, rgba(11, 28, 40, 0.82), rgba(6, 16, 24, 0.94));
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(230, 245, 250, 0.78)),
+    radial-gradient(circle at 20% 0%, rgba(8, 126, 164, 0.10), transparent 34%);
 }
 
 .project-grid {
@@ -459,7 +472,7 @@ h3 {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
-  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 18px 55px rgba(37, 76, 105, 0.12);
 }
 
 .project-card {
@@ -471,7 +484,7 @@ h3 {
 }
 
 .project-card::before {
-  background: linear-gradient(135deg, rgba(66, 217, 255, 0.18), transparent 45%);
+  background: linear-gradient(135deg, rgba(8, 126, 164, 0.12), transparent 45%);
   content: "";
   inset: 0;
   opacity: 0;
@@ -481,7 +494,7 @@ h3 {
 
 .project-card:hover {
   border-color: var(--line-strong);
-  box-shadow: 0 26px 80px rgba(66, 217, 255, 0.13);
+  box-shadow: 0 26px 80px rgba(8, 126, 164, 0.14);
   transform: translateY(-6px);
 }
 
@@ -497,15 +510,15 @@ h3 {
 .project-preview {
   align-items: center;
   background:
-    radial-gradient(circle at 22% 18%, rgba(128, 255, 204, 0.20), transparent 30%),
-    radial-gradient(circle at 82% 20%, rgba(255, 107, 69, 0.18), transparent 30%),
-    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(66, 217, 255, 0.04)),
-    #050d14;
-  border: 1px solid rgba(139, 213, 255, 0.26);
+    radial-gradient(circle at 22% 18%, rgba(18, 184, 134, 0.22), transparent 30%),
+    radial-gradient(circle at 82% 20%, rgba(246, 95, 66, 0.18), transparent 30%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(224, 244, 250, 0.72)),
+    #eaf7fb;
+  border: 1px solid rgba(8, 126, 164, 0.18);
   border-radius: 8px;
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.05),
-    0 18px 48px rgba(0, 0, 0, 0.22);
+    0 18px 48px rgba(37, 76, 105, 0.12);
   display: flex;
   height: clamp(350px, 34vw, 460px);
   justify-content: center;
@@ -530,9 +543,9 @@ h3 {
 
 .project-preview::after {
   background:
-    linear-gradient(90deg, rgba(255, 255, 255, 0.10), transparent 16% 84%, rgba(255, 255, 255, 0.06)),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
-  border: 1px solid rgba(157, 242, 255, 0.20);
+    linear-gradient(90deg, rgba(255, 255, 255, 0.52), transparent 16% 84%, rgba(255, 255, 255, 0.34)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 42%);
+  border: 1px solid rgba(8, 126, 164, 0.16);
   border-radius: 8px;
   content: "";
   inset: 30px;
@@ -553,8 +566,8 @@ h3 {
 .project-preview img {
   border-radius: 18px;
   box-shadow:
-    0 28px 70px rgba(0, 0, 0, 0.48),
-    0 0 0 1px rgba(255, 255, 255, 0.14);
+    0 28px 70px rgba(37, 76, 105, 0.30),
+    0 0 0 1px rgba(255, 255, 255, 0.74);
   display: block;
   max-height: calc(100% - 4px);
   max-width: 100%;
@@ -606,8 +619,8 @@ h3 {
 .project-card:hover .project-preview img {
   filter: saturate(1.08) contrast(1.04);
   box-shadow:
-    0 34px 84px rgba(0, 0, 0, 0.52),
-    0 0 0 1px rgba(255, 255, 255, 0.18);
+    0 34px 84px rgba(37, 76, 105, 0.34),
+    0 0 0 1px rgba(255, 255, 255, 0.82);
   transform: translateY(-6px) rotate(0deg) scale(1.08);
 }
 
@@ -624,7 +637,7 @@ h3 {
 }
 
 .project-index {
-  color: rgba(157, 242, 255, 0.16);
+  color: rgba(8, 126, 164, 0.10);
   font-family: Georgia, "Times New Roman", serif;
   font-size: 106px;
   font-weight: 900;
@@ -658,7 +671,7 @@ h3 {
 
 .project-links a {
   align-items: center;
-  color: var(--signal-soft);
+  color: var(--signal);
   display: inline-flex;
   font-weight: 950;
   gap: 4px;
@@ -666,13 +679,13 @@ h3 {
 }
 
 .project-links a:hover {
-  color: #fff;
+  color: var(--accent-strong);
 }
 
 .skills-section {
   background:
-    linear-gradient(90deg, rgba(128, 255, 204, 0.08), transparent 40%),
-    #07111a;
+    linear-gradient(90deg, rgba(18, 184, 134, 0.10), transparent 40%),
+    #f8fcff;
 }
 
 .skill-cloud {
@@ -711,8 +724,8 @@ h3 {
 .ai-panel {
   align-items: start;
   background:
-    linear-gradient(135deg, rgba(255, 107, 69, 0.10), transparent 35%),
-    #061018;
+    linear-gradient(135deg, rgba(246, 95, 66, 0.12), transparent 35%),
+    linear-gradient(180deg, #ffffff, #eef9fb);
   display: grid;
   gap: clamp(24px, 5vw, 72px);
   grid-template-columns: minmax(0, 0.78fr) minmax(330px, 1fr);
@@ -733,7 +746,7 @@ h3 {
 
 .assistant-box::before {
   animation: assistantRail 5s linear infinite;
-  background: linear-gradient(90deg, transparent, rgba(128, 255, 204, 0.34), transparent);
+  background: linear-gradient(90deg, transparent, rgba(18, 184, 134, 0.34), transparent);
   content: "";
   height: 1px;
   left: -40%;
@@ -769,7 +782,7 @@ h3 {
 }
 
 .quick-questions button {
-  background: rgba(66, 217, 255, 0.08);
+  background: rgba(8, 126, 164, 0.08);
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
@@ -781,7 +794,7 @@ h3 {
 }
 
 .quick-questions button:hover {
-  background: rgba(66, 217, 255, 0.16);
+  background: rgba(8, 126, 164, 0.15);
   transform: translateY(-2px);
 }
 
@@ -801,7 +814,7 @@ h3 {
 }
 
 .ask-row input {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.84);
   border: 1px solid var(--line);
   border-radius: 8px;
   color: var(--ink);
@@ -820,7 +833,7 @@ h3 {
   background: linear-gradient(135deg, var(--accent), var(--mint));
   border: 0;
   border-radius: 8px;
-  color: #061018;
+  color: #ffffff;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
@@ -828,10 +841,10 @@ h3 {
 
 .answer-box {
   animation: answerIn 260ms ease both;
-  background: #02080d;
-  border: 1px solid rgba(128, 255, 204, 0.20);
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(18, 184, 134, 0.24);
   border-radius: 8px;
-  color: #fff;
+  color: var(--ink);
   margin-top: 16px;
   padding: 18px;
 }
@@ -846,14 +859,16 @@ h3 {
 }
 
 .answer-box p {
-  color: #dce7ef;
+  color: var(--muted);
   line-height: 1.58;
   margin: 0;
 }
 
 .contact-section {
   align-items: start;
-  background: #02080d;
+  background:
+    linear-gradient(135deg, rgba(8, 126, 164, 0.10), transparent 34%),
+    #ffffff;
   border-top: 1px solid var(--line);
   display: grid;
   gap: 32px;
@@ -865,8 +880,8 @@ h3 {
 }
 
 .contact-list {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.82);
+  border-color: var(--line);
   display: grid;
   gap: 12px;
   padding: 22px;
@@ -882,7 +897,7 @@ footer span {
 
 .contact-list a,
 .contact-list span {
-  color: #dce7ef;
+  color: var(--ink);
   text-decoration: none;
 }
 
@@ -892,8 +907,8 @@ footer span {
 
 footer {
   align-items: center;
-  background: #02080d;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: #f8fcff;
+  border-top: 1px solid var(--line);
   color: var(--dim);
   display: flex;
   flex-wrap: wrap;

src/App.tsx

@@ -131,11 +131,12 @@ function App() {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             entry.target.classList.add('is-visible')
-            observer.unobserve(entry.target)
+          } else {
+            entry.target.classList.remove('is-visible')
           }
         })
       },
-      { threshold: 0.18 },
+      { rootMargin: '0px 0px -12% 0px', threshold: 0.16 },
     )
 
     revealItems.forEach((item) => observer.observe(item))