Init project
This commit is contained in:
226
templates/page/about.html.twig
Normal file
226
templates/page/about.html.twig
Normal file
@@ -0,0 +1,226 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
{% block metadata %}
|
||||
{# ============================
|
||||
METADATA / SEO
|
||||
============================ #}
|
||||
|
||||
{% set meta_title = meta_title is defined
|
||||
? meta_title
|
||||
: 'À propos – Parcours artistique et engagement culturel'
|
||||
%}
|
||||
{% set meta_description = meta_description is defined
|
||||
? meta_description
|
||||
: 'Découvrez le parcours professionnel et artistique à l’origine de projets culturels et pédagogiques destinés aux écoles, collectivités et structures d’accueil.'
|
||||
%}
|
||||
{% set meta_image = meta_image is defined
|
||||
? meta_image
|
||||
: asset('images/logo.jpg')
|
||||
%}
|
||||
{% set meta_url = meta_url is defined ? meta_url : app.request.uri %}
|
||||
{% 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"
|
||||
>
|
||||
A titre professionnel
|
||||
</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"
|
||||
>
|
||||
Après une carrière au sein de l’Education Nationale, je souhaite
|
||||
poursuivre mon activité et mettre au service de chacun mes
|
||||
expériences acquises. 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 j’ai 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 l’Ain j’ai
|
||||
approché le fonctionnement des compagnies artistiques et
|
||||
rencontré des partenaires institutionnels.
|
||||
</p>
|
||||
<h2
|
||||
class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl mt-5"
|
||||
>
|
||||
A titre personnel
|
||||
</h2>
|
||||
<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"
|
||||
>
|
||||
J’ai étudié solfège et piano durant plusieurs années. Avec deux
|
||||
amies nous avons créé le Trio « Sans rendez-vous », chants et
|
||||
mise en scène J’ai créé un One woman show : j’ai perdu ma voie :
|
||||
écriture des textes, jeu scénique, accompagnement à la création,
|
||||
Sylvie Delom atelier du Réverbère Passionnée par les arts
|
||||
vivants, j’ai participé à plusieurs formations autour du clown
|
||||
(Christine Girod), du jeu scénique (Sylvie Delom, Nathalie
|
||||
Stora), l’écriture de chansons (les Trapettistes)
|
||||
</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"
|
||||
>
|
||||
Très manuelle, je cherche à donner vie et exploiter les
|
||||
matériaux qui sont à ma disposition et à moindre coût.
|
||||
Initiation à la création artistique avec de jeunes enfants « 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/mp-photo-affiche.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/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/mp-photo-affiche.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/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/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 %}
|
||||
Reference in New Issue
Block a user