<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah Ayu | Digital Portfolio Premium</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --bg-lux: #FFF8F9; /* Krem Pink Sangat Muda */
            --rose-gold: #E6C7C2; /* Rose Gold untuk border/aksen */
            --dusty-pink: #FFDDE1; /* Dusty Pink untuk Glassmorphism */
            --velvet-deep: #D81B60; /* Deep Pink Velvet untuk Teks Utama */
            --text-dark: #3A3A3A;
            --glass: rgba(255, 255, 255, 0.55);
        }

        * { scroll-behavior: smooth; box-sizing: border-box; }

        body {
            margin: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--bg-lux);
            color: var(--text-dark);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* --- NAVIGATION (GLASSMORPHISM LUX) --- */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 18px 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: rgba(255, 248, 249, 0.8);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(230, 199, 194, 0.3);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
        }

        .nav-left { display: flex; align-items: center; gap: 30px; }
        .logo-right { font-weight: 800; font-size: 1.5rem; color: var(--velvet-deep); letter-spacing: 1.5px; text-transform: uppercase; }
        
        .btn-logout { 
            border: 1.5px solid var(--text-dark); 
            padding: 8px 22px; 
            border-radius: 50px; 
            text-decoration: none; 
            color: var(--text-dark); 
            font-size: 0.85rem;
            font-weight: 700;
            transition: all 0.3s ease;
        }
        .btn-logout:hover { background: var(--text-dark); color: white; transform: translateY(-2px); }

        .nav-link-custom {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 700;
            font-size: 0.95rem;
            transition: 0.3s;
        }
        .nav-link-custom:hover { color: var(--velvet-deep); }

        .ig-icon {
            font-size: 1.6rem;
            color: var(--velvet-deep);
            transition: all 0.3s ease;
        }
        .ig-icon:hover { transform: scale(1.15) rotate(-5deg); color: #E1306C; }

        /* --- SECTION STYLES --- */
        section {
            min-height: 100vh;
            padding: 140px 10%;
            display: flex;
            align-items: center;
        }

        /* Gradients per Section (Halus) */
        .sec-1 { background: linear-gradient(135deg, #FFF8F9 0%, #FFEDF0 100%); }
        .sec-2 { background: white; }
        .sec-3 { background: #FFFBFB; }
        .sec-4 { background: white; }
        .sec-5 { background: linear-gradient(180deg, #white 0%, #FFEDF0 100%); }

        /* --- COMPONENTS (LUX DESIGN) --- */
        .hero-img-box {
            position: relative;
            display: inline-block;
        }
        .hero-img-box img {
            width: 100%;
            max-width: 380px;
            border-radius: 40px;
            box-shadow: 0 25px 50px rgba(216, 27, 96, 0.15);
            transition: 0.5s ease;
            position: relative;
            z-index: 2;
        }
        .hero-img-box::after {
            content: '';
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 100%;
            height: 100%;
            background-color: var(--velvet-deep);
            border-radius: 40px;
            z-index: 1;
        }

        .profile-circle {
            width: 330px;
            height: 330px;
            border-radius: 50%;
            border: 15px solid var(--glass);
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0,0,0,0.08);
            margin: 0 auto;
        }
        .profile-circle img { width: 100%; height: 100%; object-fit: cover; }

        .info-glass-card {
            background: var(--glass);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 35px;
            border: 1px solid rgba(230, 199, 194, 0.5);
            box-shadow: 0 15px 35px rgba(216, 27, 96, 0.05);
        }
        .info-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            font-size: 1.05rem;
        }
        .info-item i { color: var(--velvet-deep); font-size: 1.2rem; width: 25px; text-align: center; }

        .img-aesthetic {
            width: 100%;
            height: 480px;
            object-fit: cover;
            border-radius: 50px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.06);
        }

        .hobby-card-lux {
            background: white;
            padding: 40px;
            border-radius: 30px;
            text-align: center;
            border: 1px solid rgba(230, 199, 194, 0.2);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 20px rgba(0,0,0,0.02);
        }
        .hobby-card-lux:hover { 
            transform: translateY(-18px) scale(1.03); 
            box-shadow: 0 25px 50px rgba(216, 27, 96, 0.15);
            border-color: var(--rose-gold);
        }

        /* --- ANIMATIONS (ON POINT) --- */
        .reveal {
            opacity: 0;
            transform: translateY(70px);
            transition: all 1.3s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .sec-title {
            font-weight: 800;
            font-size: 3.2rem;
            margin-bottom: 25px;
            color: var(--velvet-deep);
            letter-spacing: -1px;
        }
    </style>
</head>
<body>

    <nav>
        <div class="nav-left">
            <a href="profile.php" class="btn-logout">Kembali ke Profil</a>
            <a href="#about-me" class="nav-link-custom">About</a>
            <a href="https://instagram.com/sarahgst._" target="_blank" class="ig-icon">
                <i class="fab fa-instagram"></i>
            </a>
        </div>
        <div class="logo-right">SARAH.</div>
    </nav>

    <section class="sec-1">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7 animate__animated animate__fadeInLeft">
                    <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing: 4px; color: var(--velvet-deep); opacity: 0.8;">hi there,</h6>
                    <h1 class="display-1 fw-extrabold mb-4" style="font-weight: 800; line-height: 1.1;">Sarah Ayu <br>Agustina</h1>
                    <p class="lead text-muted col-md-10">Telecommunication Engineering Student
Communication & Network Systems
Digital Technology Enthusiast</p>
                </div>
                <div class="col-md-5 text-end animate__animated animate__fadeInRight">
                    <div class="hero-img-box">
                        <img src="assets/img/sarahtv.jpeg" alt="Sarah Ayu">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about-me" class="sec-2">
        <div class="container reveal">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <div class="profile-circle">
                        <img src="assets/img/halo.jpeg" alt="Sarah Profile">
                    </div>
                </div>
                <div class="col-md-7 ps-md-5">
                    <h2 class="sec-title">About me</h2>
                    <p class="mb-5 lead text-muted">Saya Sarah Ayu Agustina, mahasiswa D4 Teknik Telekomunikasi angkatan 2024 yang sedang menjalani semester 4.
I’m interested in communication systems and network technology, and currently learning how these systems work in real-world applications.

Saya terus mengembangkan kemampuan dengan mempelajari hal-hal baru dan memahami teknologi secara lebih mendalam..</p>
                    
                    <div class="info-glass-card">
                        <div class="info-item">
                            <i class="fas fa-user"></i>
                            <div><strong>Nama Lengkap:</strong> Sarah Ayu Agustina</div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-university"></i>
                            <div><strong>Instansi:</strong> Politeknik Negeri Semarang (Polines)</div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-id-card"></i>
                            <div><strong>NIM:</strong> 4.31.24.0.20</div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-phone-alt"></i>
                            <div><strong>WhatsApp:</strong> 088227680178</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="sec-3">
    <div class="container reveal">
        <div class="row align-items-center flex-row-reverse">
            <div class="col-md-6 text-end">
                <img src="assets/img/kota1.jpeg" class="img-aesthetic" alt="Kebumen">
            </div>
            <div class="col-md-6 pe-md-5">
                <h2 class="sec-title">Kota Asal</h2>
                <h4 class="mb-4 text-muted">Kebumen, Jawa Tengah</h4>
                <p class="lead">Saya berasal dari Kebumen, Jawa Tengah, sebuah daerah yang dikenal dengan suasana yang tenang dan nyaman. Kebumen memiliki berbagai potensi alam, terutama pantai dan wisata alam yang cukup beragam.</p>
                <p class="lead italic text-muted" style="font-size: 0.9rem;">I come from a place that shaped my early journey, where I learned to grow and adapt through simple surroundings.</p>
            </div>
        </div>
    </div>
</section>

    <section class="sec-4">
        <div class="container reveal">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img src="assets/img/gombong.jpeg" class="img-aesthetic" alt="SMK">
                </div>
                <div class="col-md-6 ps-md-5">
                    <h2 class="sec-title">Education</h2>
                    <h4 class="mb-4 text-muted">Masa SMK</h4>
                    <p class="lead">Saya merupakan lulusan dari Sekolah Menengah Kejuruan Negeri 1 Gombong, Kebumen, dengan jurusan Teknik Komputer dan Jaringan.
Selama masa sekolah, saya mempelajari dasar-dasar jaringan komputer, perangkat keras, serta sistem pendukung teknologi informasi.

Pengalaman tersebut menjadi awal ketertarikan saya dalam bidang teknologi, khususnya jaringan dan sistem komunikasi.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="sec-5">
    <div class="container reveal text-center">
        <h2 class="sec-title mb-5">Hobbies & Interests</h2>
        <div class="row g-5">
            <div class="col-md-4">
                <div class="hobby-card-lux">
                    <i class="fas fa-book-open fa-4x mb-4" style="color: var(--velvet-deep);"></i>
                    <h4 class="fw-bold">Reading Novels</h4>
                    <p class="text-muted">Menjelajahi dunia imajinasi dan mendapatkan perspektif baru melalui lembaran cerita.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="hobby-card-lux">
                    <i class="fas fa-utensils fa-4x mb-4" style="color: var(--velvet-deep);"></i>
                    <h4 class="fw-bold">Cooking</h4>
                    <p class="text-muted">Mengeksplorasi resep dan menciptakan hidangan lezat sebagai bentuk ekspresi kreativitas.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="hobby-card-lux">
                    <i class="fas fa-map-marked-alt fa-4x mb-4" style="color: var(--velvet-deep);"></i>
                    <h4 class="fw-bold">Travelling</h4>
                    <p class="text-muted">Mengunjungi tempat baru dan mengagumi keindahan alam untuk menyegarkan pikiran.</p>
                </div>
            </div>
        </div>
    </div>
</section>
    <script>
        // SCRIPT UNTUK ANIMASI MUNCUL SAAT SCROLL (ON POINT)
        function reveal() {
            var reveals = document.querySelectorAll(".reveal");
            for (var i = 0; i < reveals.length; i++) {
                var windowHeight = window.innerHeight;
                var elementTop = reveals[i].getBoundingClientRect().top;
                var elementVisible = 140; // Kapan elemen mulai muncul
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add("active");
                }
            }
        }
        window.addEventListener("scroll", reveal);
        reveal(); // Jalankan sekali saat load
    </script>
</body>
</html>