Add FR CV
This commit is contained in:
parent
1eb411727d
commit
9669eea545
121
cv/MattMarchaCV.html
Normal file
121
cv/MattMarchaCV.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>
|
||||
CV - Matt Marcha
|
||||
</title>
|
||||
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" media="print" href="print.css" />
|
||||
</head>
|
||||
<header>
|
||||
<h1 id="matt-marcha-matthias-martin-chave">‘Matt Marcha’ <br /> Matthias Martin-Chave</h1>
|
||||
<h2 id="ingénieur-web-éthique">Ingénieur Web Éthique</h2>
|
||||
<ul>
|
||||
<li>📞 +33 678 673 185</li>
|
||||
<li>✉️ <a href="mailto:matt@marcha.pro">matt@marcha.pro</a></li>
|
||||
<li>🔗 <a href="https://matt.marcha.pro/cv/">https://matt.marcha.pro/cv/</a></li>
|
||||
<li>🏠 Ōtautahi, Aotearoa (Nouvelle-Zélande)</li>
|
||||
<li>🗣 Français (langue maternelle), English (fluent), Deutsch (ein bisschen)</li>
|
||||
</ul>
|
||||
<p>Fort de huit ans d’expérience en France puis en Aotearoa Nouvelle-Zélande, je recherche un emploi en Polynésie Française.<br />
|
||||
Particulièrement polyvalent, je suis ouvert à plusieurs types de poste pour privilégier le techniquement stimulant et les valeurs éthiques.<br />
|
||||
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.</p>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="work">Expérience professionnelle</h2>
|
||||
<h3 id="website-developer-2024">Website Developer / 2024</h3>
|
||||
<p><em>Te Rūnanga o Ngāi Tahu, Ōtautahi/Christchurch, Aotearoa New Zealand</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développeur Full Stack</li>
|
||||
<li>DevOps</li>
|
||||
<li>Chef de projet</li>
|
||||
</ul>
|
||||
<p><em>Contrat terminé pour raisons administratives (expiration de visa)</em></p>
|
||||
<h3 id="développeur-chef-de-projet-2019-2023">Développeur, Chef de projet / 2019-2023</h3>
|
||||
<p><em>Auto-entreprise, Lyon & Grenoble, France</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développement back & front</li>
|
||||
<li>Intégration</li>
|
||||
<li>Gestion de projet</li>
|
||||
<li>DevOps</li>
|
||||
<li>Architecture logicielle</li>
|
||||
</ul>
|
||||
<p><em>Activité drastiquement réduite au profit de mon départ en Aotearoa Nouvelle-Zélande</em></p>
|
||||
<h3 id="développeur-web-chef-de-projet-junior-2016-2019">Développeur web & Chef de projet Junior / 2016-2019</h3>
|
||||
<p><em>Théra, Tassin-la-Demi-Lune, France</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développement back & front</li>
|
||||
<li>Intégration</li>
|
||||
<li>Gestion de projet</li>
|
||||
<li>DevOps</li>
|
||||
<li>Architecture logicielle</li>
|
||||
</ul>
|
||||
<p><em>Contrat non renouvellé au profit de mon départ en Aotearoa Nouvelle-Zélande (empêché par la pandémie COVID19)</em></p>
|
||||
<h2 id="tech">Compétences techniques</h2>
|
||||
<p><strong>Languages</strong><br />
|
||||
PHP (Symfony) - HTML - CSS (Bootstrap, SASS) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)</p>
|
||||
<p><strong>CMS</strong><br />
|
||||
Wordpress - SilverStripe - PrestaShop - Drupal</p>
|
||||
<p><strong>Management & Coordination</strong><br />
|
||||
Méthodologie Agile, Scrum - Rédacation de spécifications et documentations - Planification - Gestion de budget - Revue des besoins - Conception/Architecture logicielle</p>
|
||||
<p><strong>Autre/Divers</strong><br />
|
||||
MySQL/MariaDB - Linux - Git - AWS - Composer - Docker - DNS - Responsive design</p>
|
||||
<h2 id="commu">Communauté & Volontariat</h2>
|
||||
<ul>
|
||||
<li><p><strong>Convention Citoyenne pour le Climat</strong> - <em>Paris, France - 2019-2021</em><br />
|
||||
Membre d’une assemblée de 150 personnes tirées au sort aléatoirement parmi la population française (métropolitaine et DROM), en charge d’élaborer des propositions de Loi permettant de respecter les accords de Paris.<br />
|
||||
Une aventure incroyable au croisement de la <strong>politique, l’environnement et l’intelligence collective</strong>.</p></li>
|
||||
<li><p><strong>Zebrascrossing</strong> - <em>Lyon, France - 2015-2020</em><br />
|
||||
Communauté accueillant et soutenant les personnes neuroatypiques via un forum en ligne et des réunions en personne.</p></li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside>
|
||||
<h2 id="perso">Profil</h2>
|
||||
<ul>
|
||||
<li>Capacité de <strong>raisonnement</strong> et <strong>créatif</strong></li>
|
||||
<li><strong>Polyvalent</strong>, adaptable et autonome</li>
|
||||
<li>Garde une <strong>vision d’ensemble</strong> tout en étant <strong>attentif aux détails</strong>.</li>
|
||||
<li><strong>Apprend et maîtrise rapidement</strong> de nouveaux concepts</li>
|
||||
<li>Sens aigu de la justice et de la moralité</li>
|
||||
<li>Effort d’<strong>exemplarité</strong></li>
|
||||
<li>Excellente <strong>mémoire</strong></li>
|
||||
<li><strong>Communication</strong> non violente</li>
|
||||
</ul>
|
||||
<h2 id="edu">Diplômes</h2>
|
||||
<ul>
|
||||
<li>Master d’<strong>Expert en Ingénierie Informatique</strong> - 2019<br />
|
||||
<em>Sciences-U, Lyon, France - Major de promotion</em></li>
|
||||
<li>Bachelor de <strong>Responsable de Projets Informatiques</strong> - 2017<br />
|
||||
Isitech, Lyon, France - Major de promotion_</li>
|
||||
<li>Master de <strong>Musicologie et Histoire de l’Art</strong> - 2011<br />
|
||||
<em>Université Pierre-Mendès France, Grenoble, France</em></li>
|
||||
<li><strong>Baccalauréat scientifique</strong> - 2006<br />
|
||||
<em>Saint Joseph de la Madeleine, Marseille, France</em></li>
|
||||
</ul>
|
||||
<h2 id="core">Valeurs</h2>
|
||||
<ul>
|
||||
<li><strong>Transparence</strong> - Pour une communication honnête, franche et positive.</li>
|
||||
<li><strong>Intégrité</strong> - Agir justement et pour le bien commun.</li>
|
||||
<li><strong>Éthique</strong> - Car tout système inéquitable est défectueux.</li>
|
||||
<li><strong>Respect</strong> - Livré avec une bonne dose d’empathie</li>
|
||||
</ul>
|
||||
<h2 id="int">Interêts</h2>
|
||||
<p>Environnement - Nature - Montagne - Randonnée - Musique - Escalade - FOSS - Natation - Vélo - Mensa - Politique - Jeux vidéo</p>
|
||||
<h2 id="ref">Références</h2>
|
||||
<p>En Aotearoa NZ:</p>
|
||||
<ul>
|
||||
<li><strong>David Brooks</strong>, Te Rūnanga o Ngāi Tahu - <a href="https://matt.marcha.pro/en/cv/tront-reference-letter.pdf">Lettre de recommandanion (en)</a></li>
|
||||
<li><strong>Charline Herniot</strong>, the Speight’s Ale House Wānaka - <a href="https://matt.marcha.pro/en/cv/sahw-reference-letter.pdf">Lettre de recommandanion (en)</a></li>
|
||||
</ul>
|
||||
<p>En France:</p>
|
||||
<ul>
|
||||
<li><strong>Xavier Dullin</strong> - Ekno (ex Théra)</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<p><em>Téléchargez ce CV dans un autre format : <a href="https://matt.marcha.pro/cv/MattMarchaCV.html">HTML</a> - <a href="https://matt.marcha.pro/cv/MattMarchaCV.pdf">PDF</a></em></p>
|
||||
</footer>
|
||||
BIN
cv/MattMarchaCV.pdf
Normal file
BIN
cv/MattMarchaCV.pdf
Normal file
Binary file not shown.
121
cv/index.html
Normal file
121
cv/index.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||
<title>
|
||||
CV - Matt Marcha
|
||||
</title>
|
||||
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" media="print" href="print.css" />
|
||||
</head>
|
||||
<header>
|
||||
<h1 id="matt-marcha-matthias-martin-chave">‘Matt Marcha’ <br /> Matthias Martin-Chave</h1>
|
||||
<h2 id="ingénieur-web-éthique">Ingénieur Web Éthique</h2>
|
||||
<ul>
|
||||
<li>📞 +33 678 673 185</li>
|
||||
<li>✉️ <a href="mailto:matt@marcha.pro">matt@marcha.pro</a></li>
|
||||
<li>🔗 <a href="https://matt.marcha.pro/cv/">https://matt.marcha.pro/cv/</a></li>
|
||||
<li>🏠 Ōtautahi, Aotearoa (Nouvelle-Zélande)</li>
|
||||
<li>🗣 Français (langue maternelle), English (fluent), Deutsch (ein bisschen)</li>
|
||||
</ul>
|
||||
<p>Fort de huit ans d’expérience en France puis en Aotearoa Nouvelle-Zélande, je recherche un emploi en Polynésie Française.<br />
|
||||
Particulièrement polyvalent, je suis ouvert à plusieurs types de poste pour privilégier le techniquement stimulant et les valeurs éthiques.<br />
|
||||
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.</p>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="work">Expérience professionnelle</h2>
|
||||
<h3 id="website-developer-2024">Website Developer / 2024</h3>
|
||||
<p><em>Te Rūnanga o Ngāi Tahu, Ōtautahi/Christchurch, Aotearoa New Zealand</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développeur Full Stack</li>
|
||||
<li>DevOps</li>
|
||||
<li>Chef de projet</li>
|
||||
</ul>
|
||||
<p><em>Contrat terminé pour raisons administratives (expiration de visa)</em></p>
|
||||
<h3 id="développeur-chef-de-projet-2019-2023">Développeur, Chef de projet / 2019-2023</h3>
|
||||
<p><em>Auto-entreprise, Lyon & Grenoble, France</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développement back & front</li>
|
||||
<li>Intégration</li>
|
||||
<li>Gestion de projet</li>
|
||||
<li>DevOps</li>
|
||||
<li>Architecture logicielle</li>
|
||||
</ul>
|
||||
<p><em>Activité drastiquement réduite au profit de mon départ en Aotearoa Nouvelle-Zélande</em></p>
|
||||
<h3 id="développeur-web-chef-de-projet-junior-2016-2019">Développeur web & Chef de projet Junior / 2016-2019</h3>
|
||||
<p><em>Théra, Tassin-la-Demi-Lune, France</em></p>
|
||||
<p>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.</p>
|
||||
<ul>
|
||||
<li>Développement back & front</li>
|
||||
<li>Intégration</li>
|
||||
<li>Gestion de projet</li>
|
||||
<li>DevOps</li>
|
||||
<li>Architecture logicielle</li>
|
||||
</ul>
|
||||
<p><em>Contrat non renouvellé au profit de mon départ en Aotearoa Nouvelle-Zélande (empêché par la pandémie COVID19)</em></p>
|
||||
<h2 id="tech">Compétences techniques</h2>
|
||||
<p><strong>Languages</strong><br />
|
||||
PHP (Symfony) - HTML - CSS (Bootstrap, SASS) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)</p>
|
||||
<p><strong>CMS</strong><br />
|
||||
Wordpress - SilverStripe - PrestaShop - Drupal</p>
|
||||
<p><strong>Management & Coordination</strong><br />
|
||||
Méthodologie Agile, Scrum - Rédacation de spécifications et documentations - Planification - Gestion de budget - Revue des besoins - Conception/Architecture logicielle</p>
|
||||
<p><strong>Autre/Divers</strong><br />
|
||||
MySQL/MariaDB - Linux - Git - AWS - Composer - Docker - DNS - Responsive design</p>
|
||||
<h2 id="commu">Communauté & Volontariat</h2>
|
||||
<ul>
|
||||
<li><p><strong>Convention Citoyenne pour le Climat</strong> - <em>Paris, France - 2019-2021</em><br />
|
||||
Membre d’une assemblée de 150 personnes tirées au sort aléatoirement parmi la population française (métropolitaine et DROM), en charge d’élaborer des propositions de Loi permettant de respecter les accords de Paris.<br />
|
||||
Une aventure incroyable au croisement de la <strong>politique, l’environnement et l’intelligence collective</strong>.</p></li>
|
||||
<li><p><strong>Zebrascrossing</strong> - <em>Lyon, France - 2015-2020</em><br />
|
||||
Communauté accueillant et soutenant les personnes neuroatypiques via un forum en ligne et des réunions en personne.</p></li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside>
|
||||
<h2 id="perso">Profil</h2>
|
||||
<ul>
|
||||
<li>Capacité de <strong>raisonnement</strong> et <strong>créatif</strong></li>
|
||||
<li><strong>Polyvalent</strong>, adaptable et autonome</li>
|
||||
<li>Garde une <strong>vision d’ensemble</strong> tout en étant <strong>attentif aux détails</strong>.</li>
|
||||
<li><strong>Apprend et maîtrise rapidement</strong> de nouveaux concepts</li>
|
||||
<li>Sens aigu de la justice et de la moralité</li>
|
||||
<li>Effort d’<strong>exemplarité</strong></li>
|
||||
<li>Excellente <strong>mémoire</strong></li>
|
||||
<li><strong>Communication</strong> non violente</li>
|
||||
</ul>
|
||||
<h2 id="edu">Diplômes</h2>
|
||||
<ul>
|
||||
<li>Master d’<strong>Expert en Ingénierie Informatique</strong> - 2019<br />
|
||||
<em>Sciences-U, Lyon, France - Major de promotion</em></li>
|
||||
<li>Bachelor de <strong>Responsable de Projets Informatiques</strong> - 2017<br />
|
||||
Isitech, Lyon, France - Major de promotion_</li>
|
||||
<li>Master de <strong>Musicologie et Histoire de l’Art</strong> - 2011<br />
|
||||
<em>Université Pierre-Mendès France, Grenoble, France</em></li>
|
||||
<li><strong>Baccalauréat scientifique</strong> - 2006<br />
|
||||
<em>Saint Joseph de la Madeleine, Marseille, France</em></li>
|
||||
</ul>
|
||||
<h2 id="core">Valeurs</h2>
|
||||
<ul>
|
||||
<li><strong>Transparence</strong> - Pour une communication honnête, franche et positive.</li>
|
||||
<li><strong>Intégrité</strong> - Agir justement et pour le bien commun.</li>
|
||||
<li><strong>Éthique</strong> - Car tout système inéquitable est défectueux.</li>
|
||||
<li><strong>Respect</strong> - Livré avec une bonne dose d’empathie</li>
|
||||
</ul>
|
||||
<h2 id="int">Interêts</h2>
|
||||
<p>Environnement - Nature - Montagne - Randonnée - Musique - Escalade - FOSS - Natation - Vélo - Mensa - Politique - Jeux vidéo</p>
|
||||
<h2 id="ref">Références</h2>
|
||||
<p>En Aotearoa NZ:</p>
|
||||
<ul>
|
||||
<li><strong>David Brooks</strong>, Te Rūnanga o Ngāi Tahu - <a href="https://matt.marcha.pro/en/cv/tront-reference-letter.pdf">Lettre de recommandanion (en)</a></li>
|
||||
<li><strong>Charline Herniot</strong>, the Speight’s Ale House Wānaka - <a href="https://matt.marcha.pro/en/cv/sahw-reference-letter.pdf">Lettre de recommandanion (en)</a></li>
|
||||
</ul>
|
||||
<p>En France:</p>
|
||||
<ul>
|
||||
<li><strong>Xavier Dullin</strong> - Ekno (ex Théra)</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>
|
||||
<p><em>Téléchargez ce CV dans un autre format : <a href="https://matt.marcha.pro/cv/MattMarchaCV.html">HTML</a> - <a href="https://matt.marcha.pro/cv/MattMarchaCV.pdf">PDF</a></em></p>
|
||||
</footer>
|
||||
158
cv/print.css
Normal file
158
cv/print.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
352
cv/style.css
Normal file
352
cv/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue