working things again

.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"
   ]
 }

package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^5.0.2",
-    "astro": "^3.4.0",
+    "astro": "^3.6.4",
     "astro-icon": "^0.8.1",
     "lodash": "^4.17.21",
     "remark": "^15.0.1",
@@ -31,28 +31,26 @@
     "@rollup/plugin-yaml": "^4.1.2",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.9",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.52.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-astro": "^0.29.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": "3.0.3",
-    "prettier-plugin-astro": "0.12.1",
+    "prettier": "^3.1.0",
+    "prettier-plugin-astro": "^0.12.2",
     "puppeteer": "^14.1.0",
     "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",

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/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,7 +34,7 @@ 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
@@ -43,15 +46,15 @@ work:
       • 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
+      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
@@ -74,15 +77,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 +101,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: ~

src/layouts/LayoutPrint.astro

@@ -7,7 +7,7 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/layouts/LayoutWeb.astro

@@ -10,7 +10,7 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -82,21 +82,24 @@ const { title } = Astro.props;
 
   @font-face {
     font-family: Biotif;
-    src: url('/assets/fonts/biotif.woff2') format('woff2'),
+    src:
+      url('/assets/fonts/biotif.woff2') format('woff2'),
       url('/assets/fonts/biotif.woff') format('woff');
   }
 
   @font-face {
     font-family: Bogart;
     font-weight: bold;
-    src: url('/assets/fonts/bogart-semi.woff2') format('woff2'),
+    src:
+      url('/assets/fonts/bogart-semi.woff2') format('woff2'),
       url('/assets/fonts/bogart-semi.woff') format('woff');
   }
 
   @font-face {
     font-family: Bogart;
     font-weight: normal;
-    src: url('/assets/fonts/bogart.woff2') format('woff2'),
+    src:
+      url('/assets/fonts/bogart.woff2') format('woff2'),
       url('/assets/fonts/bogart.woff') format('woff');
   }