Revised, Updated and Improved Info, detail, texts and etc.

public/index.html

@@ -5,23 +5,19 @@
     <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">
-    <meta name="description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+    <title>Mahsa Eskandari</title>
+    <meta name="title" content="Mahsa Eskandari">
+    <meta name="description" content="Game Programmer">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://thedownsideup.github.io/">
-    <meta property="og:title" content="DeveloperFolio | Developer Portfolio Template">
-    <meta property="og:description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+    <meta property="og:title" content="Mahsa Eskandari">
+    <meta property="og:description" content="Game Programmer">
     <!-- Link to a hosted image -->
     <!-- <meta property="og:image" content=""> -->
 
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:url" content="https://thedownsideup.github.io/">
-    <meta property="twitter:title" content="DeveloperFolio | Developer Portfolio Template">
-    <meta property="twitter:description" content="Software Developer Portfolio Template that helps you showcase your work and skills as a software developer">
+
     <!-- Link to a hosted image -->
     <!-- <meta property="twitter:image" content=""> -->
 

src/components/footer/Footer.js

@@ -9,10 +9,10 @@ export default function Footer() {
   return (
     <Fade bottom duration={1000} distance="5px">
       <div className="footer-div">
-        <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
+		<p style={{display:'none'}} className={isDark ? "dark-mode footer-text" : "footer-text"}>
           {emoji("Made with ❤️ by DeveloperFolio Team")}
         </p>
-        <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
+        <p style={{display:'none'}} className={isDark ? "dark-mode footer-text" : "footer-text"}>
           Theme by{" "}
           <a href="https://github.com/saadpasta/developerFolio">
             developerFolio

src/components/githubProfileCard/GithubProfileCard.js

@@ -1,26 +1,65 @@
-import React from "react";
+import React, {useContext} from "react";
 import "./GithubProfileCard.scss";
 import SocialMedia from "../../components/socialMedia/SocialMedia";
-import {contactInfo, isHireable} from "../../portfolio";
+import {contactInfo} from "../../portfolio";
 import emoji from "react-easy-emoji";
 import {Fade} from "react-reveal";
+import StyleContext from "../../contexts/StyleContext";
 
 export default function GithubProfileCard({prof}) {
-  if (isHireable) {
+  const {isDark} = useContext(StyleContext);
+  if (prof.isHireable) {
     prof.hireable = "Yes";
   } else {
     prof.hireable = "No";
   }
   return (
     <Fade bottom duration={1000} distance="20px">
       <div className="main" id="contact">
-        <h1 className="prof-title">Reach Out to me!</h1>
+        <h1 className="prof-title">Reach Out to me ! ☎️</h1>
         <div className="row">
           <div className="main-content-profile">
             <div className="blog-header">
               <p className="subTitle blog-subtitle">{contactInfo.subtitle}</p>
             </div>
-            <h2 className="bio-text">"{emoji(String(prof.bio))}"</h2>
+			<div
+              className={
+                isDark ? "dark-mode contact-text-div" : "contact-text-div"
+              }
+            >
+              {contactInfo.number && (
+                <>
+                  <a
+                    className="contact-detail"
+                    href={"tel:" + contactInfo.number}
+                  >
+                    {contactInfo.number}
+                  </a>
+                  <br />
+                  <br />
+                </>
+              )}
+              <a
+                className="contact-detail-email"
+                href={"mailto:" + contactInfo.email_address}
+              >
+                {contactInfo.email_address}
+              </a>
+              <br />
+              <br />
+              <SocialMedia />
+            </div>
+			<div className="opp-div">
+              <span className="desc-prof-hirable">
+                Open for opportunities: {prof.hireable}
+              </span>
+            </div>
+
+			<div className="bio-text-container">
+			<h2 className="bio-text">{emoji(contactInfo.subtitle2)}</h2>
+			<h2 className="bio-text">{emoji(contactInfo.subtitle3)}</h2>
+            <h2 style={{display:'none'}} className="bio-text">"{emoji(String(prof.bio))}"</h2>
+            </div>
             {prof.location !== null && (
               <div className="location-div">
                 <span className="desc-prof">
@@ -41,12 +80,8 @@ export default function GithubProfileCard({prof}) {
                 </span>
               </div>
             )}
-            <div className="opp-div">
-              <span className="desc-prof">
-                Open for opportunities: {prof.hireable}
-              </span>
-            </div>
-            <SocialMedia />
+
+
           </div>
           <div className="image-content-profile">
             <img

src/components/githubProfileCard/GithubProfileCard.scss

@@ -45,12 +45,21 @@
 }
 
 .bio-text {
-  line-height: 30px;
+  line-height: 25px;
   font-size: 22px;
 }
 
+.bio-text-container{
+	margin-top: 30px;
+}
+
+.desc-prof-hirable {
+  line-height: 35px;
+  font-size: 19px;
+}
+
 .desc-prof {
-  line-height: 45px;
+  line-height: 15px;
   font-size: 19px;
 }
 

src/components/header/Header.js

@@ -51,7 +51,7 @@ function Header() {
           )}
           {viewOpenSource && (
             <li>
-              <a href="#opensource">Open Source</a>
+              <a href="#projects">Projects</a>
             </li>
           )}
           {viewAchievement && (

src/components/socialMedia/SocialMedia.js

@@ -8,18 +8,6 @@ export default function socialMedia() {
   }
   return (
     <div className="social-media-div">
-      {socialMediaLinks.github ? (
-        <a
-          href={socialMediaLinks.github}
-          className="icon-button github"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <i className="fab fa-github"></i>
-          <span></span>
-        </a>
-      ) : null}
-
       {socialMediaLinks.linkedin ? (
         <a
           href={socialMediaLinks.linkedin}
@@ -43,6 +31,20 @@ export default function socialMedia() {
           <span></span>
         </a>
       ) : null}
+
+	  {socialMediaLinks.github ? (
+        <a
+          href={socialMediaLinks.github}
+          className="icon-button github"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fab fa-github"></i>
+          <span></span>
+        </a>
+      ) : null}
+
+
 
       {socialMediaLinks.gitlab ? (
         <a

src/containers/Main.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React from "react";
 import Header from "../components/header/Header";
 import Greeting from "./greeting/Greeting";
 import Skills from "./skills/Skills";
@@ -12,32 +12,16 @@ import Footer from "../components/footer/Footer";
 import Talks from "./talks/Talks";
 import Podcast from "./podcast/Podcast";
 import Education from "./education/Education";
-import ScrollToTopButton from "./topbutton/Top";
+import Top from "./topbutton/Top";
 import Twitter from "./twitter-embed/twitter";
 import Profile from "./profile/Profile";
-import SplashScreen from "./splashScreen/SplashScreen";
-import {splashScreen} from "../portfolio";
 import {StyleProvider} from "../contexts/StyleContext";
 import {useLocalStorage} from "../hooks/useLocalStorage";
 import "./Main.scss";
 
 const Main = () => {
   const darkPref = window.matchMedia("(prefers-color-scheme: dark)");
   const [isDark, setIsDark] = useLocalStorage("isDark", darkPref.matches);
-  const [isShowingSplashAnimation, setIsShowingSplashAnimation] =
-    useState(true);
-
-  useEffect(() => {
-    if (splashScreen.enabled) {
-      const splashTimer = setTimeout(
-        () => setIsShowingSplashAnimation(false),
-        splashScreen.duration
-      );
-      return () => {
-        clearTimeout(splashTimer);
-      };
-    }
-  }, []);
 
   const changeTheme = () => {
     setIsDark(!isDark);
@@ -46,28 +30,22 @@ const Main = () => {
   return (
     <div className={isDark ? "dark-mode" : null}>
       <StyleProvider value={{isDark: isDark, changeTheme: changeTheme}}>
-        {isShowingSplashAnimation && splashScreen.enabled ? (
-          <SplashScreen />
-        ) : (
-          <>
-            <Header />
-            <Greeting />
-            <Skills />
-            <StackProgress />
-            <Education />
-            <WorkExperience />
-            <Projects />
-            <StartupProject />
-            <Achievement />
-            <Blogs />
-            <Talks />
-            <Twitter />
-            <Podcast />
-            <Profile />
-            <Footer />
-            <ScrollToTopButton />
-          </>
-        )}
+        <Header />
+        <Greeting />
+        <Skills />
+        <StackProgress />
+        <Education />
+        <WorkExperience />
+        <StartupProject />
+		<Projects />
+        <Achievement />
+        <Blogs />
+        <Talks />
+        <Twitter />
+        <Podcast />
+        <Profile />
+        <Footer />
+        <Top />
       </StyleProvider>
     </div>
   );

src/containers/contact/Contact.js

@@ -23,6 +23,24 @@ export default function Contact() {
               }
             >
               {contactInfo.subtitle}
+            </p>
+			<p
+              className={
+                isDark
+                  ? "dark-mode contact-subtitle"
+                  : "subTitle contact-subtitle"
+              }
+            >
+              {contactInfo.subtitle2}
+            </p>
+			<p
+              className={
+                isDark
+                  ? "dark-mode contact-subtitle"
+                  : "subTitle contact-subtitle"
+              }
+            >
+              {contactInfo.subtitle3}
             </p>
             <div
               className={

src/containers/contact/Contact.scss

@@ -20,8 +20,8 @@
 .contact-detail,
 .contact-detail-email {
   margin-top: 20px;
-  font-size: 40px;
-  font-weight: 400;
+  font-size: 30px;
+  font-weight: 500;
   color: $subTitle;
   text-decoration: none;
 }

src/containers/education/Education.scss

@@ -18,9 +18,12 @@
 }
 
 .education-card-container {
-  display: flex;
-  flex-direction: column;
+
+  flex-direction: row;
   padding-top: 20px;
+   display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+  gap: 1rem 1rem;
 }
 
 @media (max-width: 1380px) {

src/containers/projects/Projects.js

@@ -41,7 +41,7 @@ export default function Projects() {
   }
   if (
     !(typeof repo === "string" || repo instanceof String) &&
-    openSource.display
+    openSource.displayonlyopensource
   ) {
     return (
       <Suspense fallback={renderLoader()}>
@@ -60,7 +60,7 @@ export default function Projects() {
             })}
           </div>
           <Button
-            text={"More Projects"}
+            text={"See More"}
             className="project-button"
             href={socialMediaLinks.github}
             newTab={true}

src/containers/skillProgress/Progress.scss

@@ -20,7 +20,7 @@
   overflow: hidden;
 }
 .skill {
-  line-height: 3.5vw;
+  line-height: 2vw;
 }
 .skill-bars {
   font-size: 28px;

src/containers/skills/Skills.scss

@@ -26,6 +26,7 @@
 }
 .subTitle {
   color: $subTitle;
+  line-height: 1.05vw;
 }
 
 /* Media Query */