Develop

netlify.toml

@@ -1,6 +1,6 @@
 [build]
-  publish = "out"
-  command = "npm run build-prod"
+publish = "out"
+command = "npm run build-prod"
 
 [build.environment]
-  NETLIFY_NEXT_PLUGIN_SKIP = "true"
+NETLIFY_NEXT_PLUGIN_SKIP = "true"

next.config.js

@@ -11,6 +11,7 @@ module.exports = withBundleAnalyzer({
   poweredByHeader: false,
   trailingSlash: true,
   basePath: '',
+  serverComponentsExternalPackages: ['@react-pdf/renderer'],
   // The starter code load resources from `public` folder with `router.basePath` in React components.
   // So, the source code is "basePath-ready".
   // You can remove `basePath` if you don't need it.

package.json

@@ -23,13 +23,14 @@
   "dependencies": {
     "@ant-design/icons": "4.0.0",
     "@next/third-parties": "^14.1.4",
+    "@react-pdf/renderer": "^4.1.6",
     "antd": "5.11.5",
     "apexcharts": "3.28.1",
     "fetch-jsonp": "1.2.3",
     "flag-icons": "^7.1.0",
     "i18next": "^23.10.0",
     "moment": "^2.30.1",
-    "next": "^13.3.0",
+    "next": "^13.4.7",
     "next-i18next": "^15.2.0",
     "next-language-detector": "^1.1.0",
     "next-seo": "^5.15.0",

public/locales/ar/common.json

@@ -62,7 +62,8 @@
   "Fundação Pestalozzi": "مؤسسة بيستالوزي",
   "Colégio Soberano": "كلية سوبرانو",
   "Java Multithreading Concurrency Performance Optimization": "جافا البرمجة المتعددة الخيوط، التزامن وتحسين الأداء",
-  "Learn Rust By Building Real Applications": "تعلم Rust من خلال بناء تطبيقات حقيقية","Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): أصبحت أحد القادة الفنيين الرئيسيين المسؤولين عن صيانة وتعزيز وظائف إطار العمل الداخلي لاحتفاظ البيانات المشتركة، مما خلق قاعدة مركزية لمشاريع مختلفة.\n\nCoDaF Wells and Rigs: أجريت مقابلات مع المتخصصين ونمذجة قاعدة بيانات للاستخدام العام للحلول النفطية والغازية، مما أسفر عن حوالي 100 كيان.\n\nAtria: قادت تقنيًا ونفذت مشروعًا تجريبيًا لدمج بيانات معالجة تعلم الآلة في الوقت الفعلي المتعلقة بحالة تكامل عدة هوائيات.\n\nLicense Manager: قمت بتصميم وتحديد نطاق وتنفيذ نظام إدارة التراخيص، وهو مشروع للتحكم ومراقبة وصول العملاء إلى المنتجات (الإضافات) وفقًا للتراخيص المتعاقد عليها، مما يمنع سوء استخدام الحلول في البيئات المدمجة. أعددت عرضًا تقديميًا يشرح الوظائف على مستوى عالٍ للمديرين المسؤولين.\n\nRig State: أجريت تحليلًا عكسيًا لتطبيق بدون توثيق كافٍ لتوفير وضوح أكبر للمديرين حول قواعد الأعمال التي تم تنفيذها، مما يسمح بإجراء التعديلات اللازمة.",
+  "Learn Rust By Building Real Applications": "تعلم Rust من خلال بناء تطبيقات حقيقية",
+  "Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): أصبحت أحد القادة الفنيين الرئيسيين المسؤولين عن صيانة وتعزيز وظائف إطار العمل الداخلي لاحتفاظ البيانات المشتركة، مما خلق قاعدة مركزية لمشاريع مختلفة.\n\nCoDaF Wells and Rigs: أجريت مقابلات مع المتخصصين ونمذجة قاعدة بيانات للاستخدام العام للحلول النفطية والغازية، مما أسفر عن حوالي 100 كيان.\n\nAtria: قادت تقنيًا ونفذت مشروعًا تجريبيًا لدمج بيانات معالجة تعلم الآلة في الوقت الفعلي المتعلقة بحالة تكامل عدة هوائيات.\n\nLicense Manager: قمت بتصميم وتحديد نطاق وتنفيذ نظام إدارة التراخيص، وهو مشروع للتحكم ومراقبة وصول العملاء إلى المنتجات (الإضافات) وفقًا للتراخيص المتعاقد عليها، مما يمنع سوء استخدام الحلول في البيئات المدمجة. أعددت عرضًا تقديميًا يشرح الوظائف على مستوى عالٍ للمديرين المسؤولين.\n\nRig State: أجريت تحليلًا عكسيًا لتطبيق بدون توثيق كافٍ لتوفير وضوح أكبر للمديرين حول قواعد الأعمال التي تم تنفيذها، مما يسمح بإجراء التعديلات اللازمة.",
   "Sequence Builder + Cost Tracker: I was among the main contributors to the development of Sequence Builder, a system that generates simulations resulting in a sequence of operations with time estimates based on historical data for planning oil well activities. In parallel, there was the development of Cost Tracker, which works coupled with Sequence Builder by adding cost estimates for each operation during the simulation. Additionally, it allows the updating and monitoring of these operations based on real data, enabling comparisons between the planned and the executed.\n\nDynamic Risk Advisor (DRA): I temporarily participated in the development of the DRA project, a tool based on the bowtie methodology, allowing the user to manage and monitor barriers and alerts in real-time, aiming for optimized operational risk management.": "Sequence Builder + Cost Tracker: كنت من بين المساهمين الرئيسيين في تطوير Sequence Builder، وهو نظام ينشئ محاكاة تؤدي إلى تسلسل العمليات مع تقديرات زمنية بناءً على البيانات التاريخية لتخطيط أنشطة آبار النفط. في الوقت نفسه، تم تطوير Cost Tracker، الذي يعمل بالتوازي مع Sequence Builder من خلال إضافة تقديرات التكاليف لكل عملية خلال المحاكاة. بالإضافة إلى ذلك، فإنه يسمح بتحديث ومراقبة هذه العمليات استنادًا إلى البيانات الفعلية، مما يتيح المقارنات بين المخطط والتنفيذ.\n\nDynamic Risk Advisor (DRA): شاركت مؤقتًا في تطوير مشروع DRA، وهي أداة تعتمد على منهجية البوتاي، مما يسمح للمستخدم بإدارة ومراقبة الحواجز والتنبيهات في الوقت الفعلي، بهدف تحسين إدارة المخاطر التشغيلية.",
   "Campaign Planner: Contributed to the development of new features, maintenance, and compatibility with legacy browsers in an oil and gas operations campaign management application.\n\nPDF Extractor: Responsible for implementing a script to convert various PDF files into a specific CSV format using OCR, assisting the research team in obtaining structured data for machine learning models.": "Campaign Planner: ساهمت في تطوير ميزات جديدة وصيانة وتوافق مع المتصفحات القديمة في تطبيق إدارة حملات عمليات النفط والغاز.\n\nPDF Extractor: مسؤول عن تنفيذ سكربت لتحويل ملفات PDF المختلفة إلى تنسيق CSV محدد باستخدام OCR، مما يساعد فريق البحث في الحصول على بيانات منظمة لنماذج التعلم الآلي."
 }

public/locales/es/common.json

@@ -62,7 +62,8 @@
   "Fundação Pestalozzi": "Fundación Pestalozzi",
   "Colégio Soberano": "Colegio Soberano",
   "Java Multithreading Concurrency Performance Optimization": "Java Multithreading, Concurrencia y Optimización del Rendimiento",
-  "Learn Rust By Building Real Applications": "Aprende Rust Construyendo Aplicaciones Reales","Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): Me convertí en uno de los principales líderes técnicos responsables de mantener y mejorar las funcionalidades de un marco interno para la persistencia de datos comunes, creando una base centralizada para diferentes proyectos.\n\nCoDaF Wells and Rigs: Entrevisté a especialistas y modelé una base de datos de uso general para soluciones de petróleo y gas, resultando en aproximadamente 100 entidades.\n\nAtria: Lideré técnicamente e implementé un proyecto piloto para integrar el procesamiento de datos en tiempo real de Machine Learning relacionados con el estado de integridad de múltiples antenas.\n\nLicense Manager: Diseñé, alcancé el alcance y implementé el License Manager, un proyecto para controlar y monitorear el acceso de los clientes a productos (plugins) de acuerdo con la licencia contratada, evitando el uso indebido de las soluciones en entornos embebidos. Preparé una presentación explicando la funcionalidad de alto nivel para los responsables.\n\nRig State: Realicé ingeniería inversa en una aplicación sin documentación adecuada para proporcionar mayor claridad a los gestores sobre las reglas de negocio implementadas, permitiendo que las modificaciones necesarias procedieran.",
+  "Learn Rust By Building Real Applications": "Aprende Rust Construyendo Aplicaciones Reales",
+  "Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): Me convertí en uno de los principales líderes técnicos responsables de mantener y mejorar las funcionalidades de un marco interno para la persistencia de datos comunes, creando una base centralizada para diferentes proyectos.\n\nCoDaF Wells and Rigs: Entrevisté a especialistas y modelé una base de datos de uso general para soluciones de petróleo y gas, resultando en aproximadamente 100 entidades.\n\nAtria: Lideré técnicamente e implementé un proyecto piloto para integrar el procesamiento de datos en tiempo real de Machine Learning relacionados con el estado de integridad de múltiples antenas.\n\nLicense Manager: Diseñé, alcancé el alcance y implementé el License Manager, un proyecto para controlar y monitorear el acceso de los clientes a productos (plugins) de acuerdo con la licencia contratada, evitando el uso indebido de las soluciones en entornos embebidos. Preparé una presentación explicando la funcionalidad de alto nivel para los responsables.\n\nRig State: Realicé ingeniería inversa en una aplicación sin documentación adecuada para proporcionar mayor claridad a los gestores sobre las reglas de negocio implementadas, permitiendo que las modificaciones necesarias procedieran.",
   "Sequence Builder + Cost Tracker: I was among the main contributors to the development of Sequence Builder, a system that generates simulations resulting in a sequence of operations with time estimates based on historical data for planning oil well activities. In parallel, there was the development of Cost Tracker, which works coupled with Sequence Builder by adding cost estimates for each operation during the simulation. Additionally, it allows the updating and monitoring of these operations based on real data, enabling comparisons between the planned and the executed.\n\nDynamic Risk Advisor (DRA): I temporarily participated in the development of the DRA project, a tool based on the bowtie methodology, allowing the user to manage and monitor barriers and alerts in real-time, aiming for optimized operational risk management.": "Sequence Builder + Cost Tracker: Fui uno de los principales colaboradores en el desarrollo de Sequence Builder, un sistema que genera simulaciones resultando en una secuencia de operaciones con estimaciones de tiempo basadas en datos históricos para planificar las actividades de los pozos de petróleo. Paralelamente, se desarrolló Cost Tracker, que funciona acoplado a Sequence Builder añadiendo estimaciones de costos para cada operación durante la simulación. Además, permite la actualización y el seguimiento de estas operaciones basadas en datos reales, permitiendo comparaciones entre lo planeado y lo ejecutado.\n\nDynamic Risk Advisor (DRA): Participé temporalmente en el desarrollo del proyecto DRA, una herramienta basada en la metodología bowtie, permitiendo al usuario gestionar y monitorear barreras y alertas en tiempo real, con el objetivo de optimizar la gestión de riesgos operacionales.",
   "Campaign Planner: Contributed to the development of new features, maintenance, and compatibility with legacy browsers in an oil and gas operations campaign management application.\n\nPDF Extractor: Responsible for implementing a script to convert various PDF files into a specific CSV format using OCR, assisting the research team in obtaining structured data for machine learning models.": "Campaign Planner: Contribuí al desarrollo de nuevas funcionalidades, mantenimiento y compatibilidad con navegadores antiguos en una aplicación de gestión de campañas para operaciones de petróleo y gas.\n\nPDF Extractor: Responsable de implementar un script para convertir diversos archivos PDF en un formato CSV específico usando OCR, asistiendo al equipo de investigación en la obtención de datos estructurados para modelos de aprendizaje automático."
 }

public/locales/pt/common.json

@@ -66,4 +66,4 @@
   "Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): Tornei-me um dos principais líderes técnicos responsáveis por manter e aprimorar funcionalidades de um framework interno para a persistência de dados comuns, criando uma base centralizada para diferentes projetos.\n\nCoDaF Wells and Rigs: Entrevistou especialistas e modelou um banco de dados de uso geral para soluções de petróleo e gás, resultando em aproximadamente 100 entidades.\n\nAtria: Liderou tecnicamente e implementou um projeto piloto para integrar o processamento de Machine Learning em tempo real de dados relacionados ao status de integridade de múltiplas antenas.\n\nLicense Manager: Arquitetou, planejou e implementou o License Manager, um projeto para controlar e monitorar o acesso dos clientes aos produtos (plugins) de acordo com a licença contratada, prevenindo o uso indevido das soluções em ambientes embarcados. Preparou uma apresentação explicando a funcionalidade de alto nível para os gestores responsáveis.\n\nRig State: Realizou engenharia reversa em uma aplicação sem documentação adequada para fornecer maior clareza aos gestores sobre as regras de negócios implementadas, permitindo que as modificações necessárias prosseguissem.",
   "Sequence Builder + Cost Tracker: I was among the main contributors to the development of Sequence Builder, a system that generates simulations resulting in a sequence of operations with time estimates based on historical data for planning oil well activities. In parallel, there was the development of Cost Tracker, which works coupled with Sequence Builder by adding cost estimates for each operation during the simulation. Additionally, it allows the updating and monitoring of these operations based on real data, enabling comparisons between the planned and the executed.\n\nDynamic Risk Advisor (DRA): I temporarily participated in the development of the DRA project, a tool based on the bowtie methodology, allowing the user to manage and monitor barriers and alerts in real-time, aiming for optimized operational risk management.": "Sequence Builder + Cost Tracker: Fui um dos principais colaboradores no desenvolvimento do Sequence Builder, um sistema que gera simulações resultando em uma sequência de operações com estimativas de tempo baseadas em dados históricos para o planejamento de atividades de poços de petróleo. Paralelamente, houve o desenvolvimento do Cost Tracker, que funciona acoplado ao Sequence Builder, adicionando estimativas de custo para cada operação durante a simulação. Além disso, permite a atualização e monitoramento dessas operações com base em dados reais, possibilitando comparações entre o planejado e o executado.\n\nDynamic Risk Advisor (DRA): Participei temporariamente do desenvolvimento do projeto DRA, uma ferramenta baseada na metodologia bowtie, permitindo ao usuário gerenciar e monitorar barreiras e alertas em tempo real, visando uma gestão otimizada de risco operacional.",
   "Campaign Planner: Contributed to the development of new features, maintenance, and compatibility with legacy browsers in an oil and gas operations campaign management application.\n\nPDF Extractor: Responsible for implementing a script to convert various PDF files into a specific CSV format using OCR, assisting the research team in obtaining structured data for machine learning models.": "Campaign Planner: Contribuiu para o desenvolvimento de novas funcionalidades, manutenção e compatibilidade com navegadores legados em uma aplicação de gestão de campanhas de operações de petróleo e gás.\n\nPDF Extractor: Responsável por implementar um script para converter diversos arquivos PDF em um formato CSV específico usando OCR, auxiliando a equipe de pesquisa na obtenção de dados estruturados para modelos de aprendizado de máquina."
-}
+}

