Upgrade yarn and dependencies (#39)

* Upgrade yarn and dependencies

* working things again

* resume changes

* puppeteer to v21

.eslintrc.cjs

@@ -70,8 +70,17 @@ module.exports = {
     {
       // Define the configuration for `.astro` file.
       files: ['*.astro'],
-      plugins: ['astro'],
-
+      // plugins: ['astro'],
+      parser: 'astro-eslint-parser',
+      // Parse the script in `.astro` as TypeScript by adding the following configuration.
+      // It's the setting you need when using TypeScript.
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        project: 'tsconfig.json',
+        extraFileExtensions: ['.astro'],
+        // The script of Astro components uses ESM.
+        sourceType: 'module',
+      },
       // Enable this plugin
       env: {
         // Enables global variables available in Astro components.
@@ -90,17 +99,6 @@ module.exports = {
           },
         },
       },
-      // Allows Astro components to be parsed.
-      parser: 'astro-eslint-parser',
-      // Parse the script in `.astro` as TypeScript by adding the following configuration.
-      // It's the setting you need when using TypeScript.
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        project: 'tsconfig.json',
-        extraFileExtensions: ['.astro'],
-        // The script of Astro components uses ESM.
-        sourceType: 'module',
-      },
       rules: {
         // Enable recommended rules
         'astro/no-conflict-set-directives': 'error',
@@ -110,5 +108,14 @@ module.exports = {
         // "astro/no-set-html-directive": "error"
       },
     },
+    {
+      // Define the configuration for `<script>` tag in .astro files.
+      // Script in `<script>` is assigned a virtual file name with the `.js` extension.
+      files: ['**/*.astro/*.js', '*.astro/*.js'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        'prettier/prettier': 'off',
+      },
+    },
   ],
 };

.prettierrc.mjs

@@ -0,0 +1,16 @@
+// .prettierrc.mjs
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ['prettier-plugin-astro'],
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
+};

.vscode/settings.json

@@ -21,6 +21,7 @@
   "eslint.validate": [
     "javascript",
     "astro", // Enable .astro
-    "typescript" // Enable .ts
+    "typescript", // Enable .ts
+    "typescriptreact"
   ]
 }

.yarnrc.yml

@@ -1,3 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

cli/export-pdf-resume.mjs

@@ -25,7 +25,7 @@ async function exportResumeAsPdf(task) {
   let page;
 
   await task('Launching Puppeteer', async () => {
-    browser = await puppeteer.launch({ headless: true });
+    browser = await puppeteer.launch({ headless: 'new' });
     page = await browser.newPage();
   });
 

package.json

@@ -19,40 +19,38 @@
     "resume:save-pdf": "node --trace-warnings cli/export-pdf-resume.mjs"
   },
   "dependencies": {
-    "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.10.3",
+    "@astrojs/tailwind": "^5.0.2",
+    "astro": "^3.6.4",
     "astro-icon": "^0.8.1",
     "lodash": "^4.17.21",
-    "remark": "^14.0.3",
-    "remark-html": "^15.0.2",
-    "tailwindcss": "^3.0.24"
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "tailwindcss": "^3.3.5"
   },
   "devDependencies": {
-    "@rollup/plugin-yaml": "^4.1.1",
-    "@types/lodash": "^4.14.196",
-    "@types/node": "^20.4.8",
-    "@typescript-eslint/eslint-plugin": "^6.3.0",
-    "@typescript-eslint/parser": "^6.3.0",
-    "concurrently": "^8.2.0",
-    "eslint": "^8.46.0",
+    "@rollup/plugin-yaml": "^4.1.2",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^20.8.9",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-astro": "^0.28.0",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-astro": "^0.30.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-tailwindcss": "^3.13.0",
-    "prettier": "2.8.8",
-    "prettier-plugin-astro": "0.10.0",
-    "puppeteer": "^14.1.0",
-    "sass": "^1.64.2",
-    "stylelint": "^15.10.2",
+    "prettier": "^3.1.0",
+    "prettier-plugin-astro": "^0.12.2",
+    "puppeteer": "^21.5.2",
+    "sass": "^1.69.5",
+    "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "tasuku": "^2.0.1",
+    "typescript": "^5.2.2",
     "vite-remark-html": "^1.1.1"
   },
-  "resolutions": {
-    "prettier": "2.8.8"
-  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -61,5 +59,5 @@
   "bugs": {
     "url": "https://github.com/vitormv/vmello-website/issues"
   },
-  "packageManager": "yarn@3.6.1"
+  "packageManager": "yarn@4.0.1"
 }

src/components/Hero.astro

@@ -19,7 +19,7 @@ import { Sprite } from 'astro-icon';
       <a class="link" target="_blank" href="https://www.choco.com" rel="noreferrer">
         <span>Choco</span>
       </a>
-      .
+       .
     </p>
 
     <div class="flex justify-center gap-4 pt-10 md:hidden">

src/components/ResumePageA4.astro

@@ -11,7 +11,7 @@ const { resume } = Astro.props;
 <div class={`a4 sheet p-[10mm]`}>
   <article>
     <header class={`row header`}>
-      <aside class="sidebar">
+      <aside>
         <h1>{resume.title}</h1>
         <h2>{resume.subtitle}</h2>
       </aside>
