Update index.html

index.html

@@ -34,7 +34,7 @@
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 1.5rem; /* Reduced padding for mobile */
+            padding: 0 1.5rem;
         }
 
         .japanese-label {
@@ -83,7 +83,6 @@
             z-index: 101;
         }
 
-        /* Desktop Menu */
         .nav-links { display: flex; gap: 2rem; }
         .nav-links a {
             color: var(--text-muted);
@@ -93,7 +92,6 @@
         }
         .nav-links a:hover { color: var(--accent-red); }
 
-        /* Mobile Menu Toggle (Hidden on Desktop) */
         .menu-toggle {
             display: none;
             cursor: pointer;
@@ -112,9 +110,11 @@
 
         .hero-content {
             display: grid;
-            grid-template-columns: auto 1fr;
-            gap: 4rem;
+            /* Updated Grid: Name | Image | Text */
+            grid-template-columns: auto 300px 1fr; 
+            gap: 3rem;
             align-items: center;
+            width: 100%;
         }
 
         .name-vertical {
@@ -130,6 +130,47 @@
             white-space: nowrap;
         }
 
+        /* --- PROFILE IMAGE STYLING --- */
+        .hero-img-container {
+            width: 100%;
+            height: 400px;
+            position: relative;
+            border: 1px solid #333;
+            overflow: hidden;
+        }
+
+        .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;
+        }
+
+        /* Color reveal on hover */
+        .hero-img-container:hover .hero-img {
+            filter: grayscale(0%) contrast(100%);
+            transform: scale(1.05);
+        }
+
+        /* Decorative "Corners" for the image */
+        .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,
+                linear-gradient(to left, var(--accent-red) 2px, transparent 2px) 100% 100%,
+                linear-gradient(to top, var(--accent-red) 2px, transparent 2px) 100% 100%;
+            background-repeat: no-repeat;
+            background-size: 20px 20px;
+            pointer-events: none;
+        }
+
         .hero-text h2 {
             font-size: 2.5rem;
             font-weight: 100;
@@ -174,7 +215,7 @@
             font-weight: 100;
         }
 
-        /* --- SKILLS GRID --- */
+        /* --- SKILLS & PROJECTS --- */
         .skills-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -187,12 +228,9 @@
             padding: 1.5rem;
             transition: 0.3s;
         }
-
-        .skill-card h3 { margin-bottom: 1rem; font-size: 1.1rem; color: #fff; }
         .skill-card li { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
         .skill-card li::before { content: ':: '; color: var(--accent-red); }
 
-        /* --- PROJECTS --- */
         .project-item {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -211,58 +249,39 @@
             align-items: center;
         }
 
-        /* --- FOOTER --- */
         footer {
-            padding: 4rem 0 6rem 0; /* Extra bottom padding for mobile browsers */
+            padding: 4rem 0 6rem 0;
             text-align: center;
             border-top: 1px solid var(--accent-red);
             margin-top: 2rem;
         }
-
         .stamp {
-            width: 50px;
-            height: 50px;
+            width: 50px; height: 50px;
             border: 2px solid var(--accent-red);
             border-radius: 50%;
             color: var(--accent-red);
-            display: flex;
-            justify-content: center;
-            align-items: center;
+            display: flex; justify-content: center; align-items: center;
             margin: 0 auto 1.5rem auto;
             font-family: var(--font-serif);
             font-weight: 900;
         }
 
         /* --- MOBILE MEDIA QUERIES --- */
-        @media (max-width: 768px) {
-            
-            /* Nav Mobile Overlay */
-            .menu-toggle { display: block; }
-            
-            .nav-links {
-                position: fixed;
-                top: 0; right: -100%;
-                width: 70%;
-                height: 100vh;
-                background: #111;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                gap: 3rem;
-                transition: 0.4s ease;
-                border-left: 1px solid var(--accent-red);
-            }
-
-            .nav-links.active { right: 0; }
-            .nav-links a { font-size: 1.2rem; }
-
-            /* Hero Mobile */
+        @media (max-width: 900px) {
             .hero-content {
                 grid-template-columns: 1fr;
                 text-align: center;
                 gap: 2rem;
             }
 
+            /* Image styling for mobile */
+            .hero-img-container {
+                width: 200px;
+                height: 200px;
+                margin: 0 auto;
+                border-radius: 50%; /* Circle on mobile */
+            }
+
             .name-vertical {
                 writing-mode: horizontal-tb;
                 border-right: none;
@@ -272,19 +291,17 @@
                 font-size: 3rem;
                 width: 100%;
             }
-
-            .hero-text h2 { font-size: 1.8rem; }
             
-            /* Projects Mobile */
-            .project-item {
-                grid-template-columns: 1fr;
-                gap: 2rem;
-                margin-bottom: 4rem;
+            .menu-toggle { display: block; }
+            .nav-links {
+                position: fixed; top: 0; right: -100%; width: 70%; height: 100vh;
+                background: #111; flex-direction: column; justify-content: center;
+                align-items: center; gap: 3rem; transition: 0.4s ease;
+                border-left: 1px solid var(--accent-red);
             }
-
-            /* Order: Diagram first on mobile? Optional. keeping text first is standard. */
+            .nav-links.active { right: 0; }
             
-            .container { padding: 0 1.2rem; }
+            .project-item { grid-template-columns: 1fr; }
         }
     </style>
 </head>
@@ -306,6 +323,11 @@
     <header class="hero container">
         <div class="hero-content">
             <h1 class="name-vertical">アーケイン</h1>
+            
+            <div class="hero-img-container">
+                <img src="./profile.jpg" alt="Arcane Profile" class="hero-img">
+            </div>
+
             <div class="hero-text">
                 <span class="japanese-label">BACKEND ARCHITECT</span>
                 <h2>Logic in the<br>Shadows.</h2>
@@ -391,13 +413,10 @@
     </footer>
 
     <script>
-        // Toggle Mobile Menu
         function toggleMenu() {
-            const nav = document.getElementById('navLinks');
-            nav.classList.toggle('active');
+            document.getElementById('navLinks').classList.toggle('active');
         }
 
-        // Scroll Animation
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {