More flexibility in the displayed sections and the data therein

src/components/Sections/Header.tsx

@@ -11,10 +11,17 @@ export const headerID = 'headerNav';
 
 const Header: FC = memo(() => {
   const [currentSection, setCurrentSection] = useState<SectionId | null>(null);
-  const navSections = useMemo(
-    () => [SectionId.About, SectionId.Resume, SectionId.Portfolio, SectionId.Testimonials, SectionId.Contact],
-    [],
-  );
+
+  const navSections = useMemo(() => {
+    const availableSectionIds = [];
+    if ('About' in SectionId) availableSectionIds.push(SectionId.About);
+    if ('Resume' in SectionId) availableSectionIds.push(SectionId.Resume);
+    if ('Portfolio' in SectionId) availableSectionIds.push(SectionId.Portfolio);
+    if ('Testimonials' in SectionId) availableSectionIds.push(SectionId.Testimonials);
+    if ('Contact' in SectionId) availableSectionIds.push(SectionId.Contact);
+
+    return availableSectionIds;
+  }, []);
 
   const intersectionHandler = useCallback((section: SectionId | null) => {
     section && setCurrentSection(section);

src/components/Sections/Portfolio.tsx

@@ -77,7 +77,9 @@ const ItemOverlay: FC<{item: PortfolioItem}> = memo(({item: {url, title, descrip
           <h2 className="text-center font-bold text-white opacity-100">{title}</h2>
           <p className="text-xs text-white opacity-100 sm:text-sm">{description}</p>
         </div>
-        <ArrowTopRightOnSquareIcon className="absolute bottom-1 right-1 h-4 w-4 shrink-0 text-white sm:bottom-2 sm:right-2" />
+        {url && (
+          <ArrowTopRightOnSquareIcon className="absolute bottom-1 right-1 h-4 w-4 shrink-0 text-white sm:bottom-2 sm:right-2" />
+        )}
       </div>
     </a>
   );

src/components/Sections/Resume/TimelineItem.tsx

@@ -9,8 +9,8 @@ const TimelineItem: FC<{item: TimelineItem}> = memo(({item}) => {
       <div className="flex flex-col pb-4">
         <h2 className="text-xl font-bold">{title}</h2>
         <div className="flex items-center justify-center gap-x-2 md:justify-start">
-          <span className="flex-1 text-sm font-medium italic sm:flex-none">{location}</span>
-          <span>•</span>
+          {location && <span className="flex-1 text-sm font-medium sm:flex-none">{location}</span>}
+          {location && date && <span>•</span>}
           <span className="flex-1 text-sm sm:flex-none">{date}</span>
         </div>
       </div>

src/components/Sections/Resume/index.tsx

@@ -10,24 +10,30 @@ const Resume: FC = memo(() => {
   return (
     <Section className="bg-neutral-100" sectionId={SectionId.Resume}>
       <div className="flex flex-col divide-y-2 divide-neutral-300">
-        <ResumeSection title="Education">
-          {education.map((item, index) => (
-            <TimelineItem item={item} key={`${item.title}-${index}`} />
-          ))}
-        </ResumeSection>
-        <ResumeSection title="Work">
-          {experience.map((item, index) => (
-            <TimelineItem item={item} key={`${item.title}-${index}`} />
-          ))}
-        </ResumeSection>
-        <ResumeSection title="Skills">
-          <p className="pb-8">Here you can show a snapshot of your skills to show off to employers</p>
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-            {skills.map((skillgroup, index) => (
-              <SkillGroup key={`${skillgroup.name}-${index}`} skillGroup={skillgroup} />
+        {education.length > 0 && (
+          <ResumeSection title="Education">
+            {education.map((item, index) => (
+              <TimelineItem item={item} key={`${item.title}-${index}`} />
             ))}
-          </div>
-        </ResumeSection>
+          </ResumeSection>
+        )}
+        {experience.length > 0 && (
+          <ResumeSection title="Work">
+            {experience.map((item, index) => (
+              <TimelineItem item={item} key={`${item.title}-${index}`} />
+            ))}
+          </ResumeSection>
+        )}
+        {skills.length > 0 && (
+          <ResumeSection title="Skills">
+            <p className="pb-8">Here you can show a snapshot of your skills to show off to employers</p>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              {skills.map((skillgroup, index) => (
+                <SkillGroup key={`${skillgroup.name}-${index}`} skillGroup={skillgroup} />
+              ))}
+            </div>
+          </ResumeSection>
+        )}
       </div>
     </Section>
   );

src/components/Sections/Testimonials.tsx

@@ -19,7 +19,7 @@ const Testimonials: FC = memo(() => {
 
   const {width} = useWindow();
 
-  const {imageSrc, testimonials} = testimonial;
+  const {imageSrc, testimonials = []} = testimonial;
 
   const resolveSrc = useMemo(() => {
     if (!imageSrc) return undefined;

src/data/data.tsx

@@ -50,6 +50,7 @@ export const homePageMeta: HomepageMeta = {
 
 /**
  * Section definition
+ * Remove items from this object to delete the respective nav links
  */
 export const SectionId = {
   Hero: 'hero',

src/data/dataDef.ts

@@ -79,16 +79,16 @@ export interface SkillGroup {
 export interface PortfolioItem {
   title: string;
   description: string;
-  url: string;
+  url?: string;
   image: string | StaticImageData;
 }
 
 /**
  * Resume section
  */
 export interface TimelineItem {
-  date: string;
-  location: string;
+  date?: string;
+  location?: string;
   title: string;
   content: JSX.Element;
 }