<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yee Yon Yeong - Portfolio</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #1a202c;
            padding: 1rem;
            z-index: 1000;
        }

        .nav-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-brand {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }

        .nav-links a:hover {
            opacity: 0.8;
        }

        /* Hamburger Menu */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger div {
            width: 25px;
            height: 3px;
            background-color: white;
            margin: 3px;
            transition: 0.3s;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                background-color: #1a202c;
                position: absolute;
                top: 100%;
                left: 0;
                padding: 1rem;
            }

            .nav-links.active {
                display: flex;
            }

            .hamburger {
                display: flex;
            }
        }

        /* Sections */
        section {
            padding: 5rem 1rem;
            scroll-margin-top: 4rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Hero Section */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        .hero-content {
            width: 100%;
        }

        .hero-title {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .hero-subtitle {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }

        .cta-button {
            display: inline-block;
            padding: 1rem 2rem;
            background-color: white;
            color: #3b82f6;
            text-decoration: none;
            border-radius: 9999px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .cta-button:hover {
            background-color: #f3f4f6;
        }

        /* About Section */
        #about {
            background-color: white;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 3rem;
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .about-card {
            background-color: #f3f4f6;
            padding: 1.5rem;
            border-radius: 0.5rem;
        }

        /* Projects Section */
        #projects {
            background-color: #f3f4f6;
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .project-card {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .project-title {
            font-size: 1.25rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .tech-tag {
            background-color: #dbeafe;
            color: #1e40af;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
        }

        /* Contact Section */
        #contact {
            background-color: white;
            text-align: center;
        }

        .contact-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: #3b82f6;
            text-decoration: none;
            margin-top: 1rem;
        }

        .contact-link:hover {
            color: #1e40af;
        }

        .contact-form {
            max-width: 600px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: #f3f4f6;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
        }

        .contact-form button {
            padding: 1rem 2rem;
            background-color: #3b82f6;
            color: white;
            border: none;
            border-radius: 9999px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .contact-form button:hover {
            background-color: #1e40af;
        }

        /* Footer */
        footer {
            background-color: #1a202c;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-subtitle {
                font-size: 1.25rem;
            }

            .cta-button {
                padding: 0.75rem 1.5rem;
                font-size: 1rem;
            }

            .nav-content {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

            .projects-grid {
                grid-template-columns: 1fr;
            }

            .hero-content {
                padding: 1rem;
            }
        }

        @media (max-width: 480px) {
            .hero-title {
                font-size: 1.75rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .about-grid, .projects-grid {
                grid-template-columns: 1fr;
            }

            .nav-content {
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar">
        <div class="nav-content">
            <a href="#home" class="nav-brand">Yee Yon Yeong</a>
            <div class="hamburger" onclick="toggleMenu()">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="nav-links">
                <a href="#home" onclick="toggleMenu()">Home</a>
                <a href="#about" onclick="toggleMenu()">About</a>
                <a href="#projects" onclick="toggleMenu()">Projects</a>
                <a href="#contact" onclick="toggleMenu()">Contact</a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Python Developer & Software Engineer</h1>
                <p class="hero-subtitle">8+ years of experience in software engineering, specializing in automation, data migration, and embedded systems.</p>
                <a href="#projects" class="cta-button">View My Work</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about">
        <div class="container">
            <h2 class="section-title">About Me</h2>
            <p>A passionate software engineer with expertise in designing, developing, testing, and maintaining software systems. Proficient in Python, C++, C#, and Java, with extensive experience in embedded and mobile development.</p>
            <div class="about-grid">
                <div class="about-card">
                    <h3>Education</h3>
                    <ul>
                        <li>Master of Science (Mathematics) - Universiti Sains Malaysia</li>
                        <li>Bachelor of Science (Honours) in Mathematics - Universiti Sains Malaysia</li>
                    </ul>
                </div>
                <div class="about-card">
                    <h3>Technical Skills</h3>
                    <ul>
                        <li>Programming: Python, C++, C#, C, Java</li>
                        <li>Mobile Development: Android (Java & Kotlin)</li>
                        <li>Design Patterns: MVP, MVVM, MVC</li>
                        <li>Automation: Selenium, Appium, Script Development</li>
                        <li>Operating Systems: Linux, Windows, Android</li>
                        <li>Version Control: GitHub, GitLab, Tortoise SVN</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects">
        <div class="container">
            <h2 class="section-title">Featured Projects</h2>
            <div class="projects-grid">
                <div class="project-card">
                    <h3 class="project-title">Petronas Data Migration</h3>
                    <p>Developed automated solutions for data migration using Python scripts, including API data query automation and integration with databases.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">API Integration</span>
                        <span class="tech-tag">Database</span>
                    </div>
                </div>
                <div class="project-card">
                    <h3 class="project-title">Power Rail Estimation System</h3>
                    <p>Created a system for power rail estimation utilizing machine learning, enhancing energy efficiency through automation and data analysis.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">Machine Learning</span>
                        <span class="tech-tag">Automation</span>
                    </div>
                </div>
                <div class="project-card">
                    <h3 class="project-title">Computer Vision Solutions</h3>
                    <p>Developed computer vision algorithms, including YOLOv5, to solve custom use cases and enhance system capabilities.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">YOLOv5</span>
                        <span class="tech-tag">Computer Vision</span>
                    </div>
                </div>
                <div class="project-card">
                    <h3 class="project-title">Automation Testing Framework</h3>
                    <p>Led automation testing for mobile applications using Selenium and Appium, employing the Page Object Model (POM) for efficiency.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Python</span>
                        <span class="tech-tag">Selenium</span>
                        <span class="tech-tag">Appium</span>
                    </div>
                </div>
                <div class="project-card">
                    <h3 class="project-title">LED Video Wall Proof of Concept</h3>
                    <p>Designed a proof of concept for an LED video wall using a custom board as a replacement for an Intel-based solution, enabling dynamic display capabilities and improving cost efficiency.</p>
                    <div class="tech-tags">
                        <span class="tech-tag">Embedded Systems</span>
                        <span class="tech-tag">LED Display</span>
                        <span class="tech-tag">Hardware Integration</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <h2 class="section-title">Get In Touch</h2>
            <p>I'm always interested in discussing new opportunities and projects. Feel free to contact me using the form below.</p>
            <form class="contact-form" action="https://formspree.io/f/xldedwdd" method="POST">
                <input type="text" name="name" placeholder="Your Name" required>
                <input type="email" name="email" placeholder="Your Email" required>
                <textarea name="message" rows="5" placeholder="Your Message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 Yee Yon Yeong. All rights reserved.</p>
    </footer>

    <script>
        // Highlight active section in navigation
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('section');
            const navLinks = document.querySelectorAll('.nav-links a');

            function changeLinkState() {
                let index = sections.length;

                while(--index && window.scrollY + 100 < sections[index].offsetTop) {}

                navLinks.forEach(link => link.style.opacity = '0.7');
                if (index >= 0) navLinks[index].style.opacity = '1';
            }

            window.addEventListener('scroll', changeLinkState);
        });

        // Handle form submission
        document.querySelector('.contact-form').addEventListener('submit', function(event) {
            event.preventDefault();
            fetch(event.target.action, {
                method: 'POST',
                body: new FormData(event.target),
                headers: {
                    'Accept': 'application/json'
                }
            }).then(response => {
                if (response.ok) {
                    alert('Thank you for reaching out. I will get back to you soon!');
                    event.target.reset();
                } else {
                    alert('Oops... Something went wrong. Please try again.');
                }
            }).catch(() => {
                alert('Oops... Something went wrong. Please try again.');
            });
        });

        // Toggle mobile menu
        function toggleMenu() {
            const navLinks = document.querySelector('.nav-links');
            navLinks.classList.toggle('active');
        }
    </script>
</body>
</html>