Update style.css

style.css

@@ -35,28 +35,7 @@ body{
   from{transform:translateY(0);}
   to{transform:translateY(-60px);}
 }
-/* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
-:root{
-  --bg1:#fdf4ff;   /* lavender white */
-  --bg2:#f0f9ff;   /* ice blue */
-  --accent1:#6366f1; /* indigo */
-  --accent2:#ec4899; /* rose */
-  --accent3:#06b6d4; /* cyan */
-}
-
-/* ===== BACKGROUND (SOFT + CLEAN) ===== */
-body{
-  min-height:100vh;
-  background:
-    radial-gradient(circle at 20% 15%, #e9d5ff 0%, transparent 35%),
-    radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
-    radial-gradient(circle at 50% 90%, #cffafe 0%, transparent 40%),
-    linear-gradient(180deg,var(--bg1),var(--bg2));
-  color:#1f2937;
-  overflow-x:hidden;
-}
-
-//* ===== NEW COLOR VARIABLES ===== */
+/* ===== NEW COLOR VARIABLES ===== */
 :root{
   --peach:#fda4af;
   --lavender:#c4b5fd;
@@ -64,72 +43,79 @@ body{
   --ink:#334155;
 }
 
-/*/* ===== NEW PROFESSIONAL COLOR SYSTEM ===== */
-:root{
-  --bg1:#fdf4ff;   /* lavender white */
-  --bg2:#f0f9ff;   /* ice blue */
-  --accent1:#6366f1; /* indigo */
-  --accent2:#ec4899; /* rose */
-  --accent3:#06b6d4; /* cyan */
-}
-
-/* ===== BACKGROUND (SOFT + CLEAN) ===== */
-body{
-  min-height:100vh;
-  background:
-    radial-gradient(circle at 20% 15%, #e9d5ff 0%, transparent 35%),
-    radial-gradient(circle at 80% 30%, #fbcfe8 0%, transparent 40%),
-    radial-gradient(circle at 50% 90%, #cffafe 0%, transparent 40%),
-    linear-gradient(180deg,var(--bg1),var(--bg2));
-  color:#1f2937;
-  overflow-x:hidden;
-}
-
-/* ===== HERO (SPACE FIX + GLASS ANIMATED) ===== */
+/* ===== HERO BACKGROUND (MORE DREAMY) ===== */
 .hero{
-  min-height:90vh;            /* 👈 space kam */
+  min-height:88vh;
   display:flex;
   justify-content:center;
   align-items:center;
-  padding:40px 20px;
+  padding:30px 20px;
 }
 
+/* ===== ULTRA GLASS LAYERED HERO ===== */
 .hero-inner{
+  position:relative;
   text-align:center;
-  padding:50px 60px;
-  border-radius:32px;
+  padding:54px 64px;
+  border-radius:36px;
 
-  background:linear-gradient(
-    120deg,
-    rgba(255,255,255,0.75),
-    rgba(255,255,255,0.55)
-  );
+  /* layered glass */
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255,255,255,0.85),
+      rgba(255,255,255,0.55)
+    );
+
+  backdrop-filter: blur(36px) saturate(170%);
+  -webkit-backdrop-filter: blur(36px) saturate(170%);
 
-  backdrop-filter: blur(32px) saturate(160%);
   border:1px solid rgba(255,255,255,0.95);
 
   box-shadow:
-    0 40px 120px rgba(99,102,241,0.25),
-    inset 0 1px 0 rgba(255,255,255,0.9);
+    0 50px 140px rgba(99,102,241,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.95);
 
-  animation: glassFloat 6s ease-in-out infinite;
+  animation: floatGlass 7s ease-in-out infinite;
 }
 
-/* subtle glass movement */
-@keyframes glassFloat{
+/* soft floating */
+@keyframes floatGlass{
   0%{ transform:translateY(0); }
-  50%{ transform:translateY(-12px); }
+  50%{ transform:translateY(-14px); }
   100%{ transform:translateY(0); }
 }
 
+/* subtle glass shine */
+.hero-inner::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  border-radius:36px;
+  background:linear-gradient(
+    120deg,
+    transparent 35%,
+    rgba(255,255,255,0.6),
+    transparent 65%
+  );
+  opacity:0.6;
+  animation: shine 6s linear infinite;
+}
+
+@keyframes shine{
+  from{ transform:translateX(-120%); }
+  to{ transform:translateX(120%); }
+}
+
 /* ===== NAME ===== */
 .hero-name{
-  font-size:56px;
-  margin-bottom:12px;   /* 👈 spacing tight */
-  background:linear-gradient(90deg,
-    var(--accent1),
-    var(--accent2),
-    var(--accent3)
+  font-size:58px;
+  margin-bottom:10px;
+  background:linear-gradient(
+    90deg,
+    var(--lavender),
+    var(--peach),
+    var(--ice)
   );
   -webkit-background-clip:text;
   -webkit-text-fill-color:transparent;
@@ -137,47 +123,203 @@ body{
 
 /* ===== SUBTITLE ===== */
 .hero-sub{
-  font-size:16px;
+  font-size:15.5px;
   font-weight:500;
-  color:#4338ca;
-  margin-bottom:22px;
+  color:#6366f1;
+  margin-bottom:20px;
 }
 
 /* ===== TEXT ===== */
 .hero-text{
   max-width:620px;
-  margin:0 auto 30px;
+  margin:0 auto 28px;
   font-size:16px;
   line-height:1.9;
-  color:#374151;
+  color:var(--ink);
 }
 
-/* ===== BUTTON GROUP ===== */
+/* ===== BUTTONS (PURE GLASS) ===== */
 .hero-buttons{
   display:flex;
   justify-content:center;
   gap:22px;
 }
 
-/* ===== GLASS BUTTON ===== */
 .glass-btn{
+  position:relative;
+  padding:16px 44px;
+  border-radius:999px;
+
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255,255,255,0.9),
+      rgba(255,255,255,0.6)
+    );
+
+  backdrop-filter: blur(22px);
+  border:1px solid rgba(255,255,255,1);
+
+  color:#4f46e5;
+  font-weight:700;
+  letter-spacing:1px;
+  text-decoration:none;
+
+  transition:.4s ease;
+}
+
+.glass-btn:hover{
+  transform:scale(1.1);
+  box-shadow:
+    0 25px 70px rgba(253,164,175,0.45),
+    0 0 0 8px rgba(196,181,253,0.15);
+}
+
+/* GLASS 3D */
+.glass-3d{
+  background:linear-gradient(
+    180deg,
+    rgba(255,255,255,0.75),
+    rgba(255,255,255,0.55)
+  );
+  backdrop-filter:blur(28px) saturate(150%);
+  border-radius:30px;
+  border:1px solid rgba(255,255,255,0.95);
+  box-shadow:
+    0 40px 120px rgba(99,102,241,0.25),
+    inset 0 1px 0 rgba(255,255,255,0.95);
+  transition:transform .45s ease, box-shadow .45s ease;
+}
+
+.glass-3d:hover{
+  transform:translateY(-10px) rotateX(4deg);
+  box-shadow:
+    0 70px 180px rgba(236,72,153,0.35),
+    inset 0 1px 0 rgba(255,255,255,1);
+}
+
+/* BUTTON */
+.glass-btn{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
   padding:16px 42px;
   border-radius:999px;
   background:rgba(255,255,255,0.7);
-  backdrop-filter: blur(18px);
+  backdrop-filter:blur(18px);
   border:1px solid rgba(255,255,255,0.95);
-
-  color:var(--accent1);
+  color:#4f46e5;
   font-weight:700;
   letter-spacing:1px;
   text-decoration:none;
-
-  transition:.35s ease;
+  transition:.35s;
 }
 
 .glass-btn:hover{
-  transform:scale(1.08);
-  box-shadow:0 20px 60px rgba(236,72,153,0.35);
+  transform:scale(1.06);
+  box-shadow:0 20px 60px rgba(99,102,241,.35);
+}
+
+.small{padding:12px 28px;}
+
+/* INFO SECTIONS */
+.info{
+  max-width:900px;
+  margin:80px auto;
+  padding:40px;
+  text-align:center;
+}
+
+.info h3{
+  font-size:34px;
+  margin-bottom:18px;
+  color:#4f46e5;
+}
+
+.info span{
+  color:#6b7280;
+}
+
+/* SKILLS */
+.skills{
+  padding:120px 8% 60px;
+  text-align:center;
+}
+
+.skills h3{
+  font-size:36px;
+  margin-bottom:50px;
+  color:#4338ca;
+}
+
+.bubble-wrap{
+  display:flex;
+  flex-wrap:wrap;
+  justify-content:center;
+  gap:26px;
 }
 
+.bubble{
+  padding:20px 34px;
+  border-radius:999px;
+  background:rgba(255,255,255,0.75);
+  backdrop-filter:blur(22px);
+  border:1px solid rgba(255,255,255,0.95);
+  font-weight:600;
+  color:#4f46e5;
+  box-shadow:0 20px 50px rgba(99,102,241,.25);
+  animation:floatBubble 6s ease-in-out infinite;
+  transition:.4s;
+}
+
+.bubble:hover{
+  transform:scale(1.15);
+  box-shadow:0 30px 70px rgba(236,72,153,.4);
+}
+
+@keyframes floatBubble{
+  0%{transform:translateY(0);}
+  50%{transform:translateY(-18px);}
+  100%{transform:translateY(0);}
+}
+
+/* PROJECTS */
+.projects{
+  padding:100px 8%;
+  text-align:center;
+}
 
+.projects h3{
+  font-size:36px;
+  margin-bottom:50px;
+  color:#4338ca;
+}
+
+.project-grid{
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
+  gap:40px;
+}
+
+.project{
+  padding:34px;
+  display:flex;
+  flex-direction:column;
+}
+
+.project h4{
+  font-size:22px;
+  margin-bottom:10px;
+  color:#312e81;
+}
+
+.project-action{
+  margin-top:auto;
+}
+
+/* FOOTER */
+footer{
+  text-align:center;
+  padding:40px;
+  color:#6b7280;
+}