Enhance navigation and footer styles, improve button feedback, and update permissions in configuration

Author: josuejjv85

.claude/settings.local.json

@@ -29,7 +29,21 @@
       "Bash(git commit:*)",
       "Bash(cat:*)",
       "WebFetch(domain:github.com)",
-      "WebFetch(domain:www.pepewebtech.com)"
+      "WebFetch(domain:www.pepewebtech.com)",
+      "Bash(cmd:*)",
+      "Bash(powershell -Command \"[Environment]::GetFolderPath(''ApplicationData'')\")",
+      "Read(//c/Users/Josue/AppData/Roaming/**)",
+      "WebFetch(domain:docs.claude.com)",
+      "Bash(claude mcp list:*)",
+      "Bash(Get-Command claude -ErrorAction SilentlyContinue)",
+      "Read(//c/Users/Josue/.npm-global//**)",
+      "Bash(npm:*)",
+      "Bash(where:*)",
+      "mcp__web-search-prime__webSearchPrime",
+      "mcp__playwright-mcp__playwright_navigate",
+      "mcp__playwright-mcp__playwright_screenshot",
+      "Bash(curl:*)",
+      "mcp__zai-mcp-server__analyze_image"
     ],
     "deny": [],
     "ask": []

.gitignore

@@ -2,9 +2,9 @@
 # Add files and directories that should not be tracked by Git
 
 # Documentation and research folders (internal use)
-docs/
+/docs/
 *.md
-.claude/
+/.claude/
 
 # Dependencies
 node_modules/

index.html

@@ -377,7 +377,7 @@ <h3 class="text-xl font-bold mb-4 text-green-400">Connect</h3>
 
         <!-- Footer Bottom -->
         <div class="border-t border-gray-700 pt-8 text-center">
-          <p class="text-gray-400">
+          <p class="text-gray-400 text-center">
             &copy; <span id="current-year"></span> Josue Zazueta LLC. Built with passion and modern web technologies.
           </p>
         </div>

js/main.js

@@ -70,28 +70,60 @@ document.addEventListener("DOMContentLoaded", function () {
   document.addEventListener("click", (e) => {
     if (!nav.contains(e.target)) {
       navCheckbox.checked = false;
-      selectButton.classList.add("blinking");
+      // Reset button text when menu closes
+      selectButton.textContent = originalText;
     }
   });
 
-  // Add blinking state management
+  // Close menu when clicking overlay
+  overlay.addEventListener("click", function () {
+    navCheckbox.checked = false;
+    // Reset button text when menu closes
+    selectButton.textContent = originalText;
+  });
+
+  // Close menu when clicking a link
+  navLinks.forEach((link) => {
+    link.addEventListener("click", function () {
+      navCheckbox.checked = false;
+      // Reset button text when menu closes
+      selectButton.textContent = originalText;
+    });
+  });
+
+  // Simple animation management
   const selectButton = document.querySelector(".select-button");
+  const originalText = "Select";
+  const activeText = "Menu";
+
+  // Toggle button text based on menu state
+  const updateButtonText = () => {
+    if (navCheckbox.checked) {
+      selectButton.textContent = activeText;
+    } else {
+      selectButton.textContent = originalText;
+    }
+  };
+
+  // Listen for checkbox changes to update text
+  navCheckbox.addEventListener("change", updateButtonText);
 
+  // Pause animation on hover
   selectButton.addEventListener("mouseenter", () => {
-    selectButton.classList.remove("blinking");
+    selectButton.style.animation = 'none';
   });
 
   selectButton.addEventListener("mouseleave", () => {
     if (!navCheckbox.checked) {
-      selectButton.classList.add("blinking");
+      selectButton.style.animation = '';
     }
   });
 
+  // Resume animation after navigation
   document.querySelector(".dropdown").addEventListener("click", (e) => {
     if (e.target.matches("a")) {
-      // Resume blinking after navigation
       setTimeout(() => {
-        selectButton.classList.add("blinking");
+        selectButton.style.animation = '';
       }, 100);
     }
   });

styles.css

@@ -87,6 +87,12 @@
   top: 100%;
 }
 
+/* Enhanced active state for better feedback */
+.select-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
 /* Contact Section */
 .contact-card {
   background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
@@ -138,6 +144,17 @@ footer p {
   line-height: 1.5;
 }
 
+/* Footer bottom specific styling */
+footer .border-t {
+  text-align: center;
+}
+
+footer .border-t p {
+  text-align: center !important;
+  margin: 0 auto;
+  display: block;
+}
+
 footer ul {
   list-style: none;
   padding: 0;
@@ -440,20 +457,26 @@ footer .text-gray-400 {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-/* Blinking effect */
-@keyframes blink {
+/* Subtle glow effect - minimal alternative to blinking */
+@keyframes soft-glow {
+  0%, 100% {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  }
   50% {
-    opacity: 0;
+    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
   }
 }
 
-.blinking {
-  animation: none;
+/* Only subtle glow when nav is closed */
+.nav-checkbox:not(:checked) ~ .select-button {
+  animation: soft-glow 4s ease-in-out infinite;
 }
 
-/* Only blink when nav is closed */
-.nav-checkbox:not(:checked) ~ .select-button {
-  animation: blink 1s infinite;
+/* Respect user motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .nav-checkbox:not(:checked) ~ .select-button {
+    animation: none;
+  }
 }
 
 /* Navigation styles */
@@ -539,10 +562,13 @@ html {
 
 .select-button:hover {
   animation: none;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }
 
 .select-button {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Custom utility classes */