the heading text still dont work, the social media box is working but like i want maybe its better if we ttreat it like another element so it will show social media account like placeholder and add button with plus icon so when user press the plus button he can choose the social media icon he want and add his handle and the icon appear really and the plus icon still can be used to add another another icons

index.html

@@ -138,9 +138,11 @@
                     </div>
                     <input type="file" id="imageUpload" accept="image/*" class="hidden">
                 </div>
-                <!-- Editable Name -->
-                <h1 id="editableName" class="text-3xl font-bold mb-3 gradient-text editable" contenteditable="true" data-placeholder="Tap to Add your Name"></h1>
-                <!-- Contact Button -->
+        <!-- Editable Name -->
+        <div class="relative mb-3">
+            <h1 id="editableName" class="text-3xl font-bold gradient-text text-center min-h-[1.5em] px-2 py-1 rounded" contenteditable="true" data-placeholder="Tap to Add your Name"></h1>
+        </div>
+<!-- Contact Button -->
                 <div class="relative mb-4 w-3/5 mx-auto">
                     <a id="contactButton" href="tel:" class="px-4 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-xs w-full block editable" contenteditable="true" data-placeholder="Tap to Add Phone Number"></a>
                 </div>
@@ -148,49 +150,47 @@
                 <p id="editableTitle" class="text-xl text-gray-300 mb-4 editable" contenteditable="true" data-placeholder="Tap to Add your Title"></p>
                 <!-- Editable Description -->
                 <p id="editableDescription" class="text-base text-gray-400 mb-8 px-2 editable" contenteditable="true" data-placeholder="Tap to Add a Description about Yourself"></p>
-                <!-- Social Media Section -->
-                <div class="mb-8 relative">
-                    <div class="flex justify-center space-x-4 mb-4" id="socialIconsContainer">
-                        <!-- Social icons will be added here dynamically -->
-                    </div>
-                    <div class="relative inline-block">
-                        <button id="addSocialButton" class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-full text-sm transition">
-                            + Add Social Media
-                        </button>
-                        <div id="socialDropdown" class="social-dropdown">
-                            <a class="social-option" data-platform="instagram">
-                                <i data-feather="instagram"></i> Instagram
-                            </a>
-                            <a class="social-option" data-platform="facebook">
-                                <i data-feather="facebook"></i> Facebook
-                            </a>
-                            <a class="social-option" data-platform="twitter">
-                                <i data-feather="twitter"></i> Twitter
-                            </a>
-                            <a class="social-option" data-platform="tiktok">
-                                <i data-feather="video"></i> TikTok
-                            </a>
-                            <a class="social-option" data-platform="youtube">
-                                <i data-feather="youtube"></i> YouTube
-                            </a>
-                            <a class="social-option" data-platform="linkedin">
-                                <i data-feather="linkedin"></i> LinkedIn
-                            </a>
-                            <a class="social-option" data-platform="snapchat">
-                                <i data-feather="camera"></i> Snapchat
-                            </a>
-                            <a class="social-option" data-platform="pinterest">
-                                <i data-feather="image"></i> Pinterest
-                            </a>
-                            <a class="social-option" data-platform="reddit">
-                                <i data-feather="message-circle"></i> Reddit
-                            </a>
-                            <a class="social-option" data-platform="github">
-                                <i data-feather="github"></i> GitHub
-                            </a>
-                        </div>
-                    </div>
-                </div>
+        <!-- Social Media Section -->
+        <div class="mb-8">
+            <div class="flex justify-center flex-wrap gap-3 mb-4" id="socialIconsContainer">
+                <!-- Plus button for adding social media -->
+                <button id="addSocialButton" class="w-12 h-12 rounded-full bg-indigo-600 hover:bg-indigo-700 flex items-center justify-center transition">
+                    <i data-feather="plus" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div id="socialDropdown" class="social-dropdown">
+                <a class="social-option" data-platform="instagram">
+                    <i data-feather="instagram"></i> Instagram
+                </a>
+                <a class="social-option" data-platform="facebook">
+                    <i data-feather="facebook"></i> Facebook
+                </a>
+                <a class="social-option" data-platform="twitter">
+                    <i data-feather="twitter"></i> Twitter
+                </a>
+                <a class="social-option" data-platform="tiktok">
+                    <i data-feather="video"></i> TikTok
+                </a>
+                <a class="social-option" data-platform="youtube">
+                    <i data-feather="youtube"></i> YouTube
+                </a>
+                <a class="social-option" data-platform="linkedin">
+                    <i data-feather="linkedin"></i> LinkedIn
+                </a>
+                <a class="social-option" data-platform="snapchat">
+                    <i data-feather="camera"></i> Snapchat
+                </a>
+                <a class="social-option" data-platform="pinterest">
+                    <i data-feather="image"></i> Pinterest
+                </a>
+                <a class="social-option" data-platform="reddit">
+                    <i data-feather="message-circle"></i> Reddit
+                </a>
+                <a class="social-option" data-platform="github">
+                    <i data-feather="github"></i> GitHub
+                </a>
+            </div>
+        </div>
 <!-- Action Buttons -->
                 <div class="flex justify-center space-x-3 mt-auto">
                     <button class="px-4 py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm">Projects</button>
