{{ define "main" }}
<div class="container">
  <section class="section hero">
    <div class="hero-info">
      <h1 class="hero-title">{{ .Title }}</h1>
      {{ with .Params.subtitle }}
        <p class="hero-subtitle">{{. | markdownify}}</p>
      {{ end }}
      <div class="btn-group">
        {{ $p_cta := "" }}
        {{ with .Params.primary_cta_page }}
          {{ $p_cta = . }}
        {{ end }}
        {{ $s_cta := "" }}
        {{ with .Params.secondary_cta_page }}
          {{ $s_cta = . }}
        {{ end }}
        <a class="btn-primary"
           href="{{ with $p_cta }}{{ . | relURL }}{{ else }}{{ "about" | relLangURL }}{{ end }}">
           {{ if $p_cta }}{{ with .Site.GetPage $p_cta }}{{ .LinkTitle }}{{ end }}{{ else }}{{ with .GetPage "about/index.md" }}
           {{ .Title }}
         {{ end }}
         {{ end }}
        </a>
        <a class="btn-secondary"
           href="{{ with $s_cta }}{{ . | relURL }}{{ else }}{{ "projets" | relLangURL }}{{ end }}">
           {{ if $s_cta }}{{ with .Site.GetPage $s_cta }}{{ .LinkTitle }}{{ end }}{{ else }}{{ with .GetPage "projets/_index.md" }}
           {{ .Title }}
         {{ end }}{{ end }}
        </a>
      </div>
    </div>
    <div class="hero-owner">
      {{ $avatar := .Site.Params.avatar }}
      {{ $default_image := "images/default.png" }}
      {{ $image := "" }}
      {{ with $avatar }}
        {{ $image = resources.Get $avatar }}
      {{ else }}
        {{ $image = resources.Get $default_image }}
      {{ end }}
      {{ if eq .Site.Params.grayscale_avatar true }}
        {{ $image = $image | images.Filter (images.Grayscale)  }}
      {{ end }}
      <img class="hero-avatar"
            src="{{ $image.RelPermalink }}"
            width="{{- $image.Width -}}" height="{{- $image.Height -}}"
            alt="Headshot or avatar belonging to the website owner"/>
      {{ if eq .Site.Params.home_hero_socials true }}
        {{ partial "general/social-links.html" . }}
      {{ end }}
    </div>
  </section>
  {{/*  Shortcodes from page content  */}}
  <section>
  
    <h2>{{.Site.Params.screeenshotTitle}}</h2>
<div class="slider">
  <div class="slide-track">
    {{ $screenshots := (.Site.GetPage "/screenshots").Resources }}
    {{$o := resources.Match "uploads/screenshots/*.png"}}
    {{range $o}}
    {{$o_alter := .Resize "600x webp q50"}}
    <a href='{{.Permalink}}'><img class="caroussel-img slide" src="{{.Permalink}}" href='{{.}}'></a>
   {{end}}
  </div>
  </div>
  </section>
  {{ .Content }}
</div>
{{ end }}