INDEX.HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nama - Tuliskan Cita</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <div class="logo">Portofolio</div>
        <nav class="nav">
            <ul>
                <li><a href="#home" class="active">Home</a></li>
                <li><a href="#skills">Keahlian</a></li>
                <li><a href="#qualification">Sekolah</a></li>
                <li><a href="#services">Hobi</a></li>
                <li><a href="#projects">Kegiatan</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
        <div class="theme-toggle">
            <i class="fa-regular fa-moon"></i>
        </div>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-header">
                <h1>Assallamualaikum, <br>Nama Saya ..<br>Tinggal di ...</h1>
            </div>

            <div class="hero-content">
                <div class="hero-info left-info">
                    <div class="info-block">
                        <h4>BIOGRAPHY</h4>
                        <p>Assallamualaikum nama saya ..., Saya sekarang sekolah di ...., hobi saya adalah ... </p>
                    </div>
                    <div class="info-block">
                        <h4>KONTAK</h4>
                        <p>Tuliskan nama Kota/Kabupaten<br>tuliskan email anda<br>tuliskan alamat rumah</p>
                    </div>
                    <div class="info-block">
                        <h4>HOBI</h4>
                        <p>Foto Editor<br>Bermain Game<br>Menyanyi</p>
                    </div>
                </div>

                <div class="hero-image-container">
                    <div class="image-wrapper">
                        <img src="foto.png" alt="foto">
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fa-regular fa-image"></i></a>
                        <a href="#"><i class="fa-brands fa-github"></i></a>
                        <a href="#"><i class="fa-solid fa-globe"></i></a>
                    </div>
                </div>

                <div class="hero-info right-info">
                    <div class="stat-block">
                        <h4>TAHUN LAHIR</h4>
                        <h2>1968</h2>
                    </div>
                    <div class="stat-block">
                        <h4>BULAN</h4>
                        <h2>Juni</h2>
                    </div>
                    <div class="stat-block">
                        <h4>TANGGAL</h4>
                        <h2>26</h2>
                    </div>
                </div>
            </div>
        </section>

        <hr class="section-divider">

        <section id="skills" class="skills-section">
            <div class="section-title">
                <h2>Skills di bidang IT</h2>
                <p>My favorite skills</p>
            </div>

            <div class="skills-container">
                <div class="skill-category">
                    <h3 class="category-title"><i class="fa-solid fa-code"></i> Frontend Developer</h3>
                    <div class="skill-grid">
                        <div class="skill-item">
                            <i class="fa-brands fa-html5" style="color: #E34F26;"></i>
                            <span class="skill-name">HTML</span>
                            <span class="skill-level">Sangat Ahli</span>
                        </div>
                        <div class="skill-item">
                            <i class="fa-brands fa-css3-alt" style="color: #1572B6;"></i>
                            <span class="skill-name">CSS</span>
                            <span class="skill-level">Ahli</span>
                        </div>
                        <div class="skill-item">
                            <i class="fa-brands fa-js" style="color: #F7DF1E;"></i>
                            <span class="skill-name">JavaScript</span>
                            <span class="skill-level">Cukup Ahli</span>
                        </div>
                    </div>
                </div>

                <div class="skill-category">
                    <h3 class="category-title"><i class="fa-solid fa-pen-nib"></i> Web Designer</h3>
                    <div class="skill-grid">
                        <div class="skill-item">
                            <i class="fa-brands fa-figma" style="color: #F24E1E;"></i>
                            <span class="skill-name">Figma</span>
                            <span class="skill-level">Sangat Ahli</span>
                        </div>
                        <div class="skill-item">
                            <i class="fa-solid fa-gem" style="color: #FDAD00;"></i>
                            <span class="skill-name">Sketch</span>
                            <span class="skill-level">Sangat Ahli</span>
                        </div>
                        <div class="skill-item">
                            <i class="fa-solid fa-code" style="color: #28dd8f"></i>
                            <span class="skill-name">Coding</span>
                            <span class="skill-level">Sangat Ahli</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

</body>
</html>