|
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | | - <title>Thongchai Tantawat</title> |
| 6 | + <title>โปรไฟล์ของ ธงชัย ตัณฑวัฒน์</title> |
7 | 7 | <script src="https://cdn.tailwindcss.com"></script> |
8 | 8 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
9 | 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
56 | 56 | transform: translateY(-2px); |
57 | 57 | box-shadow: 0 4px 10px rgba(199, 146, 234, 0.2); |
58 | 58 | } |
| 59 | + /* Hamburger Animation Styles */ |
| 60 | + .hamburger-line { |
| 61 | + position: absolute; |
| 62 | + left: 0; |
| 63 | + width: 100%; |
| 64 | + height: 2px; |
| 65 | + background-color: currentColor; |
| 66 | + border-radius: 9999px; |
| 67 | + transition: all 0.3s ease-in-out; |
| 68 | + } |
| 69 | + #mobile-menu-button.menu-open .hamburger-line:nth-child(2) { /* Top line */ |
| 70 | + top: 50%; |
| 71 | + transform: translateY(-50%) rotate(45deg); |
| 72 | + } |
| 73 | + #mobile-menu-button.menu-open .hamburger-line:nth-child(3) { /* Middle line */ |
| 74 | + opacity: 0; |
| 75 | + } |
| 76 | + #mobile-menu-button.menu-open .hamburger-line:nth-child(4) { /* Bottom line */ |
| 77 | + top: 50%; |
| 78 | + transform: translateY(-50%) rotate(-45deg); |
| 79 | + } |
59 | 80 | </style> |
60 | 81 | </head> |
61 | 82 | <body class="leading-relaxed"> |
|
72 | 93 | <a href="#projects" class="hover:text-variable transition-colors duration-200">/projects</a> |
73 | 94 | <a href="#contact" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200">contact()</a> |
74 | 95 | </div> |
75 | | - <button id="mobile-menu-button" class="md:hidden text-white"> |
76 | | - <i data-feather="menu"></i> |
| 96 | + <button id="mobile-menu-button" class="md:hidden text-white w-8 h-8 relative focus:outline-none"> |
| 97 | + <span class="sr-only">Toggle Menu</span> |
| 98 | + <span class="hamburger-line top-[25%]"></span> |
| 99 | + <span class="hamburger-line top-[50%] -translate-y-1/2"></span> |
| 100 | + <span class="hamburger-line top-[75%] -translate-y-1/2"></span> |
77 | 101 | </button> |
78 | 102 | </div> |
79 | 103 | <!-- Mobile Menu --> |
|
91 | 115 | <div class="container mx-auto px-6 py-12 md:py-20"> |
92 | 116 |
|
93 | 117 | <!-- Hero Section --> |
94 | | - <header class="text-center min-h-[40vh] flex flex-col justify-center items-center"> |
| 118 | + <header class="text-center min-h-[60vh] flex flex-col justify-center items-center"> |
95 | 119 | <div class="w-full max-w-3xl"> |
96 | 120 | <div class="rounded-lg shadow-2xl overflow-hidden border border-gray-700"> |
97 | 121 | <div class="terminal-header p-3 flex items-center"> |
|
102 | 126 | </div> |
103 | 127 | <p class="flex-grow text-center text-sm text-gray-400 font-fira">/bin/bash</p> |
104 | 128 | </div> |
105 | | - <div class="terminal-body p-8 text-left font-fira text-sm md:text-base"> |
| 129 | + <div class="terminal-body p-4 md:p-8 text-left font-fira text-sm md:text-base"> |
106 | 130 | <p><span class="text-green-400">user@portfolio</span><span class="text-white">:</span><span class="text-blue-400">~</span>$ <span id="typewriter" class="text-white cursor"></span></p> |
107 | 131 | </div> |
108 | 132 | </div> |
@@ -347,12 +371,14 @@ <h2 class="text-3xl font-bold mb-4 font-fira"><span class="text-comment">// 06.< |
347 | 371 | const mobileMenu = document.getElementById('mobile-menu'); |
348 | 372 | mobileMenuButton.addEventListener('click', () => { |
349 | 373 | mobileMenu.classList.toggle('hidden'); |
| 374 | + mobileMenuButton.classList.toggle('menu-open'); |
350 | 375 | }); |
351 | 376 |
|
352 | 377 | // Close mobile menu on link click |
353 | 378 | document.querySelectorAll('#mobile-menu a').forEach(link => { |
354 | 379 | link.addEventListener('click', () => { |
355 | 380 | mobileMenu.classList.add('hidden'); |
| 381 | + mobileMenuButton.classList.remove('menu-open'); |
356 | 382 | }); |
357 | 383 | }); |
358 | 384 |
|
|
0 commit comments