gg

public/index.html

@@ -5,23 +5,23 @@
     <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>Alpha's Portfolio | Italian translator</title>
+    <meta name="title" content="Alpha's Portfolio| Italian translator">
+    <meta name="description" content="My website that shows my work experiences and contacts.">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
-    <meta property="og:url" content="https://developerfolio.js.org/">
-    <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:url" content="https://alph4.eu.org/">
+    <meta property="og:title" content="Alpha's Portfolio| Italian translator">
+    <meta property="og:description" content="My website that shows my work experiences and contacts.">
     <!-- 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://developerfolio.js.org/">
-    <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">
+    <meta property="twitter:url" content="https://alph4.eu.org/">
+    <meta property="twitter:title" content="Alpha's Portfolio| Italian translator">
+    <meta property="twitter:description" content="My website that shows my work experiences and contacts.">
     <!-- Link to a hosted image -->
     <!-- <meta property="twitter:image" content=""> -->
 

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "DeveloperFolio",
-  "name": "DeveloperFolio",
+  "short_name": "AlphasPortfolio",
+  "name": "Alpha's Portfolio",
   "icons": [
     {
       "src": "/favicon.ico",

src/_globalColor.scss

@@ -88,3 +88,6 @@ $medium: #000;
 $stackoverflow: #f48024;
 $instagram: #c13584;
 $kaggle: #20beff;
+$crowdin: #000;
+$telegram: #28a8e9;
+$discord: #5865f2;

src/components/button/Button.scss

@@ -32,6 +32,17 @@
 .project-button > .main-button {
   margin-right: 0 !important;
 }
+
+.button-experience-div {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.button-experience-div > .main-button {
+  margin-right: 0 !important;
+}
+
 /* Media Query */
 @media (max-width: 768px) {
   .main-button {

src/components/experienceCard/ExperienceCard.js

@@ -1,6 +1,7 @@
 import React, {useState, createRef} from "react";
 import "./ExperienceCard.scss";
 import ColorThief from "colorthief";
+import Button from "../button/Button";
 
 export default function ExperienceCard({cardInfo, isDark}) {
   const [colorArrays, setColorArrays] = useState([]);
@@ -79,6 +80,14 @@ export default function ExperienceCard({cardInfo, isDark}) {
           <GetDescBullets descBullets={cardInfo.descBullets} isDark={isDark} />
         </ul>
       </div>
+      <div className="experience-card-footer">
+        <Button
+          text={"Check it out"}
+          className="button-experience-div"
+          href={cardInfo.url}
+          newTab={true}
+        />
+      </div>
     </div>
   );
 }

src/components/experienceCard/ExperienceCard.scss

@@ -5,6 +5,7 @@
   background-color: $lightBackground2;
   box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
   border-radius: 10px;
+  padding-bottom: 50px;
   border: 1px solid $lightBorder1;
 }
 
@@ -13,6 +14,7 @@
   background-color: $darkBackground;
   box-shadow: $lightBoxShadowDark 0px 10px 30px -15px;
   border-radius: 10px;
+  padding-bottom: 50px;
   border: 1px solid $lightBorder1;
 }
 
@@ -64,6 +66,11 @@
   justify-content: center;
 }
 
+.button-experience-div {
+  display: flex;
+  margin-top: 20px;
+}
+
 .experience-text-company {
   text-align: center;
   padding: 1.5rem;
@@ -114,13 +121,39 @@
 
 .experience-text-desc {
   text-align: center;
+  min-height: 100px;
 }
 
 .experience-text-details {
   padding: 1.5rem;
   margin-top: 2rem;
 }
 
+.experience-card-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.experience-card-footer span.button-experience-div {
+  background: $buttonColor;
+  color: $lightBackground3;
+  vertical-align: middle;
+  align-items: center;
+  border-radius: 4px;
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 2em;
+  justify-content: center;
+  white-space: nowrap;
+  line-height: 1.5;
+  margin: 0 0.5rem 0.5rem 0;
+  padding: 0 0.75em;
+  cursor: pointer;
+  transition: 0.2s ease-in;
+}
+
 /* Media Query */
 
 @media (max-width: 1380px) {
@@ -140,6 +173,12 @@
   }
 }
 
+@media (max-width: 768px) {
+  .button-experience-div {
+    justify-content: center;
+  }
+}
+
 @media (max-width: 768px) {
   .experience-text-role {
     font-size: 22px;

src/components/footer/Footer.js

@@ -1,17 +1,13 @@
 import React, {useContext} from "react";
 import "./Footer.scss";
 import {Fade} from "react-reveal";
-import emoji from "react-easy-emoji";
 import StyleContext from "../../contexts/StyleContext";
 
 export default function Footer() {
   const {isDark} = useContext(StyleContext);
   return (
     <Fade bottom duration={1000} distance="5px">
       <div className="footer-div">
-        <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
-          {emoji("Made with ❤️ by DeveloperFolio Team")}
-        </p>
         <p className={isDark ? "dark-mode footer-text" : "footer-text"}>
           Theme by{" "}
           <a href="https://github.com/saadpasta/developerFolio">

src/components/header/Header.js

@@ -5,6 +5,8 @@ import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 import StyleContext from "../../contexts/StyleContext";
 import {
   greeting,
+  donationInfo,
+  educationInfo,
   workExperiences,
   skillsSection,
   openSource,
@@ -16,14 +18,18 @@ import {
 
 function Header() {
   const {isDark} = useContext(StyleContext);
+  const viewEducation = educationInfo.display;
   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 viewDonation = donationInfo.display
   const viewResume = resumeSection.display;
 
+
   return (
     <Headroom>
       <header className={isDark ? "dark-menu header" : "header"}>
@@ -46,6 +52,11 @@ function Header() {
               <a href="#skills">Skills</a>
             </li>
           )}
+          {viewEducation && (
+            <li>
+              <a href="#education">Education</a>
+            </li>
+          )}
           {viewExperience && (
             <li>
               <a href="#experience">Work Experiences</a>
@@ -71,6 +82,10 @@ function Header() {
               <a href="#talks">Talks</a>
             </li>
           )}
+
+          {viewDonation && (
+            <li>
+              <a href="#donation">Donate</a>
           {viewResume && (
             <li>
               <a href="#resume">Resume</a>

src/components/socialMedia/SocialMedia.js

@@ -127,6 +127,42 @@ export default function socialMedia() {
           <span></span>
         </a>
       ) : null}
+
+      {socialMediaLinks.crowdin ? (
+        <a
+          href={socialMediaLinks.crowdin}
+          className="icon-button language"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fas fa-language"></i>
+          <span></span>
+        </a>
+      ) : null}
+
+      {socialMediaLinks.telegram ? (
+        <a
+          href={socialMediaLinks.telegram}
+          className="icon-button telegram"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fab fa-telegram"></i>
+          <span></span>
+        </a>
+      ) : null}
+
+      {socialMediaLinks.discord ? (
+        <a
+          href={socialMediaLinks.discord}
+          className="icon-button discord"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i className="fab fa-discord"></i>
+          <span></span>
+        </a>
+      ) : null}
     </div>
   );
 }

src/components/socialMedia/SocialMedia.scss

@@ -68,8 +68,23 @@
   background-color: $instagram;
 }
 
+.language i {
+  background-color: $crowdin;
+}
+
+.telegram i {
+  background-color: $telegram;
+}
+
+.discord i {
+  background-color: $discord;
+}
+
 /* Hover Transition */
 .twitter i:hover,
+.telegram i:hover,
+.language i:hover,
+.discord i:hover,
 .google i:hover,
 .gitlab i:hover,
 .github i:hover,

src/containers/Main.js

@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from "react";
 import Header from "../components/header/Header";
 import Greeting from "./greeting/Greeting";
+import Donation from "./donation/donation";
 import Skills from "./skills/Skills";
 import StackProgress from "./skillProgress/skillProgress";
 import WorkExperience from "./workExperience/WorkExperience";
@@ -63,6 +64,7 @@ const Main = () => {
             <Talks />
             <Twitter />
             <Podcast />
+            <Donation />
             <Profile />
             <Footer />
             <ScrollToTopButton />