@extends('template.index')

@section('title', 'Resume')

@section('content')
    <!-- Page Content-->
    <div class="container px-4 my-5 custom-border-radius">
        <div class="text-center mb-5 reveal-bottom">
            <h1 class="display-5 fw-bolder mb-0"><span class="text-gradient d-inline">Resume</span></h1>
        </div>
        <div class="row gx-5 justify-content-center">
            <div class="col-lg-11 col-xl-9 col-xxl-8">
                <!-- Experience Section-->
                <section class="reveal-bottom">
                    <div class="mb-4">
                        <h2 class="text-primary fw-bolder mb-0 text-center text-lg-start">Experience</h2>
                    </div>
                    <!-- Experience Card 1-->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center gx-4">
                                <div class="col text-center text-lg-start mb-3 mb-lg-0">
                                    <div class="bg-light p-3 rounded-4">
                                        <div class="text-primary fw-bolder mb-2">October 2024 - Present</div>
                                        <div class="text-black small fw-bolder">IT Intern</div>
                                        <div class="small text-muted">PT. Indo Husada Utama</div>
                                        <div class="small text-muted">Jakarta, Indonesia</div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div>In this opportunity I'm gaining my experience in the office. I also helped PT.
                                        Alkeslab Primatama and PT. Bhadra Afiat Thamrin Sadina to make their own website using Laravel.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Education Section-->
                <section class="reveal-bottom">
                    <h2 class="text-secondary fw-bolder mb-3 text-center text-lg-start">Education</h2>

                    <!-- Education Cards-->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center gx-4">
                                <div class="col text-center text-lg-start mb-3 mb-lg-0">
                                    <div class="bg-light p-3 rounded-4">
                                        <div class="text-secondary fw-bolder mb-2">2021 - Present</div>
                                        <div class="text-black small fw-bolder">Gunadarma University</div>
                                        <div class="small text-muted">Depok, Indonesia</div>
                                        <div class="fst-italic small text-muted">Informatics - 3.78 GPA</div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div>In Gunadarma University I joined many courses such as Oracle, Go-Lang, Python, and
                                        many more.</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Other education cards -->
                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row align-items-center gx-4">
                                <div class="col text-center text-lg-start mb-3 mb-lg-0">
                                    <div class="bg-light p-3 rounded-4">
                                        <div class="text-secondary fw-bolder mb-2">2018 - 2021</div>
                                        <div class="text-black small fw-bolder">SMAS Tugu Ibu 1</div>
                                        <div class="small text-muted">Depok, Indonesia</div>
                                        <div class="fst-italic small text-muted">Science Major</div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <div>SMAS Tugu Ibu 1 was my high school. In SMAS Tugu Ibu I wanted to be an IT in the
                                        future, so I joined the science major.</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Skills Section-->
                <section class="reveal-bottom">
                    <!-- Programming Languages -->
                    <div class="d-flex align-items-center mb-4">
                        <div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 me-3">
                            <i class="bi bi-code-slash"></i>
                        </div>
                        <h3 class="fw-bolder mb-0 text-center text-lg-start"><span
                                class="text-gradient d-inline">Languages</span></h3>
                    </div>

                    <div class="card shadow mb-5 custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row row-cols-1 row-cols-md-3 g-3">
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">HTML</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">CSS</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">JavaScript
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Python</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Java</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Golang</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Database Section -->
                    <div class="d-flex align-items-center mb-4">
                        <div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 me-3">
                            <i class="bi bi-database"></i>
                        </div>
                        <h3 class="fw-bolder mb-0"><span class="text-gradient d-inline">Database</span></h3>
                    </div>

                    <div class="card shadow mb-5 custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row row-cols-1 row-cols-md-3 g-3">
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">MySQL</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">PostgreSQL
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">SQLite</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Soft Skills Section -->
                    <div class="d-flex align-items-center mb-4">
                        <div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 me-3">
                            <i class="bi bi-bag"></i>
                        </div>
                        <h3 class="fw-bolder mb-0"><span class="text-gradient d-inline">Soft Skills</span></h3>
                    </div>

                    <div class="card shadow mb-5 reveal-bottom custom-border-radius">
                        <div class="card-body hover-gradient">
                            <div class="row row-cols-1 row-cols-md-3 g-3">
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Communication
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Teamwork</div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Problem-Solving
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Creativity
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Adaptability
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="d-flex align-items-center bg-light rounded-4 p-3 text-black">Critical
                                        Thinking</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Scroller Section -->
                @include('template.scrooler')

            </div>
        </div>
    </div>
@endsection