388 lines
24 KiB
HTML
Executable file
388 lines
24 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=320, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="Matt Marcha - Ethical Web Engineer">
|
|
<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+ -->
|
|
<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: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 - 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:url" content="https://matt.marcha.pro/en/" /> <!-- where do you want your post to link to -->
|
|
<meta property="og:type" content="website" />
|
|
|
|
<!-- Website Title -->
|
|
<title>Matt Marcha - Ethical Web Engineer</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="images/favicon.svg">
|
|
|
|
<link rel="stylesheet" href="includes/style.css" media="screen">
|
|
<link rel="stylesheet" href="includes/print.css" media="print">
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = window._paq = window._paq || [];
|
|
|
|
_paq.push([function() {
|
|
var self = this;
|
|
function getOriginalVisitorCookieTimeout() {
|
|
var now = new Date(),
|
|
nowTs = Math.round(now.getTime() / 1000),
|
|
visitorInfo = self.getVisitorInfo();
|
|
var createTs = parseInt(visitorInfo[2]);
|
|
var cookieTimeout = 33696000; // 13 mois en secondes
|
|
var originalTimeout = createTs + cookieTimeout - nowTs;
|
|
return originalTimeout;
|
|
}
|
|
this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
|
|
}]);
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(["setDomains", ["*.matt.marcha.pro","*.https//matthias.martin-chave.pro"]]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function() {
|
|
var u="//stats.marcha.pro/";
|
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
_paq.push(['setSiteId', '3']);
|
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1 style="display: none;">Matt Marcha - Ethical Web Engineer</h1>
|
|
<p class="name">Matt<span class="light">hias</span><br />
|
|
Mar<span class="light">tin-</span><br />
|
|
Cha<span class="light">ve</span></p>
|
|
</header>
|
|
|
|
<section id="intro" class="content">
|
|
<p>Kia ora,<br />
|
|
I am a <span class="featured">versatile</span> developer, dedicated to combine passions and values.</p>
|
|
<a class="button" href="cv/MattMarchaCV.html" target="_blank">Check out my resume</a>
|
|
<p class="small">Available in format: <a href="cv/MattMarchaCV.html" target="_blank">HTML</a> | <a href="cv/MattMarchaCV.pdf" target="_blank">PDF</a> | <a href="cv/MattMarchaCV.docx" desc="Berk" target="_blank">Docx</a></p>
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="portfolio" class="content">
|
|
<h2>Portfolio</h2>
|
|
<div id="portfolio-wrapper">
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">Speciclass</h3>
|
|
<p class="subtitle">E-commerce, Migration, Redesign</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-speciclass2.webp" alt="screenshot of Speciclass website, white with pastel light brown and dark blue">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>E-commerce website for a company specialised in archive boxes. The website is both informational about the company and the products, and an e-commerce platform selling the products.</p>
|
|
<p>A very stimulating project as I was in charge of the whole management and development. The main goal was to migrate the existing website from WordPress&WooCommerce to Prestashop in order to link the e-commerce platform with the company ERP. This migration had to keep all the features from the previous platform and add some new. This project was also the opportunity for a graphic redesign.</p>
|
|
<p>This project management was very interesting and busy. As a project manager I worked closely with the client to design the new website and features, I managed the budget, drafted the documentation, hired a graphic designer, communicated with the ERP's editor, and much more.</p>
|
|
<p>The development was also a very big part, with a very lot of custom modules. It was my first time working with Prestashop and I really enjoyed it, even if as they are transitioning to symfony, the coexistence of legacy code with new Symfony-based code made things quite hard sometimes. The website have a lot of features quite interesting to work on:</p>
|
|
<ul>
|
|
<li>Allow customers to create quotes from their cart and export them as PDF. This implies a lot of front-office and back-office features to manage and edit them, and make the quotes compliant with other features like stocks, emails... </li>
|
|
<li>A back office per-weight and per-district shipping cost editable table, for auto-calculation of the shipping fee from ZIP code in front-office.</li>
|
|
<li>Add some features to the Page system of the CMS to create a Blog section editable by the customer</li>
|
|
<li>Allow customers to save their cart and edit/finish it later.</li>
|
|
<li>Make order the order process compliant with some administrative institutions processes, through custom payment methods and allowing customers to add references on orders before payment.</li>
|
|
<li>Discounts based on customer type and quantity ordered</li>
|
|
<li>Custom templates for pages, products, accounts...</li>
|
|
<li>Data formatting & compliance for connection with the company ERP (stocks, orders, customers...)</li>
|
|
<li>Compliance with European General Data Privacy Reglementation (GDPR), especially regarding Analytics (using of Matomo instead of Google)</li>
|
|
<li>Import some content from the previous website</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Prestashop</li>
|
|
<li>PHP</li>
|
|
<li>HTML, CSS</li>
|
|
<li>Javascript</li>
|
|
<li>Twig</li>
|
|
<li>Smarty</li>
|
|
<li>Symfony</li>
|
|
<li>POO & MVC pattern</li>
|
|
<li>Matomo</li>
|
|
<li>Git</li>
|
|
</ul>
|
|
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://www.speciclass.com/" target="_blank">Go to website</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">La Gonette</h3>
|
|
<p class="subtitle">Blog/News, Customised UI</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-gonette.webp" alt="screenshot of La Gonette website, white and orange design">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>Website for the non-profit organization maintaining local currency of Lyon (France), the "Gonette". The main purpose of the website is to provide the right information about the local currency according to the visitor's type, lead them to the adapted subscription process, and give some fresh news through tools like the blog. The back-office part is used by various people of the organization for adding or editing content, and have to be both user-friendly and secured.</p>
|
|
<p>This project was a team work with two other freelancers : a content manager and a graphic designer, working closely with the head of communication of the organization and their volunteers developers. We first worked together to design the website, with a special attention to accessibility and carbon footprint, then I focused on the technical part : configure the CMS, develop customized plugins and a tailored theme.</p>
|
|
<p>Some features I really enjoyed to develop:</p>
|
|
<ul>
|
|
<li>A dynamic directory to browse all the professional subscribers of the organization. The directory was searchable by name, activity, location, type, and filled from the association CRM through the WordPress API.</li>
|
|
<li>Customized Gutenberg interface & blocks allowing the association employees and volunteers to publish content easily while conserving the graphic charter of the website. This was made possible in using the latest features from Gutenberg.</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Wordpress CMS</li>
|
|
<li>PHP</li>
|
|
<li>HTML, CSS</li>
|
|
<li>Javascript, AJAX</li>
|
|
<li>Gutenberg</li>
|
|
<li>REST API</li>
|
|
<li>Git</li>
|
|
<li>Composer</li>
|
|
</ul>
|
|
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://www.lagonette.org/" target="_blank">Go to website</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">#SansFiltre</h3>
|
|
<p class="subtitle">Data visualisation</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-sansfiltre.webp" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>Website displaying all the 149 laws proposals from the French Citizen Convention for Climate and their political consideration through time.</p>
|
|
<p>Based on a WordPress to have a user-friendly UI allowing some members of the Convention to add content by themselves. This project is a volunteer work that I fully developed alone, from the original idea of another Convention citizen. As I am always up for a challenge, I decided to build the pie chart without Javascript. This was fun.</p>
|
|
<p>Some other things I enjoyed coding:</p>
|
|
<ul>
|
|
<li>Various tools to filter content</li>
|
|
<li>Auto-import laws and descriptions from the proposals website</li>
|
|
<li>Custom fields on posts entities to allow sorting</li>
|
|
<li>GDPR compliance and Legal notice drafting</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Wordpress CMS</li>
|
|
<li>PHP</li>
|
|
<li>HTML, CSS</li>
|
|
<li>Javascript</li>
|
|
<li>Git</li>
|
|
</ul>
|
|
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://sansfiltre.les150.fr/" target="_blank">Go to website</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">Spéciclass</h3>
|
|
<p class="subtitle">E-Commerce</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-speciclass.webp" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>This project was about adding a global e-commerce feature to an existing WordPress website, while conserving the current content, architecture and design. It was a success and the website evolved then on another CMS more e-commerce focused.</p>
|
|
<p>I worked as a project manager and developer, mostly on:</p>
|
|
<ul>
|
|
<li>Identifying the needs with the client, and designing adapted solution</li>
|
|
<li>Adding & configuring the e-commerce solution and add some custom plugins</li>
|
|
<li>Training the customer to the use of the tool</li>
|
|
<li>Graphic changes for compliance with the current design</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Wordpress CMS</li>
|
|
<li>WooCommerce</li>
|
|
<li>PHP</li>
|
|
<li>HTML, CSS</li>
|
|
<li>Javascript</li>
|
|
<li>Git</li>
|
|
</ul>
|
|
|
|
<div class="project-buttons">
|
|
<a class="button disabled">No longer available</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">Blandine Vincent</h3>
|
|
<p class="subtitle">Showcase website</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-dienatly.webp" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>Showcase website for a Naturopath and Dietician from Lyon. Use of WordPress for the user-friendly UI. </p>
|
|
<p>I worked alone, with only a few requirements from the client. I was then involved on:</p>
|
|
<ul>
|
|
<li>Technical and Graphical design</li>
|
|
<li>Search Engine Optimisation</li>
|
|
<li>Architecture and content</li>
|
|
<li>Training the client to website management</li>
|
|
<li>Legal notice drafting and GDPR compliance</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Wordpress CMS</li>
|
|
<li>PHP</li>
|
|
<li>HTML, CSS</li>
|
|
</ul>
|
|
|
|
<div class="project-buttons">
|
|
<a class="button" href="https://dieteticienne-naturopathe-lyon.fr/" target="_blank">Go to website</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="accordion projet">
|
|
<input type="radio" class="toggle-accordion-content" name="projects" />
|
|
<div class="accordion-close">
|
|
<input type="radio" class="clear" name="projects" />
|
|
</div>
|
|
|
|
<div class="project-header">
|
|
<h3 class="accordion-title">PCIC</h3>
|
|
<p class="subtitle">Event registration and management</p>
|
|
<img loading="lazy" class="img-fluid" src="images/projet-pcic.webp" alt="alternative">
|
|
</div>
|
|
|
|
<div class="accordion-content">
|
|
<h4>The project</h4>
|
|
<p>Website allowing the registration to an annual international event and back-office tools to manage registrants and events. Also have an informational section about the organization and the next and pasts events.</p>
|
|
<p>I worked on this project as a technical project manager and as a developer, from 2019 to 2022. The platform is based on WordPress CMS with custom plugins for the events and registrants managements, bound to specific plugins for the registrations payments. I designed and developed the custom plugins from scratch, using a homemade MVC pattern. Year after year, I implemented and improved a lot of features:</p>
|
|
<ul>
|
|
<li>Front-office registration form and user interface for registration management</li>
|
|
<li>Registrants authentication</li>
|
|
<li>Back-office registrations management tools</li>
|
|
<li>PDF badges generation</li>
|
|
<li>Group registrations</li>
|
|
<li>Automatic calculation of registration fee according to various criteria (age, date, total number of registrations...)</li>
|
|
<li>Registrations payments and statuses</li>
|
|
<li>Multi-event feature</li>
|
|
<li>Data export & import</li>
|
|
<li>GDPR compliance, cron task for personal data auto-deletion</li>
|
|
</ul>
|
|
|
|
<h4>Tech stack</h4>
|
|
<ul>
|
|
<li>Wordpress CMS</li>
|
|
<li>WooCommerce</li>
|
|
<li>PHP</li>
|
|
<li>POO & MVC pattern</li>
|
|
<li>HTML, CSS</li>
|
|
<li>mPDF</li>
|
|
<li>Git</li>
|
|
<li>Javascript</li>
|
|
</ul>
|
|
<div class="project-buttons">
|
|
<a class="button disabled">No longer available</a>
|
|
<p class="project-close">
|
|
Close <input type="radio" class="clear" name="projects" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<hr />
|
|
|
|
<section id="contact" class="content">
|
|
|
|
<h2>Contact</h2>
|
|
<p class="contact">
|
|
+64223043089
|
|
<a class="button phone float" href="tel:+64223043089" alt="call">
|
|
<svg focusable="false" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"></path>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
|
|
<p class="contact">
|
|
matthias@martin-chave.pro
|
|
<a class="button email float" href="mailto: matthias@martin-chave.pro" alt="send email">
|
|
<svg focusable="false" data-icon="at" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
<path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
</section>
|
|
<footer>
|
|
<div class="copyright">
|
|
<p>Copyright © 2023 <a href="https://matt.marcha.pro/en/">Matt Marcha</a></p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|