@extends('layout')
@section('content')
@section('title', 'Accueil')
@section('description', 'Je suis un développeur Full Stack sur Bordeaux. Développeur Full Stack chez Omnia Communication ainsi que créative dev. Je posséde des connaissances sur de nombreux Framework comme Laravel, React.js, Vue.js ou bien encore Ruby on Rails')

<section class="first_view">
    
    <span class="span_title1"><span class="underline"></span>Creative &nbsp;</span> <span class="span_title2">developer</span>
    <div class="loading"></div>
    <a href="#secondContainer" class="from_top  text-decoration-none">
        <p class="m-0">Passer à la suite</p>
    </a>
    <h2 class="dev_web"> Yohann Tonnerre</h2>
    <h1 class="chouette">CREATIVE DEVELOPER</h1>
</section>

<section id="secondContainer" class="description_container">
    <h4 class="qui_suis_je">Qui suis-je?</h4>
    <p style="--i:1s" class="description_p">Etudiant MMI à l'IUT Bordeaux Montaigne en seconde année. Je suis diplomé d'un bac STI2D mention bien.</p>
    <p style="--i:1.5s" class="description_p">Je suis passionné depuis quelques années par le developpement web, l'aspect front-end m'interesse tout autant que le back-end.</p>
    <p style="--i:2s" class="description_p">Cependant j'ai aussi des notions en SEO, réseaux, developpement de jeu vidéo et de graphisme.</p>
    <p style="--i:2.5s" class="description_p">J'ai la eu chance de developper plusieurs sites internets pour des clients/entreprises comme par exemple: Retrogarage, Makito, Omnia-communication et Quoi thé.</p>
    <p style="--i:3s" class="description_p">Quand je ne tape pas des lignes de codes, je fais du sport et de la musique.</p>
</section>


    
<section class="project_container">
    <h3 class="portfolio_title">Mes derniers projets</h3>
    @foreach ($projects as $project)
    @php $name = json_decode($project->name,true); @endphp
        <div class="each_project_container">
            <div class="info_container">
                <p style="--i:.25s" class="project_title">{{$project['title']}}</p>
                <p style="--i:.5s" class="project_description">{{$project['description']}}</p>
                <p style="--i:.75s" class="project_technology">{{$project['technology']}}</p>
                @if($project['link'] != '#')
                    <a style="--i:1.5s" target="_blank" href="{{$project['link']}}">Visiter le site</a>
                
                @endif
            </div>
            <div class="fake_container_img">
                <div  class="fake_container">
                    <div style="--color: {{$project['color']}}" class="faked"></div>
                </div>
                <div class="img_container">
                    @foreach ($name as $img)
                        <img loading="lazy" class="project_img" src="uploads/{{$img}}" alt="Image de {{$project['title']}}">
                    @endforeach
                </div>
                <div class="progress_bar_container">
                    <div style="background-color: {{$project['color']}};" class="progress_bar"></div>
                </div>
            </div>
        </div>
    @endforeach
    <a class="voir_projet" href="{{route('projets')}}">
        <p> Voir plus de projet</p>
    </a>
</section>
<script src="/js/loader.js"></script>
<script src="/js/viewport.js"></script>
<script src="/js/scrollHome.js"></script>
<script src="/js/scroll.js"></script>
<script src="/js/slider.js"></script>
<script src="/js/btnHover.js"></script>
@endsection