{% extends "base.html.twig"%}
{% block body %}
{% include "bandeauImg.html.twig" %}
<style>
.scroll{
    opacity: 0;
    transform: translate(-30px);
}
.scroll-visible{
    opacity: 1;
    transform: translate(0);
    transition: .3s cubic-bezier(0,.73,1,.17) ;
}
.clignote  {
   animation-duration: .8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

</style>


<div class="container" style="margin:auto ;">
              <div class="container4" style="width:auto; margin:0;">
                  <nav aria-label="breadcrumb"class="fil" >
                     <ol class="breadcrumb">
                       <li class="breadcrumb-item active" aria-current="page">Accueil</li>
                     </ol>
                  </nav>
                      
                 <div class="titre"  >
                     <a href="{{path('artDigital')}} "><h3 class="colorYellow">art digital</h3></a>
                    
                 </div>
                     <p class="presentation">Travail de Facundo en numérique, tablette graphique. Il trouve des images lors de ses balades urbaines en Ile de France ou sur internet.</p>
                        <div class="oeuvre scroll">
                         {% for oeuvre in oeuvres  %}
                   			        {% if oeuvre.image %}
                           <div class="oeuvreSousImage">
                   	             <div class="totalus">
                                     <div class="image1" style="width: 100%; ">
                                            

                                             
                                         <a href=" {{ path('app_oeuvre_show', {'id': oeuvre.id}) }}">	<img src="{{ asset('images/oeuvre/' ~ oeuvre.image ) }}" alt="art digital de facundo varas street-art,portait paysage urbain hstoire" class ="img300"></a>
                                      </div> 
                                 </div>
                                 <div class="sousImage">
                                           <div class="titreSousImage">
                                               <p class="colorYellow">{{oeuvre.titre}} </p>
                                           </div>
                                           <div class="buttonSousImage">
                                               <button>   <a href=" {{ path('app_oeuvre_show', {'id': oeuvre.id}) }}"> En savoir plus</a> </button>
                                           </div>
                                        </div>
                                   </div>
                            {% endif %}
                          {% endfor %}  
                      
                    </div>
                 
         {{ render(controller('App\\Controller\\OeuvresController::index')) }}

         
           <div class="titre scroll">
                  <h3 class="colorYellow propo">à propos</h3>
           </div>
           <div class="apropoMoi scroll ">
               <div class="moi">

              <img src="{{asset('images/oeuvre/moi.png')}} " alt="portrait de Facundo 
Varas">
               </div>
               <div class="apropo scroll " id="ancre">
       
                  <p>Né en 1980, Facundo roule sa bosse dans la région parisienne, qu'il 
trouve jolie mais un peu grise. Il y fait de multiples boulots qui 
l'entraînent vers les enfants puis la logistique d'une chocolaterie. . . 
Pendant ce temps formateur et enrichissant, il élabore, de ci de là, 
quelques peintures, inspirées par la mégalopole, avec plein de couleurs ! 
Autodidacte, il s'adonne au montage photo et, maintenant, à la peinture 
digitale. Facundo participera à plusieurs expositions personnelles et 
collectives ainsi qu'au fanzine L'encornée Synthétique du collectif 
d'artistes Du Bout Des Étangs où il s'impliquera pendant quelques belles 
années ! Neva est son premier 
album</p>
<p> Facundo est développeur web en herbe et vous pouvez voir son travail <a href="https://portfolio.varascundo.com/" target="_blank" class="clignote" >ici</a> </p>
                     
               </div>
       </div>
               </div>
         

       















 {% block javascripts %}
  {{ encore_entry_script_tags('pageAccueil2') }} 
  <script>
 const ratio=.1;
 const options = {
    root: null,
    rootMargin: '0px',
    threshold: ratio
  }
  const handleIntersect=function(entries,observer){
    entries.forEach(function(entry) {
      if(entry.intersectionRatio>ratio){
        console.log('visible')
        entry.target.classList.add("scroll-visible")
        observer.unobserve(entry.target)
      }else{
        console.log('invisible')
      }
      
    });
    // console.log('handleIntersect')

  };
  const observer = new IntersectionObserver(handleIntersect, options);
   document.querySelectorAll('.scroll').forEach(function(r){
 observer.observe(r)
   }) ;
 
  
 
 
 </script>
  
{% endblock %} 


{% endblock %}