💅 style(ui): correct typo, update color consistency and add hover effects to social links

index.html

@@ -1,37 +1,30 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>My Social Links</title>
-    <link rel="stylesheet" href="styles.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
     <div class="container">
         <div class="profile">
             <div class="profile-image">
-          <img src="assets/profile.png" alt="Profile Picture" />
+                <img src="assets/profile.png" alt="Profile Picture">
             </div>
             <h1>Sankalp Tharu</h1>
-        <p>
-          🚀 Backend Developer | Problem Solver | Tech Enthusiast<br />Building
-          scalable solutions and crafting efficient APIs 💻
-        </p>
+            <p>✨ Digital Creator | Content Maker 🚀<br>Sharing vibes and connecting with awesome people! 💫</p>
         </div>
         
         <div class="social-links">
-        <a
-          href="https://instagram.com/1amsanka1p"
-          class="social-link instagram"
-        >
+            <a href="https://1amsanka1p.me" class="social-link portfolio">
+                <i class="fas fa-globe"></i>
+                <span>Portfolio</span>
+            </a>
+
+            <a href="https://instagram.com/1amsanka1p" class="social-link instagram">
                 <i class="fab fa-instagram"></i>
                 <span>Instagram</span>
             </a>
@@ -56,10 +49,7 @@
                 <span>Twitter</span>
             </a>
 
-        <a
-          href="https://discord.com/users/sankalp369"
-          class="social-link discord"
-        >
+            <a href="https://discord.com/users/sankalp369" class="social-link discord">
                 <i class="fab fa-discord"></i>
                 <span>Message on Discord</span>
             </a>
@@ -84,10 +74,7 @@
                 <span>GitHub</span>
             </a>
             
-        <a
-          href="https://linkedin.com/in/1amsanka1p"
-          class="social-link linkedin"
-        >
+            <a href="https://linkedin.com/in/1amsanka1p" class="social-link linkedin">
                 <i class="fab fa-linkedin"></i>
                 <span>LinkedIn</span>
             </a>
@@ -99,5 +86,5 @@
         </div>
     </div>
     <script src="script.js"></script>
-  </body>
+</body>
 </html> 

styles.css

@@ -205,10 +205,13 @@ body {
     box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
 }
 .email:hover {
-    background: #ea4335;
+    background: #EA4335;
     box-shadow: 0 0 20px rgba(234, 67, 53, 0.3);
 }
-
+.portfolio:hover {
+    background: #3498db;
+    box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
+}
 /* Animations */
 @keyframes float {
     0%, 100% { transform: translateY(0) rotate(0deg); }
@@ -436,3 +439,6 @@ body {
     }
 }
 
+
+
+