Solved many of the open issues

public/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Edit meta tags for SEO -->
-    <title>DeveloperFolio | Developer Portfolio Template</title>
-    <meta name="title" content="DeveloperFolio | Developer Portfolio Template">
+    <title>Portfolio | Saad Rasheed</title>
+    <meta name="title" content="Portfolio | Saad Rasheed">
     <meta name="description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
 
     <!-- Open Graph / Facebook -->

src/_globalColor.scss

@@ -28,7 +28,7 @@ $githubRepoCardColor: rgb(88, 96, 105);
 $githubRepoCardRepoCardStatsColor: rgb(106, 115, 125);
 $githubRepoCardRepoNameColor: rgb(36, 41, 46);
 $githubProfileCardLocationTS: #ffebcd;
-$githubProfileCardBorder: #6c63ff;
+$githubProfileCardBorder: #000000;
 
 // light background colors
 $lightBackground1: #fff;

src/components/ToggleSwitch/ToggleSwitch.js

@@ -3,7 +3,7 @@ import emoji from "react-easy-emoji";
 import StyleContext from "../../contexts/StyleContext";
 import "./ToggleSwitch.scss";
 
-const ToggleSwitch = () => {
+const ToggleSwitch = ({handleMenuItemClick}) => {
   const {isDark} = useContext(StyleContext);
   const [isChecked, setChecked] = useState(isDark);
   const styleContext = useContext(StyleContext);
@@ -16,6 +16,7 @@ const ToggleSwitch = () => {
         onChange={() => {
           styleContext.changeTheme();
           setChecked(!isChecked);
+          handleMenuItemClick();
         }}
       />
       <span className="slider round">

src/components/button/Button.scss

@@ -7,7 +7,7 @@
   font-weight: 700;
   width: max-content;
   padding: 13px 22px;
-  margin-right: 50px;
+  margin-right: 20px;
   text-transform: uppercase;
   border-radius: 6px;
   text-align: center;

src/components/header/Header.js

@@ -1,10 +1,105 @@
-import React, {useContext} from "react";
+// import React, {useContext} from "react";
+// import Headroom from "react-headroom";
+// import "./Header.scss";
+// import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
+// import StyleContext from "../../contexts/StyleContext";
+// import {
+//   greeting,
+//   workExperiences,
+//   skillsSection,
+//   openSource,
+//   blogSection,
+//   talkSection,
+//   achievementSection,
+//   resumeSection
+// } from "../../portfolio";
+
+// function Header() {
+//   const {isDark} = useContext(StyleContext);
+//   const viewExperience = workExperiences.display;
+//   const viewOpenSource = openSource.display;
+//   const viewSkills = skillsSection.display;
+//   const viewAchievement = achievementSection.display;
+//   const viewBlog = blogSection.display;
+//   const viewTalks = talkSection.display;
+//   const viewResume = resumeSection.display;
+
+//   return (
+//     <Headroom>
+//       <header className={isDark ? "dark-menu header" : "header"}>
+//         <a href="/" className="logo">
+//           <span className="grey-color"> &lt;</span>
+//           <span className="logo-name">{greeting.username}</span>
+//           <span className="grey-color">/&gt;</span>
+//         </a>
+//         <input className="menu-btn" type="checkbox" id="menu-btn" />
+//         <label
+//           className="menu-icon"
+//           htmlFor="menu-btn"
+//           style={{color: "white"}}
+//         >
+//           <span className={isDark ? "navicon navicon-dark" : "navicon"}></span>
+//         </label>
+//         <ul className={isDark ? "dark-menu menu" : "menu"}>
+//           {viewSkills && (
+//             <li>
+//               <a href="#skills">Skills</a>
+//             </li>
+//           )}
+//           {viewExperience && (
+//             <li>
+//               <a href="#experience">Work Experiences</a>
+//             </li>
+//           )}
+//           {viewOpenSource && (
+//             <li>
+//               <a href="#opensource">Open Source</a>
+//             </li>
+//           )}
+//           {/* {viewAchievement && (
+//             <li>
+//               <a href="#achievements">Achievements</a>
+//             </li>
+//           )}
+//           {viewBlog && (
+//             <li>
+//               <a href="#blogs">Blogs</a>
+//             </li>
+//           )}
+//           {viewTalks && (
+//             <li>
+//               <a href="#talks">Talks</a> extra
+//             </li>
+//           )}
+//           {viewResume && (
+//             <li>
+//               <a href="#resume">Resume</a>
+//             </li>
+//           )} */}
+//           <li>
+//             <a href="#contact">Contact Me</a>
+//           </li>
+//           <li>
+//             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+//             <a>
+//               <ToggleSwitch />
+//             </a>
+//           </li>
+//         </ul>
+//       </header>
+//     </Headroom>
+//   );
+// }
+// export default Header;
+
+import React, {useContext, useRef} from "react";
 import Headroom from "react-headroom";
 import "./Header.scss";
 import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 import StyleContext from "../../contexts/StyleContext";
 import {
   greeting,
+  educationInfo,
   workExperiences,
   skillsSection,
   openSource,
@@ -23,6 +118,15 @@ function Header() {
   const viewBlog = blogSection.display;
   const viewTalks = talkSection.display;
   const viewResume = resumeSection.display;
+  const viewEducation = educationInfo.display;
+
+  const menuCheckboxRef = useRef(null);
+
+  const handleMenuItemClick = () => {
+    if (menuCheckboxRef.current) {
+      menuCheckboxRef.current.checked = false;
+    }
+  };
 
   return (
     <Headroom>
@@ -32,7 +136,12 @@ function Header() {
           <span className="logo-name">{greeting.username}</span>
           <span className="grey-color">/&gt;</span>
         </a>
-        <input className="menu-btn" type="checkbox" id="menu-btn" />
+        <input
+          className="menu-btn"
+          type="checkbox"
+          id="menu-btn"
+          ref={menuCheckboxRef} // Assign the ref here
+        />
         <label
           className="menu-icon"
           htmlFor="menu-btn"
@@ -42,52 +151,58 @@ function Header() {
         </label>
         <ul className={isDark ? "dark-menu menu" : "menu"}>
           {viewSkills && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#skills">Skills</a>
             </li>
           )}
+          {viewEducation && (
+            <li onClick={handleMenuItemClick}>
+              <a href="#education">Education</a>
+            </li>
+          )}
           {viewExperience && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#experience">Work Experiences</a>
             </li>
           )}
           {viewOpenSource && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#opensource">Open Source</a>
             </li>
           )}
           {viewAchievement && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#achievements">Achievements</a>
             </li>
           )}
-          {viewBlog && (
-            <li>
+          {/*{viewBlog && (
+            <li onClick={handleMenuItemClick}>
               <a href="#blogs">Blogs</a>
             </li>
           )}
           {viewTalks && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#talks">Talks</a>
             </li>
           )}
           {viewResume && (
-            <li>
+            <li onClick={handleMenuItemClick}>
               <a href="#resume">Resume</a>
             </li>
-          )}
-          <li>
+          )} */}
+          <li onClick={handleMenuItemClick}>
             <a href="#contact">Contact Me</a>
           </li>
           <li>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a>
-              <ToggleSwitch />
+              <ToggleSwitch handleMenuItemClick={handleMenuItemClick} />
             </a>
           </li>
         </ul>
       </header>
     </Headroom>
   );
 }
+
 export default Header;

src/containers/Main.js

@@ -57,14 +57,14 @@ const Main = () => {
             <Education />
             <WorkExperience />
             <Projects />
-            <StartupProject />
+            {/* <StartupProject /> */}
             <Achievement />
             <Blogs />
-            <Talks />
+            {/* <Talks />
             <Twitter />
-            <Podcast />
+            <Podcast /> */}
             <Profile />
-            <Footer />
+            {/* <Footer /> */}
             <ScrollToTopButton />
           </>
         )}

src/containers/greeting/Greeting.js

@@ -38,14 +38,19 @@ export default function Greeting() {
               </p>
               <SocialMedia />
               <div className="button-greeting-div">
-                <Button text="Contact me" href="#contact" />
+                <Button
+                  text="Book 1:1 Free Meeting"
+                  href="https://calendly.com/saadrasheeddev/businessgrowth"
+                  newTab={true}
+                />
                 {greeting.resumeLink && (
                   <a
                     href={require("./resume.pdf")}
-                    download="Resume.pdf"
+                    // download="Resume.pdf"
                     className="download-link-button"
+                    target="_blank"
                   >
-                    <Button text="Download my resume" />
+                    <Button text="View my resume" />
                   </a>
                 )}
               </div>

src/containers/greeting/Greeting.scss

@@ -96,7 +96,8 @@
 }
 @media (max-width: 768px) {
   .button-greeting-div {
-    justify-content: space-around;
+    display: block;
+    text-align: -webkit-center;
   }
   .greeting-text {
     font-size: 30px;