@extends('layouts.dashboard')
@section('title', 'Muhamad Ndaru | Portfolio')
@section('dashboard_content')
    <!-- INTRO -->
    <div>
        <div class="intro wave-background position-relative d-flex justify-content-center align-items-center" id="home">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-4 img-intro" data-aos="fade-up">
                        <img src="{{asset('images/me.jpeg')}}" class="rounded-circle shadow" alt="Muhamad Ndaru">
                    </div>
                    <div class="col-xl-9 col-8 text-intro d-flex align-items-center" data-aos="fade-down">
                        <p>Hello There,
                            <br> 
                            <a href="{{route('login')}}" class="text-i">I'm</a> <b>Muhamad Ndaru Hestiafin!</b>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- PARTICLE -->
        <div id="particles-js"></div>
        
        <div class="container">
            <!-- SHORT PROFILE -->
            <div data-aos="fade-left" id="intro">
                <div class="row">
                    <div class="col-xl-6 profile-img-display">
                        <img src="{{asset('images/4fun.png')}}" alt="">
                    </div>
                    <div class="col-xl-6 profile-text">
                        <h3 class="content-heading mb-3">Short Profile About Me</h3>
                        <p>I'm <b>Muhamad Ndaru Hestiafin</b>. At the moment, i'am a vocational high school student at SMKN 2 Jakarta and owner of <a href="https://www.tukangilmu.com/">tukangilmu.com</a> blog site. I like to share, whether it's about my experience and skill what i have. I also like to challenge myself to do things that I find difficult to solve
                            in order to change things around for the better.</p>
                        <p>I also like to train my leadership style, socialization ability, and english ability to improve my soft skills.</p>
                        <p>Uhm, I also love youth and social leadership activities because it can train me to socialize and broaden my horizons about good leadership to achieve my goals.</p>
                        <p>Besides, for the entertainment i usually like make a random project (prototype), playing games, travel, and i'm so fucking like riding a motorcycle. That's Waww <i class="far fa-thumbs-up ml-1"></i></p>
                    </div>
                    <div class="col-xl-6 profile-img">
                        <img src="{{asset('images/4fun.png')}}" alt="">
                    </div>
                </div>
            </div>
            
            <!-- SKILLS -->
            <div class="mt-5" id="skills">
                <div class="row">
                    <div class="col-xl-6 skills-image d-flex justify-content-center align-items-center" data-aos="fade-up">
                        <img src="{{asset('images/monitor.png')}}" alt="">
                    </div>
            
                    <div class="col-xl-6 skills-content">
                        <h3 class="content-heading mb-4" data-aos="fade-up">Hard Skills That I Still Continue To Practice</h3>
                        <div class="row">
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill ui-ux">
                                    <i class="fas fa-rocket fa-2x"></i>
                                    <p class="pt-2">UI & UX</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill laravel">
                                    <i class="fab fa-laravel fa-2x"></i>
                                    <p class="pt-2">Laravel</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill bootstrap">
                                    <i class="fab fa-bootstrap fa-2x"></i>
                                    <p class="pt-2">Bootstrap</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill php">
                                    <i class="fab fa-php fa-2x"></i>
                                    <p class="pt-2">PHP & MySQL</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill git">
                                    <i class="fab fa-git fa-2x"></i>
                                    <p class="pt-2">GIT</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill adobe">
                                    <i class="fab fa-adobe fa-2x"></i>
                                    <p class="pt-2">Photoshop</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill wordpress">
                                    <i class="fab fa-wordpress fa-2x"></i>
                                    <p class="pt-2">CMS (70%)</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill blogger">
                                    <i class="fab fa-blogger-b fa-2x"></i>
                                    <p class="pt-2">Blogger</p>
                                </div>
                            </div>
            
                            <div class="col-xl-4 col-4 skill-spacing" data-aos="flip-left">
                                <div class="col-md-12 py-3 skill english">
                                    <i class="fas fa-language fa-2x"></i>
                                    <p class="pt-2">English (45%)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- EXPERIENCE & ACHIEVEMENT -->
            <div class="my-5" id="point">
                <div class="row">
                    <div class="col-xl-6 point-spacing" data-aos="fade-up">
                        <div class="col-md-12 point experience">
                            <p class="mb-3"><i class="fas fa-paper-plane mr-2"></i> My Experiences</p>
                            <ul>
                                <li>Take a Web Design Course (2016)</li>
                                <li>Take Microsoft Office Training - Bina Nusantara (2016)</li>
                                <li>Develop a SMKN 2 Jakarta's Website</li>
                                <li>Take CodeIgniter CRUD Training - Bina Nusantara (2018)</li>
                                <li>Take GIT, Ruby, Ruby On Rails Training - SMK Negeri 2 Jakarta (2019)</li>
                                <li>Industrial Work Practice For 6 Months at PT. Widigital Tribuana (2018 - 2019)</li>
                                <li>Chair Of IT Club Organization at 2 Vocational High School Jakarta</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-6 point-spacing" data-aos="fade-down">
                        <div class="col-md-12 point achievement">
                            <p class="mb-3"><i class="fas fa-trophy mr-2"></i> My Achievement</p>
                            <ul>
                                <li>1st Place National Student Sports Olympiad (O2SN) Karate in Central Jakarta Level (2018)</li>
                                <li>3rd Place Musabaqah Tilawatil Quran School Level - 2 Vocational High School Jakarta (2019)</li>
                                <li>2x 1st Place Web Design & Development Student Competition (LKS) in Central Jakarta Level (2018 & 2019)</li>
                                <li>Runner-up 3 Web Design & Development Student Competition (LKS) in DKI Jakarta Level (2019)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        
        <!-- FOOTER -->
        <div class="footer wave-background position-relative d-flex justify-content-center align-items-center">
            <p data-aos="zoom-in-up">
                <b>I'm Ready!!</b> 
                <br>
                Feel free to contact me <i class="far fa-smile ml-1"></i>
                <br>
                <a href="mailto:muhamad.ndaru@gmail.com" target="_blank" class="btn btn-gmail contact-btn rounded-circle shadow" title="Gmail">
                    <i class="fas fa-envelope"></i>
                </a>
                <a href="https://api.whatsapp.com/send?phone=+6285717084803" target="_blank" class="btn btn-whatsapp contact-btn rounded-circle shadow" title="Whatsapp">
                    <i class="fab fa-whatsapp"></i>
                </a>
            </p>
        </div>
    </div>
@endsection