Intial commit.

src/style.css

@@ -0,0 +1,102 @@
+@import "tailwindcss";
+@import "@fontsource-variable/exo-2";
+
+/* Custom styles for the glassmorphism effect and background */
+body {
+    font-family: 'Exo 2 Variable', sans-serif;
+    /* Deep blue theme */
+    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
+    overflow: hidden;
+}
+
+/* The main card with the glass effect */
+.glass-card {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(25px);
+    -webkit-backdrop-filter: blur(25px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
+}
+
+/* Decorative background shapes */
+.shape {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    z-index: -1;
+    animation: float 20s infinite ease-in-out alternate;
+}
+
+.shape-1 {
+    width: 300px;
+    height: 300px;
+    background: rgba(76, 161, 175, 0.4);
+    top: -50px;
+    left: -50px;
+    animation-duration: 25s;
+}
+
+.shape-2 {
+    width: 400px;
+    height: 400px;
+    background: rgba(108, 99, 255, 0.3);
+    bottom: -100px;
+    right: -100px;
+    animation-duration: 20s;
+}
+
+.shape-3 {
+    width: 250px;
+    height: 250px;
+    background: rgba(67, 209, 217, 0.3);
+    bottom: 20%;
+    left: 10%;
+    animation-duration: 30s;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px) translateX(0px);
+    }
+
+    50% {
+        transform: translateY(-40px) translateX(20px);
+    }
+
+    100% {
+        transform: translateY(0px) translateX(0px);
+    }
+}
+
+/* Custom styling for skill tags and buttons */
+.skill-tag {
+    background: rgba(255, 255, 255, 0.15);
+    transition: background 0.3s ease, transform 0.3s ease;
+}
+
+.skill-tag:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+}
+
+/* Animated gradient for text */
+.animated-gradient {
+    background: linear-gradient(90deg, #4dd0e1, #818cf8, #a5f3fc, #4dd0e1);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: gradient-animation 5s ease infinite;
+}
+
+@keyframes gradient-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}