Refreshed version Oct 2023

gatsbimantico · Oct 21, 2023 · a7170a6 · a7170a6
1 parent f6811e7
commit a7170a6
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 124 deletions.
diff --git a/components/date-set/date-set.js b/components/date-set/date-set.js
@@ -1,14 +1,6 @@
-const dateParse = date => date === 'now' ? new Date() : new Date(date);
-const dateRound = millisecondsDiff => Math.round(millisecondsDiff/3.1536e8)/1e2;
-const dateDiff = ({ endDate, startDate }) => {
-  const years = dateRound(dateParse(endDate)-dateParse(startDate));
-  return `${years} year${years === 1 ? '' : 's'}`;
-};
-
 export default ({ endDate, startDate }) => startDate || endDate ? `
   <p class="job-experience__date">
-    ${startDate && endDate ? `<small>${dateDiff({ endDate, startDate })}, </small>` : ''}
-    ${startDate ? `<span>from ${startDate}</span>` : ''}
+    ${startDate ? `<span><span aria-label=" from  "></span> ${startDate}</span>` : ''}
     ${endDate ? `<span>to ${endDate}</span>` : ''}
   </p>
 ` : '';
diff --git a/components/experience-set/experience.js b/components/experience-set/experience.js
@@ -6,12 +6,9 @@ export default ({ name, position, endDate, startDate, tools, summary }) => `
   <li class="job-experience">
     <article class="job-experience__article">
       <header class="job-experience__header">
-        <h4>${name}<span aria-label="."></span></h4>
-        <div class="job-experience__meta">
-          <p class="job-experience__business"><span aria-label="at "></span>${position}</p>
-          ${DateSet({ endDate, startDate })}
-          <span aria-label="."></span>
-        </div>
+        <h4 class="job-experience__business">${name},</h4>
+        <p class="job-experience__position"><span aria-label="at "></span>${position}</p>
+        ${DateSet({ endDate, startDate })}
       </header>
       <section class="job-experience__main-section">
         ${ToolSet(tools)}

diff --git a/components/header/header.js b/components/header/header.js
@@ -1,9 +1,5 @@
-import md5 from '../../controllers/cypher/md5.js';
-
-export default ({ name, label, email }) => `
+export default ({ name, label }) => `
   <section class="hero">
-    <div class="hero__pic hero__pic--div" style="background-image: url('https://www.gravatar.com/avatar/${md5(email)}.jpg?s=512&r=x');"></div>
-    <img class="hero__pic hero__pic--img" title="${name} profile picture" src="https://www.gravatar.com/avatar/${md5(email)}.jpg?s=512&r=x"/>
     <h1 class="hero__name">${name}<span aria-label="."></span></h1>
     <h2 class="hero__role">${label}<span aria-label="."></span></h2>
   </section>

diff --git a/components/text/text.js b/components/text/text.js
@@ -1,3 +1,3 @@
 export default ({ class: name, text }) => text ? `
-  <p class="${name}">${text.replace(/(\n)(\n)/g, '$1<br><br>$2')}</p>
+  <p class="${name}"><span>${text.replace(/(\n)(\n)/g, '$1</span><span>$2')}</span></p>
 ` : '';
diff --git a/components/tool-set/tool-set.js b/components/tool-set/tool-set.js
@@ -1,10 +1,8 @@
 import List from '../list/list.js';
 import Tool from './tool.js';
 
-const stackIcon = (height = 8) => `<svg height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path fill="currentColor" d="M306 561.072L40.793 438.806c.918.554-23.466-10.461-40.793-20.368 0 14.784 3.71 41.884 17.5 49.189l259.641 116.72c22.95 10.825 32.837 10.825 57.7 0l259.641-116.72C607.314 461.66 612 433.565 612 418.438c-16.696 8.357-40.335 20.272-40.794 20.368L306 561.072zm0-509.433c1.912 2.238 1.415.459 0 0zM17.5 345.361l259.641 116.72c22.95 10.824 32.837 10.824 57.7 0l259.641-116.72C607.314 339.394 612 311.3 612 296.171c-16.696 8.358-40.335 20.273-40.794 20.369L306 438.806 40.793 316.54c.918.555-23.466-10.462-40.793-20.369 0 14.784 3.71 41.885 17.5 49.19zm0-122.266l259.641 116.72c22.95 10.825 32.837 10.825 57.7 0l259.641-116.72c19.125-8.912 19.756-46.818 0-57.643L334.841 28.364c-20.388-12.087-34.75-11.456-57.701 0L17.5 165.452c-19.757 12.737-20.388 46.818 0 57.643zM306 51.639l265.206 142.634L306 306.04 40.793 194.273 306 51.639z"></path></svg>`;
-
 export default (tools) => tools ? `
