@extends('layouts.welcomeL')

@section('content')
<div id="started">
    <div class="container-fluid">
        <h1 data-aos="flip-up" data-aos-duration="500">WELCOME TO MY WEBSITE</h1>
        <p data-aos="zoom-in" data-aos-duration="800">Berusaha untuk lebih baik
            dan menjadi yang terbaik</p>
        <a href="#skill" class="btn btn-primary">Learn About Me</a>
        <a href="#blog" class="btn btn-light">Read My Blogs</a>
    </div>
</div>

<div id="skill">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-6">
                <h1>My Skills</h1>
                <h4 data-aos="fade-zoom" data-aos-offset="300"><i class="fab fa-html5 html-i"></i> <i
                        class="fab fa-css3-alt css-i"></i> <i class="fab fa-js js-i"></i> HTML5 CSS3 &amp; Javascript ES6</h4>
                <div data-aos="fade-right" data-aos-offset="300" class="skill-container">
                    <div class="skills html">100%</div>
                </div>
                <h4 data-aos="fade-zoom" data-aos-offset="250"><i class="fab fa-php php-i"></i> PHP & MySQL</h4>
                <div data-aos="fade-right" data-aos-offset="250" class="skill-container">
                    <div class="skills php">100%</div>
                </div>
                <h4 data-aos="fade-zoom" data-aos-offset="200"><i class="fab fa-sass sass-i"></i> SASS</h4>
                <div data-aos="fade-right" data-aos-offset="200" class="skill-container">
                    <div class="skills sass">95%</div>
                </div>
                <h4 data-aos="fade-zoom" data-aos-offset="150"><i class="fab fa-laravel laravel-i"></i> Laravel</h4>
                <div data-aos="fade-right" data-aos-offset="150" class="skill-container">
                    <div class="skills laravel">90%</div>
                </div>
                <h4 data-aos="fade-zoom" data-aos-offset="100"><i class="fab fa-react react-i"></i> React</h4>
                <div data-aos="fade-right" data-aos-offset="100" class="skill-container">
                    <div class="skills react">80%</div>
                </div>
                <h4 data-aos="fade-zoom" data-aos-offset="50"><i class="fab fa-vuejs vue-i"></i> Vue Js</h4>
                <div data-aos="fade-right" data-aos-offset="50" class="skill-container">
                    <div class="skills vue">85%</div>
                </div>
                <a href="/pdfdownload" data-aos="fade-zoom" data-aos-offset="25" href="" class="btn btn-dark">Download PDF</a>
            </div>
            <div data-aos="fade-left" data-aos-offset="500" class="col-md-5 image mb-5">
                <img class="img-fluid w-100" src="{{ asset('assets/me.jpg') }}" alt="">
                {{-- <a href="/dateme"><img class="img-fluid" src="{{ asset('assets/me.jpg') }}" alt=""></a> --}}
            </div>
        </div>
    </div>


</div>
<div id="services">
    <div class="container">
        <h1>My Services</h1>
        <div class="row d-flex justify-content-around">
            <div data-aos="fade-zoom" data-aos-duration="200" class="col-md-3">
                <h2><i class="fas fa-file-certificate"></i></h2>
                <h3>24</h3>
                <h4>Certificate</h4>
            </div>
            <div data-aos="fade-zoom" data-aos-duration="200" class="col-md-3">
                <h2><i class="fas fa-file"></i></h2>
                <h3>15</h3>
                <h4>Projects Completed</h4>
            </div>
        </div>
    </div>
</div>

<div id="blog">
    <h1>Public Blog</h1>
    <div class="container">
        <div class="row">
            <div data-aos="fade-right" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work1.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/pendidikan">
                        <h2>Pendidikan</h2>
                    </a>
                </div>
            </div>
            <div data-aos="fade-down" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work2.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/olahraga">
                        <h2>Olahraga</h2>
                    </a>
                </div>
            </div>
            <div data-aos="fade-left" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work3.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/sosial">
                        <h2>Sosial</h2>
                    </a>
                </div>
            </div>
        </div>
        <div class="row">
            <div data-aos="fade-right" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work4.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/sejarah">
                        <h2>Sejarah</h2>
                    </a>
                </div>
            </div>
            <div data-aos="fade-up" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work5.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/teknologi">
                        <h2>Teknologi</h2>
                    </a>
                </div>
            </div>
            <div data-aos="fade-left" data-aos-offset="350" class="col-md-4"><img class="img-fluid"
                    src="{{ asset('assets/work6.jpg') }}" alt="">
                <div class="isi">
                    <p>Category :</p>
                    <a href="/blog/politik">
                        <h2>Politik</h2>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="recent">
    <h1>Recent Blog</h1>
    <div class="container">
        <div class="row justify-content-center">
            @php $recent = 200 @endphp
            @foreach ($blogs as $blog)
            <div class="col-md-4" data-aos="fade" data-aos-offset="{{ $recent }}" data-aos-duration="500">
                <img class="img-fluid" src="{{ asset($blog->image) }}" alt="Foto {{ $blog->judul }}">
                <div class="container">
                    <div class="blog-info d-flex justify-content-end">
                        <i class="far fa-user"></i> <span class="ml-1">{{$blog->user->name}}</span>
                        <i class="far fa-clock"></i> <span class="ml-1">{{$blog->updated_at->format('d F Y')}}</span>
                        <i class="far fa-list"></i> <span class="ml-1">{{$blog->kategori}}</span>
                    </div>
                    <p class="judul">{{ $blog->judul }}</p>
                    <p><a href="/blog/{{$blog->kategori}}/{{$blog->slug}}">Read More</a></p>
                </div>
            </div>
            @php $recent += 100 @endphp
            @endforeach
        </div>
    </div>
</div>
@endsection