From 96853ab82507a43e4a212ad01972dc86f4954955 Mon Sep 17 00:00:00 2001
From: Lakshya Parmar <lakshyaparmar1282@gmail.com>
Date: Sun, 7 Dec 2025 10:44:12 +0530
Subject: [PATCH] added text animation and hover effect

---
 index.html | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/index.html b/index.html
index 648afa3b..9e7fdefb 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,94 @@
 	<link rel="stylesheet" href="css/reset.css">
 	<link rel="stylesheet" href="css/styles.css">
 	<link rel="stylesheet" href="css/themes/indigo-white.css">
+	<style>
+	
+		body {
+			background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+			background-size: 400% 400%;
+			animation: gradientShift 15s ease infinite;
+		}
+
+		@keyframes gradientShift {
+			0% { background-position: 0% 50%; }
+			50% { background-position: 100% 50%; }
+			100% { background-position: 0% 50%; }
+		}
+
+	
+		main > .intro {
+			animation: slideInUp 1s ease-out, textGlow 3s ease-in-out infinite;
+		}
+
+		main > .tagline {
+			animation: slideInUp 1.2s ease-out 0.3s both, textPulse 2s ease-in-out infinite 0.5s;
+		}
+
+		.icons-social {
+			animation: fadeIn 1.5s ease-out 0.6s both;
+		}
+
+		@keyframes slideInUp {
+			from {
+				opacity: 0;
+				transform: translateY(30px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		@keyframes fadeIn {
+			from {
+				opacity: 0;
+			}
+			to {
+				opacity: 1;
+			}
+		}
+
+		@keyframes textGlow {
+			0%, 100% {
+				text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
+			}
+			50% {
+				text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);
+			}
+		}
+
+		@keyframes textPulse {
+			0%, 100% {
+				opacity: 1;
+			}
+			50% {
+				opacity: 0.7;
+			}
+		}
+
+		.icons-social a {
+			transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+			position: relative;
+		}
+
+		.icons-social a:hover {
+			transform: scale(1.2) translateY(-5px);
+			filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
+		}
+
+		.icons-social a:hover i {
+			animation: iconBounce 0.6s ease;
+		}
+
+		@keyframes iconBounce {
+			0%, 100% {
+				transform: translateY(0);
+			}
+			50% {
+				transform: translateY(-10px);
+			}
+		}
+	</style>
 	<!-- <link rel="stylesheet" href="css/themes/green-white.css"> -->
 	<!-- <link rel="stylesheet" href="css/themes/red-white.css"> -->
 	<!-- <link rel="stylesheet" href="css/themes/grey-white.css"> -->