```html



   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Project2
   <script src="/tailwindcss.js">"></script>
   <style>
    .glass {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .project-image {
      transition: transform 0.3s ease-in-out;
    }
    .project-image:hover {
      transform: scale(1.05);
    }
   </style>


   <header class="glass text-white p-4 text-center sticky top-0 z-10">
     <nav>
       <ul class="flex justify-center space-x-4">
         <li>><a href="/projects.html" class="hover:underline">Projects
         <li>><a href="/about.html" class="hover:underline">About
       </ul>
     </nav>
   </header>
   <main class="p-8 mt-16">
     <section class="project-details glass p-8 rounded-lg shadow-lg">
       <h1 class="text-4xl font-bold mb-4 text-white">Project2
       <p class="mb-4 text-gray-200">This is a description of Project2. It demonstrates advanced design patterns and interactive web components..</p>
       <img src="/projects/project2.svg" alt="Project2 Screenshot" class="w-full h-auto mb-4 project-image rounded-lg"/>
       <div class="flex justify-center space-x-4">
         <button onclick="showModal()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">View More
         <a href="/projects/project2-edit.html" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Edit Project
       </div>
     </section>
   </main>
   <div id="modal" class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center hidden">
     <div class="glass p-8 rounded-lg shadow-lg w-1/2">
       <h2 class="text-3xl font-bold mb-4 text-white">Project2 Details
       <p class="mb-4 text-gray-200">This is a more detailed description of Project2 featuring dynamic SVG animations and responsive UI components..</p>
       <button onclick="hideModal()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Close
     </div>
   </div>
   <footer class="bg-gray-300 p-4 text-center mt-16">
     <p>&copy;2025 Projects
   </footer>
   <script>
    function showModal() {
      document.getElementById('modal').classList.remove('hidden');
    }
    function hideModal() {
      document.getElementById('modal').classList.add('hidden');
    }
   </script>


```