refactor: update components to conditionally render based on provided…

… data and set og:image for v1.5.0
saqibbedar · Oct 12, 2024 · 9f4865d · 9f4865d
2 parents b0faed9 + c002fe3
commit 9f4865d
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<span><h1><a href="https://saqibbedar.github.io/Reactfolio/" target="_blank">Reactfolio.</a> v1.4.0</h1></span>
+<span><h1><a href="https://saqibbedar.github.io/Reactfolio/" target="_blank">Reactfolio.</a> v1.5.0</h1></span>
 
 <span>Designed for developers looking to showcase their work with style and simplicity.</span>
 
@@ -106,7 +106,7 @@ Feel free to open issues or submit pull requests. Your contributions will be ack
 
 Join us in making this project better and get your contributions recognized!
 
-# Sponsor Project ❤️
+# Support Project ❤️
 
 This project is completely free under the [`MIT LICENSE`](https://github.com/saqibbedar/Reactfolio?tab=MIT-1-ov-file). If you’ve found this project helpful and would like to support its development, you can consider buying me a coffee. Your support is greatly appreciated!
 

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
     <title>Your Name | Web Developer Portfolio</title>
     <meta property="og:title" content="Your Name | Web Developer Portfolio" />
     <meta property="og:description" content="Professional portfolio showcasing my skills, projects, and experience as a developer." />
-    <meta property="og:image" content="/public/og-img.jpg" />
+    <meta property="og:image" content="https://raw.githubusercontent.com/saqibbedar/Reactfolio/refs/heads/main/public/og-img.jpg" />
     <meta property="og:url" content="https://your-portfolio-url.com" />
     <meta name="twitter:card" content="summary_large_image" />
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "reactfolio",
   "private": true,
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/pages/Certificates.jsx b/src/pages/Certificates.jsx
@@ -4,26 +4,30 @@ import { CertificatesPage } from "../assets/assets.js";
 
 const Certificates = () => {
   return (
-    <div id="Certificates" className={`${containerStyle}`}>
-      <PageTitle title={"Certificates"} />
-      <div>
-        <div className="flex gap-3 flex-nowrap overflow-x-auto overflow-y-hidden custom-scrollbar">
-          {CertificatesPage.map(
-            ({ img, title, description, issuedBy, credentialURL }) => (
-              <Certificate
-                key={1}
-                isFlexShrink={true}
-                img={img}
-                title={title}
-                description={description}
-                issuedBy={issuedBy}
-                credentialURL={credentialURL}
-              />
-            )
-          )}
+    <>
+      {(CertificatesPage && CertificatesPage.length > 0) && (
+        <div id="Certificates" className={`${containerStyle}`}>
+          <PageTitle title={"Certificates"} />
+          <div>
+            <div className="flex gap-3 flex-nowrap overflow-x-auto overflow-y-hidden custom-scrollbar">
+              {CertificatesPage.map(
+                ({ img, title, description, issuedBy, credentialURL }) => (
+                  <Certificate
+                    key={1}
+                    isFlexShrink={true}
+                    img={img}
+                    title={title}
+                    description={description}
+                    issuedBy={issuedBy}
+                    credentialURL={credentialURL}
+                  />
+                )
+              )}
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 

diff --git a/src/pages/Education.jsx b/src/pages/Education.jsx
@@ -6,33 +6,37 @@ import { PageTitle } from "../components/components.js";
 
 const Education = () => {
   return (
-    <div id="Education" className={`${containerStyle}`}>
-      <PageTitle title={"Education"} />
-      <div className="grid grid-cols-1 bedar-sc2:grid-cols-2 gap-4">
-        {EducationPage.map(
-          ({ degreeType, graduationYear, institution, institutionUrl }) => (
-            <div
-              key={2}
-              className="flex flex-col gap-4 bg-mainColor text-white rounded-md p-5 bedar-sc2:p-8 shadow-md shadow-[#000]/15"
-            >
-              <div>
-                <div>{graduationYear}</div>
-                <div className="mt-1">{degreeType}</div>
-              </div>
-              <div className="flex items-center gap-3">
-                <LuGraduationCap className="w-7 h-7" />
-                <Link
-                  to={institutionUrl}
-                  className="hover:text-white/65 transition-colors ease-linear"
+    <>
+      { (EducationPage && EducationPage.length > 0) &&
+        <div id="Education" className={`${containerStyle}`}>
+          <PageTitle title={"Education"} />
+          <div className="grid grid-cols-1 bedar-sc2:grid-cols-2 gap-4">
+            {EducationPage.map(
+              ({ degreeType, graduationYear, institution, institutionUrl }) => (
+                <div
+                  key={2}
+                  className="flex flex-col gap-4 bg-mainColor text-white rounded-md p-5 bedar-sc2:p-8 shadow-md shadow-[#000]/15"
                 >
-                  {institution}
-                </Link>
-              </div>
-            </div>
-          )
-        )}
-      </div>
-    </div>
+                  <div>
+                    <div>{graduationYear}</div>
+                    <div className="mt-1">{degreeType}</div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <LuGraduationCap className="w-7 h-7" />
+                    <Link
+                      to={institutionUrl}
+                      className="hover:text-white/65 transition-colors ease-linear"
+                    >
+                      {institution}
+                    </Link>
+                  </div>
+                </div>
+              )
+            )}
+          </div>
+        </div>
+      }
+    </>
   );
 };
 

diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
@@ -10,65 +10,71 @@ const Projects = () => {
   const [isHovered, setIsHovered] = useState(false);
 
   useEffect(() => {
-    let btn = document.querySelector(".project-btn");
+    if (projectsPage && projectsPage.length > 0) {
+      let btn = document.querySelector(".project-btn");
 
-    const handleMouseEnter = () => {
-      setIsHovered(true);
-    };
+      const handleMouseEnter = () => {
+        setIsHovered(true);
+      };
 
-    const handleMouseLeave = () => {
-      setIsHovered(false);
-    };
+      const handleMouseLeave = () => {
+        setIsHovered(false);
+      };
 
-    btn.addEventListener("mouseenter", handleMouseEnter);
-    btn.addEventListener("mouseleave", handleMouseLeave);
+      btn.addEventListener("mouseenter", handleMouseEnter);
+      btn.addEventListener("mouseleave", handleMouseLeave);
 
-    return () => {
-      btn.removeEventListener("mouseenter", handleMouseEnter);
-      btn.removeEventListener("mouseleave", handleMouseLeave);
-    };
+      return () => {
+        btn.removeEventListener("mouseenter", handleMouseEnter);
+        btn.removeEventListener("mouseleave", handleMouseLeave);
+      };
+    }
   }, []);
 
   return (
-    <div id="Projects" className={`${containerStyle}`}>
-      <PageTitle title={"Projects"} />
-      <div>
-        <div className="grid grid-cols-1 bedar-sc2:grid-cols-2 gap-5">
-          {projectsPage.map(
-            ({
-              projectName,
-              projectDescription,
-              projectURL,
-              githubRepository,
-              tags,
-              date,
-            }) => (
-              <Project
-                key={1}
-                projectName={projectName}
-                projectDescription={projectDescription}
-                projectURL={projectURL}
-                githubRepository={githubRepository}
-                tags={tags}
-                date={date}
-              />
-            )
-          )}
-        </div>
-        <div>
-          <Link to={"/"} className="flex justify-center mt-9">
-            <button className="project-btn bg-mainColor hover:bg-mainHover text-white py-3 px-4 rounded-full flex items-center gap-2 transition-all ease-linear">
-              More Projects{" "}
-              {isHovered ? (
-                <IoArrowBackOutline className="w-5 h-5 rotate-180" />
-              ) : (
-                <IoIosArrowForward className="w-5 h-5" />
+    <>
+      { (projectsPage && projectsPage.length > 0) && 
+        <div id="Projects" className={`${containerStyle}`}>
+          <PageTitle title={"Projects"} />
+          <div>
+            <div className="grid grid-cols-1 bedar-sc2:grid-cols-2 gap-5">
+              {projectsPage.map(
+                ({
+                  projectName,
+                  projectDescription,
+                  projectURL,
+                  githubRepository,
+                  tags,
+                  date,
+                }) => (
+                  <Project
+                    key={1}
+                    projectName={projectName}
+                    projectDescription={projectDescription}
+                    projectURL={projectURL}
+                    githubRepository={githubRepository}
+                    tags={tags}
+                    date={date}
+                  />
+                )
               )}
-            </button>
-          </Link>
+            </div>
+            <div>
+              <Link to={"/"} className="flex justify-center mt-9">
+                <button className="project-btn bg-mainColor hover:bg-mainHover text-white py-3 px-4 rounded-full flex items-center gap-2 transition-all ease-linear">
+                  More Projects{" "}
+                  {isHovered ? (
+                    <IoArrowBackOutline className="w-5 h-5 rotate-180" />
+                  ) : (
+                    <IoIosArrowForward className="w-5 h-5" />
+                  )}
+                </button>
+              </Link>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      }
+    </>
   );
 };
 

diff --git a/src/pages/Skills.jsx b/src/pages/Skills.jsx
@@ -4,14 +4,18 @@ import { containerStyle } from "./styles.js";
 
 const Skills = () => {
   return (
-    <div id="Skills" className={`${containerStyle}`}>
-      <PageTitle title={"Skills"} />
-      <div className="flex gap-4 text-white flex-wrap justify-center bedar-sc1:justify-start">
-        {skillsPage.map((Skill) => (
-          <Skill className="h-16 w-16 bg-mainColor cursor-pointer p-2 rounded shadow-md shadow-[#000]/15 " />
-        ))}
-      </div>
-    </div>
+    <>
+      {(skillsPage && skillsPage.length > 0) && (
+        <div id="Skills" className={`${containerStyle}`}>
+          <PageTitle title={"Skills"} />
+          <div className="flex gap-4 text-white flex-wrap justify-center bedar-sc1:justify-start">
+            {skillsPage.map((Skill) => (
+              <Skill className="h-16 w-16 bg-mainColor cursor-pointer p-2 rounded shadow-md shadow-[#000]/15 " />
+            ))}
+          </div>
+        </div>
+      )}
+    </>
   );
 };