Decide if the card should be displayed at higher level

src/components/certification-card/index.tsx

@@ -59,8 +59,6 @@ const CertificationCard = ({
   };
 
   return (
-    <>
-      {certifications?.length !== 0 && (
     <div className="card shadow-lg compact bg-base-100">
       <div className="card-body">
         <div className="mx-3">
@@ -86,9 +84,7 @@ const CertificationCard = ({
                     year={`${certification.year}`}
                     name={certification.name}
                     body={certification.body}
-                        link={
+                    link={certification.link ? certification.link : undefined}
-                          certification.link ? certification.link : undefined
-                        }
                   />
                 ))}
               </>
@@ -97,8 +93,6 @@ const CertificationCard = ({
         </div>
       </div>
     </div>
-      )}
-    </>
   );
 };
 

src/components/education-card/index.tsx

@@ -53,8 +53,6 @@ const EducationCard = ({
   };
 
   return (
-    <>
-      {educations?.length !== 0 && (
     <div className="card shadow-lg compact bg-base-100">
       <div className="card-body">
         <div className="mx-3">
@@ -62,9 +60,7 @@ const EducationCard = ({
             {loading ? (
               skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
             ) : (
-                  <span className="text-base-content opacity-70">
+              <span className="text-base-content opacity-70">Education</span>
-                    Education
-                  </span>
             )}
           </h5>
         </div>
@@ -88,8 +84,6 @@ const EducationCard = ({
         </div>
       </div>
     </div>
-      )}
-    </>
   );
 };
 

src/components/experience-card/index.tsx

@@ -58,8 +58,6 @@ const ExperienceCard = ({
     return array;
   };
   return (
-    <>
-      {experiences?.length !== 0 && (
     <div className="card shadow-lg compact bg-base-100">
       <div className="card-body">
         <div className="mx-3">
@@ -67,9 +65,7 @@ const ExperienceCard = ({
             {loading ? (
               skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
             ) : (
-                  <span className="text-base-content opacity-70">
+              <span className="text-base-content opacity-70">Experience</span>
-                    Experience
-                  </span>
             )}
           </h5>
         </div>
@@ -98,8 +94,6 @@ const ExperienceCard = ({
         </div>
       </div>
     </div>
-      )}
-    </>
   );
 };
 

src/components/gitprofile.tsx

@@ -217,22 +217,30 @@ const GitProfile = ({ config }: { config: Config }) => {
                       github={sanitizedConfig.github}
                       social={sanitizedConfig.social}
                     />
+                    {sanitizedConfig.skills.length !== 0 && (
                       <SkillCard
                         loading={loading}
                         skills={sanitizedConfig.skills}
                       />
+                    )}
+                    {sanitizedConfig.experiences.length !== 0 && (
                       <ExperienceCard
                         loading={loading}
                         experiences={sanitizedConfig.experiences}
                       />
+                    )}
+                    {sanitizedConfig.certifications.length !== 0 && (
                       <CertificationCard
                         loading={loading}
                         certifications={sanitizedConfig.certifications}
                       />
+                    )}
+                    {sanitizedConfig.educations.length !== 0 && (
                       <EducationCard
                         loading={loading}
                         educations={sanitizedConfig.educations}
                       />
+                    )}
                   </div>
                 </div>
                 <div className="lg:col-span-2 col-span-1">

src/components/skill-card/index.tsx

@@ -21,8 +21,6 @@ const SkillCard = ({
   };
 
   return (
-    <>
-      {skills?.length !== 0 && (
     <div className="card shadow-lg compact bg-base-100">
       <div className="card-body">
         <div className="mx-3">
@@ -30,9 +28,7 @@ const SkillCard = ({
             {loading ? (
               skeleton({ widthCls: 'w-32', heightCls: 'h-8' })
             ) : (
-                  <span className="text-base-content opacity-70">
+              <span className="text-base-content opacity-70">Tech Stack</span>
-                    Tech Stack
-                  </span>
             )}
           </h5>
         </div>
@@ -52,8 +48,6 @@ const SkillCard = ({
         </div>
       </div>
     </div>
-      )}
-    </>
   );
 };