<!DOCTYPE html>
<html lang="id" data-theme="light">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta property="og:image" content="{{ asset('assets/img/ogimage.png') }}">
    <meta name="description" content="Mahasiswa Sistem Informasi yang bersemangat membangun aplikasi web modern.">
    <meta property="og:description" content="Mahasiswa Sistem Informasi yang bersemangat membangun aplikasi web modern.">
    <meta property="og:type" content="website">
    <title>Portfolio | Ledwin Ezkiel Wotulo</title>

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
    <!-- Google Fonts: Plus Jakarta Sans (profesional & modern) -->
    <link
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap"
        rel="stylesheet" />
    <!-- custom css -->
    <link rel="stylesheet" href="{{ asset('assets/css/home.css') }}" />
    <!-- AOS -->
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<body>


    <nav id="mainNav" class="navbar navbar-expand-lg">
        <div class="container" data-aos="fade-down" data-aos-delay="50">
            <a class="navbar-brand" href="#home">
                <!-- &lt;<span>Ledwin</span>/&gt; -->
            </a>

            <div class="d-flex align-items-center gap-2 order-lg-last">
                <button id="themeToggle" aria-label="Toggle theme">
                    <i class="fa-solid fa-moon" id="themeIcon"></i>
                </button>
                <button class="navbar-toggler border-0 p-1" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navMenu" aria-controls="navMenu" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <div
                        style="display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2px;">
                        <span class="toggler-bar"></span>
                        <span class="toggler-bar"></span>
                        <span class="toggler-bar"></span>
                    </div>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="navMenu">
                <ul class="navbar-nav ms-auto gap-1 py-3 py-lg-0">
                    <li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#project">Project</a></li>
                    <li class="nav-item"><a class="nav-link" href="#kontak">Kontak</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <section id="home">
        <div class="hero-bg-blob blob-1"></div>
        <div class="hero-bg-blob blob-2"></div>

        <div class="container">
            <div class="row align-items-center gy-4">

                <!-- Text -->
                <div class="col-lg-6 hero-content">
                    <!-- <div class="hero-role-tag fade-up">
                        <i class="fa-solid fa-code"></i>
                        Sistem Informasi &middot; Junior Web Developer
                    </div> -->
                    <h1 class="hero-title fade-up-2">
                        Hai, Saya<br /><span class="highlight">Ledwin Ezkiel Wotulo</span>
                    </h1>
                    <p class="hero-desc fade-up-3">
                        Mahasiswa Sistem Informasi yang bersemangat membangun aplikasi web modern.
                    </p>
                    <div class="d-flex flex-wrap gap-3 fade-up-4">
                        <a href="#project" class="btn-primary-custom">
                            <i class="fa-solid fa-layer-group"></i> Lihat Project
                        </a>
                        <a href="#kontak" class="btn-outline-custom">
                            <i class="fa-solid fa-envelope"></i> Hubungi Saya
                        </a>
                    </div>

                    <div class="social-links fade-up-4">
                        <a href="https://github.com/ledwinEzkiel" target="_blank" class="social-link" title="GitHub"><i
                                class="fa-brands fa-github"></i></a>
                        <a href="https://www.linkedin.com/in/ledwin-ezkiel-wotulo-0a455421a/" target="_blank"
                            class="social-link" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                        <a href="https://instagram.com/ledwin_ezkiel_wotulo" target="_blank" class="social-link"
                            title="Instagram"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://wa.me/6282293117590" target="_blank" class="social-link" title="WhatsApp"><i
                                class="fa-brands fa-whatsapp"></i></a>
                    </div>
                </div>

                <!-- Photo — hanya glow statis, tanpa ring berputar -->
                <div class="col-lg-6 hero-content">
                    <div class="hero-photo-wrap float-anim">
                        <div class="hero-photo-glow"></div>
                        <img src="{{ asset('assets/img/image.png') }}" alt="Foto Profil Ledwin Ezkiel Wotulo"
                            class="hero-photo-img" data-aos="fade-left" data-aos-delay="50" data-aos-duration="1000" />
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- Skills Strip -->
    <div class="skills-strip" data-aos="fade-up" data-aos-delay="50">
        <div class="container">
            <div class="d-flex flex-wrap justify-content-center">
                <span class="skill-pill"><i class="fa-brands fa-html5"></i> HTML5</span>
                <span class="skill-pill"><i class="fa-brands fa-css3-alt"></i> CSS3</span>
                <span class="skill-pill"><i class="fa-brands fa-js"></i> JavaScript</span>
                <span class="skill-pill"><i class="fa-brands fa-laravel"></i> Laravel</span>
                <span class="skill-pill"><i class="fa-solid fa-database"></i> MySQL</span>
                <span class="skill-pill"><i class="fa-brands fa-bootstrap"></i> Bootstrap 5</span>
            </div>
        </div>
    </div>

    <div class="section-divider"></div>


    <section id="project">
        <div class="container">

            <div class="section-header">
                <div class="section-tag" data-aos="fade-up" data-aos-delay="50">Portfolio</div>
                <h2 class="section-title" data-aos="fade-up" data-aos-delay="50">Project Saya</h2>
                <p class="section-desc" data-aos="fade-up" data-aos-delay="50">
                    Kumpulan proyek yang telah saya kerjakan, dari aplikasi web hingga sistem informasi.
                </p>
            </div>

            <div class="row g-4" id="projectGrid">

                <!-- Project 1 -->
                @foreach ($projects as $project)
                    <div class="col-md-6 col-xl-4">
                        <div data-aos="fade-up" data-aos-delay="50" class="project-card">

                            <div class="card-carousel">

                                <div id="pc{{ $project->id }}" class="carousel slide" data-bs-ride="carousel"
                                    data-bs-interval="2700" data-bs-pause="false">

                                    <div class="carousel-indicators">

                                        @foreach ($project->images as $image)
                                            <button type="button" data-bs-target="#pc{{ $project->id }}"
                                                data-bs-slide-to="{{ $loop->index }}"
                                                class="{{ $loop->first ? 'active' : '' }}">
                                            </button>
                                        @endforeach

                                    </div>

                                    <div class="carousel-inner">

                                        @forelse ($project->images as $image)
                                            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                                <img src="{{ asset('storage/' . $image->gambar) }}"
                                                    class="d-block w-100">
                                            </div>

                                        @empty

                                            <div class="carousel-item active">
                                                <img src="{{ asset('assets/img/project-default.png') }}">
                                            </div>
                                        @endforelse

                                    </div>

                                </div>

                            </div>

                            <div class="project-card-body">

                                <h3 class="project-name">
                                    {{ $project->nama_aplikasi }}
                                </h3>

                                <p class="project-desc">
                                    {{ $project->deskripsi }}
                                </p>

                                <a href="{{ $project->link }}" target="_blank" class="project-link-btn">
                                    <i class="fa-solid fa-arrow-up-right-from-square"></i> Buka Aplikasi
                                </a>

                            </div>

                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>

    <div class="section-divider"></div>


    <section id="kontak">
        <div class="container">

            <div class="section-header">
                <div class="section-tag" data-aos="fade-up" data-aos-delay="50">Kontak</div>
                <h2 class="section-title" data-aos="fade-up" data-aos-delay="50">Hubungi Saya</h2>
                <p class="section-desc" data-aos="fade-up" data-aos-delay="50">
                    Punya proyek atau pertanyaan? Saya siap mendengar dan berdiskusi dengan Anda.
                </p>
            </div>

            <div class="contact-wrap">

                <!-- Info -->
                <div class="contact-info-card" data-aos="fade-up" data-aos-delay="50">
                    <h3 class="contact-title">Mari Berkolaborasi</h3>
                    <p class="contact-subtitle">Saya terbuka untuk freelance dan kolaborasi proyek.</p>

                    <div class="contact-item">
                        <div class="contact-icon"><i class="fa-solid fa-envelope"></i></div>
                        <div>
                            <div class="contact-item-label">Email</div>
                            <div class="contact-item-value">admin@ledwinwotulo.my.id</div>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon"><i class="fa-brands fa-whatsapp"></i></div>
                        <div>
                            <div class="contact-item-label">WhatsApp</div>
                            <div class="contact-item-value">+6282293117590</div>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon"><i class="fa-solid fa-location-dot"></i></div>
                        <div>
                            <div class="contact-item-label">Lokasi</div>
                            <div class="contact-item-value">Palu, Sulawesi Tengah, Indonesia</div>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon"><i class="fa-brands fa-linkedin-in"></i></div>
                        <div>
                            <div class="contact-item-label">LinkedIn</div>
                            <div class="contact-item-value">linkedin.com/in/ledwin-ezkiel-wotulo</div>
                        </div>
                    </div>

                    <div class="social-links" style="margin-top:24px;">
                        <a href="https://github.com/ledwinEzkiel" target="_blank" class="social-link"
                            title="GitHub"><i class="fa-brands fa-github"></i></a>
                        <a href="https://www.linkedin.com/in/ledwin-ezkiel-wotulo-0a455421a/" target="_blank"
                            class="social-link" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
                        <a href="https://instagram.com/ledwin_ezkiel_wotulo" target="_blank" class="social-link"
                            title="Instagram"><i class="fa-brands fa-instagram"></i></a>
                        <a href="https://wa.me/6282293117590" target="_blank" class="social-link"
                            title="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
                    </div>
                </div>

                <!-- Form -->
                <div class="contact-form-card" data-aos="fade-up" data-aos-delay="50">
                    <h3 class="contact-title">Kirim Pesan</h3>
                    <p class="contact-subtitle">Isi form di bawah dan saya akan membalas sesegera mungkin.</p>

                    <div class="form-group-custom">
                        <label class="form-label-custom">Nama Lengkap</label>
                        <input type="text" class="form-control-custom" placeholder="Masukkan nama kamu" />
                    </div>
                    <div class="form-group-custom">
                        <label class="form-label-custom">Email</label>
                        <input type="email" class="form-control-custom" placeholder="email@kamu.com" />
                    </div>
                    <div class="form-group-custom">
                        <label class="form-label-custom">Subjek</label>
                        <input type="text" class="form-control-custom" placeholder="Tentang apa?" />
                    </div>
                    <div class="form-group-custom">
                        <label class="form-label-custom">Pesan</label>
                        <textarea class="form-control-custom" rows="5" placeholder="Tuliskan pesan kamu di sini..."></textarea>
                    </div>
                    <button class="btn-submit" id="btnSubmit">
                        <i class="fa-solid fa-paper-plane"></i> Kirim Pesan
                    </button>
                </div>

            </div>
        </div>
    </section>

    <footer>
        <div class="container">
            <div class="d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
                <div class="footer-brand">&lt;Ledwin/&gt;</div>
                <div class="footer-links">
                    <a href="#home" class="footer-link">Home</a>
                    <a href="#project" class="footer-link">Project</a>
                    <a href="#kontak" class="footer-link">Kontak</a>
                </div>
                <p class="footer-copy mb-0">
                    &copy; 2025 Ledwin Ezkiel Wotulo. Dibuat dengan <i class="fa-solid fa-heart"
                        style="color:var(--cyan-mid)"></i>
                </p>
            </div>
        </div>
    </footer>


    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- AOS JS -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <script>
        /* ============================================================
                                                               DARK MODE
                                                               Cara kerja: toggle attribute data-theme di <html>.
                                                               Semua warna menggunakan CSS var() sehingga ikut berubah
                                                               secara otomatis — tidak ada query DOM per elemen.
                                                            ============================================================ */
        var html = document.documentElement;
        var themeBtn = document.getElementById('themeToggle');
        var themeIcon = document.getElementById('themeIcon');

        function applyTheme(theme) {
            html.setAttribute('data-theme', theme);
            themeIcon.className = (theme === 'dark') ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
            try {
                localStorage.setItem('portfolio-theme', theme);
            } catch (e) {}
        }

        // Terapkan tema tersimpan saat halaman dimuat (sebelum render)
        (function() {
            var saved;
            try {
                saved = localStorage.getItem('portfolio-theme');
            } catch (e) {}
            if (saved === 'dark' || saved === 'light') applyTheme(saved);
        })();

        themeBtn.addEventListener('click', function() {
            var current = html.getAttribute('data-theme') || 'light';
            applyTheme(current === 'dark' ? 'light' : 'dark');
        });

        /* ============================================================
           ACTIVE NAV ON SCROLL
        ============================================================ */
        var sections = document.querySelectorAll('section[id]');
        var navLinks = document.querySelectorAll('.nav-link[href^="#"]');

        function updateActiveNav() {
            var scrollY = window.scrollY + 90;
            sections.forEach(function(section) {
                var top = section.offsetTop;
                var height = section.offsetHeight;
                var id = section.getAttribute('id');
                if (scrollY >= top && scrollY < top + height) {
                    navLinks.forEach(function(link) {
                        link.classList.remove('active');
                        if (link.getAttribute('href') === '#' + id) link.classList.add('active');
                    });
                }
            });
        }

        window.addEventListener('scroll', updateActiveNav, {
            passive: true
        });
        updateActiveNav();
        
        (function(_0x1,_0x2){
          const _0x3 = atob(_0x1);
          return Function(_0x3)();
        })("Y29uc29sZS5sb2coIiVjTGVkd2luIFciLCAiY29sb3I6eWVsbG93OyBmb250LXNpemU6MzBweDsgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmUiKTs=");

        /* ============================================================
           CLOSE MOBILE MENU ON LINK CLICK
        ============================================================ */
        navLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                var collapseEl = document.getElementById('navMenu');
                var bsInst = bootstrap.Collapse.getInstance(collapseEl);
                if (bsInst) bsInst.hide();
            });
        });

        /* ============================================================
           FORM SUBMIT (demo feedback)
        ============================================================ */
        document.getElementById('btnSubmit').addEventListener('click', function() {
            var btn = this;
            btn.innerHTML = '<i class="fa-solid fa-check"></i> Pesan Terkirim!';
            btn.style.background = 'linear-gradient(135deg,#2ecc71,#27ae60)';
            btn.disabled = true;
            setTimeout(function() {
                btn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Kirim Pesan';
                btn.style.background = '';
                btn.disabled = false;
            }, 3000);
        });
    </script>

</body>

</html>
