Files
arts-ticule/templates/page/about.html.twig

222 lines
8.9 KiB
Twig
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends 'base.html.twig' %}
{% block metadata %}
{# ============================
METADATA / SEO
============================ #}
{% set meta_title = meta_title is defined
? meta_title
: 'Parcours artistique et engagement culturel arts-ticule'
%}
{% set meta_description = meta_description is defined
? meta_description
: 'Mon parcours professionnel et artistique à lorigine de projets culturels et pédagogiques destinés aux écoles, collectivités et structures daccueil.'
%}
{% set meta_image = meta_image is defined
? meta_image
: asset('images/logo.png')
%}
{% set meta_url = meta_url is defined
? meta_url
: app.request.uri|replace({
'http://': 'https://'
})
%}
{% set meta_site_name = meta_site_name is defined
? meta_site_name
: 'Nom du site'
%}
{% set meta_type = meta_type is defined ? meta_type : 'website' %}
<title>
{{ meta_title }}
</title>
<meta name="description" content="{{ meta_description }}" />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<link rel="canonical" href="{{ meta_url }}" />
{# ============================
OPEN GRAPH (Facebook, LinkedIn…)
============================ #}
<meta property="og:title" content="{{ meta_title }}" />
<meta property="og:description" content="{{ meta_description }}" />
<meta property="og:type" content="{{ meta_type }}" />
<meta property="og:url" content="{{ meta_url }}" />
<meta property="og:image" content="{{ meta_image }}" />
<meta property="og:site_name" content="{{ meta_site_name }}" />
<meta property="og:locale" content="fr_FR" />
{# Optionnel mais recommandé #}
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
{# ============================
TWITTER CARDS
============================ #}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{ meta_title }}" />
<meta name="twitter:description" content="{{ meta_description }}" />
<meta name="twitter:image" content="{{ meta_image }}" />
{% endblock %}
{% block body %}
<main class="isolate">
<!-- Hero section -->
<div class="relative isolate -z-10">
<svg
aria-hidden="true"
class="absolute inset-x-0 top-0 -z-10 h-256 w-full mask-[radial-gradient(32rem_32rem_at_center,white,transparent)] stroke-gray-200"
>
<defs>
<pattern
id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
width="200"
height="200"
x="50%"
y="-1"
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<svg x="50%" y="-1" class="overflow-visible fill-gray-50">
<path
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"
/>
</svg>
<rect
width="100%"
height="100%"
fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
stroke-width="0"
/>
</svg>
<div
aria-hidden="true"
class="absolute top-0 right-0 left-1/2 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
>
<div
style="clip-path: polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)"
class="aspect-801/1036 w-200.25 bg-linear-to-tr from-[#ff80b5] to-[#F59E0B] opacity-30"
></div>
</div>
<div class="overflow-hidden">
<div
class="mx-auto max-w-7xl px-6 pt-36 pb-32 sm:pt-60 lg:px-8 lg:pt-32"
>
<div
class="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center"
>
<div class="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
<h1
class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
>
Compétences artistiques techniques et relationnelles
</h1>
<p
class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none"
>
Grâce à ma formation de professeur déducation manuelle et
technique je maîtrise les bases dans différentes disciplines
dont le cartonnage et la couture. Enseignante jai initié de
nombreux projets artistiques et culturels et notamment avec des
élèves les plus en difficulté. Coordinatrice de léducation
artistique à la DSDEN de lAin jai travaillé en étroite
collaboration avec des compagnies artistiques et des partenaires
institutionnels.
</p>
<p
class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none"
>
Etude du solfège et piano durant plus de 10 ans. Création du
trio « Sans rendez-vous » : chansons françaises (C. Trenet, R.
Barrier...) et mise en scène. Création dun one woman show «
jai trouvé ma voix, euhh ??!!! ma voie » : écriture des textes,
jeu scénique, (accompagnement à la création, Nathalie Stora et
Sylvie Delom atelier du Réverbère, Ambérieu en Bugey).
Participation à des formations clown (Christine Girod, Cie
théâtre-Montroyal), formation au jeu scénique (Master class
Sylvie Delom, Nathalie Stora), écriture de chansons (les
Trapettistes). Initiation de jeunes enfants à la création
artistique, « le chevalier de la Chalaronne ».
</p>
</div>
<div
class="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0"
>
<div
class="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-0 xl:pt-80"
>
<div class="relative">
<img
src="images/about/M-One-man-show.JPG"
alt=""
class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
></div>
</div>
</div>
<div
class="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36"
>
<div class="relative">
<img
src="images/about/mp-carton-invitation-4.jpg"
alt=""
class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
></div>
</div>
<div class="relative">
<img
src="images/about/MP-chevalier-chalaronne.jpg"
alt=""
class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
></div>
</div>
</div>
<div class="w-44 flex-none space-y-8 pt-32 sm:pt-0">
<div class="relative">
<img
src="images/about/sans-rendez-vous-concert-MJC-2004.jpg"
alt=""
class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
></div>
</div>
<div class="relative">
<img
src="images/about/sans-rendez-vous-duo-recadré.jpg"
alt=""
class="aspect-2/3 w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
/>
<div
class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-gray-900/10 ring-inset"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}