commit 1820886aa4349907ba661eaa0b52abac33a1ea5c Author: Matt Marcha Date: Thu Nov 26 11:53:54 2020 +0100 Commit initial diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bc8a670 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/* \ No newline at end of file diff --git a/fonts/Montserrat/montserrat-regular-webfont.woff b/fonts/Montserrat/montserrat-regular-webfont.woff new file mode 100755 index 0000000..714f9e2 Binary files /dev/null and b/fonts/Montserrat/montserrat-regular-webfont.woff differ diff --git a/fonts/Montserrat/montserrat-regular-webfont.woff2 b/fonts/Montserrat/montserrat-regular-webfont.woff2 new file mode 100755 index 0000000..51c92db Binary files /dev/null and b/fonts/Montserrat/montserrat-regular-webfont.woff2 differ diff --git a/fonts/Montserrat/montserrat-semibold-webfont.woff b/fonts/Montserrat/montserrat-semibold-webfont.woff new file mode 100644 index 0000000..46c5438 Binary files /dev/null and b/fonts/Montserrat/montserrat-semibold-webfont.woff differ diff --git a/fonts/Montserrat/montserrat-semibold-webfont.woff2 b/fonts/Montserrat/montserrat-semibold-webfont.woff2 new file mode 100644 index 0000000..7af0b9e Binary files /dev/null and b/fonts/Montserrat/montserrat-semibold-webfont.woff2 differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100755 index 0000000..2895fa8 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/projet-dienatly.jpg b/images/projet-dienatly.jpg new file mode 100755 index 0000000..cdc38e3 Binary files /dev/null and b/images/projet-dienatly.jpg differ diff --git a/images/projet-pcic.jpg b/images/projet-pcic.jpg new file mode 100755 index 0000000..f8e140d Binary files /dev/null and b/images/projet-pcic.jpg differ diff --git a/images/projet-sansfiltre.jpg b/images/projet-sansfiltre.jpg new file mode 100755 index 0000000..27d1343 Binary files /dev/null and b/images/projet-sansfiltre.jpg differ diff --git a/images/projet-speciclass.jpg b/images/projet-speciclass.jpg new file mode 100755 index 0000000..71c9e4c Binary files /dev/null and b/images/projet-speciclass.jpg differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..a8c6a08 --- /dev/null +++ b/index.html @@ -0,0 +1,433 @@ + + + + + + Développeur web écologique à Lyon + + + + +
+
+

Développeur web écologique à Lyon

+
+

Solutions web écologiques

+

Matthias

+
+
+

Martin-
Chave

+
+
+ + +
+ +
+

À propos

+

+ Je suis un développeur web polyvalent, appliqué à articuler passions et valeurs. +

+ +
+ +
+ +
+

Présentation

+
+

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.

+

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.

+
+
+ +
+ +
+ +
+

Diplômes

+
+
    +
  • + 2019 + Master Expert en Ingénierie Informatique (EII), Major de promotion
    Campus Sciences-U, Lyon +
    • +
  • + 2017 + Bachelor Responsable de Projets Informatiques (RPI), Major de promotion
    Isitech, Lyon +
    • +
  • + 2011 + Master Musicologie et Histoire de l'Art, spécialité recherche
    Université Pierre Mendès France, Grenoble +
    • +
  • + 2009 + Licence Musicologie, spécialité pédagogie
    Université de Provence, Aix-en-Provence +
    • +
  • +
    2006
    + Baccalauréat général section Scientifique, option Musique
    École Saint Joseph de la Madeleine, Marseille +
    • +
+
+
+ +
+ +
+ +
+

Expérience

+
+
    +
  • + 2019 + Développeur web
    Indépendant, Lyon     +
    • +
  • + 2017 + Responsable de projets informatiques
    Théra Conseil, Tassin-la-Demi-Lune     +
    • +
  • + 2013 + Compositeur & Sound designer
    Indépendant, Lyon     +
    • +
  • + 2011 + Professeur de Musique et d'Histoire de l'Art
    Centre scolaire Jeanne d'Arc - Péage de Roussillon     +
    • +
+
+
+ +
+
+ + +
+ + +
+

Services

+

+ Je conçois sites et applications web écologiques et accompagne vers des outils numériques vertueux. +

+ +

Prestations

+
+ +
+ +
+

Présence et communication web

+
+

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.

+

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.

+
+
+ +
+ +
+ +
+

Outils numériques des TPE, PME, associations

+
+

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...

+
+
+ +

Sobriété numérique

+ +
+ +
+ +
+

Qu'est- ce que l'écoconception ?

+
+

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.
Cet objectif d'écoconception, auquel je me forme en continu, est présent dans tous mes travaux.

+
+
+ +
+ +
+ +
+

Les grands principes

+
+
    +
  • + + Une étude des besoins attentive pour des outils adaptés : pas de fonctionnalité inutile +
    • +
  • + + 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 +
    • +
  • + + Une optimisation du code pour un rendu alliant légèreté, sécurité et sobriété, permettant de maîtriser son efficacité énergétique +
    • +
  • + + Un accompagnement vers l'utilisation des outils, des formations aux bonnes pratiques +
    • +
+
+
+ +
+ +
+ +
+

Mes engagements

+
+
    +
  • + + Déplacements exclusivement en vélo et transports en commun +
    • +
  • + + Prestataires et partenaires dans des démarches similaires +
    • +
  • + + Priorisation de mon territoire de résidence et utilisation de monnaie locale +
    • +
  • + + Utilisation prioritaire d'outils libres et open source ; pour chaque projet y faisant appel, versement de 1% des bénéfices à leurs organisations +
    • +
+
+
+
+
+ + +
+ +
+

Projets

+ + +
+ +
+ +
+ +
+

#SansFiltre

+

Suivi interactif

+ alternative +
+ +
+

Site permettant un suivi d'informations sur le statut politique des mesures de la Convention Citoyenne pour le Climat, pour l'association "Les 150".

+

Réalisations principales :

+
    +
  • Intégration d'après maquette
    • +
  • Script d'import du contenu
    • +
  • Outils de filtrage
    • +
  • Rédaction des mentions légales et RGPD
    • +
+
+ Voir le site +

+ Retour +

+
+
+
+ + +
+ +
+ +
+ +
+

Spéciclass

+

e-commerce

+ alternative +
+ +
+

Transformation d'un site vitrine/catalogue en une plateforme e-commerce en conservant le site et les fonctionnalités existantes.

+

Réalisations principales :

+
    +
  • Gestion du projet
    • +
  • Intégration du e-commerce au site existant
    • +
  • Mise en place des fonctionnalités e-commerce (produits, promotions, devis, paiement...)
    • +
  • Formation à la gestion de la boutique
    • +
  • Adaptations graphiques sur le site
    • +
+
+ Voir le site +

+ Retour +

+
+
+
+ + +
+ +
+ +
+ +
+

Blandine Vincent

+

Site vitrine

+ alternative +
+ +
+

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.

+

Réalisations principales :

+
    +
  • Design
    • +
  • Optimisation pour moteurs de recherche (SEO)
    • +
  • Mise en place des pages et contenus
    • +
  • Formation à la gestion autonome du contenu
    • +
  • Gestion des mentions légales et RGPD
    • +
+
+ Voir le site +

+ Retour +

+
+
+
+ + +
+ +
+ +
+ +
+

PCIC

+

Plateformes évenementielles

+ alternative +
+ +
+

Plateforme d'inscription et de gestion évenementielle pour des conférences internationales annuelle.

+

Réalisations principales :

+
    +
  • Gestion du projet
    • +
  • Mise en place des pages et contenus
    • +
  • Module d'inscription et de gestion des inscrits
    • +
  • Outils de gestion d'évènement (badges, invitations...)
    • +
  • Module de tarifications différenciées et de paiement
    • +
  • Fonctionnalités pour mise en conformité RGPD
    • +
+
+ Voir le site +

+ Retour +

+
+
+
+
+
+ + +
+ +
+

Contact

+

+ +33.76.76.10.338 + + + + + +

+ +

+ matthias@martin-chave.pro + + + +

+ +

+ linkedin.com/in/matthias-mc/ + + + +

+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100755 index 0000000..9774973 --- /dev/null +++ b/style.css @@ -0,0 +1,632 @@ +/** +Généralités + */ +/* polices à mettre en font-face une fois largeurs déterminées*/ +@font-face { + font-family: 'Montserrat'; + src: local("Monserrat Regular"), + url('fonts/Montserrat/montserrat-regular-webfont.woff2') format('woff2'), + url('fonts/Montserrat/montserrat-regular-webfont.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Montserrat'; + src: local("Monserrat SemiBold"), + url('fonts/Montserrat/montserrat-semibold-webfont.woff2') format('woff2'), + url('fonts/Montserrat/montserrat-semibold-webfont.woff') format('woff'); + font-weight: 600; + font-style: normal; +} + + :root { + --blue: #008dc6; + --citrus: #9bd066; + --dark-grey: #5b5b5b; +} + +body { + margin: 0; + font-size: 18px; + font-family: "Montserrat", sans-serif; + position: relative; + line-height: 1.3; + font-weight: 400; +} + +main { + width: 100vw; + height: 100vh; + overflow: hidden; +} + +h1, h2, h3, h4, h5, h6 { + font-variant: small-caps; + font-weight: 600; +} + +strong { + font-weight: 600; +} + +.featured { + color: var(--citrus); +} + +a { + color: var(--citrus); +} + +.button { + display: inline-block; + background-color: var(--citrus); + color: white; + font-weight: 600; + text-decoration: none; + padding: .8em 1em; + border-radius: 8px; +} + +/** +Accueil / Fond + */ + +header .half { + position: relative; + margin: 0; + width: 100vw; + height: 50vh; +} + +header .half p { + position: absolute; + margin: 0; +} + +header p.slogan { + bottom: 5em; + width: 100vw; + height: 1em; + margin: auto; + display: block; + text-align: center; + font-weight: 400; +} +header .name { + left: 5px; + text-transform: uppercase; + font-size: 3.2em; + font-weight: 600; + line-height: 40px; +} + +header .name span.mar { + letter-spacing: -2px; +} + +header .name span.cha { + letter-spacing: -5px; +} + +header .white .name { + bottom: -3px; +} + +header .blue .name { + top: 3px; +} + +header .name span.light { + opacity: 0.3; +} + +header .white { + margin: 0; + color: var(--blue); + background-color: white; +} + +header .blue { + color: white; + background-color: var(--blue); +} + +header .buttons { + position: absolute; + top: 7.5em; + width: 100vw; + text-align: center; +} + +header .buttons a { + color: white; + font-size: 2em; + font-weight: 400; + margin: 0 8px; +} + +/** +Boutons de section / Navigation + */ + + +.toggle { + z-index: 13; + position: fixed; + opacity: 0; +} + +.toggle, +.toggle-buttons { + margin: 10px; + width: 50px; + height: 50px; + background-color: transparent; +} + +section nav { + position: fixed; +} + +.toggle-buttons svg { + position: absolute; + width: 50px; + height: 45px; + z-index: 35; +} + +.toggle-buttons .close { + opacity: 0; +} + +.toggle:checked { + z-index: 23; +} + +.toggle:checked + section .toggle-buttons { + z-index: 22; +} + +.toggle:checked + section .toggle-buttons .open { + opacity: 0; +} +.toggle:checked + section .toggle-buttons .close { + opacity: 1; + z-index: 27; +} + + +/* about*/ +.a-propos.toggle, +section#a-propos nav { + top: 0; + left: 0; +} + +/* presta */ +.prestations.toggle, +section#prestations nav { + top: 0; + right: 0; +} + +section#a-propos .toggle-buttons svg, +section#prestations .toggle-buttons svg { + color: var(--blue); +} + +/* projets */ + +.projets.toggle, +section#projets nav { + bottom: 0; + left: 0; + background-color: var(--blue); +} + +/* contact */ + +.contact.toggle, +section#contact nav { + bottom: 0; + right: 0; +} + +section#projets .toggle-buttons svg, +section#contact .toggle-buttons svg { + color: white; + bottom: 5px; +} + + +/** +Contenu + */ + +/**activation**/ + +section { + z-index: 11; + position: fixed; +} + +section .content { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + transition: margin 0.2s, border-radius .5s; +} + +section#a-propos .content { + margin-top: -100vh; + margin-left: -100vw; + border-radius: 0 0 5em 0; + background-color: white; +} + +section#prestations .content { + margin-top: -100vh; + margin-left: 100vw; + border-radius: 0 0 0 5em; + background-color: white; +} + +section#projets .content { + margin-top: 100vh; + margin-left: -100vw; + border-radius: 0 5em 0 0; + background-color: var(--blue); + color: white; +} + +section#contact .content { + margin-top: 100vh; + margin-left: 100vw; + border-radius: 5em 0 0 0; + background-color: var(--blue); + color: white; +} + +.toggle:checked + section { + z-index: 21; +} + +.toggle:checked + section nav { + z-index: 22; +} + +.toggle:checked + section .content { + margin: 0 !important; + border-radius: 0 !important; +} + +/************** intérieur **************/ + +section .content > *:last-child { + margin-bottom: 3em; +} + + +/* ACCORDÉONS */ +.accordion { + position: relative; + overflow: hidden; +} + +.accordion input.toggle-accordion-content { + position: absolute; + z-index: 10; + top: 0; + left:0; + width: 100%; + height: 100%; + opacity: 0; +} + +.accordion .accordion-content { + margin: 0 .5em; + transition: font-size .1s, + margin .1s, + padding .1s, + opacity .2s .1s; +} + +.accordion input.toggle-accordion-content:checked { + z-index: -1; +} + +.accordion input.toggle-accordion-content:not(:checked) ~ .accordion-content { + opacity: 0; + font-size: 0; + margin: 0; + padding: 0; +} + +.accordion .accordion-close { + z-index: 0; +} + +.accordion .accordion-close input.clear { + position: absolute; + top: 0; + left:0; + width: 100%; + height: 4em; + opacity: 0; +} + +.accordion input.toggle-accordion-content:checked ~ .accordion-close input.clear { + z-index: 15; +} + +.accordion .accordion-title:before { + content: ">"; + display: inline-block; + position: absolute; + left: 0; + top: -.185em;; + margin-right: 10px; + font-size: 1.5em; + max-height: 1rem; + transform: rotate(0turn) scaleX(.5); + transform-origin: bottom center; + transition: transform .2s; +} + +.accordion .accordion-title { + position: relative; + padding-left: 25px; + margin-top: .5em; + margin-bottom: .5em; +} + +.accordion input.toggle-accordion-content:checked ~ .accordion-title::before { + transform: rotate(.25turn) scaleX(.5); +} + +/* --- */ + + +/* CONTENU */ + +section .content { + overflow-y: scroll; +} + +section .content h2 { + text-align: center; + margin: 10px 55px; +} + +section .content h3 { + margin: 1em 0 .2em; +} + +section#a-propos .content, +section#prestations .content { + color: var(--blue); +} + + +section .content .resume { + margin: 1em .2em; + font-size: 2em; + font-weight: 200; + text-align: center; +} + +section .content h3, +section .content h4, +section .content p, +section .content ul { + margin-left: .5em; + margin-right: .5em; +} + +section#a-propos .content p, +section#a-propos .content ul, +section#prestations .content p, +section#prestations .content ul{ + color: var(--dark-grey); +} + + +/* --- */ + +/* LISTES FUNKY */ + +section .content .historique, +section .content .picto-list { + list-style: none; + position: relative; + padding: 0; +} + +section .content .historique li { + position: relative; + padding-left: 2.5em; + margin-bottom: 0.6em; +} + +section .content .historique span.date { + position: absolute; + width: 2.3em; + height: 1em; + font-size: 0.8em; + left: 0; + top: 3px; + color: var(--blue); +} + +section .content .picto-list li { + position: relative; + padding-left: 2.3em; + margin-bottom: 0.8em; +} + +section .content .picto-list svg { + position: absolute; + width: 2.3em; + height: 2em; + font-size: 0.7em; + left: 0; + top: 3px; + color: var(--citrus); +} + +section .content .historique span.detail { + font-style: italic; + font-size: 0.9em; +} + +/* --- */ + +/* ACCORDEONS PROJETS */ + +.projet .project-header { + position: relative; + margin: 1em .5em; + background-color: rgba(0,0,0, .7); + border-radius: 8px; + overflow: hidden; + transition: background-color .2s, + border-radius .2s; +} + +.projet .project-header .accordion-title::before { + display: none; +} + +.accordion .accordion-close input.clear { + height: 6em; +} + +.projet .project-header .accordion-title { + margin: 2em 1em .2em; + padding: 0; + transition: margin-top .2; +} + +.projet .project-header .subtitle { + margin: 0 2.5em 2em; + padding: 0; + color: #bdbdbd; + font-style: italic; + transition: margin-bottom .2s; +} + +.projet .project-header .img-fluid { + position: absolute; + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: top center; + transition: top .2s, objecf-fit.2s; +} + +.projet input.toggle-accordion-content:checked ~ .project-header { + background-color: white; + margin: .2em .5em 0; + border: 3px solid var(--dark-grey); + border-bottom: none; + border-radius: 8px 8px 0 0; + color: var(--dark-grey); +;} + +.projet input.toggle-accordion-content:checked ~ .project-header .accordion-title { + margin-top: .5em; +} + +.projet input.toggle-accordion-content:checked ~ .project-header .subtitle { + margin-bottom: calc(300px + 1em); +} + +.projet input.toggle-accordion-content:checked ~ .project-header .img-fluid { + top: 4.5em; + object-fit: contain; + z-index: 0; +} + +.projet input.toggle-accordion-content:checked ~ .accordion-content { + padding-top: .2em; + border: 3px solid var(--dark-grey); + border-top: none; + border-radius: 0 0 8px 8px; + background-color: white; + color: var(--dark-grey); +} + +.projet .accordion-content .project-buttons { + text-align: center; +} + +.projet .accordion-content .button { + width: 6em; + border: 2px solid var(--citrus); + font-size: .8em; +} + +.projet .accordion-content .project-close { + position: relative; + display: inline-block; + text-align: center; + background-color: white; + font-size: .8em; + font-weight: 600; + width: 6em; + margin: .5em auto; + padding: .8em 1em; + border: 2px solid var(--dark-grey); + border-radius: 8px; +} + +.projet .accordion-content .project-close .clear { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; +} + +/* --- */ + +/* CONTACT */ + +.contact { + text-align: center; +} + +.contact .button { + display: block; + position: relative; + margin: .5em auto 2.5em; + padding: .2em .2em; + width: 3em; + height: 3em; + text-align: center; + background-color: white; + color: var(--blue); +} + +.contact .button svg { + position: absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 1.5em; + height: 1.5em; +} + +/* --- */ + +