✏️ some update / cleanup

Author: fabienjuif

.circleci/config.yml

@@ -0,0 +1,36 @@
+name: Build and Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '21.6.0'
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./public
+          publish_branch: gh-pages
+          cname: unirakun.fr
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'

.github/workflows/deploy.yml

@@ -5,14 +5,15 @@ export default styled.div`
   max-width: 25em;
   margin: 1em;
   border-radius: .5em;
-  background-color: ${({ theme }) => theme.fg};
-  color: ${({ theme }) => theme.bg};
+  background-color: ${({ bg, theme }) => bg || theme.fg};
+  color: ${({ fg, theme }) => fg || theme.bg};
+  border: 1px solid ${({ bg, theme }) => bg || theme.bg};
 
   &:hover {
-    box-shadow: 0 0 20px -5px black;
+    box-shadow: 0 0 20px -5px ${({ bg, theme }) => bg || theme.fg};
   }
 
   & > * {
     margin: 1rem 0;
   }
-`
+`

src/components/Card.jsx

@@ -8,29 +8,32 @@ const Name = styled.span`
 const Firstname = styled.span`
   font-weight: bold;
   margin-right: 0.3em;
+  color: ${({ color, theme }) => color || theme.primary};
 `
 
 const Title = styled.div`
   font-size: 0.8em;
-  color: ${({ theme }) => theme.grey};
+  color: ${({ color, theme }) => color || theme.grey};
 `
 
 const Info = ({
   className,
   firstName,
+  firstNameColor,
   name,
   title,
+  titleColor
 }) => (
     <div className={className}>
       <span>
-        <Firstname>
+        <Firstname color={firstNameColor}>
           {firstName}
         </Firstname>
         <Name>
           {name}
         </Name>
       </span>
-      <Title>
+      <Title color={titleColor}>
         {title}
       </Title>
     </div>

src/components/Info.jsx

@@ -1,4 +1,5 @@
-module.exports = `Fabien est un <b>développeur fullstack</b> qui s'intéresse à tout, expert <b>Javascript.</b>  
-Il est présent sur Youtube, et sur github où ses projets suivent tous une même phylosophie&nbsp;:&nbsp;tendre vers le <b>code le plus propre</b> possible et être <b>KISS.</b>
-Travailler avec Fabien c'est l'assurance d'un projet qui avance.
+module.exports = `Fabien is a <b>fullstack developer</b> interested in everything, <b>Javascript</b> expert.
+He is present on Youtube and Github where all his projects follow the same philosophy&nbsp;:&nbsp;aiming for the <b>cleanest code</b> possible and being <b>KISS.</b>
+He worked at <b>BeReal</b> during their high growth phase, where he designed and built critical microservices serving <b>millions of requests per second</b>, including the users microservice handling <b>9M users/s</b>.
+Working with Fabien means the assurance of a project that moves forward.
 `

src/data/members/fabien/description.js

@@ -0,0 +1,47 @@
+module.exports = {
+  title: 'Senior Software Engineer',
+  for: {
+    name: 'BeReal',
+    color: '#000000',
+  },
+  dates: {
+    from: Date.UTC(2022, 0),
+    to: Date.UTC(2024, 11),
+  },
+  informations: [
+    { text: 'BeReal is a social media app that allows users to share authentic, unfiltered moments with friends, capturing what they\'re doing at the moment.' },
+    { text: 'I started at BeReal as the 4th backend engineer during the company\'s high growth phase. Initially hired as a Fullstack engineer, I quickly transitioned to focus on backend development where the company needed me most.' },
+    { text: 'I redesigned and rewrote the moderation system to make it scalable, then designed and led the development of the friends of friends feed API.' },
+    { text: 'I co-designed and developed the chat API, which was the first Golang API for BeReal, using gRPC, Golang and Spanner.' },
+    { text: 'I designed and created the first microservice at BeReal: the feature flag system. This first gRPC/Golang microservice handles millions of requests per second with a P99 of 10ms and a median of 1ms.' },
+    { text: 'I designed and created the users microservice, now the most important service at BeReal. It serves 9M users per second, with a P99 of 30ms to retrieve 50 users and a P50 of 1ms.' },
+    { text: 'I introduced several key patterns still used at BeReal: auto-batching downstream requests in NodeJS and Golang, elastic Redis cluster using k8s informer pattern and consistent hashing, warmup procedures, and data migration procedures.' },
+    { text: 'I optimized the load balancing efficiency in the k8s cluster and reduced costs by improving the HPA scaling algorithm for faster scale-up and scale-down.' },
+    { text: 'I created a Job framework with UI designed on top of argo-events to provide a simple and efficient job system leveraging BeReal\'s specific needs.' },
+    {
+      text: 'Missions:',
+      children: [
+        { text: 'Redesigned and rewrote the moderation system for scalability' },
+        { text: 'Designed and led development of friends of friends feed API' },
+        { text: 'Co-designed and developed the chat API (first Golang API)' },
+        { text: 'Created the feature flag microservice (first gRPC/Golang microservice)' },
+        { text: 'Designed and created the users microservice (9M users/s)' },
+        { text: 'Introduced auto-batching patterns for NodeJS and Golang' },
+        { text: 'Implemented elastic Redis cluster with k8s informer pattern' },
+        { text: 'Optimized k8s load balancing and HPA scaling algorithm' },
+        { text: 'Created Job framework and UI on top of argo-events' },
+        { text: 'Set up proper Golang monorepo and CI configuration' },
+      ],
+    },
+    {
+      text: 'Technologies used:',
+      children: [
+        { text: 'Golang, NodeJS, TypeScript' },
+        { text: 'gRPC, GraphQL' },
+        { text: 'Google Cloud Spanner, Redis' },
+        { text: 'Kubernetes, Docker' },
+        { text: 'Argo Events' },
+      ],
+    },
+  ],
+}

src/data/members/fabien/experiences/bereal.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Lead Développeur Backend',
+  title: 'Lead Backend Developer',
   client: {
     name: 'DARVA',
     color: '#748694',
@@ -13,27 +13,27 @@ module.exports = {
     to: Date.UTC(2019, 11),
   },
   informations: [
-    { text: 'DARVA est une entreprise experte en solutions web et EDI (Echanges de Données Informatisés) basée à Niort et destiné à tous les acteurs professionnels de l\'assurance.' },
-    { text: 'DARVA souhaitant s\'appuyer de plus en plus sur la masse de données qu\'ils traitent, ils leur est nécessaire d\'intégrer celles-ci dans un datalake accessible à tous les services.' },
-    { text: 'Dans ce but, nous avons agis sur le stockage des données liées aux sinistres au travers d\'un batch NodeJS. Il se doit d\'être modulaire, réutilisable, et très performant puisque plusieurs gigaoctets de données doivent être traitées dans une courte fenêtre de temps.' },
-    { text: 'Grâce aux streams NodeJS les données sont décodées, désérialisées, puis enregistrées en base de données MongoDB au fil de l\'eau.' },
-    { text: 'Afin de maitriser la performance du batch, nous avons mis en place des métriques permettant de suivre la vélocité de nos algorithmes tout au long de nos développements.' },
-    { text: 'Une fois cette mission terminée, nous avons réalisé le POC d\'une interface graphique permettant de mieux comprendre la structure des données concernées.'},
+    { text: 'DARVA is a company expert in web solutions and EDI (Electronic Data Interchange) based in Niort and serving all professional insurance actors.' },
+    { text: 'As DARVA wants to increasingly rely on the mass of data they process, it is necessary for them to integrate it into a datalake accessible to all services.' },
+    { text: 'To this end, we worked on storing claims-related data through a NodeJS batch. It must be modular, reusable, and very performant since several gigabytes of data must be processed in a short time window.' },
+    { text: 'Thanks to NodeJS streams, data is decoded, deserialized, and then stored in MongoDB database on the fly.' },
+    { text: 'In order to control the batch performance, we implemented metrics to track the velocity of our algorithms throughout our development.' },
+    { text: 'Once this mission was completed, we created a POC of a graphical interface allowing better understanding of the data structure.'},
     {
-      text: 'Missions :',
+      text: 'Missions:',
       children: [
-        { text: 'Développement d\'un Batch d\'intégration de données' },
-        { text: 'Algorithme et métriques de performance' },
-        { text: 'Passage de connaissances aux équipes internes' },
-        { text: 'Proposition d\'un POC d\'une interface graphique de naviguation dans la structure des données' },
+        { text: 'Development of a data integration batch' },
+        { text: 'Algorithm and performance metrics' },
+        { text: 'Knowledge transfer to internal teams' },
+        { text: 'Proposal of a POC for a graphical interface to navigate through data structure' },
       ],
     },
     {
-      text: 'Technologies utilisées : ',
+      text: 'Technologies used:',
       children: [
         { text: 'Javascript, NodeJS, MongoDB' },
-        { text: 'ReactJS, D3 et Layout homemade' },
-        { text: 'Jest et tests de performances sur-mesure' },
+        { text: 'ReactJS, D3 and homemade Layout' },
+        { text: 'Jest and custom performance tests' },
         { text: 'Docker' },
         { text: 'Github' },
       ],

src/data/members/fabien/experiences/chargeProjet.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: 'Expert et formateur NodeJS',
+  title: 'NodeJS Expert and Trainer',
   client: {
     name: 'DARVA',
     color: '#748694',
@@ -13,28 +13,28 @@ module.exports = {
     to: Date.UTC(2018, 11),
   },
   informations: [
-    { text: 'DARVA est une entreprise experte en solutions web et EDI (Echanges de Données Informatisés) basée à Niort et destiné à tous les acteurs professionnels de l\'assurance' },
-    { text: 'J\'interviens dans le service BI pour les aider à réaliser des scripts NodeJS de préparation de données dans leur datalake MongoDB.' },
-    { text: 'Cette prestation était réalisée en partie à distance et j\'intervenais quelques jours réparties dans l\'année.' },
+    { text: 'DARVA is a company expert in web solutions and EDI (Electronic Data Interchange) based in Niort and serving all professional insurance actors' },
+    { text: 'I worked with the BI service to help them create NodeJS scripts for data preparation in their MongoDB datalake.' },
+    { text: 'This service was provided partly remotely and I worked a few days spread throughout the year.' },
     {
-      text: 'Missions : ',
+      text: 'Missions:',
       children: [
-        { text: 'Mise en place de l\'architecture "monorepo" du projet de gestion des vues du datalake' },
-        { text: 'Conseils et relectures du code produit par l\'équipe BI' },
-        { text: 'Formation NodeJS de l\'équipe BI' },
-        { text: 'Développement d\'outils d\'aide aux développements des scripts de préparation de données' },
-        { text: 'Mise en place des outils de qualités : documentation générée (JSDoc), tests unitaires (Jest), tests d\'intégration (Jest + Docker)' },
+        { text: 'Implementation of the "monorepo" architecture for the datalake views management project' },
+        { text: 'Advice and code reviews of code produced by the BI team' },
+        { text: 'NodeJS training for the BI team' },
+        { text: 'Development of tools to help develop data preparation scripts' },
+        { text: 'Implementation of quality tools: generated documentation (JSDoc), unit tests (Jest), integration tests (Jest + Docker)' },
       ],
     },
     {
-      text: 'Technologies utilisées :',
+      text: 'Technologies used:',
       children: [
         { text: 'Github / Jenkins' },
         { text: 'NodeJS' },
         { text: 'MongoDB' },
         { text: 'Jest' },
         { text: 'Docker' },
-        { text: 'Divers bibliothèques NodeJS' },
+        { text: 'Various NodeJS libraries' },
       ],
     },
   ],