⚡ Bolt: Optimize rendering and filtering performance

src/components/section.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { memo, ReactNode, useEffect, useRef, useState } from "react";
 
-export const Section = ({
+// ⚡ Optimization: Section component is memoized to prevent redundant re-renders of the section wrapper.
+export const Section = memo(({
   id,
   title,
   children,
@@ -62,4 +63,6 @@ export const Section = ({
       </div>
     </section>
   );
-};
+});
+
+Section.displayName = "Section";

src/components/sections/education.tsx

@@ -4,9 +4,14 @@ import Image from "next/image";
 
 import degreesData from "@/data/degrees";
 
+import { memo } from "react";
+
 import { Section } from "../section";
 
-export const EducationSection = () => {
+// ⚡ Optimization: EducationSection is memoized to prevent unnecessary re-renders.
+// Since it only depends on static data (degreesData) and doesn't consume filter/search contexts,
+// it should only re-render if its parent (Home) re-renders, which we also want to avoid.
+export const EducationSection = memo(() => {
   return (
     <Section id="degrees" title="Education">
       {degreesData.map((degree) => (
@@ -36,4 +41,6 @@ export const EducationSection = () => {
       ))}
     </Section>
   );
-};
+});
+
+EducationSection.displayName = "EducationSection";

src/components/sections/skills.tsx

@@ -14,27 +14,33 @@ export const SkillsSection = () => {
   const { debouncedQuery } = useSearch();
   const { selected } = useFilter();
 
-  const filteredSkills = useMemo(() => {
-    const lowercaseQuery = debouncedQuery.toLowerCase();
+  const areas = selected["areas"];
 
-    // Determine which skills are matching the area filter
-    const selectedAreas = selected["areas"] || [];
-    const areaMatchingSkills = new Set<string>();
-    if (selectedAreas.length === 0) {
-      Object.keys(skillsData).forEach((s) => areaMatchingSkills.add(s));
+  // ⚡ Optimization: Memoize areaMatchingSkills separately from the query filter.
+  // This avoids re-calculating the matching skills set when only the search query changes.
+  const areaMatchingSkills = useMemo(() => {
+    const matchingSkills = new Set<string>();
+    if (!areas || areas.length === 0) {
+      Object.keys(skillsData).forEach((s) => matchingSkills.add(s));
     } else {
-      selectedAreas.forEach((area) => {
-        areaSkills[area]?.forEach((skill) => areaMatchingSkills.add(skill));
+      areas.forEach((area) => {
+        areaSkills[area]?.forEach((skill) => matchingSkills.add(skill));
       });
     }
+    return matchingSkills;
+  }, [areas]);
+
+  // ⚡ Optimization: filteredSkills now only depends on debouncedQuery and the memoized areaMatchingSkills.
+  const filteredSkills = useMemo(() => {
+    const lowercaseQuery = debouncedQuery.toLowerCase();
 
     return Object.entries(skillsData).filter(([key, skill]) => {
       const matchesQuery =
         !lowercaseQuery || skill.name.toLowerCase().includes(lowercaseQuery);
       const matchesArea = areaMatchingSkills.has(key);
       return matchesQuery && matchesArea;
     });
-  }, [debouncedQuery, selected]);
+  }, [debouncedQuery, areaMatchingSkills]);
 
   return (
     <Section id="skills" title="Technical Skills">