Added About Page

resources/js/components/Header.vue

@@ -66,7 +66,7 @@ const handleClickOutside = (e: Event) => {
 
     // Support composedPath for shadow DOM correctness
     const path = (e as MouseEvent).composedPath?.();
-    const clickedInside = path ? path.includes(dropdownRef.value) : dropdownRef.value.contains(e.target as Node);
+    const clickedInside = path ? path.includes(dropdownRef.value) : dropdownRef.value?.contains(e.target as Node);
 
     if (!clickedInside) {
         dropdownOpen.value = false;
@@ -116,11 +116,9 @@ const initMobileMenu = (): void => {
 
 <style scoped>
 .header {
-    min-height: 5dvh;
-    position: fixed;
+    flex-basis: 5%;
+    position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     z-index: 1000;
     background: rgba(8, 8, 23, 0.95);
     backdrop-filter: blur(10px);
@@ -302,6 +300,12 @@ const initMobileMenu = (): void => {
     transform: translateY(-8px) rotate(-45deg);
 }
 
+@media (max-width: 1366px) {
+    .nav-brand img {
+        transform: scale(1.2);
+    }
+}
+
 /* Mobile override (left intact — this preserves the mobile overlay you said you liked) */
 @media (max-width: 767px) {
     .nav-menu {
@@ -332,7 +336,6 @@ const initMobileMenu = (): void => {
     }
 
 
-
     .nav-menu.open {
         transform: translateY(0);
         opacity: 1;
@@ -354,6 +357,7 @@ const initMobileMenu = (): void => {
     }
 
     .nav-brand img {
+        transform: scale(1.5);
         display: block;
         margin-left: calc(10dvw / 2);
     }