<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manny Vergel | Thoughtful Engineering for Meaningful Projects</title>
    
    <link href="/public/css/tw.css?v=2" rel="stylesheet">

    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Inter:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <link href="/public/css/main.css?v=3" rel="stylesheet">
</head>
<body class="antialiased">

    <!-- Container for the entire page -->
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">

        <!-- Header Navigation -->
        <header class="py-8 fade-in">
            <nav class="flex justify-between items-center">
                <a href="/" class="text-2xl logo-text font-bold tracking-tight text-vintage-accent font-[Lora]">mannyv<span class="vintage-accent">.io</span></a>
                <div class="hidden md:flex items-center space-x-8 text-sm font-medium">
                    <a href="/" class="hover:text-vintage-accent transition-colors">Home</a>
                    <a href="/about" class="hover:text-vintage-accent transition-colors">About</a>
                    <a href="/projects" class="hover:text-vintage-accent transition-colors">Projects</a>
                    <a href="/beyond-code" class="hover:text-vintage-accent transition-colors">Beyond Code</a>
                    <a href="#contact" class="bg-vintage-secondary text-white px-4 py-2 rounded-full hover:bg-vintage-secondary-dark transition-colors shadow-md">Let's Connect</a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button">
                        <i data-lucide="menu" class="w-6 h-6"></i>
                    </button>
                </div>
            </nav>
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden mt-4 space-y-2">
                 <a href="/" class="block py-2 text-center hover:text-vintage-accent transition-colors">Home</a>
                 <a href="/about" class="block py-2 text-center hover:text-vintage-accent transition-colors">About</a>
                 <a href="/projects" class="block py-2 text-center hover:text-vintage-accent transition-colors">Projects</a>
                 <a href="/beyond-code" class="block py-2 text-center hover:text-vintage-accent transition-colors">Beyond Code</a>
                 <a href="#contact" class="block py-2 text-center bg-vintage-secondary text-white rounded-full hover:bg-vintage-secondary-dark transition-colors shadow-md">Let's Connect</a>
            </div>
        </header>

        <main>


            <section class="py-16 md:py-24 grid md:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight fade-in delay-1">Thoughtful Engineering for Meaningful Projects.</h1>
                    <p class="text-lg text-gray-700 fade-in delay-2">A seasoned software developer and project leader with nearly two decades of professional experience, dedicated to building valuable systems and fostering connections.</p>
                     <div class="flex items-center space-x-2 text-gray-600 fade-in delay-2">
                        <i data-lucide="map-pin" class="w-5 h-5"></i>
                        <span>Based in Manila, Philippines</span>
                    </div>
                    <div class="flex flex-wrap gap-4 pt-4 fade-in delay-3">
                        <a href="#projects" class="bg-vintage-accent text-white px-6 py-3 rounded-full font-semibold shadow-lg hover:bg-vintage-accent-dark transition-transform transform hover:scale-105">Explore My Work</a>
                        <a href="#contact" class="bg-gray-200 text-gray-800 px-6 py-3 rounded-full font-semibold shadow-lg hover:bg-gray-300 transition-transform transform hover:scale-105">Get In Touch</a>
                    </div>
                </div>
                <div class="flex justify-center items-center fade-in delay-2">
                    <div class="relative w-64 h-64 md:w-80 md:h-80">
                        <div class="absolute inset-0 bg-amber-100 rounded-full transform rotate-6"></div>
                        <div class="absolute inset-0 bg-teal-100 rounded-full transform -rotate-6"></div>
                        <img src="/public/img/moi-sf.jpeg" alt="Manny Vergel" class="relative w-full h-full object-cover rounded-full border-4 border-white shadow-2xl">
                    </div>
                </div>
            </section>

            <!-- Introduction Section -->
            <section id="about" class="py-16 md:py-24">
                <div class="text-center max-w-3xl mx-auto space-y-4 fade-in delay-3">
                    <h2 class="text-3xl font-bold">Welcome!</h2>
                    <p class="text-lg leading-relaxed">
                        Hey there! I'm Manny, a software development enthusiast with a passion for organization, problem-solving, and bringing ideas to life. After a rewarding career, I now focus on projects that add value to my life or our community. I enjoy building effective systems, leading teams, and sharing insights gained from a life of coding, traveling, and countless cups of coffee.
                    </p>
                    <div class="pt-4">
                         <a href="/about" class="font-semibold vintage-accent hover:underline">Read More About My Journey &rarr;</a>
                    </div>
                </div>
            </section>

            <!-- Featured Links Section -->
            <section id="projects" class="py-16 md:py-24">
                 <div class="text-center mb-12 fade-in">
                    <h2 class="text-3xl font-bold">Featured Work</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8 text-center">
                    <!-- Project Spotlight -->
                    <div class="vintage-card p-8 rounded-2xl shadow-lg fade-in delay-4 transform hover:-translate-y-2 transition-transform">
                        <div class="inline-block p-4 bg-vintage-accent/20 rounded-full mb-4">
                            <i data-lucide="gem" class="w-8 h-8 vintage-accent"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">Project Spotlight</h3>
                        <p class="mb-4 text-gray-600">My current focus: a queue management system as a service designed for efficiency and a great user experience.</p>
                        <a href="https://qflowpro.com" target="_blank" class="font-semibold vintage-accent hover:underline">Visit qflowpro.com &rarr;</a>
                    </div>
                    <!-- My Journey -->
                    <div class="vintage-card p-8 rounded-2xl shadow-lg fade-in delay-5 transform hover:-translate-y-2 transition-transform">
                        <div class="inline-block p-4 bg-vintage-secondary/20 rounded-full mb-4">
                            <i data-lucide="book-open" class="w-8 h-8 vintage-secondary"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">My Journey</h3>
                        <p class="mb-4 text-gray-600">Follow along as I document the process, challenges, and learnings of building a SaaS product from the ground up.</p>
                        <a href="https://www.queuemanagementsystemasaservice.com/" target="_blank" class="font-semibold vintage-secondary hover:underline">Read the Blog &rarr;</a>
                    </div>
                    <!-- My Code -->
                    <div class="vintage-card p-8 rounded-2xl shadow-lg fade-in delay-4 transform hover:-translate-y-2 transition-transform">
                         <div class="inline-block p-4 bg-gray-500/20 rounded-full mb-4">
                            <i data-lucide="github" class="w-8 h-8 text-gray-700"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">My Code</h3>
                        <p class="mb-4 text-gray-600">For a deeper dive into my personal projects, coding style, and contributions to the open-source community.</p>
                        <a href="https://github.com/mannyvergel" target="_blank" class="font-semibold text-gray-700 hover:underline">Explore on GitHub &rarr;</a>
                    </div>
                </div>
                 <div class="mt-12 text-center">
                    <a href="/projects" class="inline-block bg-vintage-secondary text-white px-8 py-3 rounded-full font-semibold shadow-lg hover:bg-vintage-secondary-dark transition-transform transform hover:scale-105">
                        See All Projects
                    </a>
                </div>
            </section>

            <!-- Beyond the Code Section -->
            <section id="beyond-code" class="py-16 md:py-24">
                <div class="text-center mb-12 fade-in">
                    <h2 class="text-3xl font-bold">Beyond the Code</h2>
                </div>
                <div class="grid md:grid-cols-5 gap-12 items-start">
                    <div class="md:col-span-2 space-y-8 fade-in delay-1">
                        <div>
                            
                            <h3 class="text-xl font-bold mb-2"><i data-lucide="dog" class="inline-block w-8 h-8 vintage-accent mb-2"></i> My Dogs, Hobbies & Travels</h3>
                            <p class="text-gray-700">When I'm not coding, you can find me with my dogs, Lupito & Chidi, or pursuing my passions. I enjoy running, swimming, and diving. My love for coffee led me to open my own shop, and I find a unique challenge in growing basil in a tropical climate. Traveling is a huge part of my life—I thrive on exploring new cultures and sharing stories with the people I meet.</p>
                        </div>
                        <div>
                           <img src="/public/img/lupito-chidi-001.jpg" alt="Dogs Lupito and Chidi" class="rounded-xl shadow-lg w-full border-4 border-white">
                        </div>
                    </div>
                    <div class="md:col-span-3 space-y-6">
                        <div class="fade-in delay-2">
                             <p class="text-gray-700 mb-4">I've been fortunate to connect with incredible people worldwide, primarily through Couchsurfing. Their kindness and shared experiences have enriched my life immensely.</p>
                        </div>
                        <div class="vintage-card p-6 rounded-xl shadow-lg fade-in delay-2">
                            <p class="text-gray-700 italic">"He is very respectful, flexible, a great listener and deep thinker. We talked a lot... It was like meeting an old friend. So easy going and chill."</p>
                            <p class="text-right mt-2 font-semibold text-sm">- Vanessa G.</p>
                        </div>
                        <div class="vintage-card p-6 rounded-xl shadow-lg fade-in delay-3">
                            <p class="text-gray-700 italic">"He’s by far the best host I have stayed with so far... He waited for me till midnight and made sure the taxi driver wasn’t scamming me lol. Very thoughtful, considerate and funny."</p>
                            <p class="text-right mt-2 font-semibold text-sm">- Muborak S.</p>
                        </div>
                        <div class="vintage-card p-6 rounded-xl shadow-lg fade-in delay-4">
                            <p class="text-gray-700 italic">"He has tips and help ready no matter the situation or circumstances and always a smile on his lips."</p>
                            <p class="text-right mt-2 font-semibold text-sm">- David K.</p>
                        </div>
                    </div>
                </div>
                 <div class="mt-12 text-center">
                    <a href="/beyond-code" class="font-semibold vintage-accent hover:underline">More Stories & Testimonials &rarr;</a>
                </div>
            </section>


        </main>

        <!-- Footer -->
        <footer id="contact" class="py-16 text-center border-t border-gray-200 fade-in delay-5">
            <h2 class="text-3xl font-bold mb-4">Let's Build Something Great</h2>
            <p class="max-w-xl mx-auto mb-8 text-gray-700">If you have a project that could use a blend of technical expertise and seasoned experience, I'd love to hear from you. Let's discuss how we can work together.</p>
            <a href="/cdn-cgi/l/email-protection#e68b8788889fa68b90839481838ac885898b" class="inline-block bg-vintage-accent text-white px-8 py-4 rounded-full font-semibold text-lg shadow-lg hover:bg-vintage-accent-dark transition-colors mb-8">
                <span class="__cf_email__" data-cfemail="b7dad6d9d9cef7dac1d2c5d0d2db99d4d8da">[email&#160;protected]</span>
            </a>
            <div class="flex justify-center space-x-6">
                <a href="https://ph.linkedin.com/in/manuel-vergel-91a51850" target="_blank" class="text-gray-500 hover:text-vintage-accent transition-colors">
                    <i data-lucide="linkedin" class="w-7 h-7"></i>
                </a>
                <a href="https://github.com/mannyvergel" target="_blank" class="text-gray-500 hover:text-vintage-accent transition-colors">
                    <i data-lucide="github" class="w-7 h-7"></i>
                </a>
            </div>
            <p class="mt-12 text-sm text-gray-500">&copy; 2025 Manny Vergel. All Rights Reserved.</p>
        </footer>

    </div>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="/public/js/main.js?v=1"></script>
</body>
</html>
