Update index.html

index.html

@@ -30,6 +30,21 @@
             line-height: 1.6;
         }
 
+        /* --- KEYFRAMES --- */
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes glitch {
+            0% { transform: translate(0); }
+            20% { transform: translate(-2px, 2px); }
+            40% { transform: translate(-2px, -2px); }
+            60% { transform: translate(2px, 2px); }
+            80% { transform: translate(2px, -2px); }
+            100% { transform: translate(0); }
+        }
+
         /* --- UTILITIES --- */
         .container {
             max-width: 1200px;
@@ -81,7 +96,9 @@
             border: 1px solid var(--text-main);
             padding: 4px 10px;
             z-index: 101;
+            transition: 0.3s;
         }
+        .logo:hover { background: var(--text-main); color: var(--bg-color); }
 
         .nav-links { display: flex; gap: 2rem; }
         .nav-links a {
@@ -110,7 +127,6 @@
 
         .hero-content {
             display: grid;
-            /* Updated Grid: Name | Image | Text */
             grid-template-columns: auto 300px 1fr; 
             gap: 3rem;
             align-items: center;
@@ -128,39 +144,63 @@
             padding-right: 2rem;
             letter-spacing: 0.5rem;
             white-space: nowrap;
+            /* Glitch Animation trigger class */
+        }
+        
+        .glitch-effect:hover {
+            animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
+            color: var(--accent-red);
         }
 
-        /* --- PROFILE IMAGE STYLING --- */
+        /* --- PROFILE IMAGE & LOADER --- */
         .hero-img-container {
             width: 100%;
             height: 400px;
             position: relative;
             border: 1px solid #333;
             overflow: hidden;
+            background: #111;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        /* Loading Spinner */
+        .img-loader {
+            width: 50px;
+            height: 50px;
+            border: 2px solid transparent;
+            border-top: 2px solid var(--accent-red);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            position: absolute;
+            z-index: 1;
         }
 
         .hero-img {
             width: 100%;
             height: 100%;
             object-fit: cover;
-            /* Manga Style Filter: Black & White + High Contrast */
             filter: grayscale(100%) contrast(120%);
             transition: filter 0.5s ease, transform 0.5s ease;
+            opacity: 0; /* Hidden until loaded */
+            position: relative;
+            z-index: 2;
         }
 
-        /* Color reveal on hover */
+        .hero-img.loaded { opacity: 1; }
+
         .hero-img-container:hover .hero-img {
             filter: grayscale(0%) contrast(100%);
             transform: scale(1.05);
         }
 
-        /* Decorative "Corners" for the image */
+        /* Decorative Corners */
         .hero-img-container::after {
             content: '';
             position: absolute;
             top: 0; left: 0; width: 100%; height: 100%;
             border: 1px solid transparent;
-            /* Top Left and Bottom Right Red Accents */
             background: 
                 linear-gradient(to right, var(--accent-red) 2px, transparent 2px) 0 0,
                 linear-gradient(to bottom, var(--accent-red) 2px, transparent 2px) 0 0,
@@ -169,6 +209,7 @@
             background-repeat: no-repeat;
             background-size: 20px 20px;
             pointer-events: none;
+            z-index: 3;
         }
 
         .hero-text h2 {
@@ -201,6 +242,7 @@
         .btn:hover {
             background: var(--accent-red);
             color: var(--bg-color);
+            box-shadow: 0 0 15px var(--accent-red);
         }
 
         /* --- SECTIONS --- */
@@ -228,6 +270,11 @@
             padding: 1.5rem;
             transition: 0.3s;
         }
+        .skill-card:hover {
+            border-color: var(--accent-red);
+            transform: translateY(-5px);
+        }
+
         .skill-card li { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
         .skill-card li::before { content: ':: '; color: var(--accent-red); }
 
@@ -247,7 +294,9 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            transition: 0.3s;
         }
+        .project-diagram:hover { border-color: var(--accent-red); }
 
         footer {
             padding: 4rem 0 6rem 0;
@@ -264,7 +313,10 @@
             margin: 0 auto 1.5rem auto;
             font-family: var(--font-serif);
             font-weight: 900;
+            cursor: pointer;
+            transition: 0.3s;
         }
+        .stamp:hover { background: var(--accent-red); color: #000; }
 
         /* --- MOBILE MEDIA QUERIES --- */
         @media (max-width: 900px) {
@@ -273,15 +325,11 @@
                 text-align: center;
                 gap: 2rem;
             }
-
-            /* Image styling for mobile */
             .hero-img-container {
-                width: 200px;
-                height: 200px;
+                width: 200px; height: 200px;
                 margin: 0 auto;
-                border-radius: 50%; /* Circle on mobile */
+                border-radius: 50%;
             }
-
             .name-vertical {
                 writing-mode: horizontal-tb;
                 border-right: none;
@@ -291,7 +339,6 @@
                 font-size: 3rem;
                 width: 100%;
             }
-            
             .menu-toggle { display: block; }
             .nav-links {
                 position: fixed; top: 0; right: -100%; width: 70%; height: 100vh;
@@ -300,7 +347,6 @@
                 border-left: 1px solid var(--accent-red);
             }
             .nav-links.active { right: 0; }
-            
             .project-item { grid-template-columns: 1fr; }
         }
     </style>
@@ -322,16 +368,17 @@
 
     <header class="hero container">
         <div class="hero-content">
-            <h1 class="name-vertical">アーケイン</h1>
+            <h1 class="name-vertical glitch-effect">アーケイン</h1>
             
             <div class="hero-img-container">
-                <img src="./profile.jpg" alt="Arcane Profile" class="hero-img">
+                <div class="img-loader" id="imgLoader"></div>
+                <img src="./profile.jpg" alt="Arcane Profile" class="hero-img" onload="imageLoaded()">
             </div>
 
             <div class="hero-text">
                 <span class="japanese-label">BACKEND ARCHITECT</span>
                 <h2>Logic in the<br>Shadows.</h2>
-                <p>Specialized in high-load server environments, distributed database management, and algorithmic efficiency.</p>
+                <p>Specialized in high-load server environments, Node.js scalability, and algorithmic efficiency.</p>
                 <a href="#contact" class="btn">INITIATE_CONTACT()</a>
             </div>
         </div>
@@ -344,6 +391,7 @@
             <div class="skill-card">
                 <h3>Core Languages</h3>
                 <ul>
+                    <li>Node.js (Express/NestJS)</li>
                     <li>Python (FastAPI)</li>
                     <li>Go (Golang)</li>
                     <li>Rust (Systems)</li>
@@ -355,14 +403,16 @@
                     <li>PostgreSQL (Tuning)</li>
                     <li>Redis Cluster</li>
                     <li>Kafka / RabbitMQ</li>
+                    <li>MongoDB Aggregation</li>
                 </ul>
             </div>
             <div class="skill-card">
                 <h3>Infrastructure</h3>
                 <ul>
-                    <li>Docker & K8s</li>
+                    <li>Docker & Kubernetes</li>
                     <li>AWS (EC2, Lambda)</li>
-                    <li>Terraform</li>
+                    <li>Terraform / Ansible</li>
+                    <li>Nginx Reverse Proxy</li>
                 </ul>
             </div>
         </div>
@@ -413,10 +463,21 @@
     </footer>
 
     <script>
+        // Toggle Mobile Menu
         function toggleMenu() {
             document.getElementById('navLinks').classList.toggle('active');
         }
 
+        // Image Load Handler
+        function imageLoaded() {
+            const img = document.querySelector('.hero-img');
+            const loader = document.getElementById('imgLoader');
+            
+            img.classList.add('loaded'); // Reveal image
+            loader.style.display = 'none'; // Hide spinner
+        }
+
+        // Intersection Observer for Scroll Animations
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -424,8 +485,9 @@
                     entry.target.style.transform = 'translateY(0)';
                 }
             });
-        });
+        }, { threshold: 0.1 });
 
+        // Apply animations to elements
         document.querySelectorAll('.skill-card, .project-item').forEach((el) => {
             el.style.opacity = 0;
             el.style.transform = 'translateY(30px)';