public/locales/zh/common.json

@@ -66,4 +66,4 @@
   "Common Data Framework (CoDaF): I became one of the main technical leaders responsible for maintaining and enhancing functionalities of an internal framework for the persistence of common data, creating a centralized base for different projects.\n\nCoDaF Wells and Rigs: I interviewed specialists and modeled a general-use database for oil and gas solutions, resulting in approximately 100 entities.\n\nAtria: I technically led and implemented a pilot project to integrate real-time Machine Learning processing data related to the integrity status of multiple antennas.\n\nLicense Manager: I architected, scoped, and implemented the License Manager, a project to control and monitor client access to products (plugins) according to the contracted license, preventing misuse of the solutions in embedded environments. I prepared a presentation explaining the high-level functionality for the responsible managers.\n\nRig State: I performed reverse engineering on an application without adequate documentation to provide greater clarity to managers about the implemented business rules, allowing for the necessary modifications to proceed.": "Common Data Framework (CoDaF): 我成为了负责维护和增强内部框架功能的主要技术领导者之一，该框架用于持久化公共数据，为不同项目创建了一个集中式基础。\n\nCoDaF Wells and Rigs: 我采访了专家，并为石油和天然气解决方案建模了一个通用数据库，结果形成了大约100个实体。\n\nAtria: 我在技术上领导并实施了一个试点项目，以集成实时机器学习处理与多个天线的完整性状态相关的数据。\n\nLicense Manager: 我设计、定义范围并实施了License Manager项目，该项目用于根据合同许可证控制和监控客户对产品（插件）的访问，防止在嵌入式环境中对解决方案的滥用。我准备了一份演示文稿，向相关经理解释了高层次的功能。\n\nRig State: 我对一个没有适当文档的应用程序进行了逆向工程，以便向经理提供有关已实施的业务规则的更大清晰度，从而允许进行必要的修改。",
   "Sequence Builder + Cost Tracker: I was among the main contributors to the development of Sequence Builder, a system that generates simulations resulting in a sequence of operations with time estimates based on historical data for planning oil well activities. In parallel, there was the development of Cost Tracker, which works coupled with Sequence Builder by adding cost estimates for each operation during the simulation. Additionally, it allows the updating and monitoring of these operations based on real data, enabling comparisons between the planned and the executed.\n\nDynamic Risk Advisor (DRA): I temporarily participated in the development of the DRA project, a tool based on the bowtie methodology, allowing the user to manage and monitor barriers and alerts in real-time, aiming for optimized operational risk management.": "Sequence Builder + Cost Tracker: 我是Sequence Builder开发的主要贡献者之一，该系统生成模拟结果，并根据历史数据生成操作序列和时间估算。与此同时，还开发了Cost Tracker，它与Sequence Builder配合，通过在模拟过程中为每个操作添加成本估算来工作。此外，它允许基于实际数据更新和监控这些操作，从而实现计划和实际执行之间的比较。\n\nDynamic Risk Advisor (DRA): 我暂时参与了DRA项目的开发，这是一种基于bowtie方法论的工具，允许用户实时管理和监控障碍和警报，旨在优化操作风险管理。",
   "Campaign Planner: Contributed to the development of new features, maintenance, and compatibility with legacy browsers in an oil and gas operations campaign management application.\n\nPDF Extractor: Responsible for implementing a script to convert various PDF files into a specific CSV format using OCR, assisting the research team in obtaining structured data for machine learning models.": "Campaign Planner: 参与了石油和天然气运营管理应用程序中新功能的开发、维护和与旧版浏览器的兼容性。\n\nPDF Extractor: 负责实现一个脚本，将各种PDF文件转换为特定的CSV格式，使用OCR技术，帮助研究团队获得用于机器学习模型的结构化数据。"
