<?= $this->include('layout/header') ?>

<section class="page-header">
    <h1>Biodata</h1>
    <p>Informasi singkat mengenai identitas diri</p>
</section>

<section class="content biodata-layout-modern">
    <!-- BACKGROUND DECORATION -->
    <div class="glow-bg"></div>

    <!-- FOTO KIRI -->
    <div class="biodata-sidebar">
        <div class="profile-card">
            <div class="img-frame">
                <img src="<?= base_url('img/hero/profile2.jpg') ?>" alt="Foto Profil">
            </div>
            <div class="profile-name-tag">
                <h2>Abelia Putri</h2>
                <span>Web Developer Student</span>
            </div>
            <div class="social-links-profile">
                <a href="https://www.instagram.com/ablaptri.15"><i class="fab fa-instagram"></i></a>
                <a href="https://www.facebook.com/abelia.putri.3954"><i class="fab fa-facebook"></i></a>
                <a href="https://github.com/zfablia"><i class="fab fa-github"></i></a>
            </div>
        </div>
    </div>

    <!-- DATA KANAN -->
    <div class="biodata-main">

        <!-- PERSONAL DATA CARD -->
        <div class="bio-card full-width">
            <div class="card-header">
                <i class="fas fa-user-circle"></i>
                <h3>Data Pribadi</h3>
            </div>
            <div class="bio-details-grid">
                <div class="bio-item">
                    <span class="label">Nama Lengkap</span>
                    <span class="value">Abelia Putri</span>
                </div>
                <div class="bio-item">
                    <span class="label">Tempat, Tgl Lahir</span>
                    <span class="value">Tangerang, 15 Nov 2003</span>
                </div>
                <div class="bio-item">
                    <span class="label">Jenis Kelamin</span>
                    <span class="value">Perempuan</span>
                </div>
                 <div class="bio-item">
                    <span class="label">No. HP</span>
                    <span class="value">089666450306</span>
                </div>
                <div class="bio-item full">
                    <span class="label">Alamat</span>
                    <span class="value">Balaraja, Tangerang-Banten</span>
                </div>
                <div class="bio-item full">
                    <span class="label">Email</span>
                    <span class="value">abeliaputri11@email.com</span>
                </div>
            </div>
        </div>

        <!-- ROW BAWAH -->
        <div class="bio-row">
            <!-- ABOUT -->
            <div class="bio-card">
                <div class="card-header">
                    <i class="fas fa-quote-left"></i>
                    <h3>Profil Singkat</h3>
                </div>
                <p class="bio-desc">
                    Halo! Saya <strong>Abelia Putri</strong>, mahasiswa semester 5 yang tengah mempelajari dunia <em>Web Development</em>. 
                    Saat ini sedang fokus menciptakan antarmuka web yang estetis dan fungsional. 
                    Saya suka mengubah ide menjadi kode yang indah.
                </p>
            </div>

            <!-- SKILLS -->
            <div class="bio-card">
                <div class="card-header">
                    <i class="fas fa-code"></i>
                    <h3>Keahlian</h3>
                </div>
                <div class="skills-container">
                    <span class="skill-pill"><i class="fab fa-html5"></i> HTML</span>
                    <span class="skill-pill"><i class="fab fa-css3-alt"></i> CSS</span>
                    <span class="skill-pill"><i class="fab fa-php"></i> PHP</span>
                    <span class="skill-pill"><i class="fab fa-js"></i> JavaScript</span>
                    <span class="skill-pill"><i class="fab fa-python"></i> Python</span>
                    <span class="skill-pill"><i class="fas fa-pen-nib"></i> UI/UX</span>
                </div>
            </div>
        </div>

    </div>
</section>

<?= $this->include('layout/footer') ?>