@@ -47,11 +47,7 @@ const { resume } = Astro.props;
             {
               resume.education.map((place) => (
                 <Fragment key={`${place.institution}.${place.studyType}`}>
-                  <h4>
-                    {place.studyType}
-                    {', '}
-                    {place.area}
-                  </h4>
+                  <h4>{`${place.studyType}, ${place.area}`}</h4>
                   <p>{place.institution}</p>
                   <em>{place.years}</em>
                 </Fragment>
@@ -183,10 +179,10 @@ const { resume } = Astro.props;
     .row {
       color: #293241;
       display: flex;
+      gap: 7mm;
 
       .sidebar {
         flex-basis: 55.5mm;
-        margin-right: 7mm;
       }
 
       .content {

src/content/resume.yml

@@ -1,11 +1,14 @@
 slug: resume
 title: Vitor Mello
-subtitle: Senior Full-Stack Engineer
+subtitle: Experienced Full-Stack Engineer
 summary: >
-  I have 12+ years of experience as a Full-Stack Engineer, with strong skills in typescript,
-  React (Redux and Sagas), Node.js (NestJS, Next.js and express) and responsive layouts.
-  I've also done a lot of PHP and Symfony3 in the past, and have some knowledge of
-  DevOps with Docker, AWS, Google Cloud and CI pipelines.
+  I have 15+ years of experience as a Software Engineer, and have vast experience in all aspects of
+  a web applications, having worked in backend, frontend and full-stack roles. Nowadays I tend to
+  focus more on the FE side with strong skills in Typescript, React (Redux and Sagas), Node
+  (NestJS & Next.js) and GraphQL.
+
+  I'm also a strong advocate for readable & maintainable code & tests, and I'm always happy to
+  share knowledge, guide and mentor others to achieve their highest potential.
 
 links:
   - name: vitor@vmello.com
@@ -31,27 +34,25 @@ work:
     location: Berlin, Germany
     duration: 1 year 7 months
     positions:
-      - position: Senior Frontend Engineer
+      - position: Senior Software Engineer (Frontend)
         date: Jan 2022 - Jul 2023
     summary: >
-      Created tool for automatically generating apollo mocks, greatly reducing complexity
-        and making it easier to write tests
-      • Major refactorings in existing unit/integration tests, greatly improving maintainability
-      and readability of codebase
-      • Promoting best practices in FE development
-      • Create tool for easily overriding feature flags during development/testing
+      Delivered high-quality and high-impact customer-facing features
+      • Greatly increased developer statisfaction with auto-generated apollo mocks for tests
+      • Promoting best practices in FE development and testing
+      • Created tool for easily overriding feature flags during development/cypress tests
       • Mentoring two junior FE developers
       • Team captain of the StartUp League volleyball team, earning 1st place
     tags: >
-      react, single-page-application, micro-frontends, graphql, apollo
+      typescript, react, spa, micro-frontends, graphql, testing-library
 
   - company: Coffee Circle
     location: Berlin, Germany
     duration: 2 years 1 month
     positions:
       - position: Head of Engineering
         date: Feb 2021 - Nov 2021
-      - position: Senior Frontend Engineer
+      - position: Senior Software Engineer (Frontend)
         date: Nov 2019 - Jan 2021
     summary: >
       Reimplemented existing blog in Next.js, reducing static export time from 10min to 1min
@@ -62,7 +63,7 @@ work:
       • Driving squad initiatives and technical roadmap planning
       • Mentoring and guiding on best practices and design patterns
     tags: >
-      typescript, react, redux, next.js, nestjs, mysql, google cloud, docker
+      typescript, react, redux, next.js, ssr, nestjs, mysql, gcloud, docker
 
   - company: Flixbus
     location: Berlin, Germany
@@ -74,15 +75,15 @@ work:
       Reimplemented the search results page and search form with React, redux and sagas
       • Greatly increase time to first paint, reducing repaints and rerenders, chunk splitting, suspense
       • Greatly accelerate testing of edge cases by creating tool to create complex mocks easily
-      • Created an unified payment framework in php to speedup integration of 3rd-party payment APIs
+      • Created an internal payment framework in php to speedup integration of 3rd-party payment APIs
     tags: >
       react, redux, jest, css modules, php, symfony, mysql, aws, ab-tests
 
   - company: Foodpanda
     location: Berlin, Germany
     duration: 2 years 7 months
     positions:
-      - position: Senior Full-Stack Engineer
+      - position: Senior Software Engineer (PHP)
         date: Jun 2013 - Dec 2015
     summary: >
       Development of new features for the frontend and backend with focus on scalability and performance
@@ -98,7 +99,7 @@ work:
     positions:
       - position: Lead Software Engineer
         date: Nov 2012 - May 2013
-      - position: Senior Full-Stack Engineer
+      - position: Senior Software Engineer (PHP)
         date: Feb 2012 - Oct 2012
     summary: ~
     tags: ~
@@ -139,20 +140,17 @@ skills:
   - name: React / Redux / SSR
     level: expert
 
-  - name: php / symfony
-    level: expert
-
   - name: node.js
-    level: intermediate
+    level: expert
 
-  - name: html / css / sass
+  - name: html / css / css-in-js
     level: expert
 
-  - name: DevOps
-    level: intermediate
+  - name: php / symfony
+    level: expert
 
-  - name: UX
-    level: intermediate
+  - name: Databases
+    level: experienced
 
 languages:
   - language: English