<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiara Nur Fadilah | 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 {
            /* PALET WARNA CHOCOLATE LUX */
            --bg-lux: #FAF5F0; /* Krem Latte Sangat Muda */
            --bronze-accent: #C4A77D; /* Bronze/Coklat Muda Gold untuk border/aksen */
            --soft-mocha: #E8DCCB; /* Soft Mocha untuk Glassmorphism */
            --velvet-deep: #704214; /* Deep Chocolate Velvet untuk Teks Utama */
            --text-dark: #4A4A4A;
            --glass: rgba(232, 220, 203, 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 CHOCOLATE) --- */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 18px 10%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            background: rgba(250, 245, 240, 0.85);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(196, 167, 125, 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 & Warm) */
        .sec-1 { background: linear-gradient(135deg, #FAF5F0 0%, #F0E6D8 100%); }
        .sec-2 { background: white; }
        .sec-3 { background: #FAFDFD; /* Sedikit cool untuk kontras asal kota */ }
        .sec-4 { background: white; }
        .sec-5 { background: linear-gradient(180deg, #white 0%, #F0E6D8 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(112, 66, 20, 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(196, 167, 125, 0.5);
            box-shadow: 0 15px 35px rgba(112, 66, 20, 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(196, 167, 125, 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(112, 66, 20, 0.15);
            border-color: var(--bronze-accent);
        }

        /* --- 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/tiaranff_" target="_blank" class="ig-icon">
                <i class="fab fa-instagram"></i>
            </a>
        </div>
        <div class="logo-right">TIARA.</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, Threre.</h6>
                    <h1 class="display-1 fw-extrabold mb-4" style="font-weight: 800; line-height: 1.1;">Tiara Nur <br>Fadilah</h1>
                    <p class="lead text-muted col-md-10">Telecommunication Engineering Student
Interested in Broadcast and Web Development
Digital Technology Explorer</p>
                </div>
                <div class="col-md-5 text-end animate__animated animate__fadeInRight">
                    <div class="hero-img-box">
                        <img src="assets/img/plns.jpeg" alt="Tiara Nur Fadilah">
                    </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/tiara.jpeg" alt="Tiara 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 Tiara Nur Fadilah, mahasiswa D4 Teknik Telekomunikasi angkatan 2024 yang sedang menjalani semester 4.
Saya memiliki ketertarikan pada broadcast dan web development, serta senang mempelajari hal-hal baru di dunia digital.

I’m currently learning and developing my skills step by step through my academic journey.</p>
                    
                    <div class="info-glass-card">
                        <div class="info-item">
                            <i class="fas fa-user"></i>
                            <div><strong>Nama Lengkap:</strong> Tiara Nur Fadilah</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.21</div>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-phone-alt"></i>
                            <div><strong>WhatsApp:</strong> 082138927944</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/smg.jpg" class="img-aesthetic" alt="Semarang">
                </div>
                <div class="col-md-6 pe-md-5">
                    <h2 class="sec-title">Kota Asal</h2>
                    <h4 class="mb-4 text-muted">Semarang, Jawa Tengah</h4>
                    <p class="lead">Lahir dan tumbuh di kota Semarang, kota metropolitan yang kaya akan budaya, kuliner, dan sejarah. Semarang memberikan saya lingkungan yang dinamis untuk tumbuh dan beradaptasi.</p>
                    <p class="lead italic text-muted" style="font-size: 0.9rem;">Growing up in a historical yet modern city shaped my resilience and my desire to explore connectivity beyond borders.</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/smk2.jpg" 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 2 Semarang, saya mulai membangun fondasi teknis saya dalam bidang Rekayasa Perangkat Lunak, Pengalaman ini menjadi titik awal ketertarikan saya dalam teknologi.</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-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 di dapur.</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">Menjelajahi tempat-tempat baru untuk memperluas wawasan dan mencari inspirasi dari keindahan alam.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="hobby-card-lux">
                    <i class="fas fa-running fa-4x mb-4" style="color: var(--velvet-deep);"></i>
                    <h4 class="fw-bold">Sports</h4>
                    <p class="text-muted">Menjaga keseimbangan hidup dan kebugaran tubuh melalui aktivitas fisik agar tetap produktif dan berenergi.</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>