Portfolio link to home page

css/common.css

@@ -46,7 +46,7 @@ section {
     color: rgb(201, 238, 99);
     position: fixed;
     width: 100%;
-    top: 10;
+    top: 0.1;
     z-index: 1000;
 }
 

css/discount-banner.css

@@ -4,18 +4,18 @@
     top: 0;
     width: 100%;
     background: linear-gradient(90deg, #639bee, #b7e24d, #639fee);
-    background-size: 300% 300%;
+    background-size: 100% 300%;
     animation: gradientFlow 6s ease infinite;
     color: #1a1a1a;
     text-align: center;
-    padding: 0.9rem 1rem;
+    padding: 0.1rem 1rem;
     font-family: 'Poppins', sans-serif;
     font-size: 1rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0rem;
     z-index: 9999;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
     overflow: hidden;
@@ -26,22 +26,22 @@
 
 /* --- Text --- */
 .discount-banner p {
-    margin: 0;
+    margin-bottom: 0rem;
     font-weight: 500;
-    z-index: 2;
+    z-index: 0.1;
 }
 
 /* --- Button --- */
 .banner-btn {
     background: #1a1a1a;
     color: #c9ee63;
-    padding: 0.45rem 1.1rem;
+    padding: 0rem 1rem;
     border-radius: 50px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-    z-index: 2;
+    z-index: 0.1;
 }
 
 .banner-btn:hover {
@@ -130,10 +130,10 @@
     .discount-banner {
         flex-direction: column;
         text-align: center;
-        padding: 1rem;
+        padding: 0.1rem;
     }
 
     .banner-btn {
-        margin-top: 0.4rem;
+        margin-top: 0.1rem;
     }
 }

css/main.css

@@ -20,6 +20,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.55);
+  border-radius: 12px;
 }
 
 .hero-content {
@@ -127,6 +128,23 @@
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
 
+.project-card a {
+  text-decoration: none;
+  color: black;
+}
+
+.project-card a:hover {
+  color: blue;
+}
+
+body.dark .project-card a {
+  color: white;
+}
+
+body.dark .project-card a:hover {
+  color: #467db4;
+}
+
 /* ===================================================
    ===== Portfolio Section =====
 =================================================== */
@@ -305,4 +323,4 @@ body.dark #darkModeToggle:hover {
 body.dark .visitor-count-card {
   background-color: #467db4;
   color: #000;
-}
+}

css/portfolio-btn.css

@@ -0,0 +1,71 @@
+/* --- CENTERING THE BUTTON --- */
+.center-content {
+    /* Use Flexbox to center the content */
+    display: flex;
+    justify-content: center;
+    /* Center horizontally */
+    align-items: center;
+    /* Center vertically */
+    padding: 0px 0px 42px 0px;
+}
+
+/* Base Styling for Elegance */
+.elegant-back-button {
+    /* ... (rest of the button styles) */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 25px;
+    border: 3px solid #3498db;
+    border-radius: 15px;
+    background-color: #ffe88b;
+    color: #3498db;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    z-index: 1;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Hover Effect - Color Swap */
+.elegant-back-button:hover {
+    background-color: #3498db;
+    color: #ffffff;
+    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
+}
+
+/* Icon and Text Positioning */
+.elegant-back-button .icon {
+    display: inline-block;
+    margin-right: 10px;
+    font-size: 1.5em;
+    line-height: 1;
+    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Hover Animation: Icon Slide and Rotate */
+.elegant-back-button:hover .icon {
+    transform: translateX(-3px) rotate(-15deg);
+}
+
+/* -------------------- RIPPLE EFFECT CSS -------------------- */
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.6);
+    transform: scale(0);
+    animation: ripple-effect 0.6s linear;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes ripple-effect {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}