templates/pages/index-portfolio.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Portfolio — Raw Studio{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link rel="stylesheet" href="{{ asset('assets/css/portfolio.css') }}">
  8.     <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;800;900&family=Work+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  9. {% endblock %}
  11. {% block body %}
  13. <section class="hero">
  14.     <div class="eyebrow">NOS RÉALISATIONS</div>
  15.     <h1>Portfolio</h1>
  16.     <p>Chaque projet est une prise de vue brute, pensée pour raconter une histoire précise. Filtrez par service pour explorer nos réalisations.</p>
  18.     {# ---- Niveau 1 : catégories (Photo / Vidéographie...) ---- #}    
  19. </section>
  20. <div class="filters-wrap">
  21.     <div class="cat-tabs" id="catTabs" data-preselect="{{ preselectCategory }}">
  22.         {% for category in categories %}
  23.             <button class="cat-tab {{ preselectCategory == category.slug ? 'active' }}" data-cat="{{ category.slug }}">
  24.                 {{ category.name|upper }}
  25.             </button>
  26.         {% endfor %}
  27.     </div>
  28. </div>
  31. <div class="filters-wrap">    
  33.     {# ---- Niveau 2 : services, filtrés selon la catégorie active ---- #}
  34.     <div class="filters" id="filters" data-preselect="{{ preselectService }}">
  35.         <button class="pill {{ preselectService == 'all' ? 'active' }}" data-filter="all">TOUT</button>
  36.         {% for service in services %}
  37.             <button class="pill {{ preselectService == service.slug ? 'active' }}"
  38.                     data-filter="{{ service.slug }}"
  39.                     data-category="{{ service.categoryService.slug }}">
  40.                 {{ service.name|upper }}
  41.             </button>
  42.         {% endfor %}
  43.         <span class="count"><b id="countNum">{{ albums|length }}</b> projets</span>
  44.     </div>
  46. </div>
  48. <div class="grid" id="grid">
  49.     {% for album in albums %}
  50.         <div class="card" data-cat="{{ album.service.slug }}" data-category="{{ album.service.categoryService.slug }}">
  51.             <a href="{{ path('portfolio_albums', {serviceSlug:album.service.slug, id:album.id}) }}">
  52.                 <img src="{{ asset('assets/img/portfolio/cover/' ~ album.cover) }}" alt="{{ album.title }}" loading="lazy">
  53.                 <div class="corner tl"></div>
  54.                 <div class="corner tr"></div>
  55.                 <div class="corner bl"></div>
  56.                 <div class="corner br"></div>
  57.                 <div class="rec"><span class="dot"></span></div>
  58.                 <div class="overlay">
  59.                     <span class="tag">{{ album.service.name }}</span>
  60.                     <div class="title">{{ album.title }}</div>
  61.                     
  62.                 </div>
  63.             </a>
  64.         </div>
  65.     {% else %}
  66.         <p style="color:var(--muted)">Aucun album pour le moment.</p>
  67.     {% endfor %}
  68. </div>
  70. {% endblock %}
  72. {% block javascripts %}
  73.     {{ parent() }}
  74.     <script src="{{ asset('assets/js/portfolio.js') }}"></script>
  75. {% endblock %}