Update port.html

port.html

@@ -13,10 +13,11 @@
         :root {
             --bg-color: #0a0a0a;
             --text-main: #e0e0e0;
-            --text-muted: #666;
-            --accent-red: #cf0000; /* Japanese Stamp Red */
+            --text-muted: #888;
+            --accent-red: #cf0000;
             --font-code: 'JetBrains Mono', monospace;
             --font-serif: 'Noto Serif JP', serif;
+            --nav-height: 70px;
         }
 
         * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -33,16 +34,17 @@
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 2rem;
+            padding: 0 1.5rem; /* Reduced padding for mobile */
         }
 
         .japanese-label {
             font-family: var(--font-serif);
             color: var(--accent-red);
-            font-size: 0.9rem;
+            font-size: 0.8rem;
             letter-spacing: 0.1rem;
             margin-bottom: 0.5rem;
             display: block;
+            text-transform: uppercase;
         }
 
         /* --- BACKGROUND GRID --- */
@@ -62,49 +64,59 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 2rem;
+            height: var(--nav-height);
+            padding: 0 1.5rem;
             position: fixed;
             width: 100%;
             top: 0;
             z-index: 100;
-            background: rgba(10, 10, 10, 0.9);
-            backdrop-filter: blur(5px);
+            background: rgba(10, 10, 10, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255,255,255,0.05);
         }
 
         .logo {
             font-weight: 700;
-            letter-spacing: -1px;
-            font-size: 1.5rem;
+            font-size: 1.2rem;
             border: 1px solid var(--text-main);
-            padding: 5px 10px;
+            padding: 4px 10px;
+            z-index: 101;
         }
 
+        /* Desktop Menu */
+        .nav-links { display: flex; gap: 2rem; }
         .nav-links a {
             color: var(--text-muted);
             text-decoration: none;
-            margin-left: 2rem;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             transition: color 0.3s;
         }
-
         .nav-links a:hover { color: var(--accent-red); }
 
+        /* Mobile Menu Toggle (Hidden on Desktop) */
+        .menu-toggle {
+            display: none;
+            cursor: pointer;
+            z-index: 101;
+            font-size: 1.5rem;
+            color: var(--text-main);
+        }
+
         /* --- HERO SECTION --- */
         .hero {
-            height: 100vh;
+            min-height: 100vh;
             display: flex;
             align-items: center;
-            position: relative;
+            padding-top: var(--nav-height);
         }
 
         .hero-content {
             display: grid;
-            grid-template-columns: 1fr 2fr;
+            grid-template-columns: auto 1fr;
             gap: 4rem;
             align-items: center;
         }
 
-        /* Vertical Text Name */
         .name-vertical {
             font-family: var(--font-serif);
             font-size: 5rem;
@@ -115,30 +127,34 @@
             border-right: 1px solid var(--accent-red);
             padding-right: 2rem;
             letter-spacing: 0.5rem;
+            white-space: nowrap;
         }
 
         .hero-text h2 {
-            font-size: 2rem;
+            font-size: 2.5rem;
             font-weight: 100;
             margin-bottom: 1rem;
+            line-height: 1.2;
         }
 
         .hero-text p {
             color: var(--text-muted);
             max-width: 500px;
             margin-bottom: 2rem;
+            font-size: 1rem;
         }
 
         .btn {
             background: transparent;
             border: 1px solid var(--accent-red);
             color: var(--accent-red);
-            padding: 10px 30px;
+            padding: 12px 35px;
             cursor: pointer;
             font-family: var(--font-code);
             transition: 0.3s;
             text-decoration: none;
             display: inline-block;
+            font-size: 0.9rem;
         }
 
         .btn:hover {
@@ -148,119 +164,127 @@
 
         /* --- SECTIONS --- */
         section {
-            padding: 6rem 0;
+            padding: 5rem 0;
             border-bottom: 1px solid rgba(255,255,255,0.05);
         }
 
         .section-title {
-            font-size: 2.5rem;
-            margin-bottom: 4rem;
+            font-size: 2rem;
+            margin-bottom: 3rem;
             font-weight: 100;
         }
 
         /* --- SKILLS GRID --- */
         .skills-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 2rem;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 1.5rem;
         }
 
         .skill-card {
+            background: rgba(255,255,255,0.02);
             border: 1px solid rgba(255,255,255,0.1);
-            padding: 2rem;
-            transition: 0.3s;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .skill-card:hover {
-            border-color: var(--accent-red);
-            transform: translateY(-5px);
-        }
-
-        .skill-card::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; width: 3px; height: 100%;
-            background: var(--accent-red);
-            opacity: 0;
+            padding: 1.5rem;
             transition: 0.3s;
         }
 