-  <h5><span aria-label="where I used a ">${stackIcon()} </span>Tech Stack<span aria-label=" like"></span>:</h5>
+  <span aria-label="where I used: "></span>
   <ul class="job-experience__tool-set">
     ${List(Tool, tools)}
   </ul>

diff --git a/controllers/cypher/md5.js b/controllers/cypher/md5.js
diff --git a/css/candidate.css b/css/candidate.css
@@ -25,7 +25,6 @@ body.loaded {
 }
 
 .page-intro {
-  height: 100vh;
   display: flex;
   flex-direction: column;
 }
@@ -43,22 +42,6 @@ body.loaded {
   padding: 30px 0;
 }
 
-.hero__pic {
-  background-size: cover;
-  border-radius: 50%;
-  height: 7em;
-  margin-bottom: 1em;
-  width: 7em;
-}
-
-.hero__pic--div {
-  flex: 0 0 7em;
-}
-
-.hero__pic--img {
-  display: none;
-}
-
 .hero__name {
   margin: 0;
   text-transform: uppercase;
@@ -144,7 +127,6 @@ p br {
 
 
 .job-experience {
-  margin-bottom: 30px;
   position: relative;
 }
 
@@ -161,37 +143,28 @@ p br {
   background: white;
   z-index: 200;
   padding: 5px 0 0;
+  display: flex;
+  flex-flow: row wrap;
+  gap: .4em;
 }
 
 .job-experience__main-section {
   flex: 1 1;
   overflow: auto;
 }
 
-.job-experience__main-section > h5,
-.job-experience__main-section > ul {
-  display: inline-block;
-}
-
-.job-experience__meta {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.job-experience__business {
+.job-experience__position {
   text-transform: uppercase;
+  flex: 1 0;
 }
 
 .job-experience__date {
-  border-bottom: 0.5px solid black;
-  flex: 1 0 90%;
+  flex: 1 0 100%;
   font-style: italic;
   padding: 0 .5em 0 0;
   position: relative;
-  text-align: right;
-  margin: 0 0 .7em .4em;
   top: -5px;
+  display: none;
 }
 
 .job-experience__tool {
@@ -204,7 +177,10 @@ p br {
 
 .job-experience__tool-set {
   padding: 0;
-  margin: 0 0 15px;
+  margin: 0;
+  display: flex;
+  flex-flow: row wrap;
+  gap: .4em;
 }
 
 .job-experience__tool-name,
@@ -217,11 +193,6 @@ p br {
   margin: 0 0 0 5px;
 }
 
-
-.education-experience {
-  margin: 10px 0 0;
-}
-
 .education-experience__title-set {
   color: steelblue;
   padding: 0;
@@ -255,14 +226,16 @@ h1, h2, h3, h4, h5, h6,
 .experience-set,
 .education-set {
   margin: 0;
-  padding: 30px calc(2vw + 15px) 0;
+  padding: 30px calc(2vw + 15px);
+  display: flex;
+  flex-flow: column;
+  gap: 1.5em;
 }
 
 .summary__title,
 .experience-set__title,
 .education-set__title {
   color: white;
-  margin: 30px 0 0;
   padding: 10px;
   position: sticky;
   top: 0;
@@ -361,29 +334,11 @@ a:focus {
   }
 
   .hero {
-    padding: 3em 1em 1em;
+    padding: 0 0 .4em;
     position: relative;
     text-align: right;
   }
 
-  .hero__pic {
-    border-radius: 70% 60% 80% 50%;
-    top: 0;
-    left: 0;
-    height: 93%;
-    margin: 0;
-    position: absolute;
-    width: auto;
-  }
-
-  .hero__pic--div {
-    display: none;
-  }
-
-  .hero__pic--img {
-    display: inline-block;
-  }
-
   .contact-set {
     flex-direction: row;
   }
@@ -416,7 +371,14 @@ a:focus {
   .summary,
   .experience-set,
   .education-set {
-    padding: 15px calc(2vw) 0;
+    padding: .4em calc(2vw);
+    gap: .4em;
+  }
+
+  .summary__title,
+  .experience-set__title,
+  .education-set__title {
+    padding: .1em 10px;
   }
 
   /* PRINT THEME */
@@ -435,7 +397,6 @@ a:focus {
   .experience-set__title,
   .education-set__title {
     background: rgba(54, 57, 72, 0.3) !important;
-    margin: 10px 0 0;
   }
 
   #revision-id {

diff --git a/cv.js b/cv.js
@@ -14,13 +14,16 @@
     phone: '+447920158374',
     email: 'costascarrera.cesar@gmail.com',
     summary: `
-I am a problem solver with ${semanticYearsOfExperience('11/15/2013')} in the frontend.
+I am a software engineer with ${semanticYearsOfExperience('2013-11-15')} in web development.
 
-Through my roles at different businesses, I have contributed to solving most scaling up and cutting edge issues related to web development including:
- performance, acessibility, analytics, internationalisation, building design systems, modularisation with version control, A/B testing, drag and drop page builders, and SSR/static/hybrid rendering methods.
- And I have carried out all kinds of testing: end to end, integration, contract, visual and unit tests.
+I have helped businesses to improve on:
+ performance, acessibility, analytics, compliance,
+ internationalisation, whitelabelling,
+ microfrontends, design systems, tokenisation,
+ testing, CI/CD, IaC,
+ CMS, SEO, CRO, and others.
 
-I am a team player and I deeply care about the products I work on. I like to get involved in business solutions and enjoy collaborating with my colleagues.
+I am a team player, and I deeply care about the products I contribute to.
     `,
     location: {
       city: 'London',
@@ -42,78 +45,79 @@ I am a team player and I deeply care about the products I work on. I like to get
     name: 'Nutmeg',
     position: 'Senior Software Engineer',
     startDate: 'Feb 2022', endDate: 'now',
-    tools: [ 'React 17', 'SASS', 'Node 16', 'RTL', 'Jenkins', 'Argo', 'Terraform', /* 'AWS', 'Enzime', 'Gitlab', 'Jira Cloud', */ ],
+    tools: [ 'React 17', 'Node 18', 'SASS', 'RTL', 'Cypress', 'Jenkins', 'Terraform', 'AWS', /* 'Argo', 'Enzime', 'Gitlab', 'Jira Cloud', */ ],
     summary: `
-As part of Nutmeg's product team I've developed UI elements with great detail on accessibility and simplicity.
-
-Collaborated with colleagues while leading or being lead in initiatives, and also with BE, UX and infrastructure teams.
+I became part of the product team
+ and was shortly promoted due my contributions to the design system.
+ I collaborated company-wide beyond engineering teams,
+ delivering features, tools, business ideas and architectural decisions. 
+ In February 2023 I was selected to form the Developer Experience team.
+ Since then we refreshed almost every tool in the stack, and we keep improving iteratively. 
     `
 
   }, {
 
     name: 'Ocado Technology',
     position: 'Software Engineer Ⅱ',
     startDate: 'Jan 2020', endDate: 'Jan 2022',
-    tools: [ 'React 17', 'Redux', 'styled-components 5', 'Node 14', 'RTL', /* 'Enzime', 'Gitlab', 'Jira Cloud', */ ],
+    tools: [ 'React 17', 'Node 14', 'styled-components 5', 'RTL', 'Redux', /* 'Enzime', 'Gitlab', 'Jira Cloud', */ ],
     summary: `
-Ocado's development culture relies on high autonomy.
-
-I lead the engineering team to work on
- legal aspects of the site such as compliance with cookies,
- and pushed for initiatives to prevent the project from becoming legacy or being exposed to security holes.
-
-I worked with my colleagues on cutting edge frontend responsibilities like accessibility, performance, and developing features designed by the UX team.
+I was hired to join the ecommere team.
+ In addition to my responsibilities I championed best practices on
+ accessibility, performance, compliance,
+ and created technical initiatives to keep the project evergreen.
     `
 
   }, {
 
     name: 'Loveholidays',
     position: 'Frontend web developer',
     startDate: 'May 2018', endDate: '2020',
-    tools: [ 'React 16', 'Redux', 'styled-components 5', 'Sass', /* 'redux-sagas', 'Enzime', 'Github', 'Jira Cloud', 'Karma', 'Optimizely', 'Google Analytics', 'Google Optimize', */ ],
+    tools: [ 'React 16', 'styled-components 5', 'Redux', /* 'Sass', 'redux-sagas', 'Enzime', 'Github', 'Jira Cloud', 'Karma', 'Optimizely', 'Google Analytics', 'Google Optimize', */ ],
     summary: `
-My time at Loveholidays was completely in sync with the needs of their business.
-I joined to help scale the business internationally and migrating from Django into a React frontend.
-
-I lead by example the experiments team from its inception with two developers until its end with three frontend teams with around 15 developers.
-The values that I induced in the team were: speed (quick tasks, big impact, fast pipeline), quality, standards (close to native and semantic), and performance.
+Loveholidays was migrating to React when I joined.
+ Soon after, I was invited with other two colleagues to form the CRO team
+ which we grew to 15 developers within a year.
+ I improved the development process
+ and cross-team communications
+ with dashboards, metrics and documentation.
     `,
 
   }, {
 
     name: 'Tribal worldwide',
     position: 'Frontend web developer',
     startDate: 'Jan 2017', endDate: 'May 2018',
-    tools: [ 'Polymer 1', 'Redux', 'Mocha', 'Sass', 'Node 6', /* 'Gulp 4', 'jQuery 3', 'Git', 'Handlebars', 'Wordpress', 'Jira', 'Aem', 'Jahia', */ ],
+    tools: [ 'Polymer 1', 'Aem', 'Jahia', /* 'Redux', 'Mocha', 'Sass', 'Node 6', 'Gulp 4', 'jQuery 3', 'Git', 'Handlebars', 'Wordpress', 'Jira', */ ],
     summary: `
-Tribal is a hybrid ad-development agency that provides websites to their advertising clients.
-Each project is handled by a small team of 1 to 4 specialists.
-
-At Tribal I contributed to Wordpress, AEM and Polymer proyects, while mentoring a junior and an intern developers.
-
-I took the initiative on improving performance through rooting for reusable components, unit tests and understanding the problem and the client needs before coding.
+At this award-winning agency I developed features for multiple clients.
+ While working for Volkswagen,
+ I designed, together with backend developers,
+ an SSR flow for Jahia and Polymer allowing us to migrate
+ from a CMS server multi-page site,
+ to a CMS driven SPA.
     `,
 
   }, {
 
     name: 'Imatia innovation',
     position: 'Full stack web developer',
     startDate: 'Jun 2016 Jun', endDate: '2017',
-    tools: [ 'Angular 2', 'TypeScript 2', 'Sass', 'Node 6', 'Docker', 'Scala', 'Java', 'Hadoop', /* 'Gulp 3', 'Gitlab', */ ],
+    /* tools: [ 'Angular 2', 'TypeScript 2', 'Sass', 'Node 6', 'Docker', 'Scala', 'Java', 'Hadoop', 'Gulp 3', 'Gitlab' ], */
 
   }, {
 
     name: 'ViewNext',
     position: 'Full stack web developer',
     startDate: 'Jun 2015', endDate: 'Jun 2016',
-    tools: [ 'Angular 1', 'Java 5', 'DB2', /* 'jQuery 1', 'HTML 4', 'CSS 2', 'Backbone', 'SVN', 'JSP', 'Jira', */ ],
+    /* tools: [ 'Angular 1', 'Java 5', 'DB2', 'jQuery 1', 'HTML 4', 'CSS 2', 'Backbone', 'SVN', 'JSP', 'Jira' ], */
 
   }, {
 
     name: 'University of Vigo',
     position: 'Full stack web developer',
     startDate: 'Nov 2013', endDate: 'May 2015',
-    tools: [ 'D3js', 'jQuery 1', 'Ruby-on-Rails', /* 'HTML 5', 'CSS 3', 'Java', 'Weka', 'RapidMiner', 'Python', */ ],
+    /* tools: [ 'D3js', 'jQuery 1', 'Ruby-on-Rails',  'HTML 5', 'CSS 3', 'Java', 'Weka', 'RapidMiner', 'Python' ], */
 
   }],
   education: [{

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cv",
   "author": "Cesar Costas Carrera",
-  "version": "3.0.l9q",
+  "version": "4.0.m0h",
   "private": false,
   "homepage": "http://gatsbimantico.github.io/cv",
   "dependencies": {

diff --git a/pages/candidate.js b/pages/candidate.js
@@ -9,7 +9,6 @@ import ThemeStyle from '../controllers/theme-styles/theme-style.js';
 export default ({ cv, manifest }) => cv ? `
   ${PageIntro(cv)}
   <main>
-    <h3 class="summary__title">Summary</h3>
     ${Text({ class: 'summary', text: cv.basics.summary })}
     ${ExperienceSet(cv)}
     ${EducationSet(cv)}

diff --git a/service-worker.js b/service-worker.js
@@ -1,7 +1,7 @@
 (function (app) {
   'use strict';
 
-  const CACHE_NAME = 'CVjs-3.0.l9q',
+  const CACHE_NAME = 'CVjs-4.0.m0h',
     externalUrlsToCache = [
       'https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700|Work+Sans:300,600&display=swap',
     ],