diff --git a/cv/MattMarchaCV.html b/cv/MattMarchaCV.html new file mode 100644 index 0000000..26c3cc8 --- /dev/null +++ b/cv/MattMarchaCV.html @@ -0,0 +1,121 @@ + + + + +CV - Matt Marcha + + + +
+

‘Matt Marcha’
Matthias Martin-Chave

+

Ingénieur Web Éthique

+ +

Fort de huit ans d’expérience en France puis en Aotearoa Nouvelle-Zélande, je recherche un emploi en Polynésie Française.
+Particulièrement polyvalent, je suis ouvert à plusieurs types de poste pour privilégier le techniquement stimulant et les valeurs éthiques.
+Mon environnement de travail idéal valorise l’accessibilité, la sécurité et la protection des données, surveille et réduit son empreinte carbone, supporte le logiciel libre et open-source, et évite les solutions non-éthiques des géants de la tech.

+
+
+
+

Expérience professionnelle

+

Website Developer / 2024

+

Te Rūnanga o Ngāi Tahu, Ōtautahi/Christchurch, Aotearoa New Zealand

+

En charge du développement et de la maintenance de plusieurs sites Silverstripe ainsi que de l’infrastructure web AWS au sein d’une petite équipe.

+ +

Contrat terminé pour raisons administratives (expiration de visa)

+

Développeur, Chef de projet / 2019-2023

+

Auto-entreprise, Lyon & Grenoble, France

+

Gestion de ma propre agence web spécialisée dans les solutions écologiques. Prise en charge de projets variés et parfois complexes. Impliqué aussi bien dans de l’automatisation de processus que du développement, de l’identification de besoins, du SEO ou de la mise en conformité légale.

+ +

Activité drastiquement réduite au profit de mon départ en Aotearoa Nouvelle-Zélande

+

Développeur web & Chef de projet Junior / 2016-2019

+

Théra, Tassin-la-Demi-Lune, France

+

Développeur principal dans une agence de communication et d’évenementiel. En charge de la conception, de la coordination et du développement de projets allant du site vitrine à la plateforme de gestion évenementielle.

+ +

Contrat non renouvellé au profit de mon départ en Aotearoa Nouvelle-Zélande (empêché par la pandémie COVID19)

+

Compétences techniques

+

Languages
+PHP (Symfony) - HTML - CSS (Bootstrap, SASS) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)

+

CMS
+Wordpress - SilverStripe - PrestaShop - Drupal

+

Management & Coordination
+Méthodologie Agile, Scrum - Rédacation de spécifications et documentations - Planification - Gestion de budget - Revue des besoins - Conception/Architecture logicielle

+

Autre/Divers
+MySQL/MariaDB - Linux - Git - AWS - Composer - Docker - DNS - Responsive design

+

Communauté & Volontariat

+ +
+ +
+ diff --git a/cv/MattMarchaCV.pdf b/cv/MattMarchaCV.pdf new file mode 100644 index 0000000..01698f3 Binary files /dev/null and b/cv/MattMarchaCV.pdf differ diff --git a/cv/index.html b/cv/index.html new file mode 100644 index 0000000..26c3cc8 --- /dev/null +++ b/cv/index.html @@ -0,0 +1,121 @@ + + + + +CV - Matt Marcha + + + +
+

‘Matt Marcha’
Matthias Martin-Chave

+

Ingénieur Web Éthique

+ +

Fort de huit ans d’expérience en France puis en Aotearoa Nouvelle-Zélande, je recherche un emploi en Polynésie Française.
+Particulièrement polyvalent, je suis ouvert à plusieurs types de poste pour privilégier le techniquement stimulant et les valeurs éthiques.
+Mon environnement de travail idéal valorise l’accessibilité, la sécurité et la protection des données, surveille et réduit son empreinte carbone, supporte le logiciel libre et open-source, et évite les solutions non-éthiques des géants de la tech.

+
+
+
+

Expérience professionnelle

+

Website Developer / 2024

+

Te Rūnanga o Ngāi Tahu, Ōtautahi/Christchurch, Aotearoa New Zealand

+

En charge du développement et de la maintenance de plusieurs sites Silverstripe ainsi que de l’infrastructure web AWS au sein d’une petite équipe.

+ +

Contrat terminé pour raisons administratives (expiration de visa)

+

Développeur, Chef de projet / 2019-2023

+

Auto-entreprise, Lyon & Grenoble, France

+

Gestion de ma propre agence web spécialisée dans les solutions écologiques. Prise en charge de projets variés et parfois complexes. Impliqué aussi bien dans de l’automatisation de processus que du développement, de l’identification de besoins, du SEO ou de la mise en conformité légale.

+ +

Activité drastiquement réduite au profit de mon départ en Aotearoa Nouvelle-Zélande

+

Développeur web & Chef de projet Junior / 2016-2019

+

Théra, Tassin-la-Demi-Lune, France

+

Développeur principal dans une agence de communication et d’évenementiel. En charge de la conception, de la coordination et du développement de projets allant du site vitrine à la plateforme de gestion évenementielle.

+ +

Contrat non renouvellé au profit de mon départ en Aotearoa Nouvelle-Zélande (empêché par la pandémie COVID19)

+

Compétences techniques

+

Languages
+PHP (Symfony) - HTML - CSS (Bootstrap, SASS) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)

+

CMS
+Wordpress - SilverStripe - PrestaShop - Drupal

+

Management & Coordination
+Méthodologie Agile, Scrum - Rédacation de spécifications et documentations - Planification - Gestion de budget - Revue des besoins - Conception/Architecture logicielle

+

Autre/Divers
+MySQL/MariaDB - Linux - Git - AWS - Composer - Docker - DNS - Responsive design

+

Communauté & Volontariat

+ +
+ +
+ diff --git a/cv/print.css b/cv/print.css new file mode 100644 index 0000000..c9fdb16 --- /dev/null +++ b/cv/print.css @@ -0,0 +1,158 @@ +:root { + /* Set sans-serif & mono fonts */ + --font-accent: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; + --font-text: system-ui, sans-serif; + --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; + --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + + /* Nord palette */ + --aurora-1: #bf616a; + --aurora-2: #d08770; + --aurora-3: #ebcb8b; + --aurora-4: #a3be8c; + --aurora-5: #b48ead; + --frost-1: #8fbcbb; + --frost-2: #88c0d0; + --frost-3: #81a1c1; + --frost-4: #5e81ac; + --snow-1: #d8dee9; + --snow-2: #e5e9f0; + --snow-3: #eceff4; + --nord-1: #2e3440; + --nord-2: #3b4252; + --nord-3: #434c5e; + --nord-4: #4c566a; + + + /* Default theme */ + color-scheme: light; + --bg: #fff; + --bg-contrast: var(--nord-1); + --bg-light: var(--snow-2); + --text: var(--nord-3); + --text-contrast: var(--snow-2); + --accent: var(--frost-2); + --text-accent: var(--nord-1); +} + + +body { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: auto auto auto; + grid-template-areas: + "header header" + "main main" + "footer footer"; + font-size: 7pt; +} + +header { + grid-area: header; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: repeat(3, auto); +} + +header h1 { + white-space: wrap; +} + +header h2 { + margin: 0em .5em; +} + +header ul { + grid-column: 2 / 3; + grid-row: 1 / 4; + flex-direction: column; + padding: 1em; +} + +header p { + padding: 2em 1em 1em; + margin-bottom: 0; +} + +main { + grid-area: main; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: auto; + padding: 0; + clear: both; +} + +main h2 { + white-space: wrap; +} + +main article { + grid-column: 1 / 2; + padding: 10px 20px; +} + +main article h2#work ~ ul:has( ~ h2#tech) li { + border: 1px solid var(--bg-contrast); +} + +main aside { + margin-top: 10px; + background-color: var(--bg-contrast); + color: var(--text-contrast); + grid-column: 2 / 3; + padding: 10px 20px 30px; +} + +main aside ul { + list-style: inside; + padding-left: 0; +} + +footer { + grid-area: footer; + margin-top: 10px; + margin-bottom: 0; + padding-bottom: 0; + padding-top: 5px; +} + +/*** ornaments ***/ +header p { + position: relative; + border-radius: 0 5px 0 0; +} +header p:after { + content: ""; + display: block; + position: absolute; + width: 100px; + height: 10px; + background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2)); + top: -5px; + right: -5px; + border: 5px solid var(--bg); + border-radius: 0px 100px 0 100px; +} + +main aside { + position: relative; +} + +main aside { + position: relative; + border-radius: 0 0 0 5px; +} + +main aside:after { + content: ""; + display: block; + position: absolute; + width: 100px; + height: 10px; + background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2)); + bottom: -5px; + left: -5px; + border: 5px solid var(--bg); + border-radius: 0 200px 0 200px; +} \ No newline at end of file diff --git a/cv/style.css b/cv/style.css new file mode 100644 index 0000000..cceec4d --- /dev/null +++ b/cv/style.css @@ -0,0 +1,352 @@ +:root { + /* Set sans-serif & mono fonts */ + --font-accent: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; + --font-text: system-ui, sans-serif; + --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; + --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; + + /* Nord palette */ + --aurora-1: #bf616a; + --aurora-2: #d08770; + --aurora-3: #ebcb8b; + --aurora-4: #a3be8c; + --aurora-5: #b48ead; + --frost-1: #8fbcbb; + --frost-2: #88c0d0; + --frost-3: #81a1c1; + --frost-4: #5e81ac; + --snow-1: #d8dee9; + --snow-2: #e5e9f0; + --snow-3: #eceff4; + --nord-1: #2e3440; + --nord-2: #3b4252; + --nord-3: #434c5e; + --nord-4: #4c566a; + + + /* Default (light) theme */ + color-scheme: light; + --bg: var(--snow-3); + --bg-contrast: var(--nord-1); + --bg-light: var(--snow-2); + --text: var(--nord-3); + --text-contrast: var(--snow-2); + --accent: var(--frost-2); + --text-accent: var(--nord-1); +} + +/* Light theme */ +@media (prefers-color-scheme: dark) { + :root { + color-scheme: dark; + --bg: var(--nord-1); + --bg-contrast: var(--nord-4); + --bg-light: var(--nord-2); + --text: var(--snow-3); + --text-contrast: var(--snow-1); + --accent: var(--frost-2); + --text-accent: var(--nord-1); + } +} + +/*** Global design ***/ + +body { + color: var(--text); + font-size: 14px; + font-family: var(--font-text); + line-height: 1.33; + background-color: var(--bg); + margin: 0; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-accent); + font-variant: small-caps; + font-size: 1.5rem; + letter-spacing: 2px; + transform: scale(1, .8); +} + +a { + color: inherit; +} + +/* Header */ + +header { + margin-top: 2em; +} + +header h1 { + font-weight: 400; + font-size: 1.6em; + letter-spacing: 7px; + line-height: .8; + text-indent: .7em hanging; + text-wrap: nowrap; + white-space: nowrap; + text-align: center; +} + +header h1:first-line { + overflow: hidden; + font-size: 2.6em; + font-weight: 600; + letter-spacing: 1px; +} + +header h2 { + font-size: 2em; + text-align: center; + margin: .5em 1em; +} + + +header ul { + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 1em; + padding: 0; +} + +header ul li { + font-size: 1.1em; + background: var(--bg-light); + padding: .5em; + border-radius: 5px; +} + +header ul li::first-letter{ + padding-right: .5em; +} + + header p { + background-color: var(--accent); + color: var(--text-accent); + padding: 8px; + font-weight: 400; + font-size: 1.2em; + line-height: 1.3; + padding: 1em; +} + +/* Body */ + +main { + padding: 0 1em; +} + +main h2 { + position: relative; + display: flex; + font-size: 2em; + margin-bottom: 0; + white-space: nowrap; +} + +main h2::before { + filter: grayscale(1); + margin-right: .5em; + transform: scaleY(1.2); +} + +main h2::after { + content: ""; + display: inline-block; + border-bottom: 5px solid var(--text); + flex: 1 1 auto; + height: calc(1em - 7px); + margin-left: 5px; +} + + +h2#work::before { + content: "💼"; +} +h2#tech::before { + content: "🔧"; +} +h2#commu::before { + content: "👥"; +} +h2#ref::before { + content: "💬"; +} +h2#perso::before { + content: "🪪"; +} +h2#edu::before { + content: "🎓"; +} +h2#core::before { + content: "🧬"; +} +h2#int::before { + content: "🗡️"; +} + +main article h3:has( ~ h2:nth-of-type(2)) { + font-size: 1.5em; + margin-top: 0; + margin-bottom: 0; +} + +main article h2#work ~ h3+p:has(~h2#tech) { + margin-top: 0; + line-height: 1; +} + +main article h2#work ~ ul:has(~h2#tech) { + display: flex; + list-style: none; + flex-wrap: wrap; + gap: .5em .5em; + padding: 0; + justify-content: flex-start; +} + +main article h2#work ~ ul:has( ~ h2#tech) li { + border: 2px solid var(--bg-contrast); + padding: .3em; + border-radius: 5px; +} + +/* Footer */ + +footer { + margin: 2em; + padding-top: 1em; + text-align: center; + border-top: 1px solid var(--accent); +} + +/** Layout - wide **/ + +@media only screen and (min-width:720px) { + + body { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: auto auto auto; + grid-template-areas: + "header header" + "main main" + "footer footer"; + font-size: 12px; + } + + header { + grid-area: header; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: repeat(3, auto); + } + + header h1 { + white-space: wrap; + } + + header h2 { + margin: 0em 1em; + } + + header ul { + grid-column: 2 / 3; + grid-row: 1 / 4; + flex-direction: column; + margin-top: 30px; + padding: 1em; + justify-content: flex-start; + } + + header p { + padding: 3em 1em; + margin-bottom: 0; + } + + main { + grid-area: main; + display: grid; + grid-template-columns: subgrid; + grid-template-rows: auto; + padding: 0; + } + + main h2 { + white-space: wrap; + } + + main article { + grid-column: 1 / 2; + padding: 10px 20px; + } + + main aside { + background-color: var(--bg-contrast); + color: var(--text-contrast); + grid-column: 2 / 3; + padding: 10px 20px 50px; + } + + footer { + grid-area: footer; + } + + /*** ornaments ***/ + header p { + position: relative; + border-radius: 0 10px 0 0; + } + header p:after { + content: ""; + display: block; + position: absolute; + width: 200px; + height: 20px; + background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2)); + top: -10px; + right: -10px; + border: 10px solid var(--bg); + border-radius: 0px 200px 0 200px; + } + + main aside { + position: relative; + } + + + main aside { + position: relative; + border-radius: 0 0 0 10px; + } + + main aside:after { + content: ""; + display: block; + position: absolute; + width: 200px; + height: 20px; + background: linear-gradient(-90deg, var(--bg-contrast), var(--bg-contrast) 10%, var(--frost-4) 10%, var(--frost-4) 20%, var(--frost-3) 20%, var(--frost-3) 30%, var(--aurora-5) 30%, var(--aurora-5) 40%, var(--aurora-1) 40%, var(--aurora-1) 50%, var(--aurora-2) 50%, var(--aurora-2) 60%, var(--aurora-3) 60%, var(--aurora-3) 70%, var(--aurora-4) 70%, var(--aurora-4) 80%, var(--frost-1) 80%, var(--frost-1) 90%, var(--frost-2) 90%, var(--frost-2)); + bottom: -10px; + left: -10px; + border: 10px solid var(--bg); + border-radius: 0 200px 0 200px; + } + +} + +@media screen and (min-width:800px) { + body { + font-size: 14px + } +} + +@media screen and (min-width:1200px) { + body { + max-width: 1200px; + margin: auto; + } +}