-        .skill-card:hover::before { opacity: 1; }
-
-        .skill-card h3 { margin-bottom: 1rem; font-size: 1.2rem; }
-        .skill-card ul { list-style: none; color: var(--text-muted); }
-        .skill-card li { margin-bottom: 0.5rem; font-size: 0.9rem; }
-        .skill-card li::before { content: '> '; color: var(--accent-red); }
+        .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); }
 
-        /* --- PROJECT DIAGRAM STYLE --- */
+        /* --- PROJECTS --- */
         .project-item {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 4rem;
-            margin-bottom: 6rem;
+            gap: 3rem;
+            margin-bottom: 5rem;
             align-items: center;
         }
 
         .project-diagram {
-            background: #111;
-            border: 1px solid #333;
-            height: 300px;
+            background: #0f0f0f;
+            border: 1px solid #222;
+            height: 250px;
+            position: relative;
             display: flex;
             justify-content: center;
             align-items: center;
-            position: relative;
-        }
-
-        /* Abstract Node Representation */
-        .node {
-            width: 15px;
-            height: 15px;
-            background: var(--accent-red);
-            position: absolute;
-            border-radius: 50%;
-        }
-        .line {
-            position: absolute;
-            height: 1px;
-            background: #333;
         }
 
         /* --- FOOTER --- */
         footer {
-            padding: 4rem 0;
+            padding: 4rem 0 6rem 0; /* Extra bottom padding for mobile browsers */
             text-align: center;
             border-top: 1px solid var(--accent-red);
-            margin-top: 4rem;
+            margin-top: 2rem;
         }
 
         .stamp {
-            width: 60px;
-            height: 60px;
+            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;
-            margin: 0 auto 2rem auto;
+            margin: 0 auto 1.5rem auto;
             font-family: var(--font-serif);
             font-weight: 900;
         }
 
