<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portofolio</title>
        <link rel="icon" href="business-phone.png" type="image/png">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="wrapper" class="d-flex">
            <nav id="sidebar" class="navbar navbar-dark bg-dark p-3">
                <button id="close-btn" class="btn btn-danger position-absolute" style="top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.3s, transform 0.3s;">
                    &times;
                </button>
            
                <a href="#" class="navbar-brand mt-5">Profil Saya</a>
                
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#about" class="nav-link text-light"><i class="fas fa-user"></i> Tentang Saya</a>
                    </li>
                    <li class="nav-item">
                        <a href="#skills" class="nav-link text-light"><i class="fas fa-cogs"></i> Keahlian</a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link text-light"><i class="fas fa-folder"></i> Proyek</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link text-light"><i class="fas fa-envelope"></i> Kontak</a>
                    </li>
                </ul>
            
                <div class="sidebar-footer text-light mt-auto">
                    <p>&copy; [Aurindra Maulidzar]. Developer</p>
                </div>
            </nav>
            
    
            <button id="open-btn" class="btn btn-danger position-fixed" style="top: 20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; display: none; justify-content: center; align-items: center; font-size: 18px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.3s, transform 0.3s;">
                &equiv;
            </button>
    
            <div class="container-fluid p-4" id="main-content">
                <section id="about" class="mb-5">
                    <h2>Tentang Saya</h2>
                    <p class="lead">
                        Halo saya <strong>Aurindra Maulidzar S</strong>, 
                        seorang Mahasiswa aktif <strong>UNIVERSITAS KOMPUTER INDONESIA</strong>,
                        jurusan <strong>TEKNIK INFORMATIKA</strong>, saya berumur 20 tahun
                        saya memiliki keahlian programer saat tahun 2022, saya belajar
                        otodidak, bahasa pertama yang saya pelajari adalah <strong>.Lua</strong>
                        dan project pertama yang saya buat adalah <strong>FiveM dengan nama KOTAKITA</strong>
                    </p>
                    <img src="https://cdn.discordapp.com/attachments/1156554502577594400/1312734986264121405/IMG_4523.jpg?ex=674d933a&is=674c41ba&hm=06555c4ed05544f048c00f697f2fbeac04b367a4450d746b823412ec103eeb37&" alt="Foto Profil" class="img-fluid rounded-circle mb-3" style="width: 150px;">
                    <p>
                        Sampai saat ini saya masih senang mempelajari pemrograman 
                        sambil saya berusaha menggapai cita cita
                        saya yaitu menjadi seorang Taruna Akademi TNI
                    </p>
                </section>
            
                <section id="skills" class="mb-5">
                    <h2>Keahlian</h2>
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Bahasa Pemrograman</h5>
                            <ul>
                                <li>Lua</li>
                                <li>HTML</li>
                                <li>CSS</li>
                                <li>JavaScript</li>
                                <li>Python</li>
                                <li>C#</li>
                                <li>C++</li>
                                <li>Java</li>
                            </ul>
                        </div>

                        <div class="col-md-6">
                            <h5>Framework & Tools</h5>
                            <ul>
                                <li>Bootstrap</li>
                                <li>React</li>
                                <li>Node.js</li>
                                <li>ESX</li>
                                <li>QB</li>
                                <li>Redm:RP</li>
                            </ul>
                        </div>
                    </div>
                </section>
            
                <section id="projects" class="mb-5">
                    <h2>Proyek</h2>
                    <p>Berikut adalah beberapa proyek yang pernah saya kerjakan :</p>
                    <div class="card-deck">
                        <!-- <div class="card mt-4">
                            <img src="path/to/project1.jpg" class="card-img-top" alt="Proyek 1">
                            <div class="card-body">
                                <h5 class="card-title">Proyek 1: Nama Proyek</h5>
                                <p class="card-text">Deskripsi singkat tentang proyek ini, tantangan yang dihadapi, dan solusi yang diterapkan.</p>
                            </div>
                        </div> -->

                        <div class="card mt-4">
                            <img src="https://cdn.discordapp.com/attachments/1209522196020600863/1210008927899492392/image.png?ex=674cf4a1&is=674ba321&hm=947e2833256252fc56ac08aacbc35d058c35fd3a3393a11e518c254c3014eef7&" class="card-img-top" alt="Proyek 2">
                            <div class="card-body">
                                <h5 class="card-title">Proyek 1: Membuat GUI Lobby</h5>
                                <p class="card-text">GUI untuk memilih Lobby, untuk server Paleto Bay Freeroam</p>
                            </div>
                        </div>

                        <!-- <div class="card mt-4">
                            <img src="path/to/project3.jpg" class="card-img-top" alt="Proyek 3">
                            <div class="card-body">
                                <h5 class="card-title">Proyek 3: Nama Proyek</h5>
                                <p class="card-text">Deskripsi singkat tentang proyek ini, tantangan yang dihadapi, dan solusi yang diterapkan.</p>
                            </div>
                        </div> -->
                    </div>
                </section>
            
                <section id="contact" class="mb-5">
                    <h2>Kontak</h2>
                    <p>Anda dapat menghubungi saya melalui berbagai platform berikut:</p>
                    
                    <ul class="list-unstyled">
                        <li><i class="fas fa-envelope"></i> Email: <a href="mailto:[aurindra144@gmail.com]">[aurindra144@gmail.com]</a></li>
                        <li><i class="fab fa-linkedin"></i> LinkedIn: <a href="https://www.linkedin.com/in/aurindra-maulidzar-3a1b95328">[linkedin.com/in/aurindra]</a></li>
                        <li><i class="fab fa-github"></i> GitHub: <a href="https://github.com/ahruwet">[github.com/ahruwet]</a></li>
                    
                    </ul>
                    <p class="text-muted">Saya selalu terbuka untuk diskusi dan kolaborasi. Mari terhubung!</p>
                </section>
            </div>
        </div>
    
        <script src="script.js"></script>
    </body>
</html>