433 lines
38 KiB
HTML
Executable file
433 lines
38 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=320, initial-scale=1">
|
|
<title>Développeur web écologique à Lyon</title>
|
|
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1 style="display: none;">Développeur web écologique à Lyon</h1>
|
|
<div class="half white">
|
|
<p class="slogan">Solutions web écologiques</p>
|
|
<p class="name">Matt<span class="light">hias</span></p>
|
|
</div>
|
|
<div class="half blue">
|
|
<p class="name">M<span class="mar">a</span>r<span class="light">tin-</span><br /> <span class="cha">C</span>ha<span class="light">ve</span></p>
|
|
</div>
|
|
</header>
|
|
|
|
<input class="a-propos toggle" type="checkbox" />
|
|
<section id="a-propos" class="content">
|
|
<nav>
|
|
<div class="toggle-buttons">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card" class="open svg-inline--fa fa-address-card fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path></svg>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
|
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
|
</svg>
|
|
</div>
|
|
</nav>
|
|
<div class="content">
|
|
<h2>À propos</h2>
|
|
<p class="resume">
|
|
Je suis un développeur web <span class="featured">polyvalent</span>, appliqué à articuler passions et valeurs.
|
|
</p>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="a-propos" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="a-propos" />
|
|
</div>
|
|
<h3 class="accordion-title">Présentation</h3>
|
|
<div class="accordion-content">
|
|
<p>Développeur web full stack et chef de projet, j'ai travaillé plusieurs années dans l'art, dans la communication et dans la formation.</p>
|
|
<p>Engagé au quotidien dans la préservation de l'environnement, je suis attaché à mettre mes valeurs en cohérence avec mon activité professionnelle à travers la conception de systèmes économes en énergie et en espace; l'exploitation d'outils libres et open-source; ainsi que la priorisation du respect et de l'humain pour un cadre de travail efficace et serein.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="a-propos" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="a-propos" />
|
|
</div>
|
|
<h3 class="accordion-title">Diplômes</h3>
|
|
<div class="accordion-content">
|
|
<ul class="historique">
|
|
<li>
|
|
<span class="date">2019</span>
|
|
<strong>Master Expert en Ingénierie Informatique (EII)</strong>, Major de promotion <br><span class="detail">Campus Sciences-U, Lyon</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2017</span>
|
|
<strong>Bachelor Responsable de Projets Informatiques (RPI)</strong>, Major de promotion <br><span class="detail">Isitech, Lyon</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2011</span>
|
|
<strong>Master Musicologie et Histoire de l'Art</strong>, spécialité recherche <br><span class="detail">Université Pierre Mendès France, Grenoble</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2009</span>
|
|
<strong>Licence Musicologie</strong>, spécialité pédagogie <br><span class="detail">Université de Provence, Aix-en-Provence</span>
|
|
</li>
|
|
<li>
|
|
<div class="date">2006</div>
|
|
<strong>Baccalauréat général section Scientifique</strong>, option Musique <br><span class="detail">École Saint Joseph de la Madeleine, Marseille</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="a-propos" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="a-propos" />
|
|
</div>
|
|
<h3 class="accordion-title">Expérience</h3>
|
|
<div class="accordion-content">
|
|
<ul class="historique">
|
|
<li>
|
|
<span class="date">2019</span>
|
|
<strong>Développeur web</strong> <span class="detail"><br>Indépendant, Lyon</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2017</span>
|
|
<strong>Responsable de projets informatiques</strong> <span class="detail"><br>Théra Conseil, Tassin-la-Demi-Lune</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2013</span>
|
|
<strong>Compositeur & Sound designer</strong> <span class="detail"><br>Indépendant, Lyon</span>
|
|
</li>
|
|
<li>
|
|
<span class="date">2011</span>
|
|
<strong>Professeur de Musique et d'Histoire de l'Art</strong> <span class="detail"><br>Centre scolaire Jeanne d'Arc - Péage de Roussillon</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<input class="prestations toggle" type="checkbox" />
|
|
<section id="prestations" class="content">
|
|
<nav>
|
|
<div class="toggle-buttons">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question" class="open svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
<path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path>
|
|
</svg>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
|
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
|
</svg>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="content">
|
|
<h2>Services</h2>
|
|
<p class="resume">
|
|
Je conçois sites et applications web <span class="featured">écologiques</span> et accompagne vers des outils numériques <span class="featured">vertueux</span>.
|
|
</p>
|
|
|
|
<h3>Prestations</h3>
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="services" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="services" />
|
|
</div>
|
|
<h4 class="accordion-title">Présence et communication web</h4>
|
|
<div class="accordion-content">
|
|
<p>Je prends en charge la mise en place comme l'évolution de votre présence sur le web. Création et maintenance de votre site vitrine, blog, plateforme e-commerce ou click&collect pour les commerces de proximité... Pour vos projets les plus ambitieux, je développe sur-mesure vos plates-formes et applications web.</p>
|
|
<p>Pour votre communication numérique, je m'occupe de la création de templates, l'intégration de maquettes graphiques, l'ergonomie mobile & bureau, ainsi que de vos campagnes emailing, du template à la conformité RGPD.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="services" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="services" />
|
|
</div>
|
|
<h4 class="accordion-title">Outils numériques des TPE, PME, associations</h4>
|
|
<div class="accordion-content">
|
|
<p>Pour aider votre organisation à mettre ses ressources en cohérence avec ses valeurs, je vous accompagne vers des outils numériques responsables, adaptés à vos besoins : partage de documents, email, chat & visioconférence, gestionnaires de suivi, documents collaboratifs...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Sobriété numérique</h3>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="services" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="services" />
|
|
</div>
|
|
<h4 class="accordion-title">Qu'est- ce que l'écoconception ?</h4>
|
|
<div class="accordion-content">
|
|
<p>L'empreinte carbone liée au numérique est aujourd'hui mal maîtrisée et ne cesse d'augmenter. En plus de s'interroger sur la façon dont nous "consommons" le numérique, repenser nos façon de le produire à travers une reflexion dès la première étape de la conception d'un service est un levier d'action capital pour réduire l'impact du numérique sur le dérèglement climatique. <br />Cet objectif d'écoconception, auquel je me forme en continu, est présent dans tous mes travaux.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="services" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="services" />
|
|
</div>
|
|
<h4 class="accordion-title">Les grands principes</h4>
|
|
<div class="accordion-content">
|
|
<ul class="picto-list">
|
|
<li>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
|
|
</svg>
|
|
Une étude des besoins attentive pour des outils adaptés : pas de fonctionnalité inutile
|
|
</li>
|
|
<li>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="project-diagram" class="svg-inline--fa fa-project-diagram fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="currentColor" d="M384 320H256c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32zM192 32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v128c0 17.67 14.33 32 32 32h95.72l73.16 128.04C211.98 300.98 232.4 288 256 288h.28L192 175.51V128h224V64H192V32zM608 0H480c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32z"></path>
|
|
</svg>
|
|
Une réflexion autour des processus pour s'aligner au plus efficace et économe, et ne numériser que ce qui mérite de l'être
|
|
</li>
|
|
<li>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="feather-alt" class="svg-inline--fa fa-feather-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z"></path>
|
|
</svg>
|
|
Une optimisation du code pour un rendu alliant légèreté, sécurité et sobriété, permettant de maîtriser son efficacité énergétique
|
|
</li>
|
|
<li>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chalkboard-teacher" class="svg-inline--fa fa-chalkboard-teacher fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="currentColor" d="M208 352c-2.39 0-4.78.35-7.06 1.09C187.98 357.3 174.35 360 160 360c-14.35 0-27.98-2.7-40.95-6.91-2.28-.74-4.66-1.09-7.05-1.09C49.94 352-.33 402.48 0 464.62.14 490.88 21.73 512 48 512h224c26.27 0 47.86-21.12 48-47.38.33-62.14-49.94-112.62-112-112.62zm-48-32c53.02 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96 42.98 96 96 96zM592 0H208c-26.47 0-48 22.25-48 49.59V96c23.42 0 45.1 6.78 64 17.8V64h352v288h-64v-64H384v64h-76.24c19.1 16.69 33.12 38.73 39.69 64H592c26.47 0 48-22.25 48-49.59V49.59C640 22.25 618.47 0 592 0z"></path>
|
|
</svg>
|
|
Un accompagnement vers l'utilisation des outils, des formations aux bonnes pratiques
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion">
|
|
<input type="radio" class="toggle-accordion-content" name="services" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="services" />
|
|
</div>
|
|
<h4 class="accordion-title">Mes engagements</h4>
|
|
<div class="accordion-content">
|
|
<ul class="picto-list">
|
|
<li class>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="biking" class="svg-inline--fa fa-biking fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="currentColor" d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm-4 121a31.9 31.9 0 0 0 20 7h64a32 32 0 0 0 0-64h-52.78L356 103a31.94 31.94 0 0 0-40.81.68l-112 96a32 32 0 0 0 3.08 50.92L288 305.12V416a32 32 0 0 0 64 0V288a32 32 0 0 0-14.25-26.62l-41.36-27.57 58.25-49.92zm116 39a128 128 0 1 0 128 128 128 128 0 0 0-128-128zm0 192a64 64 0 1 1 64-64 64 64 0 0 1-64 64zM128 256a128 128 0 1 0 128 128 128 128 0 0 0-128-128zm0 192a64 64 0 1 1 64-64 64 64 0 0 1-64 64z"></path>
|
|
</svg>
|
|
Déplacements exclusivement en vélo et transports en commun
|
|
</li>
|
|
<li class>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="handshake" class="svg-inline--fa fa-handshake fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
|
<path fill="currentColor" d="M434.7 64h-85.9c-8 0-15.7 3-21.6 8.4l-98.3 90c-.1.1-.2.3-.3.4-16.6 15.6-16.3 40.5-2.1 56 12.7 13.9 39.4 17.6 56.1 2.7.1-.1.3-.1.4-.2l79.9-73.2c6.5-5.9 16.7-5.5 22.6 1 6 6.5 5.5 16.6-1 22.6l-26.1 23.9L504 313.8c2.9 2.4 5.5 5 7.9 7.7V128l-54.6-54.6c-5.9-6-14.1-9.4-22.6-9.4zM544 128.2v223.9c0 17.7 14.3 32 32 32h64V128.2h-96zm48 223.9c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zM0 384h64c17.7 0 32-14.3 32-32V128.2H0V384zm48-63.9c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16c0-8.9 7.2-16 16-16zm435.9 18.6L334.6 217.5l-30 27.5c-29.7 27.1-75.2 24.5-101.7-4.4-26.9-29.4-24.8-74.9 4.4-101.7L289.1 64h-83.8c-8.5 0-16.6 3.4-22.6 9.4L128 128v223.9h18.3l90.5 81.9c27.4 22.3 67.7 18.1 90-9.3l.2-.2 17.9 15.5c15.9 13 39.4 10.5 52.3-5.4l31.4-38.6 5.4 4.4c13.7 11.1 33.9 9.1 45-4.7l9.5-11.7c11.2-13.8 9.1-33.9-4.6-45.1z"></path>
|
|
</svg>
|
|
Prestataires et partenaires dans des démarches similaires
|
|
</li>
|
|
<li class>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" class="svg-inline--fa fa-map-marker-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
|
<path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path>
|
|
</svg>
|
|
Priorisation de mon territoire de résidence et utilisation de monnaie locale
|
|
</li>
|
|
<li class>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linux" class="svg-inline--fa fa-linux fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path fill="currentColor" d="M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5.2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4.2-.8.7-.6 1.1.3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6.2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5.1-1.3.6-3.4 1.5-3.2 2.9.1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7.1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9.6 7.9 1.2 11.8 1.2 8.1 2.5 15.7.8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1.6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3.4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4.7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6.6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7.8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4.6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1.8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7.4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6.8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1.3-.2.7-.3 1-.5.8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z"></path>
|
|
</svg>
|
|
Utilisation prioritaire d'outils libres et open source ; pour chaque projet y faisant appel, versement de 1% des bénéfices à leurs organisations
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<input class="toggle projets" type="checkbox" />
|
|
<section id="projets" class="content">
|
|
<nav>
|
|
<div class="toggle-buttons">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="open svg-inline--fa fa-folder-open fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
|
<path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path>
|
|
</svg>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
|
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
|
</svg>
|
|
</div>
|
|
</nav>
|
|
<div class="content">
|
|
<h2>Projets</h2>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">#SansFiltre</h3>
|
|
<p class="subtitle">Suivi interactif</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-sansfiltre.jpg" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<p>Site permettant un suivi d'informations sur le statut politique des mesures de la Convention Citoyenne pour le Climat, pour l'association "<a href="https://www.les150.fr" target="_blank">Les 150</a>".</p>
|
|
<p>Réalisations principales :</p>
|
|
<ul>
|
|
<li>Intégration d'après maquette</li>
|
|
<li>Script d'import du contenu</li>
|
|
<li>Outils de filtrage</li>
|
|
<li>Rédaction des mentions légales et RGPD</li>
|
|
</ul>
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://sansfiltre.les150.fr/" target="_blank">Voir le site</a>
|
|
<p class="project-close">
|
|
Retour <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">Spéciclass</h3>
|
|
<p class="subtitle">e-commerce</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-speciclass.jpg" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<p>Transformation d'un site vitrine/catalogue en une plateforme e-commerce en conservant le site et les fonctionnalités existantes.</p>
|
|
<p>Réalisations principales :</p>
|
|
<ul>
|
|
<li>Gestion du projet</li>
|
|
<li>Intégration du e-commerce au site existant</li>
|
|
<li>Mise en place des fonctionnalités e-commerce (produits, promotions, devis, paiement...)</li>
|
|
<li>Formation à la gestion de la boutique</li>
|
|
<li>Adaptations graphiques sur le site</li>
|
|
</ul>
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://www.speciclass.com/" target="_blank">Voir le site</a>
|
|
<p class="project-close">
|
|
Retour <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">Blandine Vincent</h3>
|
|
<p class="subtitle">Site vitrine</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-dienatly.jpg" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<p>Site d'information et de contact pour une naturopathe et diététicienne lyonnaise. Exploitation du CMS Wordpress pour une gestion autonome du contenu et une utilisation facilitée de la fonctionnalité de blog.</p>
|
|
<p>Réalisations principales :</p>
|
|
<ul>
|
|
<li>Design</li>
|
|
<li>Optimisation pour moteurs de recherche (SEO)</li>
|
|
<li>Mise en place des pages et contenus</li>
|
|
<li>Formation à la gestion autonome du contenu</li>
|
|
<li>Gestion des mentions légales et RGPD</li>
|
|
</ul>
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://dieteticienne-naturopathe-lyon.fr/" target="_blank">Voir le site</a>
|
|
<p class="project-close">
|
|
Retour <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">PCIC</h3>
|
|
<p class="subtitle">Plateformes évenementielles</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-pcic.jpg" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<p>Plateforme d'inscription et de gestion évenementielle pour des conférences internationales annuelle.</p>
|
|
<p>Réalisations principales :</p>
|
|
<ul>
|
|
<li>Gestion du projet</li>
|
|
<li>Mise en place des pages et contenus</li>
|
|
<li>Module d'inscription et de gestion des inscrits</li>
|
|
<li>Outils de gestion d'évènement (badges, invitations...)</li>
|
|
<li>Module de tarifications différenciées et de paiement</li>
|
|
<li>Fonctionnalités pour mise en conformité RGPD</li>
|
|
</ul>
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://www.pcic-europe.com/" target="_blank">Voir le site</a>
|
|
<p class="project-close">
|
|
Retour <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<input class="toggle contact" type="checkbox" />
|
|
<section id="contact" class="content">
|
|
<nav>
|
|
<div class="toggle-buttons">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="open svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
|
|
</svg>
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
|
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
|
</svg>
|
|
</div>
|
|
</nav>
|
|
<div class="content">
|
|
<h2>Contact</h2>
|
|
<p class="contact">
|
|
+33.76.76.10.338
|
|
<a class="button" href="tel:+33767610338" alt="appeler">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"></path>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
|
|
<p class="contact">
|
|
matthias@martin-chave.pro
|
|
<a class="button" href="mailto: matthias@martin-chave.pro" alt="envoyer un email">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="at" class="svg-inline--fa fa-at fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
|
|
<p class="contact">
|
|
linkedin.com/in/matthias-mc/
|
|
<a class="button" href="https://www.linkedin.com/in/matthias-mc/" alt="contacter via linkedin" target="_blank">
|
|
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" class="svg-inline--fa fa-linkedin-in fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
|
<path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html> |