Improved mobile functionality.

Author: Code-JL

assets/about.css

@@ -17,10 +17,41 @@ li, p {
     margin-bottom: 50px;
 }
 
-/* Responsive Design */
+/* Enhanced Mobile Responsiveness */
 @media (max-width: 768px) {
     .story, .programming-journey, .education, .personal-growth, .philosophy {
         width: 90%;
-        margin: 20px auto;
+        margin: 15px auto;
+        padding: 15px;
+    }
+
+    /* Improved Typography for Mobile */
+    p {
+        font-size: clamp(14px, 3.5vw, 18px);
+        margin-bottom: 15px;
+    }
+
+    h2 {
+        font-size: clamp(24px, 6vw, 32px);
+        margin-bottom: 15px;
+    }
+
+    /* Contact Section Mobile Optimization */
+    #contact h2 {
+        font-size: clamp(20px, 5vw, 28px);
+    }
+
+    /* Adjust Section Spacing */
+    .title {
+        margin-bottom: 25px;
+    }
+}
+
+/* Additional Mobile Optimization */
+@media (max-width: 480px) {
+    .story, .programming-journey, .education, .personal-growth, .philosophy {
+        width: 95%;
+        margin: 10px auto;
+        padding: 12px;
     }
 }

assets/load/header.html

@@ -1,4 +1,7 @@
 <nav role="navigation" aria-label="Main navigation" class="main-nav">
+    <button class="menu-toggle" aria-label="Toggle navigation menu">
+        ☰
+    </button>
     <div class="nav-container">
         <ul role="menubar">
             <li role="none">

assets/load/universal.css

@@ -12,7 +12,6 @@
     --section-bg: rgba(65, 65, 65, 0.95);
     --transition-speed: 0.3s;
     --visited-link: #dfa843;
-
     --highlight-color: #e7df69;
     --visited-color: #dfa843;
     --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -79,6 +78,16 @@ header {
     z-index: 1000;
 }
 
+.menu-toggle {
+    display: none;
+    font-size: 24px;
+    background: none;
+    border: none;
+    color: var(--text-light);
+    padding: 10px;
+    cursor: pointer;
+}
+
 .main-nav {
     background: rgba(30, 92, 143, 0.95);
     backdrop-filter: blur(10px);
@@ -170,32 +179,6 @@ nav ul li {
     border-color: var(--accent-color);
 }
 
-@media screen and (max-width: 768px) {
-    .nav-container {
-        padding: 0 10px;
-    }
-    
-    nav ul {
-        flex-wrap: wrap;
-        justify-content: space-around;
-        gap: 5px;
-    }
-    
-    nav ul li {
-        margin: 5px;
-    }
-    
-    .nav-link {
-        padding: 8px 12px;
-        font-size: 24px;
-    }
-    
-    .nav-link img {
-        width: 20px;
-        height: 20px;
-    }
-}
-
 .nav-container::before,
 .nav-container::after {
     content: '';
@@ -221,7 +204,6 @@ nav ul li {
     right: 2%;
 }
 
-
 /* Section Styling */
 section {
     padding: 40px 20px;
@@ -300,7 +282,83 @@ canvas {
     filter: blur(1px);
 }
 
-/* Responsive Design */
+/* Enhanced Mobile Styles */
+@media screen and (max-width: 768px) {
+    /* Typography adjustments */
+    h1 { font-size: clamp(2.5rem, 8vw, 4rem); }
+    h2 { font-size: clamp(2rem, 6vw, 2.5rem); }
+    h3 { font-size: clamp(1.5rem, 4vw, 2rem); }
+    li, p { font-size: 16px; }
+
+    /* Mobile navigation */
+    .menu-toggle {
+        display: block;
+    }
+
+    .main-nav {
+        position: relative;
+    }
+
+    .nav-container {
+        padding: 0;
+    }
+
+    nav ul {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        background: rgba(30, 92, 143, 0.95);
+        padding: 0;
+    }
+
+    nav ul.show {
+        display: flex;
+    }
+
+    nav ul li {
+        margin: 0;
+        width: 100%;
+    }
+
+    .nav-link {
+        padding: 12px 16px;
+        font-size: 20px;
+        border-radius: 0;
+        justify-content: flex-start;
+    }
+
+    /* Section adjustments */
+    section {
+        max-width: 95%;
+        padding: 20px 15px;
+        margin: 10px auto;
+    }
+
+    section.title {
+        width: 90%;
+    }
+
+    /* Contact section adjustments */
+    section#contact p a {
+        font-size: 20px;
+    }
+
+    section#contact p a img {
+        width: 30px;
+        height: 30px;
+    }
+
+    /* Navigation container decorative elements */
+    .nav-container::before,
+    .nav-container::after {
+        display: none;
+    }
+}
+
+/* Existing media queries */
 @media screen and (min-width: 500px) {
     h1 {
         font-size: 4rem;

assets/load/universal.js

@@ -8,7 +8,8 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 document.addEventListener('DOMContentLoaded', () => {
-    // Set active nav link based on current page
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navMenu = document.querySelector('nav ul');
     const currentPage = window.location.pathname.split('/').pop();
     const navLinks = document.querySelectorAll('.nav-link');
 
@@ -28,6 +29,21 @@ document.addEventListener('DOMContentLoaded', () => {
             img.style.transform = 'scale(1) rotate(0deg)';
         });
     });
+    
+    menuToggle.addEventListener('click', () => {
+        navMenu.classList.toggle('show');
+        menuToggle.setAttribute('aria-expanded', 
+            menuToggle.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+        );
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.main-nav')) {
+            navMenu.classList.remove('show');
+            menuToggle.setAttribute('aria-expanded', 'false');
+        }
+    });
 });
 
 // Include the 'matter-wrap' plugin

projects/projectsUniversal.js

@@ -8,7 +8,8 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 document.addEventListener('DOMContentLoaded', () => {
-    // Set active nav link based on current page
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navMenu = document.querySelector('nav ul');
     const currentPage = window.location.pathname.split('/').pop();
     const navLinks = document.querySelectorAll('.nav-link');
 
@@ -28,8 +29,24 @@ document.addEventListener('DOMContentLoaded', () => {
             img.style.transform = 'scale(1) rotate(0deg)';
         });
     });
+    
+    menuToggle.addEventListener('click', () => {
+        navMenu.classList.toggle('show');
+        menuToggle.setAttribute('aria-expanded', 
+            menuToggle.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+        );
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.main-nav')) {
+            navMenu.classList.remove('show');
+            menuToggle.setAttribute('aria-expanded', 'false');
+        }
+    });
 });
 
+
 // Include the 'matter-wrap' plugin
 Matter.use('matter-wrap');