@@ -351,16 +351,37 @@
         });
 function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
+            
+            // Create social icon element
+            const iconWrapper = document.createElement('div');
+            iconWrapper.className = 'relative group';
+            
             const icon = document.createElement('a');
             icon.href = getSocialUrl(platform, handle);
             icon.target = '_blank';
-            icon.className = 'text-gray-400 hover:text-white transition transform hover:scale-110';
-            icon.innerHTML = `<i data-feather="${getFeatherIconName(platform)}"></i>`;
-            container.appendChild(icon);
+            icon.className = 'w-12 h-12 rounded-full bg-gray-800 hover:bg-indigo-600 flex items-center justify-center transition transform hover:scale-110';
+            icon.innerHTML = `<i data-feather="${getFeatherIconName(platform)}" class="w-5 h-5"></i>`;
+            
+            // Add remove button
+            const removeBtn = document.createElement('button');
+            removeBtn.className = 'absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center opacity-0 group-hover:opacity-100 transition';
+            removeBtn.innerHTML = '×';
+            removeBtn.onclick = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                container.removeChild(iconWrapper);
+            };
+            
+            iconWrapper.appendChild(icon);
+            iconWrapper.appendChild(removeBtn);
+            
+            // Insert before the plus button
+            const addButton = document.getElementById('addSocialButton').parentNode;
+            container.insertBefore(iconWrapper, addButton);
+            
             feather.replace();
         }
-
-        function getFeatherIconName(platform) {
+function getFeatherIconName(platform) {
             const iconMap = {
                 instagram: 'instagram',
                 facebook: 'facebook',
@@ -390,14 +411,27 @@ function getSocialUrl(platform, handle) {
             };
             return urls[platform] || '#';
         }
-
         // Update contact button href when editing
         document.getElementById('contactButton').addEventListener('input', function() {
             const phoneNumber = this.textContent.replace(/[^\d+]/g, '');
             this.href = `tel:${phoneNumber}`;
         });
 
-        // Save profile functionality
+        // Enhanced social media dropdown positioning
+        const addSocialButton = document.getElementById('addSocialButton');
+        const socialDropdown = document.getElementById('socialDropdown');
+        
+        addSocialButton.addEventListener('click', function(e) {
+            e.stopPropagation();
+            const rect = addSocialButton.getBoundingClientRect();
+            socialDropdown.style.display = socialDropdown.style.display === 'block' ? 'none' : 'block';
+            socialDropdown.style.bottom = '100%';
+            socialDropdown.style.top = 'auto';
+            socialDropdown.style.left = '50%';
+            socialDropdown.style.transform = 'translateX(-50%)';
+            socialDropdown.style.marginBottom = '8px';
+        });
+// Save profile functionality
         document.getElementById('saveProfile').addEventListener('click', function() {
             const profileData = {
                 name: document.getElementById('editableName').textContent,
@@ -417,7 +451,10 @@ function getSocialUrl(platform, handle) {
             // Set content only if it's not empty or placeholder
             if (profileData.name && profileData.name !== 'Tap to Add your Name') {
                 document.getElementById('editableName').textContent = profileData.name;
+            } else {
+                document.getElementById('editableName').textContent = 'Tap to Add your Name';
             }
+            
             if (profileData.title && profileData.title !== 'Tap to Add your Title') {
                 document.getElementById('editableTitle').textContent = profileData.title;
             }
@@ -431,6 +468,9 @@ function getSocialUrl(platform, handle) {
             if (profileData.image && profileData.image !== 'http://static.photos/technology/320x240/42') {
                 document.getElementById('profileImage').src = profileData.image;
             }
+        } else {
+            // Initialize with placeholder
+            document.getElementById('editableName').textContent = 'Tap to Add your Name';
         }
 </script>
 </body>