Update content & layout
This commit is contained in:
parent
b3ec567532
commit
39d3d34613
146
en/cv/Matt MarchaCV.md
Normal file
146
en/cv/Matt MarchaCV.md
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||||
|
<title>Resume - Matt Marcha</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" media="print" href="print.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<header>
|
||||||
|
|
||||||
|
# 'Matt Marcha' <br /> Matthias Martin-Chave
|
||||||
|
|
||||||
|
## Ethical Web Engineer
|
||||||
|
|
||||||
|
- 📞 022 304 3089
|
||||||
|
- ✉️ [matt@marcha.pro](mailto:matt@marcha.pro)
|
||||||
|
- 🔗 [https://matt.marcha.pro](https://matt.marcha.pro/en/)
|
||||||
|
- 🏠 Ōtautahi - Christchurch
|
||||||
|
- 🗣 French (native), English (fluent), German (notions)
|
||||||
|
|
||||||
|
8 years of experience in web/software engineering, I deliver stable, reliable and sustainable work, aligned with strong ethics.
|
||||||
|
Incredibly resourceful and versatile, I worked in several capacities and I'm looking for the right team and organisation rather than a specific position. My ideal work environment cares about accessibility, privacy, security and reduction of carbon footprint, supports Free & Open Source Software and avoids unethical Big Tech solutions.
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
## Work history {#work}
|
||||||
|
|
||||||
|
### Website Developer / 2024
|
||||||
|
|
||||||
|
*Te Rūnanga o Ngāi Tahu, Ōtautahi-Christchurch, Aotearoa New Zealand*
|
||||||
|
|
||||||
|
In charge of development and maintenance of Silverstripe website in a small team.
|
||||||
|
|
||||||
|
- Developer Full Stack
|
||||||
|
- DevOps
|
||||||
|
- Project management
|
||||||
|
|
||||||
|
_Job ended because of working visa expiring_
|
||||||
|
|
||||||
|
### Web Developer & Project Manager / 2019-2023
|
||||||
|
|
||||||
|
*Self-employed, Lyon & Grenoble, France*
|
||||||
|
|
||||||
|
Running my own 1-person digital agency creating low-carbon footprint websites and applications for various local organizations.
|
||||||
|
|
||||||
|
- Developer Full Stack
|
||||||
|
- Project Manager
|
||||||
|
- DevOps
|
||||||
|
- Architect
|
||||||
|
- Business Analyst
|
||||||
|
- Product Owner
|
||||||
|
|
||||||
|
*Activity highly reduced for travelling to Aotearoa NZ*
|
||||||
|
|
||||||
|
### Web Developer & Project Manager / 2016-2019
|
||||||
|
|
||||||
|
*Théra, Tassin-la-Demi-Lune, France*
|
||||||
|
|
||||||
|
Main developer in a digital, communication & event agency. In charge of various projects from informational websites to event management softwares.
|
||||||
|
|
||||||
|
- Developer Full Stack
|
||||||
|
- Project Manager
|
||||||
|
- DevOps
|
||||||
|
- Architect
|
||||||
|
|
||||||
|
_Job ended for travelling to Aotearoa NZ (but COVID19 happened)_
|
||||||
|
|
||||||
|
## Technical skills {#tech}
|
||||||
|
|
||||||
|
**Programming languages**
|
||||||
|
PHP (Symfony) - HTML - CSS (Bootstrap, SASS) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)
|
||||||
|
|
||||||
|
**CMS**
|
||||||
|
Wordpress - SilverStripe - PrestaShop - Drupal
|
||||||
|
|
||||||
|
**Management & Coordination**
|
||||||
|
Agile, Scrum workflow - Documentation - Budget - Task planning - Needs refinement - Design - Architecture
|
||||||
|
|
||||||
|
**Other/Misc.**
|
||||||
|
MySQL/MariaDB - Linux - Git - AWS - Composer - Docker - DNS
|
||||||
|
|
||||||
|
## Community experience {#commu}
|
||||||
|
|
||||||
|
- **French Climate Citizen Convention** _(Convention Citoyenne pour le Climat) - Paris, France - 2019-2021_
|
||||||
|
Member of an **Assembly** of 150 french citizen randomly drawn, working together to write the new Environment Act. An amazing journey about **politics, environment and collective intelligence**.
|
||||||
|
|
||||||
|
- **Zebrascrossing** - _Lyon, France - 2015-2020_
|
||||||
|
Community welcoming and supporting neurodiverse persons through an online forum and regular real-life meetings.
|
||||||
|
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
|
||||||
|
## Personal skills {#perso}
|
||||||
|
|
||||||
|
- Advanced **reasoning** and **creative thinking**,
|
||||||
|
- **Resourceful** and **adaptable**
|
||||||
|
- Strongly motivated to understand how things work, ability to see the global picture
|
||||||
|
- **Learn concepts quickly**, and build/develop these concepts
|
||||||
|
- Strong sense of justice and **morality**
|
||||||
|
- **Leading** by example
|
||||||
|
- Nonviolent **communication**
|
||||||
|
- Impressive **memory**
|
||||||
|
|
||||||
|
## Education {#edu}
|
||||||
|
|
||||||
|
* **IT engineering expert** Master's degree - 2019
|
||||||
|
_Sciences-U, Lyon, France - Valedictorian_
|
||||||
|
* **IT Projects Management** Bachelor's degree - 2017
|
||||||
|
_Isitech, Lyon, France - Valedictorian_
|
||||||
|
* **Musicology and History of Art** Master's degree - 2011
|
||||||
|
_Université Pierre-Mendès France, Grenoble, France_
|
||||||
|
* **Scientific Baccalaureate** - 2006
|
||||||
|
_Saint Joseph de la Madeleine, Marseille, France_
|
||||||
|
|
||||||
|
## Core values {#core}
|
||||||
|
|
||||||
|
- **Transparency** - There is no good lie. I value truth at all time.
|
||||||
|
- **Integrity** - Do the right thing and act for the greater good. No cheating!
|
||||||
|
- **Ethic** - Because any unfair system is defective.
|
||||||
|
- **Respect** - It's going with a lot of empathy.
|
||||||
|
|
||||||
|
## Interests {#int}
|
||||||
|
|
||||||
|
Environment - Nature - Mountain - Hiking - Playing music - Rock climbing - FOSS - Swimming - Biking - Mensa - Politics - Video games
|
||||||
|
|
||||||
|
## References {#ref}
|
||||||
|
|
||||||
|
In Aotearoa NZ:
|
||||||
|
|
||||||
|
- **David Brooks**, Te Rūnanga o Ngāi Tahu - [Reference letter](https://matt.marcha.pro/en/cv/tront-reference-letter.pdf)
|
||||||
|
- **Charline Herniot**, the Speight's Ale House Wānaka - [Reference letter](https://matt.marcha.pro/en/cv/sahw-reference-letter.pdf)
|
||||||
|
|
||||||
|
In France:
|
||||||
|
|
||||||
|
- **Xavier Dullin** - Ekno (ex Théra)
|
||||||
|
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
*Download this resume in another format : [HTML](https://matt.marcha.pro/en/cv/MattMarchaCV.html) - [PDF](https://matt.marcha.pro/en/cv/MattMarchaCV.pdf) - [Docx](https://matt.marcha.pro/en/cv/MattMarchaCV.docx)*
|
||||||
|
|
||||||
|
</footer>
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,136 +0,0 @@
|
||||||
# Matthias Martin-Chave - 'Matt Marcha'
|
|
||||||
|
|
||||||
## Web Developer, Web Project Manager
|
|
||||||
|
|
||||||
> 022 304 3089 - [matt@marcha.pro](mailto:matt@marcha.pro)
|
|
||||||
> https://matt.marcha.pro/en/ - Ōtautahi - Christchurch
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
8-years experienced Web Developer & Project Manager, with strong focus on low carbon footprint solutions, sustainable tech and Free & Open Source Software.
|
|
||||||
|
|
||||||
I am looking for a permanent position with an Accredited Employer sharing similar values.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Personal skills
|
|
||||||
|
|
||||||
- Advanced **reasoning** and **creative thinking**,
|
|
||||||
- **Resourceful** and **adaptable**
|
|
||||||
- Strongly motivated to understand how things work, ability to see the global picture
|
|
||||||
- **Learn concepts quickly**, and build/develop these concepts
|
|
||||||
- Strong sense of justice and **morality**
|
|
||||||
- Leading by example
|
|
||||||
- Nonviolent **communication**
|
|
||||||
- Quite impressive **memory**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Technical skills
|
|
||||||
|
|
||||||
**Languages**
|
|
||||||
PHP (OOP, MVC, Symfony) - HTML (5) - CSS (3) - Javascript (Vanilla, jQuery) - Python (Pandas, NumPy, Jupyter, Matplotlib)
|
|
||||||
|
|
||||||
**CMS**
|
|
||||||
Wordpress - SilverStripe - PrestaShop - Drupal
|
|
||||||
|
|
||||||
**Project management**
|
|
||||||
Agile workflow - Document drafting - Dev-to-Human translation - Budget - Task planning - Needs refinement - Design - Architecture
|
|
||||||
|
|
||||||
**Other**
|
|
||||||
MySQL/MariaDB - Linux - Git - AWS - Composer
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Core values
|
|
||||||
|
|
||||||
- **Transparency** - There is no good lie. I value truth at all time.
|
|
||||||
- **Integrity** - Do the right thing and act for the greater good. No cheating!
|
|
||||||
- **Ethic** - Because any unfair system is defective.
|
|
||||||
- **Respect** - It's going with a lot of empathy.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Work history
|
|
||||||
|
|
||||||
### Website Developer / 2024
|
|
||||||
|
|
||||||
*Te Rūnanga o Ngāi Tahu, Ōtautahi-Christchurch, Aotearoa New Zealand*
|
|
||||||
|
|
||||||
- Maintaining, updating, and developing **SilverStripe** websites
|
|
||||||
- **Backend & Frontend** development
|
|
||||||
- **Scrum** method, Cross-team collaboration
|
|
||||||
- **AWS** server management, **LAMP** stack
|
|
||||||
- **Best practices** for accessibility, SEO, security, code maintainability...
|
|
||||||
|
|
||||||
_Job ended because of working visa expiring_
|
|
||||||
|
|
||||||
### Web Developer & Web Project Manager / 2019-2023
|
|
||||||
|
|
||||||
*Self-employed as a 1-person Web Agency, Lyon&Grenoble, France*
|
|
||||||
|
|
||||||
- Worn **all the hats** from the company administration to web development
|
|
||||||
- **Creating web sites and applications** for small companies or organizations
|
|
||||||
- Focus creating sustainable **low-carbon solutions** in using Free and Open Source Software
|
|
||||||
- **Agile** method, **LAMP server** management, various technologies
|
|
||||||
|
|
||||||
*Activity ended for travelling to Aotearoa NZ*
|
|
||||||
|
|
||||||
### Web Developer & Web Project Manager / 2016-2019
|
|
||||||
|
|
||||||
*Théra, Tassin-la-Demi-Lune, France*
|
|
||||||
|
|
||||||
- Creating corporate **websites** and platforms for **event management**
|
|
||||||
- **Managing, developing, designing** projects on my own
|
|
||||||
- **Best practices** for accessibility, SEO, security, code maintainability...
|
|
||||||
- **Backend & Frontend** development
|
|
||||||
|
|
||||||
_Job ended for travelling to Aotearoa NZ (but COVID19 happened)_
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Qualifications
|
|
||||||
|
|
||||||
* **IT engineering expert** Master's degree - 2019
|
|
||||||
_Sciences-U, Lyon, France - Valedictorian_
|
|
||||||
* **IT Projects Management** Bachelor's degree - 2017
|
|
||||||
_Isitech, Lyon, France - Valedictorian_
|
|
||||||
* **Musicology and History of Art** Master's degree - 2011
|
|
||||||
_Université Pierre-Mendès France, Grenoble, France_
|
|
||||||
* **Scientific Baccalaureate** - 2006
|
|
||||||
_Saint Joseph de la Madeleine, Marseille, France_
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Community experience
|
|
||||||
|
|
||||||
- **French Climate Citizen Convention** _(Convention Citoyenne pour le Climat) - Paris, France - 2019-2021_
|
|
||||||
Member of an **Assembly** of 150 french citizen randomly drawn, working together to write the new Environment Act. An amazing journey about **politics, environment and collective intelligence**.
|
|
||||||
|
|
||||||
- **Zebrascrossing** - _Lyon, France - 2015-2020_
|
|
||||||
Community welcoming and supporting neurodiverse persons through an online forum and regular real-life meetings.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Interests
|
|
||||||
|
|
||||||
Environment - Nature - Mountain - Hiking - Playing music - Rock climbing - FOSS - Swimming - Biking - Mensa - Politics - Video games
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Referees
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
In Aotearoa NZ:
|
|
||||||
|
|
||||||
- **David Brooks** - Te Rūnanga o Ngāi Tahu
|
|
||||||
- **Charline Herniot** - the Speight's Ale House Wānaka
|
|
||||||
|
|
||||||
In France:
|
|
||||||
|
|
||||||
- **Xavier Dullin** - Ekno (ex Théra)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
*Download this resume in another format : [HTML](https://matt.marcha.pro/en/cv/MattMarchaCV.html) - [PDF](https://matt.marcha.pro/en/cv/MattMarchaCV.pdf) - [Docx](https://matt.marcha.pro/en/cv/MattMarchaCV.docx)*
|
|
||||||
Binary file not shown.
150
en/cv/print.css
Normal file
150
en/cv/print.css
Normal file
|
|
@ -0,0 +1,150 @@
|
||||||
|
: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 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*** 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
en/cv/style.css
Normal file
352
en/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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,20 +5,20 @@
|
||||||
<meta name="viewport" content="width=320, initial-scale=1, shrink-to-fit=no">
|
<meta name="viewport" content="width=320, initial-scale=1, shrink-to-fit=no">
|
||||||
|
|
||||||
<!-- SEO Meta Tags -->
|
<!-- SEO Meta Tags -->
|
||||||
<meta name="description" content="Matt Marcha - Full Stack Web Developer">
|
<meta name="description" content="Matt Marcha - Ethical Web Engineer">
|
||||||
<meta name="author" content="Matt Marcha">
|
<meta name="author" content="Matt Marcha">
|
||||||
|
|
||||||
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
|
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
|
||||||
<meta property="og:site_name" content="Matt Marcha - Full Stack Web Developer" /> <!-- website name -->
|
<meta property="og:site_name" content="Matt Marcha - Ethical Web Engineer" /> <!-- website name -->
|
||||||
<meta property="og:site" content="https://matt.marcha.pro/en/" /> <!-- website link -->
|
<meta property="og:site" content="https://matt.marcha.pro/en/" /> <!-- website link -->
|
||||||
<meta property="og:title" content="Matt Marcha - Full Stack Web Developer"/> <!-- title shown in the actual shared post -->
|
<meta property="og:title" content="Matt Marcha - Ethical Web Engineer"/> <!-- title shown in the actual shared post -->
|
||||||
<meta property="og:description" content="Portfolio and CV for Matt Marcha - Full Stack Web Developer" /> <!-- description shown in the actual shared post -->
|
<meta property="og:description" content="Portfolio and CV for Matt Marcha - Ethical Web Engineer" /> <!-- description shown in the actual shared post -->
|
||||||
<meta property="og:image" content="https://matt.marcha.pro/images/coverimage.jpg" /> <!-- image link, make sure it's jpg -->
|
<meta property="og:image" content="https://matt.marcha.pro/images/coverimage.jpg" /> <!-- image link, make sure it's jpg -->
|
||||||
<meta property="og:url" content="https://matt.marcha.pro/en/" /> <!-- where do you want your post to link to -->
|
<meta property="og:url" content="https://matt.marcha.pro/en/" /> <!-- where do you want your post to link to -->
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
|
|
||||||
<!-- Website Title -->
|
<!-- Website Title -->
|
||||||
<title>Matt Marcha - Full Stack Web Developer</title>
|
<title>Matt Marcha - Ethical Web Engineer</title>
|
||||||
|
|
||||||
<!-- Favicon -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" href="images/favicon.svg">
|
<link rel="icon" href="images/favicon.svg">
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
<h1 style="display: none;">Matt Marcha - Web Developer</h1>
|
<h1 style="display: none;">Matt Marcha - Ethical Web Engineer</h1>
|
||||||
<p class="name">Matt<span class="light">hias</span><br />
|
<p class="name">Matt<span class="light">hias</span><br />
|
||||||
Mar<span class="light">tin-</span><br />
|
Mar<span class="light">tin-</span><br />
|
||||||
Cha<span class="light">ve</span></p>
|
Cha<span class="light">ve</span></p>
|
||||||
|
|
@ -68,9 +68,9 @@
|
||||||
|
|
||||||
<section id="intro" class="content">
|
<section id="intro" class="content">
|
||||||
<p>Kia ora,<br />
|
<p>Kia ora,<br />
|
||||||
I am a <span class="featured">versatile</span> web developer, dedicated to combine passions and values.</p>
|
I am a <span class="featured">versatile</span> developer, dedicated to combine passions and values.</p>
|
||||||
<a class="button" href="cv/MattMarchaCV.pdf" target="_blank">Check out my resume</a>
|
<a class="button" href="cv/MattMarchaCV.html" target="_blank">Check out my resume</a>
|
||||||
<p class="small">Also available in format: <a href="cv/MattMarchaCV.html" target="_blank">HTML</a> | <a href="cv/MattMarchaCV.md" target="_blank">Markdown</a> | <a href="cv/MattMarchaCV.docx" target="_blank">Docx</a></p>
|
<p class="small">Also available in format: <a href="cv/MattMarchaCV.PDF" target="_blank">PDF</a> | <a href="cv/MattMarchaCV.md" target="_blank">Markdown</a> | <a href="cv/MattMarchaCV.docx" desc="Berk" target="_blank">Docx</a></p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue