Development

app/globals.css

@@ -115,5 +115,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: 'Inter', sans-serif;
   }
 }

components/Skills/CategorySkillDisplay.tsx

@@ -13,7 +13,7 @@ interface CategorySkillDisplayProps {
 
 /**
  * Component displaying skills in categories.
- * Foe example, programming languages, DevOps, Web Development, etc.
+ * For example, programming languages, DevOps, Web Development, etc.
  * These are from the skills database `skillTypes` property as defined in {@link SkillInterface}.
  * If there is only one category, the title of the category is not displayed and the skills are displayed in a single column.
  *
@@ -33,26 +33,44 @@ const CategorySkillDisplay: React.FC<CategorySkillDisplayProps> = ({
   let skillCount: number = 0;
   let groupCount: number = 0;
 
-  const filterSkills = (skills: SkillDatabaseKeys[], onlyMain: boolean) => {
+  function filterSkills(skills: SkillDatabaseKeys[], onlyMain: boolean) {
     return skills.filter((skillKey) =>
       onlyMain ? skillDatabaseMap[skillKey]?.isMainSkill : true
     );
-  };
+  }
+
+  const totalMainSkillsCount: number = skillCategories.reduce(
+    (acc, categoryData) => {
+      return (
+        acc +
+        categoryData.skills.filter(
+          (skillKey) => skillDatabaseMap[skillKey]?.isMainSkill
+        ).length
+      );
+    },
+    0
+  );
 
   const displayedSkills: SkillsCategoryInterface[] = showAll
     ? skillCategories
     : skillCategories.reduce((acc: SkillsCategoryInterface[], categoryData) => {
         if (skillCount < maxSkillCount && groupCount < maxGroupCount) {
-          const filteredSkills = filterSkills(categoryData.skills, true);
-          const skillsToDisplay = filteredSkills.length
+          const filteredSkills: SkillDatabaseKeys[] = filterSkills(
+            categoryData.skills,
+            true
+          );
+          const skillsToDisplay: SkillDatabaseKeys[] = filteredSkills.length
             ? filteredSkills
             : categoryData.skills;
 
-          const availableSlots = Math.min(
+          const availableSlots: number = Math.min(
             maxSkillCount - skillCount,
             skillsToDisplay.length
           );
-          const limitedSkills = skillsToDisplay.slice(0, availableSlots);
+          const limitedSkills: SkillDatabaseKeys[] = skillsToDisplay.slice(
+            0,
+            availableSlots
+          );
 
           if (limitedSkills.length > 0) {
             acc.push({
@@ -67,17 +85,20 @@ const CategorySkillDisplay: React.FC<CategorySkillDisplayProps> = ({
         return acc;
       }, []);
 
-  const totalSkillCount: number = skillCategories.reduce(
-    (acc, categoryData) => acc + categoryData.skills.length,
+  const displayedMainSkillsCount: number = displayedSkills.reduce(
+    (acc, categoryData) => {
+      return (
+        acc +
+        categoryData.skills.filter(
+          (skillKey) => skillDatabaseMap[skillKey]?.isMainSkill
+        ).length
+      );
+    },
     0
   );
 
-  const hasNonMainSkills: boolean = skillCategories.some((category) =>
-    category.skills.some((skillKey) => !skillDatabaseMap[skillKey]?.isMainSkill)
-  );
-
   const shouldShowToggleButton: boolean =
-    totalSkillCount > skillCount || showAll || hasNonMainSkills;
+    displayedMainSkillsCount < totalMainSkillsCount;
 
   function toggleShowAll(): void {
     setShowAll(!showAll);

components/Skills/SkillTableSection.tsx

@@ -87,7 +87,6 @@ const SkillTableSection: React.FC<SkillTableSectionProps> = ({
       {nonEmptySkillCategories.map(({ title, skillCategories }) => (
         <TabsContent key={stringToSlug(title)} value={stringToSlug(title)}>
           <div className="mt-4 text-center md:text-left">
-            {/* Adjust CategorySkillDisplay to accept the new structure */}
             <CategorySkillDisplay skillCategories={skillCategories} />
           </div>
         </TabsContent>

database/Certificates/CertificateDatabaseKeys.ts

@@ -22,6 +22,7 @@ enum CertificateDatabaseKeys {
   UdemyUnderstandingTypeScript = "UC-2c118eb6-d835-4b2e-8280-fc2ee49f095b",
   LinkedInLearningLinuxShellScripting = "67ef8710bfc2f51163f78c9373df3d7b4674e44b3d2e936318399c6a7fe5bda0",
   LinkedInLearningGroovy = "7c14e4c16f72a10046c3d66838e5dd3589fa40ac6cbf6509b235ea6452f430c8",
+  UdemyScalaAndFunctionalProgrammingEssentials = "UC-89a14f96-da7f-466c-ad08-20a8f2ae63a1",
 
   //^ Algorithms and Data Structures
   UdemyTheCompleteDataStructuresAndAlgorithmsCourseInPython = "UC-74fdc19f-c016-43c5-8b2a-3cb30941205d",