heading text dont work and social media add button dont work and even we dont have social media icons to show that this place is for adding social media

index.html

@@ -140,7 +140,7 @@
                 </div>
         <!-- 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 editable" contenteditable="true" data-placeholder="Tap to Add your Name">Tap to Add your Name</h1>
+            <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">Tap to Add your Name</h1>
         </div>
 <!-- Contact Button -->
                 <div class="relative mb-4 w-3/5 mx-auto">
@@ -150,47 +150,50 @@
                 <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">
-            <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>
+                <!-- Social Media Section -->
+                <div class="mb-8">
+                    <div class="flex justify-center flex-wrap gap-3 mb-4" id="socialIconsContainer">
+                        <!-- Social media icons will be added here -->
+                        <!-- Plus button for adding social media -->
+                        <div class="relative">
+                            <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 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>
+                </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>
@@ -306,7 +309,7 @@
                 });
             });
         });
-        // Initialize placeholder functionality
+        // Initialize placeholder functionality for all editable elements except heading
         document.querySelectorAll('.editable').forEach(editable => {
             // Clear placeholder text when focusing
             editable.addEventListener('focus', function() {
@@ -324,6 +327,22 @@
                 this.style.background = 'transparent';
             });
         });
+
+        // Special handling for heading element
+        const editableName = document.getElementById('editableName');
+        editableName.addEventListener('focus', function() {
+            if (this.textContent === this.getAttribute('data-placeholder')) {
+                this.textContent = '';
+            }
+            this.style.background = 'transparent';
+        });
+        
+        editableName.addEventListener('blur', function() {
+            if (this.textContent.trim() === '') {
+                this.textContent = this.getAttribute('data-placeholder');
+            }
+            this.style.background = 'transparent';
+        });
 function addSocialIcon(platform, handle) {
             const container = document.getElementById('socialIconsContainer');
             
@@ -391,7 +410,6 @@ function getSocialUrl(platform, handle) {
             const phoneNumber = this.textContent.replace(/[^\d+]/g, '');
             this.href = `tel:${phoneNumber}`;
         });
-
         // Enhanced social media dropdown positioning
         const addSocialButton = document.getElementById('addSocialButton');
         const socialDropdown = document.getElementById('socialDropdown');
@@ -399,13 +417,131 @@ function getSocialUrl(platform, handle) {
         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';
+            const isVisible = socialDropdown.style.display === 'block';
+            socialDropdown.style.display = isVisible ? 'none' : 'block';
+            
+            if (!isVisible) {
+                socialDropdown.style.bottom = '100%';
+                socialDropdown.style.top = 'auto';
+                socialDropdown.style.left = '50%';
+                socialDropdown.style.transform = 'translateX(-50%)';
+                socialDropdown.style.marginBottom = '8px';
+            }
         });
+
+        // Social media platform selection
+        document.querySelectorAll('.social-option').forEach(option => {
+            option.addEventListener('click', function(e) {
+                e.preventDefault();
+                const platform = this.getAttribute('data-platform');
+                
+                // Create modal for handle input
+                const modal = document.createElement('div');
+                modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+                modal.innerHTML = `
+                    <div class="bg-gray-800 p-6 rounded-lg max-w-sm w-full mx-4">
+                        <h3 class="text-lg font-medium mb-4">Add your ${platform} handle</h3>
+                        <input type="text" id="handleInput" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 mb-4 text-white" placeholder="Your handle">
+                        <div class="flex justify-end space-x-2">
+                            <button id="cancelHandle" class="px-4 py-2 text-gray-300 hover:text-white">Cancel</button>
+                            <button id="saveHandle" class="px-4 py-2 bg-indigo-600 rounded hover:bg-indigo-700">Add</button>
+                        </div>
+                    </div>
+                `;
+                document.body.appendChild(modal);
+                
+                const handleInput = document.getElementById('handleInput');
+                const cancelBtn = document.getElementById('cancelHandle');
+                const saveBtn = document.getElementById('saveHandle');
+                
+                handleInput.focus();
+                
+                cancelBtn.addEventListener('click', function() {
+                    document.body.removeChild(modal);
+                });
+                
+                saveBtn.addEventListener('click', function() {
+                    const handle = handleInput.value.trim();
+                    if (handle) {
+                        addSocialIcon(platform, handle);
+                    }
+                    document.body.removeChild(modal);
+                    document.getElementById('socialDropdown').style.display = 'none';
+                });
+                
+                // Close modal when clicking outside
+                modal.addEventListener('click', function(e) {
+                    if (e.target === modal) {
+                        document.body.removeChild(modal);
+                    }
+                });
+            });
+        });
+
+        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 = '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 container
+            const addButtonContainer = container.querySelector('.relative');
+            container.insertBefore(iconWrapper, addButtonContainer);
+            
+            feather.replace();
+        }
+
+        function getFeatherIconName(platform) {
+            const iconMap = {
+                instagram: 'instagram',
+                facebook: 'facebook',
+                twitter: 'twitter',
+                tiktok: 'video',
+                youtube: 'youtube',
+                linkedin: 'linkedin',
+                snapchat: 'camera',
+                pinterest: 'image',
+                reddit: 'message-circle',
+                github: 'github'
+            };
+            return iconMap[platform] || 'link';
+        }
+
+        function getSocialUrl(platform, handle) {
+            const urls = {
+                instagram: `https://instagram.com/${handle}`,
+                facebook: `https://facebook.com/${handle}`,
+                twitter: `https://twitter.com/${handle}`,
+                tiktok: `https://tiktok.com/@${handle}`,
+                youtube: `https://youtube.com/@${handle}`,
+                linkedin: `https://linkedin.com/in/${handle}`,
+                snapchat: `https://snapchat.com/add/${handle}`,
+                pinterest: `https://pinterest.com/${handle}`,
+                reddit: `https://reddit.com/user/${handle}`,
+                github: `https://github.com/${handle}`
+            };
+            return urls[platform] || '#';
+        }
 // Save profile functionality
         document.getElementById('saveProfile').addEventListener('click', function() {
             const profileData = {