From 8858c519f53007a2b9708c3b2014a21a268e111e Mon Sep 17 00:00:00 2001
From: Dae Sanghwi <daedaevibin@naver.com>
Date: Tue, 19 Nov 2024 06:27:05 -0600
Subject: [PATCH] .....

---
 index.html       |   7 ++-
 js/animations.js |  65 ++++++++++++++++++++++
 styles.css       | 140 +++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 206 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 9f3f063..ad59f04 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@
     <header>
         <nav>
             <div class="logo">
-                <img src="images/logo.png" alt="YeonSphere Logo" width="50" height="50">
+                <img src="./images/logo.png" alt="YeonSphere Logo" width="50" height="50">
             </div>
             
             <button class="menu-toggle" aria-label="Toggle menu">
@@ -98,7 +98,10 @@
 
     <main id="main-content">
         <section id="home" class="hero">
-            <img src="assets/seokjin.jpg" alt="Seokjin" class="hero-image">
+            <div class="seokjin-container">
+                <img src="./images/seokjin.png" alt="Happy Seokjin" class="seokjin-image">
+                <img src="./images/seokjin-confused.png" alt="Confused Seokjin" class="seokjin-image confused">
+            </div>
             <h1 data-translate="welcome">Welcome to YeonSphere</h1>
             <p data-translate="hero_subtitle">Innovative solutions for your digital journey</p>
             <div class="hero-buttons">
diff --git a/js/animations.js b/js/animations.js
index 15a8d64..6981667 100644
--- a/js/animations.js
+++ b/js/animations.js
@@ -3,6 +3,7 @@ class AnimationManager {
         this.init();
         this.setupIntersectionObserver();
         this.setupPageTransitions();
+        this.setupMenuOverlay();
     }
 
     init() {
@@ -113,6 +114,70 @@ class AnimationManager {
             loadingScreen.remove();
         }, 600);
     }
+
+    setupMenuOverlay() {
+        const menuToggle = document.querySelector('.menu-toggle');
+        const menuOverlay = document.querySelector('.menu-overlay');
+        const menuItems = document.querySelectorAll('.menu-item');
+
+        if (menuToggle && menuOverlay) {
+            // Toggle menu
+            menuToggle.addEventListener('click', () => {
+                menuToggle.classList.toggle('active');
+                menuOverlay.classList.toggle('active');
+                document.body.classList.toggle('menu-open');
+            });
+
+            // Handle menu item clicks
+            menuItems.forEach(item => {
+                item.addEventListener('click', () => {
+                    menuToggle.classList.remove('active');
+                    menuOverlay.classList.remove('active');
+                    document.body.classList.remove('menu-open');
+
+                    // Update active state
+                    menuItems.forEach(i => i.classList.remove('active'));
+                    item.classList.add('active');
+                });
+            });
+
+            // Close menu when clicking outside
+            menuOverlay.addEventListener('click', (e) => {
+                if (e.target === menuOverlay) {
+                    menuToggle.classList.remove('active');
+                    menuOverlay.classList.remove('active');
+                    document.body.classList.remove('menu-open');
+                }
+            });
+
+            // Handle escape key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape' && menuOverlay.classList.contains('active')) {
+                    menuToggle.classList.remove('active');
+                    menuOverlay.classList.remove('active');
+                    document.body.classList.remove('menu-open');
+                }
+            });
+
+            // Update active menu item based on scroll position
+            window.addEventListener('scroll', () => {
+                const scrollPosition = window.scrollY;
+
+                document.querySelectorAll('section').forEach(section => {
+                    const sectionTop = section.offsetTop - 100;
+                    const sectionBottom = sectionTop + section.offsetHeight;
+
+                    if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
+                        const correspondingMenuItem = document.querySelector(`.menu-item[href="#${section.id}"]`);
+                        if (correspondingMenuItem) {
+                            menuItems.forEach(item => item.classList.remove('active'));
+                            correspondingMenuItem.classList.add('active');
+                        }
+                    }
+                });
+            });
+        }
+    }
 }
 
 // Initialize animation manager when DOM is ready
diff --git a/styles.css b/styles.css
index 5cb9610..7adf23a 100644
--- a/styles.css
+++ b/styles.css
@@ -87,10 +87,9 @@ header {
     right: 0;
     z-index: 1000;
     padding: 1rem;
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
     background: rgba(var(--bg-rgb), 0.8);
-    border-bottom: 2px solid var(--border-color);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 nav {
@@ -99,7 +98,6 @@ nav {
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 1rem;
 }
 
 .nav-group {
@@ -305,6 +303,109 @@ main {
     }
 }
 
+/* Menu Overlay */
+.menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(var(--bg-rgb), 0.98);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.menu-overlay.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.menu-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+}
+
+.menu-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.menu-item {
+    font-size: 2rem;
+    color: var(--text-color);
+    text-decoration: none;
+    position: relative;
+    padding: 0.5rem;
+    transition: color 0.3s ease;
+}
+
+.menu-item::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 2px;
+    background: var(--accent-color);
+    transition: width 0.3s ease, left 0.3s ease;
+}
+
+.menu-item:hover {
+    color: var(--accent-color);
+}
+
+.menu-item:hover::after {
+    width: 100%;
+    left: 0;
+}
+
+.menu-item.active {
+    color: var(--accent-color);
+}
+
+.menu-item.active::after {
+    width: 100%;
+    left: 0;
+}
+
+/* Update menu toggle button */
+.menu-toggle {
+    z-index: 1000;
+}
+
+.menu-toggle span {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background: var(--text-color);
+    margin: 5px 0;
+    transition: transform 0.3s ease,
+                opacity 0.3s ease;
+}
+
+.menu-toggle.active span:nth-child(1) {
+    transform: rotate(45deg) translate(5px, 5px);
+}
+
+.menu-toggle.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.menu-toggle.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
+}
+
 /* Floating button styles */
 .floating-button {
     position: relative;
@@ -1619,3 +1720,34 @@ section.visible {
         max-height: 50vh;
     }
 }
+
+/* Seokjin images */
+.seokjin-container {
+    position: relative;
+    width: 300px;
+    height: 300px;
+    margin: 0 auto;
+    margin-bottom: 2rem;
+}
+
+.seokjin-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: opacity 0.3s ease;
+}
+
+.seokjin-image.confused {
+    opacity: 0;
+}
+
+.seokjin-container:hover .seokjin-image {
+    opacity: 0;
+}
+
+.seokjin-container:hover .seokjin-image.confused {
+    opacity: 1;
+}