Enhance about us (#461)

* Upgrade Tailwind and refactor opening section * Update remaining visible sections * Use docusaurus logo and apply minor fix * Add helper function for adding utm params and update css * Cleanup * Add description and nav icon dimension * Convert image to webp * Fix error * Set default theme by user preference * Update profile section * Fix mobile timeline and minor updates * Update header section and serve background images locally * Fix typo * Update HTML tags and class names, improve a11y * Finetune timeline css and tag * Remove text-softer class * Update social icons and avatars * Remove opacity for better contrast
game-ci · Apr 7, 2024 · 612d5ff · 612d5ff
1 parent bde2b60
commit 612d5ff
Show file tree

Hide file tree

Showing 26 changed files with 202 additions and 190 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -81,9 +81,8 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       colorMode: {
-        defaultMode: 'dark',
         disableSwitch: false,
-        respectPrefersColorScheme: false,
+        respectPrefersColorScheme: true,
       },
       algolia: {
         // The application ID provided by Algolia
@@ -280,7 +279,8 @@ const config = {
         copyright: `<p>
           Made with ❤ by open source contributors using
           <a href="https://docusaurus.io?utm_source=game-ci" target="_blank" rel="noreferrer noopener" style="text-decoration: none;">
-            <svg title=""Docusaurus width="1em" viewBox="0 0 256 217.631"><g transform="matrix(1.312821 0 0 1.312821 -3.938461 -22.614974)" fill-rule="evenodd"><path d="M99 52h84v34H99z" fill="#fff"/><g fill="#3ecc5f"><path d="M23 163c-7.398 0-13.843-4.027-17.303-10C3.992 155.944 3 159.353 3 163c0 11.046 8.954 20 20 20h20v-20H23z"/><path d="M112.98 57.376L183 53V43c0-11.046-8.955-20-20-20H73l-2.5-4.33a2.89 2.89 0 0 0-5 0L63 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L53 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L43 23c-.022 0-.043.003-.065.003l-4.142-4.14a2.89 2.89 0 0 0-4.829 1.294l-1.368 5.104-5.193-1.392a2.89 2.89 0 0 0-3.535 3.536l1.4 5.193-5.103 1.367a2.89 2.89 0 0 0-1.295 4.83L23 42.937c0 .02-.002.042-.002.064l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 53l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 63l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 73l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 83l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 93l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 103l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 113l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 123l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 133l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 143l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 153l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 163c0 11.046 8.954 20 20 20h120c11.045 0 20-8.954 20-20V83l-70.02-4.376C107.37 78.273 103 73.62 103 68s4.37-10.273 9.98-10.624"/><path d="M143 183h30v-40h-30z"/></g><path d="M193 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 153 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M153 123h30v-20h-30z" fill="#3ecc5f"/><use xlink:href="#A" fill="#44d860"/><path d="M63 55.5a2.5 2.5 0 0 1-2.5-2.5 7.51 7.51 0 0 0-7.5-7.5 7.51 7.51 0 0 0-7.5 7.5 2.5 2.5 0 1 1-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 0 1-2.5 2.5"/><path d="M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z" fill="#ffff50"/><use xlink:href="#B"/><use xlink:href="#B" y="20"/><use xlink:href="#B" y="40"/><use xlink:href="#B" y="-9.814"/><use xlink:href="#B" y="10"/><use xlink:href="#B" y="30"/><path d="M183 61.6c-.012 0-.022-.006-.034-.005-3.1.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.9-.068-2.97-2.202-4.113-4.46-1.314-2.593-2.814-5.535-5.963-5.425-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.12 3.994-1.927-.07-2.95-1.805-4.136-3.813-1.32-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.35-1.973-.07-2.992-1.5-4.17-3.177-1.324-1.873-2.816-3.993-5.895-3.9-2.928.1-4.4 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.23 2.724a1 1 0 1 0-.072 2c3.017.1 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.83 1.115 4.195 3.045 1.297 1.834 2.77 3.914 5.73 4.02 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.77 1.35 4.145 3.68 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.95-5.035 1.14-2.088 2.214-4.06 4.12-4.126 1.793-.042 2.728 1.595 4.1 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.17.003c3.064 0 4.518-3.075 5.805-5.794 1.14-2.4 2.217-4.68 4.067-4.773v-2z"/><path d="M83 183h40v-40H83z" fill="#3ecc5f"/><path d="M143 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 103 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M83 123h40v-20H83z" fill="#3ecc5f"/><use xlink:href="#A" x="-60" fill="#44d860"/><path d="M143 41.75a2.92 2.92 0 0 1-.5-.05 2.52 2.52 0 0 1-.47-.14c-.15-.06-.3-.14-.43-.23l-.38-.3c-.1-.12-.22-.24-.3-.38a2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5s.02-.33.05-.5.08-.3.14-.47a2.63 2.63 0 0 1 .231-.43l.3-.38c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.65-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a3.68 3.68 0 0 1 .31.38 2.55 2.55 0 0 1 .23.43c.06.16.1.3.14.47a2.81 2.81 0 0 1 .05.49 2.55 2.55 0 0 1-.73 1.77c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05M163 40.5a2.55 2.55 0 0 1-1.77-.73 3.68 3.68 0 0 1-.31-.38 2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5a2.55 2.55 0 0 1 .73-1.77c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.66-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a2.53 2.53 0 0 1 .73 1.77 2.81 2.81 0 0 1-.05.49c-.03.16-.08.32-.14.47a3.55 3.55 0 0 1-.23.43 3.68 3.68 0 0 1-.31.38c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05"/></g><defs><path id="A" d="M193 115.5a2.5 2.5 0 1 0 0-5c-.1 0-.214.02-.32.032l-.058-.225a2.5 2.5 0 0 0-.963-4.807 2.47 2.47 0 0 0-1.508.518l-.168-.168a2.47 2.47 0 0 0 .506-1.494 2.5 2.5 0 0 0-4.8-.979c-.857-.24-1.756-.377-2.7-.377-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.7-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.1.168-.168a2.48 2.48 0 0 0 1.508.518 2.5 2.5 0 0 0 .963-4.807l.058-.225c.105.013.2.032.32.032"/><path id="B" d="M168.02 124h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2"/></defs></svg>
+            <svg title="Docusaurus" width="1em" viewBox="0 0 256 217.631"><g transform="matrix(1.312821 0 0 1.312821 -3.938461 -22.614974)" fill-rule="evenodd"><path d="M99 52h84v34H99z" fill="#fff"/><g fill="#3ecc5f"><path d="M23 163c-7.398 0-13.843-4.027-17.303-10C3.992 155.944 3 159.353 3 163c0 11.046 8.954 20 20 20h20v-20H23z"/><path d="M112.98 57.376L183 53V43c0-11.046-8.955-20-20-20H73l-2.5-4.33a2.89 2.89 0 0 0-5 0L63 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L53 23l-2.5-4.33a2.89 2.89 0 0 0-5 0L43 23c-.022 0-.043.003-.065.003l-4.142-4.14a2.89 2.89 0 0 0-4.829 1.294l-1.368 5.104-5.193-1.392a2.89 2.89 0 0 0-3.535 3.536l1.4 5.193-5.103 1.367a2.89 2.89 0 0 0-1.295 4.83L23 42.937c0 .02-.002.042-.002.064l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 53l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 63l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 73l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 83l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 93l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 103l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 113l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 123l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 133l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 143l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 153l-4.33 2.5a2.89 2.89 0 0 0 0 5L23 163c0 11.046 8.954 20 20 20h120c11.045 0 20-8.954 20-20V83l-70.02-4.376C107.37 78.273 103 73.62 103 68s4.37-10.273 9.98-10.624"/><path d="M143 183h30v-40h-30z"/></g><path d="M193 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 153 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M153 123h30v-20h-30z" fill="#3ecc5f"/><use xlink:href="#A" fill="#44d860"/><path d="M63 55.5a2.5 2.5 0 0 1-2.5-2.5 7.51 7.51 0 0 0-7.5-7.5 7.51 7.51 0 0 0-7.5 7.5 2.5 2.5 0 1 1-5 0c0-6.893 5.607-12.5 12.5-12.5S65.5 46.107 65.5 53a2.5 2.5 0 0 1-2.5 2.5"/><path d="M103 183h60c11.046 0 20-8.954 20-20V93h-60c-11.046 0-20 8.954-20 20v70z" fill="#ffff50"/><use xlink:href="#B"/><use xlink:href="#B" y="20"/><use xlink:href="#B" y="40"/><use xlink:href="#B" y="-9.814"/><use xlink:href="#B" y="10"/><use xlink:href="#B" y="30"/><path d="M183 61.6c-.012 0-.022-.006-.034-.005-3.1.105-4.552 3.196-5.842 5.923-1.346 2.85-2.387 4.703-4.093 4.647-1.9-.068-2.97-2.202-4.113-4.46-1.314-2.593-2.814-5.535-5.963-5.425-3.046.104-4.513 2.794-5.807 5.167-1.377 2.528-2.314 4.065-4.12 3.994-1.927-.07-2.95-1.805-4.136-3.813-1.32-2.236-2.848-4.75-5.936-4.664-2.994.103-4.465 2.385-5.763 4.4-1.373 2.13-2.335 3.428-4.165 3.35-1.973-.07-2.992-1.5-4.17-3.177-1.324-1.873-2.816-3.993-5.895-3.9-2.928.1-4.4 1.97-5.696 3.618-1.232 1.564-2.194 2.802-4.23 2.724a1 1 0 1 0-.072 2c3.017.1 4.545-1.8 5.872-3.487 1.177-1.496 2.193-2.787 4.193-2.855 1.926-.082 2.83 1.115 4.195 3.045 1.297 1.834 2.77 3.914 5.73 4.02 3.103.104 4.596-2.215 5.918-4.267 1.182-1.834 2.202-3.417 4.15-3.484 1.793-.067 2.77 1.35 4.145 3.68 1.297 2.197 2.766 4.686 5.787 4.796 3.125.108 4.634-2.62 5.95-5.035 1.14-2.088 2.214-4.06 4.12-4.126 1.793-.042 2.728 1.595 4.1 4.33 1.292 2.553 2.757 5.445 5.825 5.556l.17.003c3.064 0 4.518-3.075 5.805-5.794 1.14-2.4 2.217-4.68 4.067-4.773v-2z"/><path d="M83 183h40v-40H83z" fill="#3ecc5f"/><path d="M143 158c-.22 0-.428.037-.64.064l-.116-.45c1.806-.754 3.075-2.534 3.075-4.613a5 5 0 0 0-5-5 4.96 4.96 0 0 0-3.016 1.036l-.335-.336c.627-.836 1-1.862 1-2.987a5 5 0 0 0-9.599-1.959l-.445-.115c.027-.2.064-.42.064-.64a5 5 0 1 0-10 0c0 .22.037.428.064.64l-.445.115a5 5 0 0 0-9.599 1.959c0 1.125.384 2.15 1 2.987A19.93 19.93 0 0 0 103 163c0 11.046 8.954 20 20 20 9.34 0 17.16-6.4 19.36-15.064.2.027.42.064.64.064a5 5 0 1 0 0-10" fill="#44d860"/><path d="M83 123h40v-20H83z" fill="#3ecc5f"/><use xlink:href="#A" x="-60" fill="#44d860"/><path d="M143 41.75a2.92 2.92 0 0 1-.5-.05 2.52 2.52 0 0 1-.47-.14c-.15-.06-.3-.14-.43-.23l-.38-.3c-.1-.12-.22-.24-.3-.38a2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5s.02-.33.05-.5.08-.3.14-.47a2.63 2.63 0 0 1 .231-.43l.3-.38c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.65-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a3.68 3.68 0 0 1 .31.38 2.55 2.55 0 0 1 .23.43c.06.16.1.3.14.47a2.81 2.81 0 0 1 .05.49 2.55 2.55 0 0 1-.73 1.77c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05M163 40.5a2.55 2.55 0 0 1-1.77-.73 3.68 3.68 0 0 1-.31-.38 2.63 2.63 0 0 1-.231-.43 2.62 2.62 0 0 1-.139-.47c-.03-.16-.05-.33-.05-.5a2.55 2.55 0 0 1 .73-1.77c.12-.1.25-.22.38-.3a1.99 1.99 0 0 1 .43-.23 2.52 2.52 0 0 1 .47-.14c.32-.07.66-.07.98 0 .16.03.32.08.47.14s.3.14.43.23l.38.3a2.53 2.53 0 0 1 .73 1.77 2.81 2.81 0 0 1-.05.49c-.03.16-.08.32-.14.47a3.55 3.55 0 0 1-.23.43 3.68 3.68 0 0 1-.31.38c-.12.1-.25.22-.38.3a1.99 1.99 0 0 1-.43.23c-.15.06-.3.1-.47.14a2.07 2.07 0 0 1-.5.05"/></g><defs><path id="A" d="M193 115.5a2.5 2.5 0 1 0 0-5c-.1 0-.214.02-.32.032l-.058-.225a2.5 2.5 0 0 0-.963-4.807 2.47 2.47 0 0 0-1.508.518l-.168-.168a2.47 2.47 0 0 0 .506-1.494 2.5 2.5 0 0 0-4.8-.979c-.857-.24-1.756-.377-2.7-.377-5.522 0-10 4.478-10 10s4.478 10 10 10c.934 0 1.833-.138 2.7-.377a2.5 2.5 0 0 0 4.8-.979c0-.563-.192-1.077-.506-1.494.057-.055.113-.1.168-.168a2.48 2.48 0 0 0 1.508.518 2.5 2.5 0 0 0 .963-4.807l.058-.225c.105.013.2.032.32.032"/><path id="B" d="M168.02 124h-50.04a1 1 0 1 1 0-2h50.04a1 1 0 1 1 0 2"/></defs></svg>
+
           </a>
           and hosted by
           <a href="https://firebase.com?utm_source=game-ci" target="_blank" rel="noreferrer noopener">

diff --git a/src/components/pages/about-us/section/header-section/header-section.tsx b/src/components/pages/about-us/section/header-section/header-section.tsx
@@ -1,33 +1,28 @@
 import React from 'react';
+import desktopBackground from './pictures/background-desktop.webp';
+import tabletBackground from './pictures/background-tablet.webp';
+import mobileBackground from './pictures/background-mobile.webp';
 
 const HeaderSection = (): React.JSX.Element => {
   return (
-    <div className="2xl:container 2xl:mx-auto py-4 sm:py-6 lg:px-20 md:pt-8 md:px-6 px-4">
+    <section className="2xl:container 2xl:mx-auto py-4 sm:py-6 lg:px-20 md:pt-8 md:px-6 px-4">
       <div className="relative">
         <div className="absolute top-0 left-0 w-full h-full">
           <div className="w-full h-full flex flex-col justify-center items-center bg-indigo-700 bg-opacity-20 text-white sm:px-12 px-6 rounded-md">
-            <h2 className="font-bold lg:text-4xl text-3xl lg:leading-9 leading-7">About us</h2>
+            <h1 className="font-bold lg:text-4xl text-3xl lg:leading-9 leading-7">About us</h1>
           </div>
         </div>
         <div>
-          <img
-            className="rounded-md lg:block hidden w-full"
-            src="https://i.ibb.co/17q26WL/qw.png"
-            alt="A person Coding"
-          />
+          <img className="rounded-md lg:block hidden w-full" src={desktopBackground} alt="" />
           <img
             className="rounded-md lg:hidden sm:block hidden w-full"
-            src="https://i.ibb.co/pZX8cKM/Rectangle-122-1.png"
-            alt="A person Coding"
-          />
-          <img
-            className="rounded-md sm:hidden block w-full"
-            src="https://i.ibb.co/b3YLqxC/Rectangle-122.png"
-            alt="A person Coding"
+            src={tabletBackground}
+            alt=""
           />
+          <img className="rounded-md sm:hidden block w-full" src={mobileBackground} alt="" />
         </div>
       </div>
-    </div>
+    </section>
   );
 };
 

diff --git a/src/components/pages/about-us/section/header-section/pictures/background-desktop.webp b/src/components/pages/about-us/section/header-section/pictures/background-desktop.webp
diff --git a/src/components/pages/about-us/section/header-section/pictures/background-mobile.webp b/src/components/pages/about-us/section/header-section/pictures/background-mobile.webp
diff --git a/src/components/pages/about-us/section/header-section/pictures/background-tablet.webp b/src/components/pages/about-us/section/header-section/pictures/background-tablet.webp
diff --git a/src/components/pages/about-us/section/our-story-section/our-story.tsx b/src/components/pages/about-us/section/our-story-section/our-story.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import Timeline from '@site/src/components/pages/about-us/section/our-story-section/timeline/timeline';
 import TimelineItem from '@site/src/components/pages/about-us/section/our-story-section/timeline/timeline-item';
 import FadeIntoView from '@site/src/components/molecules/animations/fade-into-view';
+import { david, gabLeRoux, webber, fisher } from '../the-team-section/data/team-info';
 
 const OurStory = () => {
   return (
-    <div className="2xl:container 2xl:mx-auto lg:py-16 lg:px-20 md:py-12 md:px-6 px-4">
-      <div className="flex lg:flex-row flex-col items-start lg:space-x-8">
-        <div className="w-full lg:w-7/12 p-5 bg-theme-highlight rounded-md">
+    <section className="2xl:container 2xl:mx-auto lg:py-8 lg:px-20 md:px-6 px-4">
+      <div className="flex lg:flex-row flex-col items-start lg:gap-8">
+        <div className="w-full lg:w-7/12 p-5 bg-background-highlight-light dark:bg-background-highlight-dark rounded-md">
           <FadeIntoView>
-            <h2 className="font-bold lg:text-4xl text-3xl lg:leading-9 leading-7 ">Our Story</h2>
+            <h2 className="font-bold lg:text-4xl text-3xl lg:leading-9 leading-7">Our Story</h2>
           </FadeIntoView>
 
           <FadeIntoView>
@@ -20,23 +21,19 @@ const OurStory = () => {
             </p>
           </FadeIntoView>
         </div>
-        <div className="lg:pt-16 xl:pt-0 w-full lg:w-5/12 lg:mt-0 sm:mt-10 mt-8">
+        <div className="xl:pt-0 w-full lg:w-5/12 lg:mt-0 sm:mt-10 mt-8">
           <Timeline>
             <TimelineItem
               title="Founded (2019)"
               subTitle={
                 <>
                   GameCI was founded by{' '}
-                  <a href="https://takken.io?utm_source=game-ci" target="_blank" rel="noreferrer">
-                    Webber
+                  <a href={webber.social.website} target="_blank" rel="noreferrer">
+                    {webber.nick}
                   </a>{' '}
                   and{' '}
-                  <a
-                    href="https://gableroux.com?utm_source=game-ci"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    GabLeRoux
+                  <a href={gabLeRoux.social.website} target="_blank" rel="noreferrer">
+                    {gabLeRoux.nick}
                   </a>
                   .
                 </>
@@ -48,20 +45,12 @@ const OurStory = () => {
               title="Core Maintainers (2020)"
               subTitle={
                 <>
-                  <a
-                    href="https://davidmfinol.website?utm_source=game-ci"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    David
+                  <a href={david.social.website} target="_blank" rel="noreferrer">
+                    {david.nick}
                   </a>{' '}
                   and{' '}
-                  <a
-                    href="@site/src/components/pages/about-us/section/our-story-section/our-story"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Fisher
+                  <a href={fisher.social.github} target="_blank" rel="noreferrer">
+                    {fisher.nick}
                   </a>{' '}
                   joined as Core Maintainers.
                 </>
@@ -93,7 +82,7 @@ const OurStory = () => {
           </Timeline>
         </div>
       </div>
-    </div>
+    </section>
   );
 };
 

diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-bullet.tsx
@@ -6,37 +6,42 @@ interface Props {
 }
 
 const TimelineItemBullet = ({ right }: Props): React.JSX.Element => {
-  const positions = !right
+  const positions = right
     ? [
-        { cx: 54, cy: 6, r: 5.5 },
-        { cx: 42, cy: 6, r: 1.5 },
-        { cx: 34, cy: 6, r: 1.5, opacity: 0.7 },
-        { cx: 26, cy: 6, r: 1.5, opacity: 0.5 },
-        { cx: 18, cy: 6, r: 1.5, opacity: 0.3 },
-        { cx: 10, cy: 6, r: 1.5, opacity: 0.2 },
-        { cx: 2, cy: 6, r: 1.5, opacity: 0.1 },
-      ]
-    : [
         { cx: 6, cy: 6, r: 5.5, transform: 'rotate(-180 6 6)' },
         { cx: 18, cy: 6, r: 1.5, transform: 'rotate(-180 18 6)' },
         { cx: 26, cy: 6, r: 1.5, transform: 'rotate(-180 26 6)', opacity: 0.7 },
         { cx: 34, cy: 6, r: 1.5, transform: 'rotate(-180 34 6)', opacity: 0.5 },
         { cx: 42, cy: 6, r: 1.5, transform: 'rotate(-180 42 6)', opacity: 0.3 },
         { cx: 50, cy: 6, r: 1.5, transform: 'rotate(-180 50 6)', opacity: 0.2 },
         { cx: 58, cy: 6, r: 1.5, transform: 'rotate(-180 58 6)', opacity: 0.1 },
+      ]
+    : [
+        { cx: 54, cy: 6, r: 5.5 },
+        { cx: 42, cy: 6, r: 1.5 },
+        { cx: 34, cy: 6, r: 1.5, opacity: 0.7 },
+        { cx: 26, cy: 6, r: 1.5, opacity: 0.5 },
+        { cx: 18, cy: 6, r: 1.5, opacity: 0.3 },
+        { cx: 10, cy: 6, r: 1.5, opacity: 0.2 },
+        { cx: 2, cy: 6, r: 1.5, opacity: 0.1 },
       ];
 
   return (
-    <div className={cx('-mt-1', { '-mr-2 ml-1': !right, '-ml-2 mr-1': right })}>
+    <div className={cx({ '-me-[0.45rem] ms-1': !right, '-ms-[0.45rem] me-1': right })}>
       <svg
         width="60"
         height="12"
         viewBox="0 0 60 12"
         fill="white"
         xmlns="http://www.w3.org/2000/svg"
       >
-        {positions.map((props) => (
-          <circle stroke="var(--brand-primary)" {...props} />
+        {positions.map((props, index) => (
+          <circle
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            className="stroke-primary-light dark:stroke-primary-dark"
+            {...props}
+          />
         ))}
       </svg>
     </div>

diff --git a/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx b/src/components/pages/about-us/section/our-story-section/timeline/timeline-item-text.tsx
@@ -7,9 +7,9 @@ interface Props {
 
 const TimelineItemText = ({ title, subTitle }: Props): React.JSX.Element => {
   return (
-    <div className="w-auto">
-      <h2 className="-mt-2 font-semibold text-xl leading-5 ">{title}</h2>
-      <p className="font-normal text-base leading-6 mt-2 text-softer">{subTitle}</p>
+    <div className="w-full">
+      <h3 className="font-semibold text-xl leading-5">{title}</h3>
+      <p className="font-normal text-base leading-6 mt-2">{subTitle}</p>
     </div>
   );
 };