skeleton profile card is rendered.

Author: Ali-Cheikh

profile/index.html

@@ -83,6 +83,26 @@
         <div class="absolute top-1/3 right-1/4 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
         <div class="absolute bottom-1/4 left-1/2 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
     </div>
+    <!-- Loader -->
+    <div class="loader w-full max-w-md p-24 rounded-xl bg-gray-900 shadow-lg">
+        <div class="flex justify-end mb-0">
+        <div class="w-8 h-8 bg-gray-800 rounded-full"></div>
+        </div>
+        <div class="flex flex-col items-center">
+        <div class="w-32 h-32 bg-gray-800 rounded-full mb-4"></div>
+        <div class="w-48 h-12 bg-gray-800 rounded mb-2"></div>
+        <div class="w-32 h-6 bg-gray-800 rounded mb-4"></div>
+        <div class="w-64 h-16 bg-gray-800 rounded mb-4"></div>
+        <div class="w-64 h-16 bg-gray-800 rounded mb-4"></div>
+        <div class="w-64 h-16 bg-gray-800 rounded mb-4"></div>
+        <div class="w-48 h-12 bg-gray-800 rounded mb-4"></div>
+        </div>
+        <div class="border-t border-gray-800 mt-4 pt-4">
+        <div class="w-2/3 h-4 bg-gray-800 rounded mb-2 mx-auto"></div>
+        <div class="w-1/2 h-4 bg-gray-800 rounded mx-auto"></div>
+        </div>
+    </div>
+
     <!-- Main Content -->
     <main class="card-container relative z-10 transform translate-y-5">
         <!-- Profile card will be injected here -->

profile/style.css

@@ -162,6 +162,9 @@ body {
 
 .contact-details-container {
     padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
@@ -310,6 +313,3 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
 }
-.top-right:hover {
-    background: rgba(255, 255, 255, 0.2);
-}