add site files

static/css/style.css

@@ -0,0 +1,144 @@
+:root {
+  --bg-color: #1b1b1c;
+  --text-color: rgba(255, 255, 255, 0.85);
+  --icon-color: rgba(255, 255, 255, 0.7);
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+.profile-pic {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid rgba(237, 170, 21, 0.7);
+  transition: all 0.3s ease;
+}
+
+.profile-pic:hover {
+  transform: scale(1.05);
+  border: 3px solid rgba(237, 170, 21, 0.5);
+}
+
+.link-card {
+  background: rgba(177, 17, 236, 0.3);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.link-card:hover {
+  transform: translateY(-5px);
+  background: rgba(177, 17, 236, 0.1);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+
+.icon {
+  color: var(--icon-color);
+  transition: all 0.3s ease;
+}
+
+.link-card:hover .icon {
+  transform: scale(1.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.bg-animation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.info-box {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  border-left: 3px solid var(--icon-color);
+}
+
+.social-icons a {
+  transition: all 0.3s ease;
+}
+
+.social-icons a:hover {
+  transform: translateY(-3px) scale(1.1);
+}
+
+/* Generate random circles for background */
+.generate-circles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.pulsating-box {
+  animation: glowWave 4s infinite;
+}
+
+@keyframes glowWave {
+  0% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+  }
+}
+
+.border-trace::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px; /* match your card radius */
+  box-sizing: border-box;
+  pointer-events: none;
+
+  /* Gradient border using a mask trick */
+  border: 3px solid transparent;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(209, 77, 77, 0.224), rgba(255, 255, 255, 0.8));
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  padding: 3px; /* same as border thickness */
+
+  /* Animation */
+  clip-path: inset(0 100% 0 0); /* start hidden */
+  animation: drawBorder 10s linear infinite; /* slower: 10s */
+}
+
+@keyframes drawBorder {
+  0% {
+    clip-path: inset(0 100% 0 0); /* hidden */
+  }
+  25% {
+    clip-path: inset(0 0 0 0); /* fully visible */
+  }
+  50% {
+    clip-path: inset(100% 0 0 0); /* start hiding from top */
+  }
+  75% {
+    clip-path: inset(0 0 0 100%); /* hide from right */
+  }
+  100% {
+    clip-path: inset(0 100% 0 0); /* back to hidden */
+  }
+}