-}
+}

src/components/LanguageSelector/index.tsx

@@ -105,11 +105,13 @@ export default function LanguageSelector() {
                     >
                       <button
                         key={language.key}
-                        className={`${selectedLanguage.key === language.key
+                        className={`${
+                          selectedLanguage.key === language.key
                             ? 'bg-gray-100 text-gray-900'
                             : 'text-gray-700'
-                          } inline-flex w-full items-center px-4 py-2 text-left text-sm hover:bg-gray-100 ${index % 2 === 0 ? 'rounded-r' : 'rounded-l'
-                          }`}
+                        } inline-flex w-full items-center px-4 py-2 text-left text-sm hover:bg-gray-100 ${
+                          index % 2 === 0 ? 'rounded-r' : 'rounded-l'
+                        }`}
                         role="menuitem"
                       >
                         <FlagIcon countryCode={language.key} />

src/components/Navbar/index.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from 'next-i18next';
-import React, { useState } from 'react';
+import type { RefObject } from 'react';
+import React, { useEffect, useState } from 'react';
+import type Scrollbars from 'react-custom-scrollbars-2';
 
 import Link from '@/components/Link';
 
@@ -8,12 +10,12 @@ import Logo from '../logo';
 
 interface Props {
   logoTitle: string;
-  scrollTo: (titleId: string) => void;
+  scrollRef: RefObject<Scrollbars>;
 }
 
-export default function Navbar({ logoTitle, scrollTo }: Props) {
+export default function Navbar({ logoTitle, scrollRef }: Props) {
   const [menuOpen, setMenuOpen] = useState(false);
-
+  const [activeTab, setActiveTab] = useState<string | null>(null);
   const { t } = useTranslation('common');
 
   const OPTIONS = [
@@ -43,12 +45,65 @@ export default function Navbar({ logoTitle, scrollTo }: Props) {
     },
   ];
 
+  function getHashFromURL() {
+    const urlId = window.location.hash;
+    if (!urlId) return;
+    const normalizedId = urlId.toLowerCase().replace(/#/g, '');
+    setActiveTab(normalizedId);
+  }
+  function scrollTo(titleId: string) {
+    const element = document.getElementById(titleId);
+    if (!element) return;
+    element.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  useEffect(() => getHashFromURL(), []);
+
+  function observeScrollPositionAndUpdateState(isOnBottom: boolean) {
+    const headers = OPTIONS.map(({ key }) => key);
+    if (isOnBottom) {
+      const id = headers[headers.length - 1] as string;
+      setActiveTab(id);
+    } else {
+      headers.forEach((id) => {
+        const e = document.getElementById(id);
+        if (!e) return;
+        const rect = e.getBoundingClientRect();
+        if (rect.top >= 0 && rect.top < 100) {
+          setActiveTab(id);
+        }
+      });
+    }
+  }
+
+  useEffect(() => {
+    const scroll = scrollRef.current;
+    const element = scroll?.container?.firstChild;
+
+    if (element) {
+      element.addEventListener('scroll', () => {
+        const position = scroll.getValues();
+        const isOnBottom =
+          position.scrollHeight - position.clientHeight - position.scrollTop <
+          25;
+        observeScrollPositionAndUpdateState(isOnBottom);
+      });
+
+      return () => element.removeEventListener('scroll', () => null);
+    }
+    return () => null;
+  }, [scrollRef]);
+
   const renderOptions = () =>
     OPTIONS.map(({ title, key }) => (
       <span
         key={key}
-        onClick={() => scrollTo(key)}
-        className={'cursor-pointer text-black hover:border-0'}
+        onClick={() => {
+          scrollTo(key);
+        }}
+        className={`cursor-pointer  hover:border-0 ${
+          activeTab === key ? 'text-primary' : 'text-black'
+        }`}
       >
         {title}
       </span>

src/components/Scroll/index.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import type { ScrollbarProps } from 'react-custom-scrollbars-2';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 
-interface Props extends ScrollbarProps { }
+interface Props extends ScrollbarProps {}
 
 function Scroll({ children, ...props }: Props, ref: any) {
   return (

src/components/ScrollToTopButton/index.tsx

@@ -1,10 +1,6 @@
 import ArrowUpOutlined from '@ant-design/icons/lib/icons/ArrowUpOutlined';
 import React from 'react';
 
-import Icon from '../Icon';
-
-const theme = require('../../styles/themes');
-
 type Props = {
   isVisible: boolean;
   scrollToTop: () => void;
@@ -13,14 +9,14 @@ const ScrollToTopButton = ({ isVisible, scrollToTop }: Props) => {
   return (
     <div
       onClick={scrollToTop}
-      className={`fixed bottom-5 right-5 cursor-pointer rounded-full text-white shadow-lg transition duration-300 ease-in-out md:bottom-7 md:right-7 ${
+      className={`fixed bottom-5 right-5 cursor-pointer rounded-full text-white shadow-lg transition duration-300 ease-in-out ${
         isVisible ? '' : 'invisible'
       }`}
     >
       <div>
-        <Icon color={theme.primary}>
+        <div className="flex h-11 w-11 justify-center rounded-full bg-primary p-5 align-middle text-white hover:text-gray-400">
           <ArrowUpOutlined />
-        </Icon>
+        </div>
       </div>
     </div>
   );

src/components/Timeline/index.tsx

@@ -2,9 +2,9 @@ import type { TimelineItemProps } from 'antd/lib/timeline';
 import AntdTimeline from 'antd/lib/timeline';
 import React, { useEffect, useState } from 'react';
 
-import Item from './Item';
+import theme from '@/styles/themes';
 
-const theme = require('@/styles/themes');
+import Item from './Item';
 
 interface ItemNode {
   key: string;

src/pages/[locale]/index.tsx

@@ -1,9 +1,7 @@
 import {
   GithubOutlined,
-  InstagramOutlined,
   LinkedinOutlined,
   MailOutlined,
-  TwitterOutlined,
   WhatsAppOutlined,
 } from '@ant-design/icons';
 import dynamic from 'next/dynamic';
@@ -45,11 +43,6 @@ const Index = () => {
   const { t } = useTranslation('common');
   const currentLocale = router.query.locale;
 
-  const scrollTo = (titleId: string) => {
-    const element = document.getElementById(titleId);
-    if (!element) return;
-    element.scrollIntoView({ behavior: 'smooth' });
-  };
   useEffect(() => {
     const l = currentLocale as string;
     setLocale(
@@ -124,7 +117,6 @@ const Index = () => {
     <>
       <Main
         title={logoTitle}
-        scrollTo={scrollTo}
         meta={
           <Meta
             title={name}
@@ -160,21 +152,21 @@ const Index = () => {
                         <WhatsAppOutlined />
                       </Icon>
                     </SocialLink>
-                    <SocialLink href={`https://x.com/${username}`}>
-                      <Icon color={'#00acee'}>
-                        <TwitterOutlined />
-                      </Icon>
-                    </SocialLink>
+                    {/* <SocialLink href={`https://x.com/${username}`}> */}
+                    {/*   <Icon color={'#00acee'}> */}
+                    {/*     <TwitterOutlined /> */}
+                    {/*   </Icon> */}
+                    {/* </SocialLink> */}
                     <SocialLink href={`https://linkedin.com/in/${username}`}>
                       <Icon color={'#0e76a8'}>
                         <LinkedinOutlined />
                       </Icon>
                     </SocialLink>
-                    <SocialLink href={`https://instagram.com/${username}`}>
-                      <Icon color={'#dd2a7b'}>
-                        <InstagramOutlined />
-                      </Icon>
-                    </SocialLink>
+                    {/* <SocialLink href={`https://instagram.com/${username}`}> */}
+                    {/*   <Icon color={'#dd2a7b'}> */}
+                    {/*     <InstagramOutlined /> */}
+                    {/*   </Icon> */}
+                    {/* </SocialLink> */}
                     <SocialLink href={`mailto:${email}`} skipLocaleHandling>
                       <Icon color={'#d44638'}>
                         <MailOutlined />
@@ -211,12 +203,12 @@ const Index = () => {
               </Block>
               <Block>
                 <div className="flex flex-1 flex-col">
-                  <span
+                  <h3
                     id="about"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('About')}
-                  </span>
+                  </h3>
                   <p className="text-pretty text-justify text-lg text-gray-600 md:text-2xl">
                     {t(bio)}
                   </p>
@@ -227,12 +219,12 @@ const Index = () => {
             <Row>
               <Block>
                 <div className="flex flex-1 flex-col ">
-                  <span
+                  <h3
                     id="languages"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('Languages')}
-                  </span>
+                  </h3>
                   <LanguageChart data={data} />
                 </div>
               </Block>
@@ -264,12 +256,12 @@ const Index = () => {
               </Block>
               <Block>
                 <div className="flex flex-1 flex-col ">
-                  <span
+                  <h3
                     id="experience"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('Experiences')}
-                  </span>
+                  </h3>
                   <Scroll style={{ height: 500 }}>
                     <Timeline data={experience} />
                   </Scroll>
@@ -279,12 +271,12 @@ const Index = () => {
             <Row>
               <Block>
                 <div className="flex flex-1 flex-col">
-                  <span
+                  <h3
                     id="education"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('Educations')}
-                  </span>
+                  </h3>
                   <Scroll style={{ height: 500 }}>
                     <Timeline data={education} />
                   </Scroll>
@@ -318,12 +310,12 @@ const Index = () => {
               </Block>
               <Block>
                 <div className="flex flex-1 flex-col">
-                  <span
+                  <h3
                     id="certification"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('Certifications')}
-                  </span>
+                  </h3>
                   <Scroll style={{ height: 400 }}>
                     {certification?.map((v, key) => (
                       <div key={key} className="">
@@ -337,12 +329,12 @@ const Index = () => {
             <Row>
               <Block>
                 <div className="flex flex-1 flex-col">
-                  <span
+                  <h3
                     id="projects"
                     className="mb-3 text-xl font-semibold text-black md:text-4xl "
                   >
                     {t('Projects')}
-                  </span>
+                  </h3>
                   <ProjectGrid
                     initialItemsCount={8}
                     itemsToAdd={8}

src/styles/themes.ts

@@ -0,0 +1 @@
+export default { primary: '#253db6' };

src/templates/Main.tsx

@@ -10,7 +10,6 @@ type IMainProps = {
   title: string;
   meta: ReactNode;
   children: ReactNode;
-  scrollTo: (titleId: string) => void;
 };
 
 const Main = (props: IMainProps) => {
@@ -30,13 +29,13 @@ const Main = (props: IMainProps) => {
   const scrollToTop = () => {
     const ref = scrollRef.current;
     if (!ref) return;
-    ref.scrollToTop();
+    ref.container.firstElementChild?.scroll({ behavior: 'smooth', top: 0 });
   };
 
   return (
     <div className="h-screen w-full">
       {props.meta}
-      <Navbar logoTitle={props.title} scrollTo={props.scrollTo} />
+      <Navbar logoTitle={props.title} scrollRef={scrollRef} />
       <div
         style={{ height: 'calc(100% - 77px)' }}
         className="max-h-screen w-full text-gray-700 antialiased"

src/templates/pdf/CurriculumVitae.tsx

@@ -0,0 +1,171 @@
+import {
+  Document,
+  Link,
+  Page,
+  PDFViewer,
+  StyleSheet,
+  Text,
+  View,
+} from '@react-pdf/renderer';
+import moment from 'moment';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import data from '@/public/assets/jsons/profile.json';
+// Styles for the PDF
+const styles = StyleSheet.create({
+  page: {
+    padding: 10,
+    fontSize: 12,
+    lineHeight: 1.4,
+    color: '#333',
+    display: 'flex',
+  },
+  section: { marginBottom: 3 },
+  headerSection: {
+    marginBottom: 5,
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  header: {
+    fontSize: 18,
+    marginBottom: 3,
+    fontWeight: 'bold',
+  },
+  subHeader: {
+    fontSize: 10,
+  },
+  h1: {
+    fontSize: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 3,
+    alignItems: 'center',
+  },
+  h2: {
+    fontSize: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  h3: { fontSize: 10, fontWeight: 'bold', lineHeight: 1.2 },
+  listItem: { marginLeft: 5 },
+  text: { fontSize: 10, lineHeight: 1.2 },
+  description: { fontSize: 10, lineHeight: 1.2, marginLeft: 10 },
+  divider: {
+    borderBottom: 1,
+    borderBottomColor: '#333',
+    borderBottomStyle: 'solid',
+    width: '100%',
+    marginLeft: 10,
+  },
+  inline: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default function CurriculumVitae() {
+  const { t } = useTranslation('common');
+  const formatDate = (date?: string) =>
+    date ? moment(date).format('MMM YYYY') : t('Now');
+  return (
+    <PDFViewer width={'100%'} height={800}>
+      <Document>
+        <Page size="A4" style={styles.page}>
+          <View style={styles.headerSection}>
+            <Text style={styles.header}>
+              {data.firstName} {data.lastName}
+            </Text>
+            <Text style={styles.subHeader}>
+              <Link src={`https://linkedin.com/in/${data.username}`}>
+                {'Linkedin'}
+              </Link>
+              <Text> | </Text>
+              <Link src={`mailto:${data.email}`}>{data.email}</Link>
+              <Text> | </Text>
+              <Link src={window.location.origin}>{window.location.host}</Link>
+              <Text> | </Text>
+              <Link
+                src={`https://api.whatsapp.com/send?phone=${data.phone}`}
+              >{`+${data.phone}`}</Link>
+              <Text> | </Text>
+              <Link src={`https://github.com/${data.username}`}>
+                {'Github'}
+              </Link>
+            </Text>
+          </View>
+
+          {/* Experience */}
+          <View style={styles.section}>
+            <View style={styles.h1}>
+              <Text>{t('Experience')}</Text>
+              <View style={styles.divider} />
+            </View>
+            {data.experience.map((exp, idx) => (
+              <View key={idx} style={styles.listItem}>
+                <View style={styles.h2}>
+                  <Text>{t(exp.title)}</Text>
+                  <Text>
+                    {`(${formatDate(exp.startDate)} - ${formatDate(
+                      exp.endDate
+                    )})`}
+                  </Text>
+                </View>
+                <View style={{ marginBottom: 3 }}>
+                  {exp.children?.map((child, cIdx) => (
+                    <View key={cIdx} style={styles.listItem}>
+                      <Text style={styles.description}>
+                        {`• ${t(child.description).replace(/\n\n/g, '\n• ')}`}
+                      </Text>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            ))}
+          </View>
+
+          {/* Education */}
+          <View style={styles.section}>
+            <View style={styles.h1}>
+              <Text>{t('Education')}</Text>
+              <View style={styles.divider} />
+            </View>
+            {data.education.map((edu, idx) => (
+              <View
+                key={idx}
+                style={[styles.inline, styles.text, { marginLeft: 3 }]}
+              >
+                <Text>{`• ${t(edu.title)}`}</Text>
+                <Text style={{ marginLeft: 5 }}>
+                  {`(${formatDate(edu.startDate)} - ${formatDate(
+                    edu.endDate
+                  )})`}
+                </Text>
+              </View>
+            ))}
+          </View>
+
+          {/* Certifications */}
+          <View style={styles.section}>
+            <View style={styles.h1}>
+              <Text>{t('Certifications')}</Text>
+              <View style={[styles.divider, { marginLeft: 15 }]} />
+            </View>
+            {data.certification.map((cert, idx) => (
+              <View
+                key={idx}
+                style={[styles.inline, styles.text, { marginLeft: 3 }]}
+              >
+                <Text>{`• ${t(cert.name)}`}</Text>
+              </View>
+            ))}
+          </View>
+        </Page>
+      </Document>
+    </PDFViewer>
+  );
+}

src/utils/url.ts

@@ -3,6 +3,8 @@ export const WAKATIME_ACTIVITY = `https://wakatime.com/share/@lucasheartcliff/c5
 export const WAKATIME_CODING_TIME =
   'https://wakatime.com/share/@lucasheartcliff/1d8d3574-4f80-426c-9929-8213f089a012.json';
 export const WAKATIME_EDITORS = `https://wakatime.com/share/@lucasheartcliff/5fc84e8d-fbe1-4a0f-998e-86fec4be7382.json`;
+export const WAKATIME_CODE_ACTIVITY =
+  'https://wakatime.com/share/@lucasheartcliff/f4cd05b2-1074-468f-9325-c623f0e9f8e4.json';
 export const GITHUB_PROFILE = (username: string) =>
   `https://api.github.com/users/${username}`;
 export const GITHUB_PINNED_REPO = (username: string) =>

tailwind.config.js

@@ -1,7 +1,6 @@
 /** @type {import('tailwindcss').Config} */
-const theme = require('./src/styles/themes');
 
-module.exports = {
+const config = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     fontSize: {
@@ -45,9 +44,10 @@ module.exports = {
           800: '#2c5282',
           900: '#2a4365',
         },
-        primary: theme.primary,
+        primary: '#253db6',
       },
     },
   },
   plugins: [],
 };
+module.exports = config;