Resolved the issues

README.md

@@ -132,6 +132,25 @@ Therefore, this part of portfolio is not customizable. But don't worry we have a
   - Now, if you see your website using `npm start`, it will directly open `home` rather than animating logo `splash` screen.
   - If you design your logo in future, then edit the files in `./src/components/Loader` and then revert `isSplash` to `true` in `src/portfolio.js`.
 
+
+
+### Opensource Page Optional 
+
+- Since everyone do not have an opensource contribution profile or they do not want to show the open source page.
+- Follow the steps mentioned below to remove the open source page.
+Steps:
+  1. Go to src/portfolio.js file
+  2. Inside portfolio.js file, go to line number 4, you will se the settings code:
+
+    ```javascript 
+    const settings = {
+      opensourcePageRequired: true, // Change this to 'false' if you do not want opensource page
+    };```
+
+- Change the opensourcePageRequired: false, if you want to remove the open source page.
+- In future, you can add the page again making it true once again
+
+
 # Choose Theme 🌈
 
 - You can take a look at `src/theme.js` file where all available themes are mentioned with respective color codes.

src/components/achievementCard/AchivementCard.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Button from "../../components/button/Button";
 
 export default function AchivementCard({ cardInfo }) {
   function openUrlInNewTab(url) {
@@ -8,18 +9,20 @@ export default function AchivementCard({ cardInfo }) {
 
   return (
     <div className="certificate-card">
-      <div className="certificate-image-div">
+      {/**
+
+       <div className="certificate-image-div">
         <img src={cardInfo.image} alt="PWA" className="card-image"></img>
       </div>
+
+    */}
       <div className="certificate-detail-div">
         <h5 className="card-title">{cardInfo.title}</h5>
         <p className="card-subtitle">{cardInfo.description}</p>
       </div>
       <div className="certificate-card-footer">
-        {cardInfo.footer.map((v, i) => {
-          return <p onClick={() => openUrlInNewTab(v.url)}>{v.name}</p>;
-        })}
-      </div>
+        <Button text="View" href={cardInfo.footer} newTab={true} className="btn btn-primary" theme={cardInfo.theme} />
+    </div>
     </div>
   );
 }

src/components/button/Button.css

@@ -21,12 +21,14 @@
 .main-button:hover {
   /* background-color: #ffffff; */
   /* color: black; */
+  color: white;
   transition: ease-in 0.3s;
 }
 .project-button {
   display: flex;
   justify-content: center;
   margin-top: 20px;
+
 }
 /* Media Query */
 @media (max-width: 768px) {
@@ -35,9 +37,21 @@
     padding: 12px 18px;
     margin-right: 0px;
   }
+  .main-button:hover {
+    /* background-color: #ffffff; */
+    /* color: black; */
+    color: white;
+    transition: ease-in 0.3s;
+  }
 }
 @media (max-width: 320px) {
   .main-button {
     font-size: 12px;
   }
+  .main-button:hover {
+    /* background-color: #ffffff; */
+    /* color: black; */
+    color: white;
+    transition: ease-in 0.3s;
+  }
 }

src/components/button/Button.js

@@ -3,13 +3,13 @@ import "./Button.css";
 
 const onMouseEnter = (event, color, bgColor) => {
   const el = event.target;
-  el.style.color = color;
+  el.style.color = 'grey';
   el.style.backgroundColor = bgColor;
 };
 
 const onMouseOut = (event, color, bgColor) => {
   const el = event.target;
-  el.style.color = color;
+  el.style.color = 'white';
   el.style.backgroundColor = bgColor;
 };
 

src/components/githubRepoCard/GithubRepoCard.css

@@ -4,6 +4,8 @@
   box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px;
   padding: 2rem;
   cursor: pointer;
+  min-height: 90%;
+  max-height: 90%;
 }
 .repo-card-div:hover {
   box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px;

src/components/header/Header.js

@@ -86,16 +86,26 @@ class Header extends Component {
                 </NavLink>
               </li>
               <li>
+
+              {
+                settings.opensourcePageRequired ? 
+
                 <NavLink
-                  to="/opensource"
-                  tag={Link}
-                  activeStyle={{ fontWeight: "bold" }}
-                  style={{ color: theme.text }}
-                  onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
-                  onMouseOut={(event) => onMouseOut(event)}
-                >
-                  Open Source
-                </NavLink>
+                to="/opensource"
+                tag={Link}
+                activeStyle={{ fontWeight: "bold" }}
+                style={{ color: theme.text }}
+                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
+                onMouseOut={(event) => onMouseOut(event)}
+              >
+                Open Source
+              </NavLink>
+
+              : 
+
+              ''
+              }
+
               </li>
               <li>
                 <NavLink

src/containers/Main.js

@@ -42,12 +42,24 @@ export default class Main extends Component {
                   <Education {...props} theme={this.props.theme} />
                 )}
               />
-              <Route
+
+              {
+
+                settings.opensourcePageRequired ? 
+                <Route
                 path="/opensource"
                 render={(props) => (
                   <Opensource {...props} theme={this.props.theme} />
                 )}
               />
+
+              :
+
+              ''
+
+              }
+
+
               <Route
                 path="/contact"
                 render={(props) => (
@@ -97,6 +109,22 @@ export default class Main extends Component {
                   <Education {...props} theme={this.props.theme} />
                 )}
               />
+
+
+              {
+                settings.opensourcePageRequired ? 
+                <Route
+                path="/opensource"
+                render={(props) => (
+                  <Opensource {...props} theme={this.props.theme} />
+                )}
+              />
+
+              : 
+              ''
+
+              }
+
               <Route
                 path="/opensource"
                 render={(props) => (

src/containers/achievement/Achievement.js

@@ -3,7 +3,7 @@ import "./Achievement.css";
 import AchivementCard from "../../components/achievementCard/AchivementCard";
 import { achievementSection } from "../../portfolio";
 
-export default function Achievement() {
+export default function Achievement({theme}) {
   // function openUrlInNewTab(url) {
   //   var win = window.open(url, "_blank");
   //   win.focus();
@@ -15,19 +15,23 @@ export default function Achievement() {
           <h1 className="heading achievement-heading">
             {achievementSection.title}
           </h1>
-          <p className="subTitle achievement-subtitle">
+          {/**
+
+            <p className="subTitle achievement-subtitle">
             {achievementSection.subtitle}
           </p>
+
+          */}
         </div>
         <div className="achievement-cards-div">
-          {achievementSection.achivementsCards.map((card) => {
+          {achievementSection.achievementCard.map((card) => {
             return (
               <AchivementCard
                 cardInfo={{
                   title: card.title,
                   description: card.subtitle,
-                  image: card.image,
                   footer: card.footerLink,
+                  theme: theme,
                 }}
               />
             );

src/containers/experienceAccordion/ExperienceAccordion.js

@@ -4,17 +4,47 @@ import "./ExperienceAccordion.css";
 import { Accordion, Panel } from "baseui/accordion";
 
 class ExperienceAccordion extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      Work: true,
+      Interships: true,
+      Volunteerships: true
+    }
+ }
+
   render() {
     const theme = this.props.theme;
     return (
       <div className="experience-accord">
-        <Accordion onChange={({ expanded }) => console.log(expanded)}>
-          {this.props.sections.map((section) => {
+        <Accordion onPanelChange={(key, onChange) => {console.log('Key: ' + key)}} >
+          {this.props.sections.map((section, index) => {
             return (
               <Panel
                 className="accord-panel"
                 title={section["title"]}
-                key={section["title"]}
+                key={index}
+                value={section["title"]}
+                expanded={
+                  index == 0 ? this.state.Work : (index == 1 ? this.state.Internships : false) 
+                }
+
+                onClick={(event) => {
+                  console.log('Event', event)
+
+                  switch(index) {
+                    case 0: {
+                      this.setState({Work: this.state.Word})
+                    }
+                    case 1: {
+                      this.setState({Interships: !this.state.Interships})
+                    }
+                    case 2: {
+                      this.setState({Volunteerships: !this.state.Volunteerships})
+                    }
+                  }
+                }}
               >
                 {section["experiences"].map((experience) => {
                   return (

src/containers/greeting/Greeting.js

@@ -18,7 +18,10 @@ export default function Greeting(props) {
                 {greeting.title}
               </h1>
               <h2 className="greeting-nickname" style={{ color: theme.text }}>
-                ( {greeting.nickname} )
+              {
+                greeting.nickname ? '( '+greeting.nickname+' )' : greeting.nickname
+              }
+
               </h2>
               <p
                 className="greeting-text-p subTitle"

src/pages/home/HomeComponent.js

@@ -4,6 +4,7 @@ import Greeting from "../../containers/greeting/Greeting";
 import Skills from "../../containers/skills/Skills";
 import Footer from "../../components/footer/Footer";
 import TopButton from "../../components/topButton/TopButton";
+import Achievement from "../../containers/achievement/Achievement";
 
 class Home extends Component {
   render() {
@@ -13,6 +14,7 @@ class Home extends Component {
         <Header theme={this.props.theme} />
         <Greeting theme={this.props.theme} />
         <Skills theme={this.props.theme} />
+        <Achievement theme={this.props.theme} />
         <Footer theme={this.props.theme} />
         <TopButton theme={this.props.theme} />
       </div>

src/portfolio.js

@@ -3,6 +3,7 @@
 // Website related settings
 const settings = {
   isSplash: true, // Change this to false if you don't want Splash screen.
+  opensourcePageRequired: true, // Change this to 'false' if you do not want opensource page
 };
 
 //SEO Related settings
@@ -83,6 +84,26 @@ const socialMediaLinks = [
   },
 ];
 
+const achievementSection = {
+  title: "Achievements",
+  achievementCard: [
+    {
+      title: "Google Explore ML Facilitator",
+      subtitle:
+        "Explore Machine Learning (ML) is a Google-sponsored program for university students to get started with Machine Learning. The curriculum offers 3 tracks of ML Content (Beginner, Intermediate, Advanced) and relies on university student facilitators to train other students on campus and to build opensource projects under this program.",
+
+      footerLink: "https://about.google/",
+    },
+    {
+      title: "Microsoft Student Partner",
+      subtitle:
+        "Microsoft Student Partner is a program for university students to lead the awareness and use of Cloud especially Azure tools in the development of their projects and startups. Under this program, I have organised hands on workshops and seminars to teach Cloud Computing concepts to students.",
+
+      footerLink: "https://www.microsoft.com/",
+    },
+  ],
+};
+
 const skills = {
   data: [
     {
@@ -675,6 +696,7 @@ export {
   greeting,
   socialMediaLinks,
   skills,
+  achievementSection,
   competitiveSites,
   degrees,
   certifications,