testing.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Projects</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/css/style.css">
    <style>
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
        }

        .modal-container {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            width: 95%;
            max-width: 1400px;
            height: 92vh;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease-out;
            z-index: 1000;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
        }

        .modal-active .modal-container {
            transform: translateX(-50%) translateY(0);
        }

        .modal-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
            pointer-events: none;
            z-index: -1;
        }

        .modal-active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            transform: translateY(100%);
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-active .modal-content {
            transform: translateY(0);
        }

        .modal-card {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(5px);
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            cursor: pointer;
            transition: transform 0.3s ease;
            color: #4B5563;
        }

        .modal-close:hover {
            transform: rotate(90deg);
            color: #1F2937;
        }

        .modal-container::-webkit-scrollbar {
            width: 8px;
        }

        .modal-container::-webkit-scrollbar-track {
            background: rgba(243, 244, 246, 0.8);
        }

        .modal-container::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 4px;
        }

        .modal-container::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }
    </style>
    <link rel="icon" type="image/png" href="./assets/models/air_rooster.png">
</head>

<body>
    <!-- Navigation -->
    <nav class="nav">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold"><span>Hao</span><span class="text-gray-400">chen
                        Zeng</span></a>
                <div class="space-x-6">
                    <a href="index.html" class="hover:text-blue-400">About Me</a>
                    <a href="projects.html" class="hover:text-blue-400">Projects</a>
                    <a href="experiences.html" class="hover:text-blue-400">Experiences</a>
                    <a href="resume.html" class="hover:text-blue-400">Resume</a>
                    <a href="social.html" class="hover:text-blue-400">Contact</a>
                    <a href="ar.html" class="hover:text-blue-400">"AR"</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Header -->
    <header class="py-5">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <h2 class="text-5xl font-bold mb-4 slide-up">Air Rooster "AR"</h2>
                <p class="text-xl text-gray-600 fade-in">My online self go by another nickname "Air Rooster." This was
                    inspired by my interest in planes and drones.<br><br>I am a certified drone pilot. I also use this
                    nickname for some other online presence.<br><br>This page is about everything I like, such as
                    hiking, Formula E, technology, etc.</p>
            </div>
        </div>
    </header>

    <!-- Projects Grid -->
    <section class="py-8 content-padding">
        <div class="container mx-auto px-4">
            <div id="projects-grid" class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
                <!-- Projects will be dynamically inserted here -->
            </div>
        </div>
    </section>

    <!-- Project Details Modal -->
    <div id="project-modal" class="modal-overlay">
        <div class="modal-container">
            <button class="modal-close" onclick="closeProjectModal()">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            <div class="p-6" id="project-content">
                <!-- Project content will be dynamically inserted here -->
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        let projectsData = null;

        // Load projects data
        async function loadProjectsData() {
            try {
                console.log('Attempting to fetch projects data...');
                const response = await fetch('./assets/data/projects.json');
                console.log('Response:', response);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                projectsData = await response.json();
                console.log('Parsed data:', projectsData);
                renderProjects();
            } catch (error) {
                console.error('Detailed error:', error);
                document.getElementById('projects-grid').innerHTML =
                    `<div class="col-span-3 text-center">Error loading projects: ${error.message}</div>`;
            }
        }

        // Render project cards
        function renderProjects() {
            const projectsGrid = document.getElementById('projects-grid');
            projectsGrid.innerHTML = projectsData.projects.map(project => `
                <article class="card fade-in flex flex-col h-full">
                    <div class="h-48 overflow-hidden">
                        <img src="${project.image}" alt="${project.title}" class="w-full h-full object-cover" />
                    </div>
                    <div class="p-6 flex flex-col flex-grow">
                        <div class="flex-grow">
                            <span class="text-sm text-blue-400">${project.shortCategory}</span>
                            <h3 class="text-xl font-bold mt-2">${project.shortTitle}</h3>
                            <p class="text-gray-600 mt-2">${project.shortDescription}</p>
                        </div>
                        <div class="mt-4 flex justify-end">
                            <button onclick="showProjectDetails('${project.id}')" class="btn btn-outline">Read More</button>
                        </div>
                    </div>
                </article>
            `).join('');
        }

        // Show project details
        function showProjectDetails(projectId) {
            const project = projectsData.projects.find(p => p.id === projectId);
            if (!project) return;

            const content = `
                <div class="py-8">
                    <h1 class="text-3xl font-bold mb-4 text-gray-900">${project.title}</h1>
                    <div class="flex items-center space-x-4 text-gray-600 mb-6">
                        <span>${project.date}</span>
                        <span>|</span>
                        <span>${project.category}</span>
                    </div>

                    <section class="mb-12">
                        <h2 class="text-2xl font-bold mb-4 text-gray-800">Project Overview</h2>
                        <div class="flex gap-8">
                            <div class="w-1/2">
                                <p class="text-gray-700">${project.overview}</p>
                            </div>
                                <div class="w-1/2 flex items-center justify-center overflow-hidden rounded-lg">
                                <img src="${project.image}" alt="${project.title}" class="max-h-96 w-auto" />
                            </div>
                        </div>
                    </section>

                    <section class="mb-12">
                        <h2 class="text-2xl font-bold mb-6 text-gray-800">Technical Implementation</h2>
                        <div class="space-y-6">
                            ${project.technical.map(section => `
                                <div class="modal-card p-6">
                                    <h3 class="text-xl font-bold mb-4 text-gray-800">${section.title}</h3>
                                    <ul class="list-disc list-inside text-gray-700 space-y-2">
                                        ${section.points.map(point => `<li>${point}</li>`).join('')}
                                    </ul>
                                </div>
                            `).join('')}
                        </div>
                    </section>

                    <section class="mb-12">
                        <h2 class="text-2xl font-bold mb-6 text-gray-800">Impact</h2>
                        <div class="modal-card p-6">
                            <ul class="list-disc list-inside text-gray-700 space-y-2">
                                ${project.impact.map(point => `<li>${point}</li>`).join('')}
                            </ul>
                        </div>
                    </section>

                    <section class="mb-8">
                        <h2 class="text-2xl font-bold mb-6 text-gray-800">Technologies Used</h2>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            ${project.technologies.map(tech => `
                                <div class="modal-card p-4 text-center text-gray-700">${tech}</div>
                            `).join('')}
                        </div>
                    </section>
                </div>
            `;

            document.getElementById('project-content').innerHTML = content;
            document.getElementById('project-modal').classList.add('modal-active');
            document.body.style.overflow = 'hidden';
            setTimeout(() => {
                const modalContainer = document.querySelector('.modal-container');
                if (modalContainer) {
                    modalContainer.scrollTop = 0;
                }
            }, 0);
        }

        function closeProjectModal() {
            document.getElementById('project-modal').classList.remove('modal-active');
            document.body.style.overflow = '';
        }

        // Close modal when clicking outside
        document.getElementById('project-modal').addEventListener('click', function (e) {
            if (e.target === this) {
                closeProjectModal();
            }
        });

        // Close modal when pressing ESC key
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                closeProjectModal();
            }
        });

        // Load projects when page loads
        document.addEventListener('DOMContentLoaded', loadProjectsData);

        // Scroll to top when page loads
        window.onload = function () {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        };

        // Also scroll to top when navigating to this page
        document.addEventListener('DOMContentLoaded', function () {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    </script>

    <!-- Footer -->
    <footer class="py-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-gray-700">&copy; 2026 Haochen Zeng</p>
        </div>
    </footer>
</body>

</html>