index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home | Sam Wu</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
  <header class="bg-blue-900 text-white py-4">
  <div class="max-w-4xl mx-auto px-6 flex items-center justify-between">
    <a href="index.html" class="text-2xl font-bold hover:underline">Sam Wu</a>
    <button class="md:hidden" id="menu-button">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>
  <nav class="hidden md:flex max-w-4xl mx-auto px-6 flex-wrap justify-between gap-x-6 text-sm md:text-base mt-4 md:mt-2 md:flex-row flex-col text-center" id="menu">
  <a href="projects.html" class="hover:underline block py-1">Research Project</a>
  <a href="experience.html" class="hover:underline block py-1">Work Experience</a>
  <a href="volunteer.html" class="hover:underline block py-1">Volunteer Activity</a>
  <a href="honors.html" class="hover:underline block py-1">Honors and Awards</a>
</nav>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const button = document.getElementById('menu-button');
      const menu = document.getElementById('menu');
      button.addEventListener('click', () => {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</header>

  
  <main class="max-w-4xl mx-auto p-6 space-y-8">
    <!-- Hello Image and Intro -->
    <section>
      
      <div class="text-center">
        <h2 class="text-2xl md:text-4xl font-bold">Hi, I’m Nien-Cheng (Sam) Wu 吳念澄</h2>
        <p class="text-sm md:text-4x1 text-gray-600 my-4">"I loves exploring the unknown and embracing challenges."</p>
      </div>
      <img src="images/home_1.jpg" alt="Hello Image" class="w-full object-cover rounded-lg my-8">

      <p class="mb-6">
        I’m a student majoring in Power Mechanical Engineering at National Tsing Hua University, just completed the Undergraduate Research Opportunities Program (UROP) at MIT City Science Lab this past summer.
      </p>
      <p class="mb-6">
        My research interests lie in control systems and robotics. Recently, I was honored with the Dr. Mei Yi-Chi Memorial Prize, an award presented to students who have made outstanding contributions to National Tsing Hua University. This recognition is not only a milestone but also a reminder of my aspiration to make a positive impact on the world through engineering.
      </p>
      <p class="mb-6">
        If you share similar interests or values, feel free to explore my website or connect with me on <a href="https://www.linkedin.com/in/nien-cheng-wu-40ba13238/" target="_blank" class="text-blue-600 underline">LinkedIn</a>.
      </p>
      <h2 class="text-2xl font-semibold mt-12 text-center">More About Me</h2>
      <p class="mt-4">
        I’m passionate about sports, particularly tennis and baseball. Traveling is another great joy of mine, as it allows me to ecplore the beauty of the world. During downtime, I enjoy reading and listening to music. Lately, I’ve been especially drawn to the writings of Wu Ming-Yi(吳明益), and opera has become my favorite genre to unwind to.
      </p>
      
    </section>

  <footer class="text-center text-sm text-gray-600 py-4 bg-gray-200 mt-12">
    &copy; 2025 Sam Wu. All rights reserved.
  </footer>
</body>
</html>