-        /* --- RESPONSIVE --- */
+        /* --- MOBILE MEDIA QUERIES --- */
         @media (max-width: 768px) {
-            .hero-content { grid-template-columns: 1fr; text-align: center; }
-            .name-vertical { 
-                writing-mode: horizontal-tb; 
-                border-right: none; 
+            
+            /* 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 */
+            .hero-content {
+                grid-template-columns: 1fr;
+                text-align: center;
+                gap: 2rem;
+            }
+
+            .name-vertical {
+                writing-mode: horizontal-tb;
+                border-right: none;
                 border-bottom: 1px solid var(--accent-red);
                 padding-bottom: 1rem;
-                margin-bottom: 2rem;
+                padding-right: 0;
                 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;
             }
-            .project-item { grid-template-columns: 1fr; }
+
+            /* Order: Diagram first on mobile? Optional. keeping text first is standard. */
+            
+            .container { padding: 0 1.2rem; }
         }
     </style>
 </head>
@@ -268,13 +292,14 @@
 
     <div class="grid-bg"></div>
 
-    <nav class="container">
+    <nav>
         <div class="logo">ARCANE</div>
-        <div class="nav-links">
-            <a href="#about">01. LOGIC</a>
-            <a href="#skills">02. SYSTEM</a>
-            <a href="#projects">03. ARCHITECTURE</a>
-            <a href="#contact">04. CONTACT</a>
+        <div class="menu-toggle" onclick="toggleMenu()">☰</div>
+        <div class="nav-links" id="navLinks">
+            <a href="#about" onclick="toggleMenu()">01. LOGIC</a>
+            <a href="#skills" onclick="toggleMenu()">02. SYSTEM</a>
+            <a href="#projects" onclick="toggleMenu()">03. ARCHITECTURE</a>
+            <a href="#contact" onclick="toggleMenu()">04. CONTACT</a>
         </div>
     </nav>
 
@@ -282,53 +307,40 @@
         <div class="hero-content">
             <h1 class="name-vertical">アーケイン</h1>
             <div class="hero-text">
-                <span class="japanese-label">BACKEND SPECIALIST</span>
-                <h2>Architecting the Invisible.</h2>
-                <p>I design high-availability servers, optimize database logic, and craft algorithms that run in the dark. Silence is efficient.</p>
-                <a href="#contact" class="btn">INITIATE CONTACT</a>
+                <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>
+                <a href="#contact" class="btn">INITIATE_CONTACT()</a>
             </div>
         </div>
     </header>
 
     <section id="skills" class="container">
         <span class="japanese-label">ARSENAL</span>
-        <h2 class="section-title">Technical Specifications</h2>
-        
+        <h2 class="section-title">Tech Stack</h2>
         <div class="skills-grid">
             <div class="skill-card">
-                <h3>Server & Core</h3>
+                <h3>Core Languages</h3>
                 <ul>
-                    <li>Python (FastAPI / Django)</li>
+                    <li>Python (FastAPI)</li>
                     <li>Go (Golang)</li>
-                    <li>Rust</li>
-                    <li>Node.js</li>
+                    <li>Rust (Systems)</li>
                 </ul>
             </div>
             <div class="skill-card">
-                <h3>Data Persistence</h3>
+                <h3>Data & Storage</h3>
                 <ul>
-                    <li>PostgreSQL (Advanced)</li>
-                    <li>Redis / Caching Strategies</li>
-                    <li>MongoDB / NoSQL</li>
-                    <li>ElasticSearch</li>
+                    <li>PostgreSQL (Tuning)</li>
+                    <li>Redis Cluster</li>
+                    <li>Kafka / RabbitMQ</li>
                 </ul>
             </div>
             <div class="skill-card">
-                <h3>DevOps & Infra</h3>
+                <h3>Infrastructure</h3>
                 <ul>
-                    <li>Docker / Kubernetes</li>
-                    <li>AWS / GCP</li>
-                    <li>CI/CD Pipelines</li>
-                    <li>Nginx / Apache</li>
-                </ul>
-            </div>
-            <div class="skill-card">
-                <h3>Algorithm Strategy</h3>
-                <ul>
-                    <li>System Design</li>
-                    <li>Big O Optimization</li>
-                    <li>Data Structures</li>
-                    <li>Distributed Systems</li>
+                    <li>Docker & K8s</li>
+                    <li>AWS (EC2, Lambda)</li>
+                    <li>Terraform</li>
                 </ul>
             </div>
         </div>
@@ -336,38 +348,38 @@
 
     <section id="projects" class="container">
         <span class="japanese-label">CASE STUDIES</span>
-        <h2 class="section-title">System Architecture</h2>
+        <h2 class="section-title">Selected Works</h2>
 
         <div class="project-item">
             <div class="project-info">
-                <h3>Project: KITSUNE</h3>
-                <p style="color:var(--accent-red); margin-bottom: 1rem;">Algorithmic Trading Bot</p>
-                <p style="color:var(--text-muted);">
-                    Engineered a low-latency trading engine capable of processing 500 requests per second. Implemented a custom sharding strategy for the database to handle historical tick data efficiently.
+                <h3>KITSUNE | Trading Bot</h3>
+                <p style="color:var(--text-muted); font-size: 0.95rem; margin-top: 1rem;">
+                    A high-frequency trading algorithm handling 500 req/s. 
+                    <br><br>
+                    <span style="color:var(--accent-red)">> Strategy:</span> Database sharding & in-memory caching reduced latency by 90%.
                 </p>
             </div>
             <div class="project-diagram">
-                <div class="line" style="width: 80%; top: 50%; left: 10%;"></div>
-                <div class="node" style="left: 20%; top: 48%;"></div>
-                <div class="node" style="left: 50%; top: 48%; background: #fff;"></div>
-                <div class="node" style="left: 80%; top: 48%;"></div>
-                <div style="position:absolute; bottom: 10px; right: 10px; font-size: 0.7rem; color: #444;">FIG 1.0</div>
+                <div style="width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 20%;"></div>
+                <div style="width: 60%; height: 1px; background: #333; position: absolute;"></div>
+                <div style="width: 10px; height: 10px; background: var(--accent-red); border-radius: 50%; position: absolute; right: 20%;"></div>
+                <div style="position:absolute; bottom:10px; right:10px; font-size:0.7rem; color:#555;">FIG 1.0</div>
             </div>
         </div>
 
         <div class="project-item">
             <div class="project-info">
-                <h3>Project: RONIN API</h3>
-                <p style="color:var(--accent-red); margin-bottom: 1rem;">Distributed Payment Gateway</p>
-                <p style="color:var(--text-muted);">
-                    Designed a fault-tolerant microservices architecture using Go and gRPC. Reduced server response time by 40% through aggressive caching layers and asynchronous processing.
+                <h3>RONIN | Payment Gateway</h3>
+                <p style="color:var(--text-muted); font-size: 0.95rem; margin-top: 1rem;">
+                    Fault-tolerant microservices architecture.
+                    <br><br>
+                    <span style="color:var(--accent-red)">> Strategy:</span> Implemented idempotency keys and eventual consistency models.
                 </p>
             </div>
             <div class="project-diagram">
-                 <div class="line" style="width: 1px; height: 60%; top: 20%; left: 50%;"></div>
-                 <div class="node" style="left: 48%; top: 20%;"></div>
-                 <div class="node" style="left: 48%; top: 80%;"></div>
-                 <div style="position:absolute; bottom: 10px; right: 10px; font-size: 0.7rem; color: #444;">FIG 1.1</div>
+                 <div style="border: 1px dashed #444; width: 40%; height: 60%; position: absolute;"></div>
+                 <div style="width: 10px; height: 10px; background: var(--accent-red); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
+                 <div style="position:absolute; bottom:10px; right:10px; font-size:0.7rem; color:#555;">FIG 1.1</div>
             </div>
         </div>
     </section>
@@ -375,12 +387,17 @@
     <footer id="contact">
         <div class="stamp">秘</div>
         <h3>TRANSMISSION LINK</h3>
-        <p style="color: var(--text-muted); margin: 1rem 0;">arcane.dev@example.com</p>
-        <p style="font-size: 0.8rem; opacity: 0.5;">© 2024 ARCANE SYSTEMS</p>
+        <p style="color: var(--text-muted); margin: 1rem 0;">arcane@dev.system</p>
     </footer>
 
     <script>
-        // Simple Reveal Animation on Scroll
+        // Toggle Mobile Menu
+        function toggleMenu() {
+            const nav = document.getElementById('navLinks');
+            nav.classList.toggle('active');
+        }
+
+        // Scroll Animation
         const observer = new IntersectionObserver((entries) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
@@ -392,7 +409,7 @@
 
         document.querySelectorAll('.skill-card, .project-item').forEach((el) => {
             el.style.opacity = 0;
-            el.style.transform = 'translateY(20px)';
+            el.style.transform = 'translateY(30px)';
             el.style.transition = 'all 0.6s ease-out';
             observer.observe(el);
         });