├── public ├── robots.txt ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── mstile-150x150.png ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── browserconfig.xml ├── manifest.json ├── index.html └── safari-pinned-tab.svg ├── src ├── assets │ ├── images │ │ ├── pwa.webp │ │ ├── airbnbLogo.png │ │ ├── nextuLogo.webp │ │ ├── pwaLogo.webp │ │ ├── quoraLogo.png │ │ ├── codeInLogo.webp │ │ ├── contactMail.webp │ │ ├── facebookLogo.png │ │ ├── harvardLogo.png │ │ ├── stanfordLogo.png │ │ ├── saayaHealthLogo.webp │ │ ├── googleAssistantLogo.webp │ │ ├── talksCardBack.svg │ │ ├── talksCardBackAlt.svg │ │ ├── googleAssistant.svg │ │ ├── skill.svg │ │ ├── jsFramework.svg │ │ └── programmer.svg │ └── fonts │ │ ├── Agustina.woff │ │ └── Montserrat-Regular.ttf ├── containers │ ├── Main.css │ ├── topbutton │ │ ├── Top.css │ │ └── Top.js │ ├── twitter-embed │ │ ├── twitter.css │ │ └── twitter.js │ ├── talks │ │ ├── Talks.css │ │ └── Talks.js │ ├── education │ │ ├── Education.js │ │ └── Education.css │ ├── achievement │ │ ├── Achievement.css │ │ └── Achievement.js │ ├── projects │ │ ├── Project.css │ │ └── Projects.js │ ├── podcast │ │ ├── Podcast.css │ │ └── Podcast.js │ ├── workExperience │ │ ├── WorkExperience.css │ │ └── WorkExperience.js │ ├── loading │ │ ├── Loading.js │ │ └── loading.css │ ├── StartupProjects │ │ ├── StartupProjects.css │ │ └── StartupProject.js │ ├── skills │ │ ├── Skills.css │ │ └── Skills.js │ ├── skillProgress │ │ ├── skillProgress.js │ │ └── Progress.css │ ├── blogs │ │ ├── Blogs.js │ │ └── Blog.css │ ├── contact │ │ ├── Contact.css │ │ └── Contact.js │ ├── greeting │ │ ├── Greeting.js │ │ └── Greeting.css │ ├── profile │ │ └── Profile.js │ └── Main.js ├── contexts │ └── StyleContext.js ├── components │ ├── footer │ │ ├── Footer.css │ │ └── Footer.js │ ├── button │ │ ├── Button.js │ │ └── Button.css │ ├── softwareSkills │ │ ├── SoftwareSkill.css │ │ └── SoftwareSkill.js │ ├── ToggleSwitch │ │ ├── ToggleSwitch.js │ │ └── ToggleSwitch.css │ ├── talkCard │ │ ├── TalkCard.js │ │ └── TalkCard.css │ ├── blogCard │ │ ├── BlogCard.js │ │ └── BlogCard.css │ ├── achievementCard │ │ ├── AchievementCard.js │ │ └── AchievementCard.css │ ├── socialMedia │ │ ├── SocialMedia.css │ │ └── SocialMedia.js │ ├── githubRepoCard │ │ ├── GithubRepoCard.css │ │ └── GithubRepoCard.js │ ├── experienceCard │ │ ├── ExperienceCard.js │ │ └── ExperienceCard.css │ ├── githubProfileCard │ │ ├── GithubProfileCard.js │ │ └── GithubProfileCard.css │ ├── header │ │ ├── Header.js │ │ └── Header.css │ └── educationCard │ │ ├── EducationCard.js │ │ └── EducationCard.css ├── App.js ├── App.test.js ├── App.css ├── index.js ├── index.css ├── serviceWorker.js ├── logo.svg └── portfolio.js ├── env.example ├── .gitignore ├── .github ├── ISSUE_TEMPLATE │ ├── feature-request---.md │ └── bug-report---.md ├── PULL_REQUEST_TEMPLATE │ └── pull_request_template.md └── workflows │ └── node.js.yml ├── Dockerfile ├── package.json └── .all-contributorsrc /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/images/pwa.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/pwa.webp -------------------------------------------------------------------------------- /src/assets/fonts/Agustina.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/fonts/Agustina.woff -------------------------------------------------------------------------------- /src/assets/images/airbnbLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/airbnbLogo.png -------------------------------------------------------------------------------- /src/assets/images/nextuLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/nextuLogo.webp -------------------------------------------------------------------------------- /src/assets/images/pwaLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/pwaLogo.webp -------------------------------------------------------------------------------- /src/assets/images/quoraLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/quoraLogo.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/public/android-chrome-384x384.png -------------------------------------------------------------------------------- /src/assets/images/codeInLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/codeInLogo.webp -------------------------------------------------------------------------------- /src/assets/images/contactMail.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/contactMail.webp -------------------------------------------------------------------------------- /src/assets/images/facebookLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/facebookLogo.png -------------------------------------------------------------------------------- /src/assets/images/harvardLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/harvardLogo.png -------------------------------------------------------------------------------- /src/assets/images/stanfordLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/stanfordLogo.png -------------------------------------------------------------------------------- /src/containers/Main.css: -------------------------------------------------------------------------------- 1 | .dark-mode { 2 | background-color: #171c28; 3 | color: white; 4 | transition: "0.1s"; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /src/assets/images/saayaHealthLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/saayaHealthLogo.webp -------------------------------------------------------------------------------- /src/assets/images/googleAssistantLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xditya/developerFolio/master/src/assets/images/googleAssistantLogo.webp -------------------------------------------------------------------------------- /src/contexts/StyleContext.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const StyleContext = React.createContext(); 4 | 5 | export const StyleProvider = StyleContext.Provider; 6 | export const StyleConsumer = StyleContext.Consumer; 7 | 8 | export default StyleContext; 9 | -------------------------------------------------------------------------------- /src/components/footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer-text { 2 | text-align: center; 3 | color: #868e96 !important; 4 | } 5 | 6 | .dark-mode { 7 | color: white !important; 8 | } 9 | 10 | .footer-div { 11 | margin-top: 2rem; 12 | padding-bottom: 1rem; 13 | } 14 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import Main from "./containers/Main"; 5 | 6 | function App() { 7 | return ( 8 |
9 |
10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #603cba 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/button/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Button.css"; 3 | 4 | export default function Button({ text, className, href, newTab }) { 5 | return ( 6 |
7 | 8 | {text} 9 | 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /env.example: -------------------------------------------------------------------------------- 1 | // README 2 | // This is only a .env example 3 | // Do not change this file, adding your GITHUB TOKEN here! 4 | // Use cp or mv (like this: cp env.example .env), then edit .env with your GITHUB TOKEN. 5 | // IMPORTANT: Don't forget to add to update your .gitignore with .env (to avoid public share your key!) 6 | 7 | REACT_APP_GITHUB_TOKEN = "YOUR GITHUB TOKEN HERE" 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | /build 11 | 12 | 13 | # misc 14 | .DS_Store 15 | .env 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/containers/topbutton/Top.css: -------------------------------------------------------------------------------- 1 | #topButton { 2 | visibility:hidden; 3 | position: fixed; 4 | bottom: 20px; 5 | right: 30px; 6 | z-index: 99; 7 | border: none; 8 | outline: none; 9 | background-color: #55198b; 10 | color: white; 11 | cursor: pointer; 12 | padding: 15px; 13 | border-radius: 15px; 14 | font-size: 25px; 15 | } 16 | 17 | #topButton:hover { 18 | background-color: #000; 19 | transition: all ease-in-out 0.2s; 20 | } 21 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | } 8 | 9 | .App-header { 10 | background-color: #282c34; 11 | min-height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: calc(10px + 2vmin); 17 | color: white; 18 | } 19 | 20 | .App-link { 21 | color: #09d3ac; 22 | } 23 | 24 | .subTitle { 25 | color: #868e96; 26 | } 27 | -------------------------------------------------------------------------------- /src/containers/twitter-embed/twitter.css: -------------------------------------------------------------------------------- 1 | .centerContent { 2 | text-align: center; 3 | margin: auto; 4 | display: block; 5 | margin: 0 auto; 6 | padding: 1.5rem; 7 | } 8 | .tw-main-div { 9 | margin-left: 15px; 10 | margin-right: 15px; 11 | margin-bottom: 15px; 12 | width: auto; 13 | padding: 1.5rem; 14 | } 15 | .twitter-component { 16 | width: auto; 17 | padding: 1.5rem; 18 | } 19 | 20 | .timeline-Header-title { 21 | font-size: 56px; 22 | font-weight: 100 !important; 23 | } 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /src/assets/images/talksCardBack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/containers/talks/Talks.css: -------------------------------------------------------------------------------- 1 | .talk-header-title { 2 | font-size: 56px; 3 | font-weight: 400; 4 | line-height: 0px; 5 | } 6 | 7 | .talk-cards-div { 8 | display: grid; 9 | grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); 10 | gap: 1rem 1rem; 11 | } 12 | 13 | .subTitle { 14 | color: #868e96; 15 | } 16 | 17 | @media (max-width: 768px) { 18 | .talk-header-title { 19 | font-size: 30px; 20 | text-align: center; 21 | } 22 | .talk-header-subtitle { 23 | font-size: 16px; 24 | line-height: normal; 25 | text-align: center; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Feature request \U0001F4A1" 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Summary 11 | A brief explanation of the feature. 12 | 13 | ### What's new? 14 | If the proposal involves a new component or a redesign of a previous component. 15 | 16 | ### Motivation 17 | Why are we doing this? What use cases does it support? What is the expected outcome? 18 | 19 | ### Additional context 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /src/containers/education/Education.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Education.css'; 3 | import EducationCard from '../../components/educationCard/EducationCard'; 4 | import { educationInfo } from '../../portfolio'; 5 | 6 | export default function Education() { 7 | return ( 8 |
9 |

Education

10 |
11 | {educationInfo.schools.map((school) => ( 12 | 13 | ))} 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/softwareSkills/SoftwareSkill.css: -------------------------------------------------------------------------------- 1 | .dev-icons { 2 | padding-left: 0; 3 | list-style: none; 4 | font-size: 3rem; 5 | margin-bottom: 0px; 6 | margin-top: 0px; 7 | text-align: center; 8 | } 9 | 10 | .software-skill-inline { 11 | display: inline-block; 12 | margin-right: 20px; 13 | margin-bottom: 20px; 14 | } 15 | 16 | .software-skill-inline > i { 17 | color: #868e96; 18 | } 19 | 20 | .software-skill-inline > i:hover { 21 | color: #645beb; 22 | } 23 | .software-skill-inline > p { 24 | color: #868e96; 25 | font-size: 10px; 26 | } 27 | .software-skill-inline > i:hover ~ p{ 28 | color: #645beb; 29 | } 30 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | Fixes # (issue) 6 | 7 | ## Type of change 8 | 9 | 10 | 11 | 12 | - [ ] Bug fix (non-breaking change which fixes an issue) 13 | - [ ] New feature (non-breaking change which adds functionality) 14 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 15 | - [ ] This change requires a documentation update 16 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Saad Pasta Portfolio", 3 | "name": "Saad Pasta Portfolio", 4 | "icons": [ 5 | { 6 | "src": "/favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "/android-chrome-192x192.png?v8=qAJ44G5Bm7", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "/android-chrome-384x384.png?v8=qAJ44G5Bm7", 17 | "type": "image/png", 18 | "sizes": "384x384" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#6c63ff", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/images/talksCardBackAlt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/containers/achievement/Achievement.css: -------------------------------------------------------------------------------- 1 | .achievement-heading { 2 | font-size: 56px; 3 | font-weight: 400; 4 | line-height: normal; 5 | margin: 0px; 6 | } 7 | .achievement-subtitle { 8 | text-transform: uppercase; 9 | margin: 0px; 10 | margin-bottom: 50px; 11 | } 12 | .subTitle { 13 | color: #868e96; 14 | } 15 | 16 | /* Media Query */ 17 | @media (max-width: 1380px) { 18 | .achievement-heading { 19 | font-size: 40px; 20 | } 21 | } 22 | @media (max-width: 768px) { 23 | .achievement-heading { 24 | font-size: 30px; 25 | text-align: center; 26 | } 27 | .achievement-subtitle { 28 | font-size: 16px; 29 | line-height: normal; 30 | text-align: center; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/ToggleSwitch.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useContext } from "react"; 2 | import StyleContext from "../../contexts/StyleContext"; 3 | import "./ToggleSwitch.css"; 4 | const ToggleSwitch = () => { 5 | const [isChecked, setChecked] = useState(false); 6 | const styleContext = useContext(StyleContext); 7 | 8 | return ( 9 | 20 | ); 21 | }; 22 | export default ToggleSwitch; 23 | -------------------------------------------------------------------------------- /src/containers/projects/Project.css: -------------------------------------------------------------------------------- 1 | .project-title { 2 | font-size: 52px; 3 | font-weight: 400; 4 | line-height: normal; 5 | } 6 | 7 | .startup-project-text img{ 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | 12 | .repo-cards-div-main { 13 | display: grid; 14 | grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 15 | gap: 1rem 1rem; 16 | } 17 | 18 | /* Media Query */ 19 | @media (max-width: 1380px) { 20 | .project-title { 21 | font-size: 40px; 22 | } 23 | } 24 | @media (max-width: 768px) { 25 | .project-title { 26 | font-size: 30px; 27 | text-align: center; 28 | } 29 | .repo-cards-div-main{ 30 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 31 | } 32 | } -------------------------------------------------------------------------------- /src/components/softwareSkills/SoftwareSkill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./SoftwareSkill.css"; 3 | import { skillsSection } from "../../portfolio"; 4 | 5 | export default function SoftwareSkill() { 6 | return ( 7 |
8 |
9 |
    10 | {skillsSection.softwareSkills.map(skills => { 11 | return ( 12 |
  • 13 | 14 |

    {skills.skillName}

    15 |
    • 16 | ); 17 | })} 18 |
19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | # This file is the main docker file configurations 2 | 3 | # Official Node JS runtime as a parent image 4 | FROM node:10.16.0-alpine 5 | 6 | # Set the working directory to ./app 7 | WORKDIR /app 8 | 9 | # Install app dependencies 10 | # A wildcard is used to ensure both package.json AND package-lock.json are copied 11 | # where available (npm@5+) 12 | COPY package.json ./ 13 | 14 | RUN apk add --no-cache git 15 | 16 | # Install any needed packages 17 | RUN npm install 18 | 19 | # Audit fix npm packages 20 | RUN npm audit fix 21 | 22 | # Bundle app source 23 | COPY . /app 24 | 25 | # Make port 3000 available to the world outside this container 26 | EXPOSE 3000 27 | 28 | # Run app.js when the container launches 29 | CMD ["npm", "start"] 30 | -------------------------------------------------------------------------------- /src/containers/podcast/Podcast.css: -------------------------------------------------------------------------------- 1 | .podcast-header-title { 2 | font-size: 56px; 3 | font-weight: 400; 4 | line-height: 0px; 5 | } 6 | 7 | .podcast { 8 | width: 600px; 9 | } 10 | 11 | .podcast-main-div { 12 | display: grid; 13 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 14 | gap: 1rem 1rem; 15 | } 16 | .subTitle { 17 | color: #868e96; 18 | } 19 | 20 | @media (max-width: 768px) { 21 | .podcast-header-title { 22 | font-size: 30px; 23 | text-align: center; 24 | } 25 | .podcast-header-subtitle { 26 | font-size: 16px; 27 | line-height: normal; 28 | text-align: center; 29 | } 30 | 31 | .podcast { 32 | width: 300px; 33 | } 34 | .podcast-main-div { 35 | text-align: center; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/containers/workExperience/WorkExperience.css: -------------------------------------------------------------------------------- 1 | .experience-cards-div { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); 4 | gap: 1rem 1rem; 5 | } 6 | 7 | .experience-heading { 8 | font-size: 56px; 9 | font-weight: 400; 10 | } 11 | 12 | .experience-container { 13 | display: flex; 14 | width: 90%; 15 | padding: 20px 10px; 16 | margin: 0px auto; 17 | margin-top: 2rem; 18 | } 19 | 20 | .experience-container>* { 21 | flex: 1; 22 | } 23 | 24 | /* Media Query */ 25 | 26 | @media (max-width: 1380px) { 27 | .experience-heading { 28 | font-size: 40px; 29 | } 30 | } 31 | 32 | @media (max-width: 768px) { 33 | .experience-heading { 34 | font-size: 30px; 35 | text-align: center; 36 | } 37 | } -------------------------------------------------------------------------------- /src/assets/images/googleAssistant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Footer.css"; 3 | import { Fade } from "react-reveal"; 4 | import emoji from "react-easy-emoji"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | 7 | export default function Footer() { 8 | const { isDark } = useContext(StyleContext); 9 | return ( 10 | 11 |
12 |

13 | {emoji("Made with ❤️ by Saad Pasta")} 14 |

15 |

16 | Theme by{" "} 17 | 18 | developerFolio 19 | 20 |

21 |
22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /src/containers/loading/Loading.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./loading.css"; 3 | 4 | export default function Loading() { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/talkCard/TalkCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./TalkCard.css"; 3 | 4 | export default function TalkCard({ talkDetails }) { 5 | return ( 6 |
7 |
8 |
11 |
12 |
{talkDetails.title}
13 |

{talkDetails.subtitle}

14 | 15 | 23 |
24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Agustina Regular'; 3 | font-style: normal; 4 | font-weight: normal; 5 | src: local('Agustina Regular'), url('./assets/fonts/Agustina.woff') format('woff'); 6 | font-display: swap; 7 | } 8 | @font-face { 9 | font-family: 'Montserrat'; 10 | src: local('Montserrat'), url('./assets/fonts/Montserrat-Regular.ttf') format('woff'); 11 | font-display: swap; 12 | } 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 15 | monospace; 16 | } 17 | html, 18 | body { 19 | scroll-behavior: smooth; 20 | } 21 | body { 22 | margin: 0; 23 | font: 19px / 23px Montserrat, "Montserrat", sans-serif; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | /* Media Query */ 28 | @media (max-width: 1380px) { 29 | html, 30 | body { 31 | font-size: 16px; 32 | line-height: normal; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/containers/StartupProjects/StartupProjects.css: -------------------------------------------------------------------------------- 1 | .startup-projects-main { 2 | display: flex; 3 | } 4 | 5 | .startup-projects-main > * { 6 | flex: 1; 7 | margin-bottom: 30px; 8 | } 9 | 10 | .starup-project-image > img { 11 | max-width: 100%; 12 | height: auto; 13 | } 14 | 15 | .project-card-head { 16 | color: rgb(36, 41, 46); 17 | font-size: 25px; 18 | font-weight: 700; 19 | letter-spacing: -0.5px; 20 | margin: 0px; 21 | } 22 | 23 | .startup-project-text { 24 | display: flex; 25 | justify-content: space-between; 26 | } 27 | 28 | .project-card-description { 29 | color: rgb(88, 96, 105); 30 | } 31 | .subTitle { 32 | color: #868e96; 33 | } 34 | 35 | .saaya-health-div, 36 | .nextu-div { 37 | cursor: pointer; 38 | } 39 | 40 | @media (max-width: 768px) { 41 | .starup-project-image { 42 | display: none; 43 | } 44 | .project-subtitle { 45 | font-size: 16px; 46 | text-align: center; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/blogCard/BlogCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./BlogCard.css"; 3 | 4 | export default function BlogCard({ blog, isDark }) { 5 | function openUrlInNewTab(url) { 6 | if (url !== undefined) { 7 | var win = window.open(url, "_blank"); 8 | win.focus(); 9 | } 10 | } 11 | 12 | return ( 13 |
openUrlInNewTab(blog.url)}> 14 |
15 | 19 |

20 | {blog.title} 21 |

22 |

23 | {blog.description} 24 |

25 |
26 |
→
27 |
28 | 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/containers/education/Education.css: -------------------------------------------------------------------------------- 1 | .education-heading { 2 | font-size: 56px; 3 | font-weight: 400; 4 | } 5 | 6 | .education-section { 7 | display: flex; 8 | flex-direction: column; 9 | width: 90%; 10 | padding: 20px 0px; 11 | margin: 0px auto; 12 | margin-top: 2rem; 13 | } 14 | 15 | .education-section > * { 16 | flex: 1; 17 | margin-bottom: 30px; 18 | } 19 | 20 | .education-card-container { 21 | display: flex; 22 | flex-direction: column; 23 | padding-top: 20px; 24 | } 25 | 26 | @media (max-width: 1380px) { 27 | .education-card-container { 28 | padding-top: 0px; 29 | } 30 | .education-heading { 31 | font-size: 40px; 32 | } 33 | .education-text-subtitle { 34 | font-size: 18px; 35 | text-align: center; 36 | } 37 | } 38 | 39 | @media (max-width: 768px) { 40 | .education-card-container { 41 | padding-top: 0px; 42 | } 43 | .education-heading { 44 | font-size: 30px; 45 | text-align: center; 46 | } 47 | .education-text-subtitle { 48 | font-size: 16px; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/button/Button.css: -------------------------------------------------------------------------------- 1 | .main-button { 2 | background-color: #55198b; 3 | border: solid 1px #55198b; 4 | color: white; 5 | font-weight: 700; 6 | width: max-content; 7 | padding: 13px 22px; 8 | margin-right: 50px; 9 | text-transform: uppercase; 10 | border-radius: 6px; 11 | text-align: center; 12 | text-decoration: none; 13 | display: block; 14 | margin-top: 20px; 15 | font-size: 16px; 16 | cursor: pointer; 17 | transition: all .3s ease-in-out 0s; 18 | } 19 | .main-button:hover { 20 | background-color: #ffffff; 21 | color: #55198b; 22 | transition: all .3s ease 0s; 23 | transform: translateY(-3px); 24 | } 25 | .project-button{ 26 | display: flex; 27 | justify-content: center; 28 | margin-top: 20px; 29 | } 30 | .project-button > .main-button{ 31 | margin-right: 0 !important; 32 | } 33 | /* Media Query */ 34 | @media (max-width: 768px) { 35 | .main-button { 36 | font-size: 15px; 37 | padding: 12px 18px; 38 | margin-right: 0px; 39 | } 40 | } 41 | @media (max-width: 320px) { 42 | .main-button { 43 | font-size: 12px; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/containers/skills/Skills.css: -------------------------------------------------------------------------------- 1 | .skills-main-div { 2 | display: flex; 3 | } 4 | 5 | .skills-text-div { 6 | margin-left: 50px; 7 | } 8 | 9 | .skills-main-div > * { 10 | flex: 1; 11 | margin-bottom: 30px; 12 | } 13 | 14 | .skills-image-div > img { 15 | max-width: 100%; 16 | height: auto; 17 | } 18 | 19 | .skills-heading { 20 | font-size: 56px; 21 | font-weight: 400; 22 | } 23 | .subTitle { 24 | color: #868e96; 25 | } 26 | 27 | /* Media Query */ 28 | @media (max-width: 1380px) { 29 | .skills-heading { 30 | font-size: 40px; 31 | } 32 | } 33 | @media (max-width: 768px) { 34 | .skills-heading { 35 | font-size: 30px; 36 | text-align: center; 37 | } 38 | .greeting-text-p { 39 | font-size: 16px; 40 | line-height: normal; 41 | } 42 | .skills-main-div { 43 | flex-direction: column; 44 | } 45 | .skills-text-div { 46 | margin-left: 0px; 47 | margin: 20px; 48 | } 49 | .skills-text { 50 | font-size: 16px; 51 | } 52 | .skills-text-subtitle { 53 | font-size: 16px; 54 | text-align: center; 55 | } 56 | .skills-image-div { 57 | /* display: none; */ 58 | order: 2; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/containers/topbutton/Top.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Top.css"; 3 | 4 | 5 | export default function Top() { 6 | function TopEvent() { 7 | document.body.scrollTop = 0; // For Safari 8 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 9 | } 10 | // When the user scrolls down 20px from the top of the document, show the button 11 | function scrollFunction() { 12 | if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 13 | document.getElementById("topButton").style.visibility = "visible"; 14 | } else { 15 | document.getElementById("topButton").style.visibility = "hidden"; 16 | } 17 | } 18 | window.onscroll = function() {scrollFunction();}; 19 | window.onload = function() {scrollFunction();}; //To make sure that this button is not visible at starting. 20 | // When the user clicks on the button, scroll to the top of the document 21 | return ( 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://developerfolio.js.org/", 3 | "name": "saadpasta.github.io", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "@apollo/react-hooks": "^3.1.4", 8 | "apollo-boost": "^0.4.4", 9 | "colorthief": "^2.3.0", 10 | "gh-pages": "^2.1.1", 11 | "graphql": "^14.5.8", 12 | "react": "^16.10.2", 13 | "react-dom": "^16.10.2", 14 | "react-easy-emoji": "^1.3.0", 15 | "react-headroom": "^3.0.0", 16 | "react-reveal": "^1.2.2", 17 | "react-scripts": "3.2.0", 18 | "react-twitter-embed": "3.0.3" 19 | }, 20 | "scripts": { 21 | "predeploy": "npm run build", 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "deploy": "gh-pages -b master -d build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /.github/workflows/node.js.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | env: 3 | CI: false 4 | REACT_APP_GITHUB_TOKEN: ${{ secrets.OPEN_SOURCE_TOKEN }} # Use the generated personal access token and add it to repository secrets with the name OPEN_SOURCE_TOKEN 5 | on: 6 | push: 7 | branches: 8 | - master 9 | jobs: 10 | build-and-deploy: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 🛎️ 14 | uses: actions/checkout@v2 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly. 15 | with: 16 | persist-credentials: false 17 | 18 | - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. 19 | run: | 20 | npm install 21 | npm run build 22 | 23 | - name: Deploy 🚀 24 | uses: JamesIves/github-pages-deploy-action@releases/v3 25 | with: 26 | GITHUB_TOKEN : ${{ secrets.GITHUB_TOKEN }} # This is provided by GitHub. 27 | BRANCH: gh-pages # The branch the action should deploy to. 28 | FOLDER: build # The folder the action should deploy. 29 | -------------------------------------------------------------------------------- /src/components/achievementCard/AchievementCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./AchievementCard.css"; 3 | 4 | export default function AchievementCard({ cardInfo, isDark }) { 5 | function openUrlInNewTab(url) { 6 | var win = window.open(url, "_blank"); 7 | win.focus(); 8 | } 9 | 10 | return ( 11 |
12 |
13 | PWA 14 |
15 |
16 |
17 | {cardInfo.title} 18 |
19 |

20 | {cardInfo.description} 21 |

22 |
23 |
24 | {cardInfo.footer.map((v, i) => { 25 | return ( 26 | openUrlInNewTab(v.url)} 29 | > 30 | {v.name} 31 | 32 | ); 33 | })} 34 |
35 |
36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/containers/podcast/Podcast.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Podcast.css"; 3 | import { podcastSection } from "../../portfolio"; 4 | import { Fade } from "react-reveal"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | 7 | export default function Podcast() { 8 | const { isDark } = useContext(StyleContext); 9 | return ( 10 | 11 |
12 |
13 |

{podcastSection.title}

14 |

21 | {podcastSection.subtitle} 22 |

23 |
24 |
25 | {podcastSection.podcast.map((podcastLink) => { 26 | return ( 27 |
28 | 34 |
35 | ); 36 | })} 37 |
38 |
39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Bug Report \U0001F41E" 3 | about: 'Something isn''t working as expected? Here is the right place to report. ' 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 15 | 16 | 17 | **Describe the bug** 18 | A clear and concise description of what the bug is. 19 | 20 | **To Reproduce** 21 | Steps to reproduce the behavior: 22 | 1. Go to '...' 23 | 2. Click on '....' 24 | 3. Scroll down to '....' 25 | 4. See error 26 | 27 | **Expected behavior** 28 | A clear and concise description of what you expected to happen. 29 | 30 | **Is this responsiveness Issue** 31 | YES/NO 32 | 33 | **Screenshots** 34 | If applicable, add screenshots to help explain your problem. 35 | 36 | **Desktop (please complete the following information):** 37 | - OS: [e.g. iOS] 38 | - Browser [e.g. chrome, safari] 39 | - Version [e.g. 22] 40 | 41 | **Smartphone (please complete the following information):** 42 | - Device: [e.g. iPhone6] 43 | - OS: [e.g. iOS8.1] 44 | - Browser [e.g. stock browser, safari] 45 | - Version [e.g. 22] 46 | 47 | **Additional context** 48 | Add any other context about the problem here. 49 | -------------------------------------------------------------------------------- /src/containers/skillProgress/skillProgress.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Progress.css"; 3 | import { techStack } from "../../portfolio"; 4 | import { Fade } from "react-reveal"; 5 | 6 | export default function StackProgress() { 7 | if(techStack.viewSkillBars){ 8 | return ( 9 | 10 |
11 | 12 |
13 |

Proficiency

14 | {techStack.experience.map((exp) => { 15 | const progressStyle = { 16 | width: exp.progressPercentage 17 | }; 18 | return ( 19 |
20 |

{exp.Stack}

21 |
22 | 23 |
24 |
25 | ); 26 | })} 27 |
28 | 29 |
30 | Skills 31 |
32 | 33 |
34 | 35 | ); 36 | } 37 | return null; 38 | } 39 | -------------------------------------------------------------------------------- /src/containers/talks/Talks.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Talks.css"; 3 | import TalkCard from "../../components/talkCard/TalkCard"; 4 | import { talkSection } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | 8 | export default function Talks() { 9 | const { isDark } = useContext(StyleContext); 10 | return ( 11 | 12 |
13 |
14 |

{talkSection.title}

15 |

22 | {talkSection.subtitle} 23 |

24 | {talkSection.talks.map((talk) => { 25 | return ( 26 | 36 | ); 37 | })} 38 |
39 |
40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/containers/blogs/Blogs.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Blog.css"; 3 | import BlogCard from "../../components/blogCard/BlogCard"; 4 | import { blogSection } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | export default function Blogs() { 8 | const { isDark } = useContext(StyleContext); 9 | return ( 10 | 11 |
12 |
13 |

{blogSection.title}

14 |

19 | {blogSection.subtitle} 20 |

21 |
22 |
23 |
24 | {blogSection.blogs.map((blog) => { 25 | return ( 26 | 35 | ); 36 | })} 37 |
38 |
39 |
40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/containers/blogs/Blog.css: -------------------------------------------------------------------------------- 1 | /*Blog Cards Layout*/ 2 | .square { 3 | width: 440px; 4 | height: 430px; 5 | background: white; 6 | border-radius: 4px; 7 | box-shadow: 0px 20px 50px #d9dbdf; 8 | -webkit-transition: all 0.3s ease; 9 | -o-transition: all 0.3s ease; 10 | transition: all 0.3s ease; 11 | margin-top: 30px; 12 | } 13 | 14 | .square:hover { 15 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 16 | } 17 | 18 | .blog-header-text { 19 | font-size: 56px; 20 | font-weight: 400; 21 | } 22 | 23 | .blog-subtitle { 24 | text-transform: uppercase; 25 | } 26 | .blog-main-div > * { 27 | flex: 1; 28 | margin-bottom: 30px; 29 | } 30 | .blog-main-div { 31 | display: flex; 32 | } 33 | .blog-image-div > img { 34 | max-width: 100%; 35 | height: auto; 36 | } 37 | .blog-text-div { 38 | display: grid; 39 | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 40 | gap: 32px; 41 | } 42 | .subTitle { 43 | color: #868e96; 44 | } 45 | 46 | /* Media Query */ 47 | @media (max-width: 1380px) { 48 | .blog-header-text { 49 | font-size: 40px; 50 | } 51 | } 52 | @media (max-width: 768px) { 53 | .blog-header-text { 54 | font-size: 30px; 55 | text-align: center; 56 | } 57 | .blog-subtitle { 58 | font-size: 16px; 59 | line-height: normal; 60 | text-align: center; 61 | } 62 | } 63 | 64 | @media screen and (max-width: 480px) and (min-width: 300px) { 65 | .blog-text-div { 66 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/containers/skillProgress/Progress.css: -------------------------------------------------------------------------------- 1 | .meter { 2 | height: 20px; 3 | position: relative; 4 | background: rgb(243, 239, 239); 5 | -moz-border-radius: 25px; 6 | -webkit-border-radius: 25px; 7 | border-radius: 25px; 8 | } 9 | .meter > span { 10 | display: block; 11 | height: 100%; 12 | border-top-right-radius: 6px; 13 | border-bottom-right-radius: 6px; 14 | border-top-left-radius: 20px; 15 | border-bottom-left-radius: 20px; 16 | background-color: #aaa5ff; 17 | position: relative; 18 | overflow: hidden; 19 | } 20 | .skill{ 21 | line-height: 3.5vw; 22 | } 23 | .skill-bars{ 24 | font-size: 28px; 25 | width: 40%; 26 | } 27 | .skills-container { 28 | display: flex; 29 | width: 90%; 30 | padding: 20px 10px; 31 | margin: 0px auto; 32 | margin-top: 2rem; 33 | } 34 | .skills-container > * { 35 | flex: 1; 36 | margin-bottom: 30px; 37 | } 38 | .skills-image > img { 39 | margin-left: 80px; 40 | max-width: 90%; 41 | height: auto; 42 | } 43 | 44 | /* Media Query */ 45 | 46 | @media (max-width: 1456px) { 47 | .skills-bar { 48 | line-height: 4rem; 49 | } 50 | .skills-image { 51 | display: none; 52 | order: 2; 53 | } 54 | } 55 | 56 | @media (max-width: 768px) { 57 | .skills-container { 58 | flex-direction: column 59 | } 60 | .skills-bar { 61 | line-height: 3rem; 62 | margin: 20px; 63 | } 64 | .skills-image { 65 | display: none; 66 | order: 2; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/components/socialMedia/SocialMedia.css: -------------------------------------------------------------------------------- 1 | .social-media-div { 2 | font-size: 2em; 3 | } 4 | 5 | .icon-button { 6 | margin-bottom: 10px; 7 | } 8 | 9 | .icon-button i { 10 | color: white; 11 | border-radius: 2.6rem; 12 | cursor: pointer; 13 | display: inline-block; 14 | font-size: 1.3rem; 15 | height: 2.6rem; 16 | line-height: 2.6rem; 17 | margin: 0 5px; 18 | position: relative; 19 | text-align: center; 20 | -webkit-user-select: none; 21 | -moz-user-select: none; 22 | -ms-user-select: none; 23 | user-select: none; 24 | width: 2.6rem; 25 | margin-bottom: 10px; 26 | transition: 0.2s ease-in; 27 | } 28 | 29 | .facebook i { 30 | background-color: #3b5998; 31 | } 32 | 33 | .linkedin i { 34 | background-color: #0e76a8; 35 | } 36 | 37 | .github i { 38 | background-color: #333; 39 | } 40 | 41 | .gitlab i { 42 | background-color: #fca326; 43 | } 44 | 45 | .google i { 46 | background-color: #ea4335; 47 | } 48 | 49 | .twitter i { 50 | background-color: #1da1f2; 51 | } 52 | 53 | .medium i { 54 | background-color: #000; 55 | } 56 | 57 | .stack-overflow i { 58 | background-color: #f48024; 59 | } 60 | 61 | .instagram i { 62 | background-color: #c13584; 63 | } 64 | 65 | /* Hover Transition */ 66 | .twitter i:hover, 67 | .google i:hover, 68 | .gitlab i:hover, 69 | .github i:hover, 70 | .linkedin i:hover, 71 | .facebook i:hover, 72 | .instagram i:hover, 73 | .stack-overflow i:hover, 74 | .medium i:hover{ 75 | background-color: black; 76 | } 77 | 78 | /* Media Query */ 79 | @media (max-width: 768px) { 80 | .social-media-div { 81 | text-align: center; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/containers/contact/Contact.css: -------------------------------------------------------------------------------- 1 | .contact-div-main { 2 | display: flex; 3 | } 4 | 5 | .dark-mode a { 6 | color: white; 7 | } 8 | 9 | .contact-div-main > * { 10 | flex: 1; 11 | } 12 | 13 | .contact-title { 14 | font-size: 65px; 15 | font-weight: 400; 16 | } 17 | 18 | .contact-detail, 19 | .contact-detail-email { 20 | margin-top: 20px; 21 | font-size: 40px; 22 | font-weight: 400; 23 | color: #868e96; 24 | text-decoration: none; 25 | } 26 | 27 | .contact-detail:hover, 28 | .contact-detail-email:hover { 29 | color: black; 30 | text-shadow: 2px 1px 2px #b5b5b5; 31 | transition: all 0.3s; 32 | } 33 | 34 | .contact-subtitle { 35 | text-transform: uppercase; 36 | } 37 | 38 | .contact-text-div { 39 | margin-top: 1.5rem; 40 | } 41 | 42 | .contact-margin-top { 43 | margin-top: 4rem; 44 | } 45 | 46 | .contact-image-div > img { 47 | max-width: 100%; 48 | height: auto; 49 | margin-left: 1.5rem; 50 | margin-top: -4rem; 51 | } 52 | 53 | /* Media Query */ 54 | @media (max-width: 1380px), (max-width: 768px) { 55 | .contact-title { 56 | font-size: 56px; 57 | font-weight: 400; 58 | text-align: center; 59 | } 60 | 61 | .contact-title { 62 | font-size: 40px; 63 | text-align: center; 64 | } 65 | 66 | .contact-subtitle { 67 | font-size: 16px; 68 | line-height: normal; 69 | text-align: center; 70 | } 71 | 72 | .contact-text-div { 73 | text-align: center; 74 | margin-top: 1.5rem; 75 | } 76 | 77 | .contact-detail, 78 | .contact-detail-email { 79 | font-size: 20px; 80 | } 81 | 82 | .contact-image-div { 83 | display: none; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/containers/StartupProjects/StartupProject.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./StartupProjects.css"; 3 | import { bigProjects } from "../../portfolio"; 4 | import { Fade } from "react-reveal"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | 7 | export default function StartupProject() { 8 | function openProjectInNewWindow(url) { 9 | var win = window.open(url, "_blank"); 10 | win.focus(); 11 | } 12 | const { isDark } = useContext(StyleContext); 13 | return ( 14 | 15 |
16 |
17 |

{bigProjects.title}

18 |

25 | {bigProjects.subtitle} 26 |

27 |
28 |
29 | {bigProjects.projects.map((project) => { 30 | return ( 31 |
openProjectInNewWindow(project.link)} 34 | > 35 | Saad Working 36 |
37 | ); 38 | })} 39 |
40 |
41 |
42 |
43 |
44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/components/achievementCard/AchievementCard.css: -------------------------------------------------------------------------------- 1 | .card-image { 2 | max-width: 100%; 3 | height: auto; 4 | width: 250px; 5 | } 6 | .card-title { 7 | color: #000000; 8 | font-size: 22px; 9 | line-height: 24px; 10 | font-weight: 700; 11 | margin: 15px 0 0 0; 12 | } 13 | .card-subtitle { 14 | color: #666666; 15 | font-size: 17px; 16 | line-height: 1.5rem; 17 | } 18 | .certificate-card { 19 | background-color: rgb(255, 255, 255); 20 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px; 21 | padding: 1.5rem; 22 | border-radius: 10px; 23 | border: 1px solid rgba(211, 211, 211, 0.397); 24 | } 25 | .certificate-detail-div { 26 | text-align: center; 27 | } 28 | .certificate-card:hover { 29 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 30 | } 31 | .certificate-image-div { 32 | position: relative; 33 | height: 250px; 34 | overflow: hidden; 35 | text-align: center; 36 | } 37 | .achievement-cards-div { 38 | display: grid; 39 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 40 | gap: 1rem 1rem; 41 | } 42 | .certificate-card-footer { 43 | display: flex; 44 | align-items: center; 45 | flex-wrap: wrap; 46 | justify-content: center; 47 | } 48 | .certificate-card-footer span.certificate-tag { 49 | background: #55198b; 50 | color: #f5f2f4; 51 | vertical-align: middle; 52 | align-items: center; 53 | border-radius: 4px; 54 | display: inline-flex; 55 | font-size: 0.75rem; 56 | height: 2em; 57 | justify-content: center; 58 | white-space: nowrap; 59 | line-height: 1.5; 60 | margin: 0 0.5rem 0.5rem 0; 61 | padding: 0 0.75em; 62 | cursor: pointer; 63 | transition: 0.2s ease-in; 64 | } 65 | span.certificate-tag:hover { 66 | background: #8c43ce; 67 | } 68 | -------------------------------------------------------------------------------- /src/containers/twitter-embed/twitter.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, setState, useContext } from "react"; 2 | import "./twitter.css"; 3 | import Loading from "../loading/Loading"; 4 | import { TwitterTimelineEmbed } from "react-twitter-embed"; 5 | import { twitterDetails } from "../../portfolio"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | 8 | const renderLoader = () => ; 9 | const cantDisplayError = 10 | "

Can't load? Check privacy protection settings

"; 11 | 12 | function timeOut() { 13 | setTimeout(function () { 14 | if (!document.getElementById("twitter").innerHTML.includes("iframe")) { 15 | document.getElementById("twitter").innerHTML = cantDisplayError; 16 | } 17 | }, 10000); 18 | } 19 | var widthScreen = window.screen.width; 20 | 21 | export default function Twitter() { 22 | const { isDark } = useContext(StyleContext); 23 | 24 | if (twitterDetails.userName) { 25 | return ( 26 | 27 |
28 |
29 | 41 |
42 |
43 | 44 | ); 45 | } else { 46 | return null; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/components/githubRepoCard/GithubRepoCard.css: -------------------------------------------------------------------------------- 1 | .repo-card-div { 2 | color: rgb(88, 96, 105); 3 | background-color: rgb(255, 255, 255); 4 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px; 5 | padding: 2rem; 6 | cursor: pointer; 7 | } 8 | .repo-card-div:hover { 9 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 10 | } 11 | 12 | .repo-stats { 13 | display: flex; 14 | -webkit-box-pack: justify; 15 | justify-content: space-between; 16 | font-size: 13px; 17 | color: rgb(106, 115, 125); 18 | } 19 | 20 | .repo-left-stat { 21 | -webkit-box-flex: 1; 22 | flex-grow: 1; 23 | display: flex; 24 | } 25 | 26 | .language-color { 27 | width: 10px; 28 | height: 10px; 29 | background-color: blue; 30 | margin-right: 0.25rem; 31 | border-radius: 100%; 32 | } 33 | 34 | .repo-left-stat span { 35 | display: flex; 36 | -webkit-box-align: center; 37 | align-items: center; 38 | margin-right: 0.75rem; 39 | } 40 | 41 | .repo-name-div { 42 | display: flex; 43 | align-items: center; 44 | } 45 | 46 | .repo-svg { 47 | margin-right: 0.5rem; 48 | min-width: 16px; 49 | } 50 | 51 | .repo-name { 52 | white-space: nowrap; 53 | text-overflow: ellipsis; 54 | color: rgb(36, 41, 46); 55 | margin-bottom: 0.75rem; 56 | font-size: 25px; 57 | font-weight: 700; 58 | letter-spacing: -0.5px; 59 | overflow: hidden; 60 | margin: 0px; 61 | } 62 | 63 | .repo-star-svg { 64 | margin-right: 0.3rem; 65 | } 66 | 67 | .repo-description { 68 | overflow: hidden; 69 | display: -webkit-box; 70 | -webkit-line-clamp: 2; 71 | -webkit-box-orient: vertical; 72 | } 73 | 74 | .dark-card-mode { 75 | background-color: #171c28 !important; 76 | color:white; 77 | } 78 | .dark-card-mode p { 79 | color:white; 80 | } 81 | .dark-card-mode:hover { 82 | background-color: #55198b !important; 83 | } 84 | -------------------------------------------------------------------------------- /src/containers/workExperience/WorkExperience.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./WorkExperience.css"; 3 | import ExperienceCard from "../../components/experienceCard/ExperienceCard"; 4 | import { workExperiences } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | 8 | export default function WorkExperience() { 9 | const {isDark} = useContext(StyleContext) 10 | if(workExperiences.viewExperiences){ 11 | return ( 12 |
13 | 14 |
15 |
16 |

Experiences

17 |
18 | {workExperiences.experience.map((card) => { 19 | return ( 20 | 31 | ); 32 | })} 33 |
34 |
35 |
36 | 37 |
38 | ); 39 | } 40 | return null; 41 | } 42 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/ToggleSwitch.css: -------------------------------------------------------------------------------- 1 | .switch { 2 | position: relative; 3 | display: inline-block; 4 | width: 55px; 5 | height: 26px; 6 | } 7 | 8 | .slider { 9 | position: absolute; 10 | cursor: pointer; 11 | top: 0; 12 | left: 0; 13 | right: 0; 14 | bottom: 0; 15 | background-color: #ccc; 16 | -webkit-transition: 0.4s; 17 | transition: 0.4s; 18 | } 19 | 20 | .slider::before { 21 | position: absolute; 22 | content: ""; 23 | height: 26px; 24 | width: 28px; 25 | left: 0; 26 | bottom: 0; 27 | background-color: white; 28 | -webkit-transition: 0.4s; 29 | transition: 0.4s; 30 | } 31 | 32 | input:checked + .slider { 33 | background-color: #2196f3; 34 | } 35 | 36 | input:focus + .slider { 37 | box-shadow: 0 0 1px #2196f3; 38 | } 39 | 40 | input:checked + .slider::before { 41 | -webkit-transform: translateX(26px); 42 | -ms-transform: translateX(26px); 43 | transform: translateX(26px); 44 | } 45 | 46 | /* Rounded sliders */ 47 | .slider.round { 48 | border-radius: 34px; 49 | } 50 | 51 | .slider.round::before { 52 | border-radius: 50%; 53 | } 54 | 55 | .slider::after { 56 | display: inline; 57 | position: absolute; 58 | right: 9.3%; 59 | bottom: 17.5%; 60 | } 61 | 62 | input:checked + .slider::after { 63 | display: inline; 64 | position: absolute; 65 | right: 56.3%; 66 | bottom: 14.5%; 67 | } 68 | 69 | @media all and (max-width: 786px) and (min-width: 425px) { 70 | input:checked + .slider::after { 71 | right: 60.3%; 72 | bottom: 20.5%; 73 | } 74 | .slider::after { 75 | right: 15.3%; 76 | bottom: 22.5%; 77 | } 78 | } 79 | 80 | @media all and (max-width: 2560px) and (min-width: 1552px) { 81 | .slider::after { 82 | bottom: 12.5% !important; 83 | } 84 | } 85 | 86 | @media all and (max-width: 1552px) and (min-width: 1440px) { 87 | .slider::after { 88 | bottom: 7.5% !important; 89 | } 90 | } 91 | 92 | -------------------------------------------------------------------------------- /src/components/experienceCard/ExperienceCard.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, createRef } from "react"; 2 | import "./ExperienceCard.css"; 3 | import ColorThief from "colorthief"; 4 | 5 | export default function ExperienceCard({ cardInfo, isDark }) { 6 | const [colorArrays, setColorArrays] = useState([]); 7 | const imgRef = createRef(); 8 | 9 | function getColorArrays() { 10 | const colorThief = new ColorThief(); 11 | setColorArrays(colorThief.getColor(imgRef.current)); 12 | } 13 | 14 | function rgb(values) { 15 | return typeof values === "undefined" ? null : "rgb(" + values.join(', ') + ")"; 16 | } 17 | 18 | const GetDescBullets = ({ descBullets, isDark }) => { 19 | return descBullets ? descBullets.map((item) =>
  • {item}
    • ) : null 20 | }; 21 | 22 | return ( 23 |
    24 |
    25 |
    26 |
    27 |
    {cardInfo.company}
    28 |
    29 | 30 | {cardInfo.company} getColorArrays()}/> 31 |
    32 |
    33 |
    {cardInfo.role}
    34 |
    {cardInfo.date}
    35 |

    {cardInfo.desc}

    36 |
      37 | 38 |
    39 |
    40 |
    41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/githubProfileCard/GithubProfileCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./GithubProfileCard.css"; 3 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 4 | import {contactInfo} from "../../portfolio"; 5 | import emoji from "react-easy-emoji"; 6 | import { Fade } from "react-reveal"; 7 | 8 | export default function GithubProfileCard({prof}) { 9 | if (prof.hireable!==null){ 10 | prof.hireable="Yes"; 11 | }else{ 12 | prof.hireable="No"; 13 | } 14 | return ( 15 | 16 |
    17 |

    Reach Out to me!

    18 |
    19 |
    20 |
    21 |

    {contactInfo.subtitle}

    22 |
    23 |

    "{ emoji(String(prof.bio)) }"

    24 | {prof.location !== null && 25 |
    26 | 27 | {prof.location} 28 | 29 |
    } 30 |
    31 | Open for opportunities: {prof.hireable} 32 |
    33 | 34 |
    35 |
    36 | {prof.name} 37 |
    38 |
    39 |
    40 |     41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/githubProfileCard/GithubProfileCard.css: -------------------------------------------------------------------------------- 1 | .profile-image { 2 | border-radius: 50%; 3 | border: 0.5rem solid #6c63ff; 4 | margin-left: auto; 5 | width: 100%; 6 | max-width: 350px; 7 | height: auto; 8 | box-shadow: rgba(0, 0, 0, 1) 0 30px 30px -30px; 9 | transition: all 0.3s ease-out; 10 | } 11 | 12 | .profile-image:hover { 13 | box-shadow: none; 14 | } 15 | 16 | .prof-title { 17 | margin: 0; 18 | font-size: 40px; 19 | font-weight: 400; 20 | } 21 | 22 | .location-div { 23 | text-shadow: blanchedalmond; 24 | } 25 | 26 | .opp-div { 27 | padding-bottom: 1rem; 28 | } 29 | 30 | .row { 31 | display: flex; 32 | } 33 | 34 | .main-content-profile { 35 | flex: 80%; 36 | } 37 | 38 | .image-content-profile { 39 | text-align: right; 40 | flex: 20%; 41 | max-width: 100%; 42 | height: auto; 43 | } 44 | 45 | .bio-text { 46 | line-height: 30px; 47 | font-size: 22px; 48 | } 49 | 50 | .desc-prof { 51 | line-height: 45px; 52 | font-size: 19px; 53 | } 54 | 55 | .subTitle { 56 | color: #868e96; 57 | } 58 | 59 | @media (max-width: 768px) { 60 | .row { 61 | display: flex; 62 | flex-direction: column; 63 | } 64 | 65 | .main-content-profile { 66 | text-align: center; 67 | order: 2; 68 | } 69 | 70 | .bio-text { 71 | font-size: 16px; 72 | } 73 | 74 | .image-content-profile { 75 | margin-left: auto; 76 | margin-right: auto; 77 | order: 1; 78 | } 79 | 80 | .desc-prof { 81 | line-height: 30px; 82 | font-size: 16px; 83 | } 84 | 85 | .profile-image { 86 | margin-left: auto; 87 | margin-right: auto; 88 | width: 100%; 89 | max-width: 250px; 90 | height: auto; 91 | } 92 | 93 | .profile-image:hover { 94 | box-shadow: rgba(0, 0, 0, 1) 0 50px 50px -50px; 95 | transition: 0.3s ease-out; 96 | } 97 | 98 | .prof-title { 99 | padding-bottom: 1rem; 100 | font-size: 32px; 101 | text-align: center; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /src/containers/achievement/Achievement.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Achievement.css"; 3 | import AchievementCard from "../../components/achievementCard/AchievementCard"; 4 | import { achievementSection } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | export default function Achievement() { 8 | const { isDark } = useContext(StyleContext); 9 | function openUrlInNewTab(url) { 10 | var win = window.open(url, "_blank"); 11 | win.focus(); 12 | } 13 | return ( 14 | 15 |
    16 |
    17 |
    18 |

    25 | {achievementSection.title} 26 |

    27 |

    34 | {achievementSection.subtitle} 35 |

    36 |
    37 |
    38 | {achievementSection.achievementCards.map((card) => { 39 | return ( 40 | 49 | ); 50 | })} 51 |
    52 |
    53 |
    54 |     55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /src/containers/greeting/Greeting.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Greeting.css"; 3 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 4 | import Button from "../../components/button/Button"; 5 | import { greeting } from "../../portfolio"; 6 | import { Fade } from "react-reveal"; 7 | import emoji from "react-easy-emoji"; 8 | import StyleContext from "../../contexts/StyleContext"; 9 | 10 | export default function Greeting() { 11 | const { isDark } = useContext(StyleContext); 12 | return ( 13 | 14 |
    15 |
    16 |
    17 |
    18 |

    21 | {" "} 22 | {greeting.title}{" "} 23 | {emoji("👋")} 24 |

    25 |

    32 | {greeting.subTitle} 33 |

    34 | 35 |
    36 |
    43 |
    44 |
    45 |
    46 | saad sitting on table 50 |
    51 |
    52 |
    53 |     54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/containers/skills/Skills.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Skills.css"; 3 | import SoftwareSkill from "../../components/softwareSkills/SoftwareSkill"; 4 | import { skillsSection } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | 8 | export default function Skills() { 9 | const { isDark } = useContext(StyleContext); 10 | return ( 11 |
    12 |
    13 | 14 |
    15 | Saad Working 19 |
    20 |     21 | 22 |
    23 |

    26 | {skillsSection.title}{" "} 27 |

    28 |

    35 | {skillsSection.subTitle} 36 |

    37 | 38 |
    39 | {skillsSection.skills.map((skills) => { 40 | return ( 41 |

    48 | {skills} 49 |

    50 | ); 51 | })} 52 |
    53 |
    54 |     55 |
    56 |
    57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import Headroom from "react-headroom"; 3 | import "./Header.css"; 4 | import ToggleSwitch from "../ToggleSwitch/ToggleSwitch"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | import { greeting, workExperiences } from "../../portfolio"; 7 | 8 | function Header() { 9 | const { isDark } = useContext(StyleContext); 10 | const exp = workExperiences.viewExperiences; 11 | return ( 12 | 13 |
    14 | 15 | < 16 | {greeting.username} 17 | /> 18 | 19 | 20 | 27 | 57 |
    58 |     59 | ); 60 | } 61 | export default Header; 62 | -------------------------------------------------------------------------------- /src/containers/profile/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect ,lazy, Suspense } from "react"; 2 | import ApolloClient, { gql } from "apollo-boost"; 3 | import { openSource } from "../../portfolio"; 4 | import Contact from "../contact/Contact"; 5 | import Loading from "../loading/Loading"; 6 | 7 | const renderLoader = () => ; 8 | const GithubProfileCard = lazy(() => import('../../components/githubProfileCard/GithubProfileCard')); 9 | export default function Profile() { 10 | const [prof, setrepo] = useState([]); 11 | function setProfileFunction(array) { 12 | setrepo(array); 13 | } 14 | function getProfileData() { 15 | const client = new ApolloClient({ 16 | uri: "https://api.github.com/graphql", 17 | request: (operation) => { 18 | operation.setContext({ 19 | headers: { 20 | authorization: `Bearer ${openSource.githubConvertedToken}`, 21 | }, 22 | }); 23 | }, 24 | }); 25 | 26 | client 27 | .query({ 28 | query: gql` 29 | { 30 | user(login:"${openSource.githubUserName}") { 31 | name 32 | bio 33 | isHireable 34 | avatarUrl 35 | location 36 | } 37 | } 38 | `, 39 | }) 40 | .then((result) => { 41 | setProfileFunction(result.data.user); 42 | }) 43 | .catch(function (error) { 44 | console.log(error); 45 | setProfileFunction("Error"); 46 | console.log("Because of this Error Contact Section is Showed instead of Profile"); 47 | openSource.showGithubProfile = "false"; 48 | }); 49 | } 50 | useEffect(() => { 51 | if (openSource.showGithubProfile === "true") { 52 | getProfileData(); 53 | } 54 | }, []); 55 | if (openSource.showGithubProfile === "true" && !(typeof prof === 'string' || prof instanceof String)){ 56 | return ( 57 | 58 | 59 | 60 | ); 61 | } else { 62 | return ; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/containers/contact/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import "./Contact.css"; 3 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 4 | import { contactInfo } from "../../portfolio"; 5 | import { Fade } from "react-reveal"; 6 | import StyleContext from "../../contexts/StyleContext"; 7 | 8 | export default function Contact() { 9 | const { isDark } = useContext(StyleContext); 10 | return ( 11 | 12 |
    13 |
    14 |
    15 |

    {contactInfo.title}

    16 |

    23 | {contactInfo.subtitle} 24 |

    25 | 26 | 46 |
    47 |
    48 | Saad Working 54 |
    55 |
    56 |
    57 |     58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /src/containers/greeting/Greeting.css: -------------------------------------------------------------------------------- 1 | .main { 2 | width: 90%; 3 | padding: 20px 10px; 4 | margin: 0px auto; 5 | margin-top: 4rem; 6 | } 7 | .greet-main { 8 | width: 90%; 9 | padding: 20px 10px; 10 | margin: 0px auto; 11 | margin-top: 2rem; 12 | } 13 | 14 | .gretting-main { 15 | width: 90%; 16 | padding: 20px 10px; 17 | margin: 0px auto; 18 | } 19 | 20 | .subTitle { 21 | color: #868e96 !important; 22 | } 23 | 24 | .greeting-main { 25 | display: flex; 26 | } 27 | 28 | .greeting-main > * { 29 | flex: 1; 30 | margin-bottom: 30px; 31 | } 32 | .button-greeting-div { 33 | display: flex; 34 | margin-top: 20px; 35 | } 36 | 37 | .greeting-text { 38 | font-size: 70px; 39 | line-height: 1.1; 40 | color: black !important; 41 | } 42 | 43 | .greeting-text-p { 44 | font-size: 30px; 45 | line-height: 40px; 46 | } 47 | 48 | .greeting-image-div > img { 49 | max-width: 100%; 50 | height: auto; 51 | } 52 | .wave-emoji { 53 | animation-duration: 1.8s; 54 | animation-iteration-count: infinite; 55 | animation-name: wave; 56 | display: inline-block; 57 | transform-origin: 70% 70%; 58 | } 59 | 60 | @keyframes wave { 61 | 0% { 62 | transform: rotate(0deg); 63 | } 64 | 10% { 65 | transform: rotate(-10deg); 66 | } 67 | 20% { 68 | transform: rotate(12deg); 69 | } 70 | 30% { 71 | transform: rotate(-10deg); 72 | } 73 | 40% { 74 | transform: rotate(9deg); 75 | } 76 | 50% { 77 | transform: rotate(0deg); 78 | } 79 | 100% { 80 | transform: rotate(0deg); 81 | } 82 | } 83 | 84 | /* Media Query */ 85 | @media (max-width: 1380px) { 86 | .greeting-text { 87 | font-size: 50px; 88 | } 89 | .greeting-text-p { 90 | font-size: 20px; 91 | } 92 | } 93 | @media (max-width: 768px) { 94 | .button-greeting-div { 95 | justify-content: space-around; 96 | } 97 | .greeting-text { 98 | font-size: 30px; 99 | text-align: center; 100 | } 101 | .greeting-text-p { 102 | font-size: 16px; 103 | line-height: normal; 104 | text-align: center; 105 | } 106 | .greeting-main { 107 | display: block; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/containers/Main.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Header from "../components/header/Header"; 3 | import Greeting from "./greeting/Greeting"; 4 | import Skills from "./skills/Skills"; 5 | import StackProgress from "./skillProgress/skillProgress"; 6 | import WorkExperience from "./workExperience/WorkExperience"; 7 | import Projects from "./projects/Projects"; 8 | import StartupProject from "./StartupProjects/StartupProject"; 9 | import Achievement from "./achievement/Achievement"; 10 | import Blogs from "./blogs/Blogs"; 11 | import Contact from "./contact/Contact"; 12 | import Footer from "../components/footer/Footer"; 13 | import Talks from "./talks/Talks"; 14 | import Podcast from "./podcast/Podcast"; 15 | import Education from "./education/Education"; 16 | import Top from "./topbutton/Top"; 17 | import Twitter from "./twitter-embed/twitter"; 18 | import { StyleProvider } from "../contexts/StyleContext"; 19 | import "./Main.css"; 20 | import Profile from "./profile/Profile"; 21 | import { educationInfo } from "../portfolio"; 22 | 23 | export default class Main extends Component { 24 | constructor(props) { 25 | super(props); 26 | this.state = { 27 | isDark: false, 28 | }; 29 | } 30 | 31 | componentDidMount() { 32 | const darkPref = window.matchMedia("(prefers-color-scheme: dark)"); 33 | this.setState({ isDark: darkPref.matches }); 34 | } 35 | changeTheme = () => { 36 | this.setState({ isDark: !this.state.isDark }); 37 | }; 38 | 39 | render() { 40 | return ( 41 |
    42 | 45 |
    46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 | 61 | 62 |
    63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/educationCard/EducationCard.js: -------------------------------------------------------------------------------- 1 | import React, { createRef, useContext } from "react"; 2 | import { Fade, Slide, Zoom } from "react-reveal"; 3 | import "./EducationCard.css"; 4 | import StyleContext from "../../contexts/StyleContext"; 5 | 6 | export default function EducationCard({ school }) { 7 | const imgRef = createRef(); 8 | 9 | const GetDescBullets = ({ descBullets }) => { 10 | return descBullets 11 | ? descBullets.map((item) =>
  • {item}
    • ) 12 | : null; 13 | }; 14 | const { isDark } = useContext(StyleContext); 15 | return ( 16 |
    17 | 18 |
    19 |
    20 | {school.schoolName} 27 |
    28 |
    29 |
    {school.schoolName}
    30 | 31 |
    32 |
    39 | {school.subHeader} 40 |
    41 |

    46 | {school.duration} 47 |

    48 |

    {school.desc}

    49 |
    50 |
      51 | 52 |
    53 |
    54 |
    55 |
    56 |
    57 |     58 | 59 |
    60 |     61 |
    62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/components/socialMedia/SocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./SocialMedia.css"; 3 | import { socialMediaLinks } from "../../portfolio"; 4 | 5 | export default function socialMedia() { 6 | return ( 7 |
    8 | 9 | {socialMediaLinks.github ? 10 | ( 11 | 12 | 13 | ) 14 | : 15 | null} 16 | 17 | {socialMediaLinks.linkedin ? 18 | 19 | 20 | 21 | 22 | : 23 | null} 24 | 25 | {socialMediaLinks.gmail ? 26 | 27 | 28 | 29 | 30 | : 31 | null} 32 | 33 | {socialMediaLinks.gitlab ? 34 | 35 | 36 | 37 | 38 | : 39 | null } 40 | 41 | {socialMediaLinks.facebook ? 42 | 43 | 44 | 45 | 46 | : 47 | null} 48 | 49 | {socialMediaLinks.instagram ? 50 | 51 | 52 | 53 | 54 | : 55 | null} 56 | 57 | {socialMediaLinks.twitter ? 58 | 59 | 60 | 61 | 62 | : 63 | null} 64 | 65 | {socialMediaLinks.medium ? 66 | ( 67 | 68 | 69 | ) 70 | : 71 | null} 72 | 73 | {socialMediaLinks.stackoverflow ? 74 | ( 75 | 76 | 77 | ) 78 | : 79 | null} 80 | 81 |
    82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /src/components/talkCard/TalkCard.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | /* Rectangle Card Layout */ 7 | .rectangle { 8 | background: url(../../assets/images/talksCardBack.svg); 9 | width: 380px; 10 | height: 300px; 11 | border-radius: 4px; 12 | box-shadow: 0px 20px 50px #d9dbdf; 13 | -webkit-transition: all 0.3s ease; 14 | -o-transition: all 0.3s ease; 15 | transition: all 0.3s ease; 16 | margin-top: 50px; 17 | } 18 | .rectangle:hover { 19 | box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 20 | } 21 | .dark-rectangle { 22 | box-shadow: 4px 1px 20px 0px; 23 | } 24 | .mask { 25 | clip: rect(0px, 460px, 220px, 0px); 26 | border-radius: 4px; 27 | position: absolute; 28 | } 29 | 30 | /* Card Styling */ 31 | .talk-card-title { 32 | color: white; 33 | margin: auto; 34 | text-align: left; 35 | margin-top: 25px; 36 | padding: 0px 0px 40px 30px; 37 | font-size: 30px; 38 | line-height: normal; 39 | overflow: hidden; 40 | display: -webkit-box; 41 | -webkit-line-clamp: 2; 42 | -webkit-box-orient: vertical; 43 | } 44 | .talk-card-subtitle { 45 | margin-top: 35px; 46 | text-align: justify; 47 | padding-left: 30px; 48 | padding-right: 30px; 49 | font-size: 16px; 50 | color: #7f8287; 51 | line-height: 18px; 52 | overflow: hidden; 53 | display: -webkit-box; 54 | -webkit-line-clamp: 2; 55 | -webkit-box-orient: vertical; 56 | } 57 | .talk-button { 58 | background-color: #55198b; 59 | color: white; 60 | width: 90px; 61 | padding: 10px 18px; 62 | border-radius: 3px; 63 | text-align: center; 64 | text-decoration: none; 65 | display: block; 66 | margin-top: 20px; 67 | font-size: 14px; 68 | cursor: pointer; 69 | } 70 | .talk-button:hover { 71 | background: #8c43ce; 72 | } 73 | .card-footer-button-div { 74 | display: flex; 75 | justify-content: space-around; 76 | } 77 | 78 | /* Media Query */ 79 | @media (max-width: 1380px) { 80 | .card-title { 81 | font-size: 25px; 82 | } 83 | } 84 | @media (max-width: 768px) { 85 | .mask { 86 | clip-path: none; 87 | position: relative; 88 | } 89 | .talk-card-title { 90 | margin-top: 30px; 91 | } 92 | .talk-card-image { 93 | width: 100%; 94 | } 95 | 96 | .talk-button { 97 | background-color: #55198b; 98 | color: white; 99 | width: 90px; 100 | padding: 10px 18px; 101 | border-radius: 3px; 102 | text-align: center; 103 | text-decoration: none; 104 | display: block; 105 | margin-top: 20px; 106 | font-size: 14px; 107 | cursor: pointer; 108 | transition: 0.2s ease-in; 109 | } 110 | .talk-button:hover { 111 | background: #8c43ce; 112 | } 113 | .card-footer-button-div { 114 | display: flex; 115 | justify-content: space-around; 116 | } 117 | 118 | .square { 119 | width: 100%; 120 | height: auto; 121 | padding-bottom: 30px; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/components/educationCard/EducationCard.css: -------------------------------------------------------------------------------- 1 | .education-card { 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | .education-card:hover + .education-card-border { 7 | border-color: #a9a7f9; 8 | width: 100%; 9 | -webkit-transition: width 0.6s ease-in-out; 10 | -moz-transition: width 0.6s ease-in-out; 11 | -o-transition: width 0.6s ease-in-out; 12 | transition: width 0.6s ease-in-out; 13 | } 14 | 15 | .education-card-border { 16 | height: 30px; 17 | width: 80%; 18 | border-top: 2px solid rgba(211, 211, 211, 0.397); 19 | margin-bottom: 20px; 20 | -webkit-transition: width 0.6s ease-in-out; 21 | -moz-transition: width 0.6s ease-in-out; 22 | -o-transition: width 0.6s ease-in-out; 23 | transition: width 0.6s ease-in-out; 24 | } 25 | 26 | .education-head { 27 | display: flex; 28 | flex-direction: row; 29 | } 30 | 31 | .education-text-school { 32 | margin: 0; 33 | font-size: 28px; 34 | font-weight: 700; 35 | text-overflow: ellipsis; 36 | overflow: hidden; 37 | white-space: nowrap; 38 | } 39 | 40 | .education-roundedimg { 41 | object-fit: cover; 42 | margin-right: 2rem; 43 | width: 6rem; 44 | height: 6rem; 45 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); 46 | border-radius: 50%; 47 | } 48 | 49 | .education-card-right { 50 | max-width: 70%; 51 | } 52 | 53 | .education-text-subHeader { 54 | color: black; 55 | font-weight: 700; 56 | font-size: 19px; 57 | margin: 0px; 58 | padding-top: 0.8rem; 59 | line-height: normal; 60 | } 61 | 62 | .education-text-duration { 63 | color: #000000; 64 | font-size: 19px; 65 | margin: 0px; 66 | padding-top: 0.5rem; 67 | } 68 | 69 | .education-text-desc { 70 | margin-top: 0.5rem; 71 | margin-bottom: 0.5rem; 72 | } 73 | 74 | .education-text-bullets > ul { 75 | margin-top: 0.5rem; 76 | } 77 | 78 | /* Media Query */ 79 | 80 | @media (max-width: 1380px) { 81 | .education-card { 82 | flex-direction: column; 83 | padding-bottom: 10px; 84 | } 85 | .education-card-right { 86 | max-width: 90%; 87 | } 88 | .education-card-border { 89 | width: 90%; 90 | } 91 | .education-text-subHeader { 92 | padding-top: 0.5rem; 93 | font-size: 16px; 94 | } 95 | .education-text-school { 96 | font-size: 20px; 97 | } 98 | .education-text-duration { 99 | font-size: 16px; 100 | } 101 | .education-roundedimg { 102 | width: 4rem; 103 | height: 4rem; 104 | margin-bottom: 0.5rem; 105 | margin-right: 0px; 106 | } 107 | } 108 | 109 | @media (max-width: 768px) { 110 | .education-card { 111 | text-align: center; 112 | } 113 | .education-card-right { 114 | max-width: 100%; 115 | } 116 | .education-card-border { 117 | width: 100%; 118 | } 119 | .education-roundedimg { 120 | margin-top: 10px; 121 | width: 4rem; 122 | height: 4rem; 123 | margin-bottom: 1rem; 124 | margin-right: 0; 125 | } 126 | .education-text-bullets > ul { 127 | max-width: 80%; 128 | margin: auto; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 30 | 37 | 38 | 39 | 40 | 41 | 42 | 51 | Saad Pasta Portfolio 52 | 53 | 54 | 55 |
    56 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /src/containers/projects/Projects.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useContext, Suspense, lazy } from "react"; 2 | import ApolloClient from "apollo-boost"; 3 | import { gql } from "apollo-boost"; 4 | import "./Project.css"; 5 | import Button from "../../components/button/Button"; 6 | import { openSource, socialMediaLinks } from "../../portfolio"; 7 | import { StyleConsumer } from "../../contexts/StyleContext"; 8 | import Loading from "../../containers/loading/Loading"; 9 | export default function Projects() { 10 | const GithubRepoCard = lazy(() => 11 | import("../../components/githubRepoCard/GithubRepoCard") 12 | ); 13 | const FailedLoading = () => null; 14 | const renderLoader = () => ; 15 | const [repo, setrepo] = useState([]); 16 | const { isDark } = useContext(StyleConsumer); 17 | useEffect(() => { 18 | getRepoData(); 19 | }, []); 20 | 21 | function getRepoData() { 22 | const client = new ApolloClient({ 23 | uri: "https://api.github.com/graphql", 24 | request: (operation) => { 25 | operation.setContext({ 26 | headers: { 27 | authorization: `Bearer ${openSource.githubConvertedToken}`, 28 | }, 29 | }); 30 | }, 31 | }); 32 | 33 | client 34 | .query({ 35 | query: gql` 36 | { 37 | user(login: "${openSource.githubUserName}") { 38 | pinnedItems(first: 6, types: [REPOSITORY]) { 39 | totalCount 40 | edges { 41 | node { 42 | ... on Repository { 43 | name 44 | description 45 | forkCount 46 | stargazers { 47 | totalCount 48 | } 49 | url 50 | id 51 | diskUsage 52 | primaryLanguage { 53 | name 54 | color 55 | } 56 | } 57 | } 58 | } 59 | } 60 | } 61 | } 62 | `, 63 | }) 64 | .then((result) => { 65 | setrepoFunction(result.data.user.pinnedItems.edges); 66 | console.log(result); 67 | }) 68 | .catch(function (error) { 69 | console.log(error); 70 | setrepoFunction("Error"); 71 | console.log( 72 | "Because of this Error, nothing is shown in place of Projects section. Projects section not configured" 73 | ); 74 | }); 75 | } 76 | 77 | function setrepoFunction(array) { 78 | setrepo(array); 79 | } 80 | if (!(typeof repo === "string" || repo instanceof String)) { 81 | return ( 82 | 83 |
    84 |

    Open Source Projects

    85 |
    86 | {repo.map((v, i) => { 87 | return ( 88 | 89 | ); 90 | })} 91 |
    92 |
    99 |     100 | ); 101 | } else { 102 | return ; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/components/blogCard/BlogCard.css: -------------------------------------------------------------------------------- 1 | .small-dark { 2 | color: white !important; 3 | } 4 | 5 | .blog-container { 6 | border-radius: 10px; 7 | color: #586069; 8 | background-color: #fff; 9 | box-shadow: 0 0 36px rgba(0, 0, 0, 0.1); 10 | cursor: pointer; 11 | height: 200px; 12 | } 13 | 14 | .blog-title { 15 | color: #262626; 16 | font-size: 22px; 17 | line-height: 24px; 18 | font-weight: 700; 19 | margin-left: 20px; 20 | margin-right: 20px; 21 | margin-bottom: 14px; 22 | margin-top: 32px; 23 | overflow: hidden; 24 | display: -webkit-box; 25 | -webkit-line-clamp: 2; 26 | -webkit-box-orient: vertical; 27 | } 28 | 29 | .small { 30 | font-size: 17px; 31 | font-weight: 400; 32 | line-height: 1.5rem; 33 | color: #666666; 34 | padding: 0px 20px; 35 | overflow: hidden; 36 | display: -webkit-box; 37 | -webkit-line-clamp: 4; 38 | -webkit-box-orient: vertical; 39 | margin: 0px; 40 | } 41 | 42 | .go-corner { 43 | display: flex; 44 | align-items: center; 45 | justify-content: center; 46 | position: absolute; 47 | width: 32px; 48 | height: 32px; 49 | overflow: hidden; 50 | top: 0; 51 | right: 0; 52 | background-color: #55198b; 53 | border-radius: 0 4px 0 32px; 54 | } 55 | 56 | .go-arrow { 57 | margin-top: -4px; 58 | margin-right: -4px; 59 | color: white; 60 | font-family: courier, sans; 61 | } 62 | 63 | .blog-card { 64 | display: block; 65 | position: relative; 66 | background-color: transparent; 67 | border-radius: 4px; 68 | text-decoration: none; 69 | z-index: 0; 70 | overflow: hidden; 71 | height: 100%; 72 | } 73 | 74 | .blog-card::before { 75 | content: ""; 76 | position: absolute; 77 | z-index: -1; 78 | top: -16px; 79 | right: -16px; 80 | background: #55198b; 81 | height: 32px; 82 | width: 32px; 83 | border-radius: 32px; 84 | transform: scale(1); 85 | transform-origin: 50% 50%; 86 | transition: transform 0.4s ease-out; 87 | } 88 | 89 | .blog-card:hover::before { 90 | transform: scale(30); 91 | } 92 | 93 | .blog-card:hover > .small { 94 | transition: all 0.3s ease-out; 95 | color: rgba(255, 255, 255, 0.8); 96 | } 97 | 98 | .blog-card:hover > h3 { 99 | transition: all 0.3s ease-out; 100 | color: #ffffff; 101 | } 102 | 103 | @media screen and (max-width: 480px) and (min-width: 300px), 104 | (min-width: 925px) and (max-width: 1024px), 105 | (min-width: 1405px) and (max-width: 1550px) { 106 | .blog-card:hover::before { 107 | transform: scale(30); 108 | } 109 | } 110 | 111 | @media screen and (min-width: 481px) and (max-width: 675px), 112 | (min-width: 1025px) and (max-width: 1404px), 113 | (min-width: 1551px) { 114 | .blog-card:hover::before { 115 | transform: scale(40); 116 | } 117 | .blog-card::before { 118 | transition: transform 0.45s ease-out; 119 | } 120 | } 121 | 122 | @media screen and (min-width: 675px) and (max-width: 860px) { 123 | .blog-card:hover::before { 124 | transform: scale(50); 125 | } 126 | .blog-card::before { 127 | transition: transform 0.5s ease-out; 128 | } 129 | } 130 | 131 | @media screen and (min-width: 860px) and (max-width: 924px) { 132 | .blog-card:hover::before { 133 | transform: scale(60); 134 | } 135 | .blog-card::before { 136 | transition: transform 0.5s ease-out; 137 | } 138 | } 139 | 140 | @media screen and (max-width: 480px) and (min-width: 300px) { 141 | .blog-title { 142 | font-size: 18px; 143 | } 144 | } 145 | .blog-card-shadow { 146 | box-shadow: 1px 0px 20px #ffffff; 147 | } 148 | -------------------------------------------------------------------------------- /src/components/header/Header.css: -------------------------------------------------------------------------------- 1 | /* header */ 2 | 3 | .dark-menu { 4 | background-color: #171c28 !important; 5 | color: white; 6 | } 7 | 8 | .dark-menu li a { 9 | color: white !important; 10 | } 11 | 12 | .dark-menu li a:hover { 13 | background-color: #55198b !important; 14 | } 15 | 16 | .header { 17 | background-color: #fff; 18 | max-width: 100%; 19 | padding: 15px 20px; 20 | margin: 0px auto; 21 | } 22 | 23 | .header ul { 24 | margin: 0; 25 | padding: 0; 26 | list-style: none; 27 | overflow: hidden; 28 | } 29 | .grey-color { 30 | color: #868e96; 31 | } 32 | 33 | .header li a { 34 | display: block; 35 | padding: 15px 20px; 36 | color: black; 37 | text-decoration: none; 38 | } 39 | 40 | .header li a:hover, 41 | .header .menu-btn:hover { 42 | background-color: #f4f4f4; 43 | } 44 | 45 | .header .logo { 46 | display: block; 47 | flex: none; 48 | float: left; 49 | font-size: 1.5em; 50 | text-decoration: none; 51 | margin-top: 10px; 52 | line-height: normal; 53 | } 54 | .header .logo-name { 55 | font-family: "Agustina Regular"; 56 | font-weight: bold; 57 | font-variant-ligatures: no-common-ligatures; 58 | -webkit-font-variant-ligatures: no-common-ligatures; 59 | padding: 0 10px; 60 | } 61 | 62 | /* menu */ 63 | 64 | .header .menu { 65 | clear: both; 66 | max-height: 0; 67 | transition: max-height 0.2s ease-out; 68 | } 69 | 70 | /* menu icon */ 71 | 72 | .header .menu-icon { 73 | cursor: pointer; 74 | display: inline-block; 75 | float: right; 76 | padding: 28px 20px; 77 | position: relative; 78 | user-select: none; 79 | } 80 | 81 | .header .menu-icon .navicon { 82 | background: #333; 83 | display: block; 84 | height: 2px; 85 | position: relative; 86 | transition: background 0.2s ease-out; 87 | width: 18px; 88 | } 89 | 90 | .header .menu-icon .navicon:before, 91 | .header .menu-icon .navicon:after { 92 | background: #333; 93 | content: ""; 94 | display: block; 95 | height: 100%; 96 | position: absolute; 97 | transition: all 0.2s ease-out; 98 | width: 100%; 99 | } 100 | 101 | .header .menu-icon .navicon-dark:before, 102 | .header .menu-icon .navicon-dark:after { 103 | background: white !important; 104 | content: ""; 105 | display: block; 106 | height: 100%; 107 | position: absolute; 108 | transition: all 0.2s ease-out; 109 | width: 100%; 110 | } 111 | 112 | .header .menu-icon .navicon:before { 113 | top: 5px; 114 | } 115 | 116 | .header .menu-icon .navicon:after { 117 | top: -5px; 118 | } 119 | 120 | /* menu btn */ 121 | 122 | .header .menu-btn { 123 | display: none; 124 | } 125 | 126 | .header .menu-btn:checked ~ .menu { 127 | max-height: 486px; 128 | } 129 | 130 | .header .menu-btn:checked ~ .menu-icon .navicon { 131 | background: transparent; 132 | } 133 | 134 | .header .menu-btn:checked ~ .menu-icon .navicon:before { 135 | transform: rotate(-45deg); 136 | } 137 | 138 | .header .menu-btn:checked ~ .menu-icon .navicon:after { 139 | transform: rotate(45deg); 140 | } 141 | 142 | .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, 143 | .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 144 | top: 0; 145 | } 146 | 147 | /* 48em = 768px */ 148 | 149 | @media (min-width: 48em) { 150 | .header li { 151 | float: left; 152 | } 153 | .header { 154 | display: flex; 155 | align-items: center; 156 | justify-content: space-between; 157 | } 158 | .header .menu { 159 | max-height: none; 160 | } 161 | .header .menu-icon { 162 | display: none; 163 | } 164 | } 165 | @media (max-width: 960px) and (min-width: 768px) { 166 | .header { 167 | font-size: 12px; 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /src/components/githubRepoCard/GithubRepoCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./GithubRepoCard.css"; 3 | import { Fade } from "react-reveal"; 4 | 5 | export default function GithubRepoCard({ repo, isDark }) { 6 | function openRepoinNewTab(url) { 7 | var win = window.open(url, "_blank"); 8 | win.focus(); 9 | } 10 | 11 | return ( 12 | 13 |
    14 |
    openRepoinNewTab(repo.node.url)} 18 | > 19 |
    20 | 34 |

    {repo.node.name}

    35 |
    36 |

    {repo.node.description}

    37 |
    38 |
    39 | {repo.node.primaryLanguage !== null && ( 40 | 41 |
    45 |

    {repo.node.primaryLanguage.name}

    46 |     47 | )} 48 | 49 | 64 |

    {repo.node.forkCount}

    65 |     66 | 67 | 82 |

    {repo.node.stargazers.totalCount}

    83 |     84 |
    85 |
    86 |

    {repo.node.diskUsage} KB

    87 |
    88 |
    89 |
    90 |
    91 |     92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /src/components/experienceCard/ExperienceCard.css: -------------------------------------------------------------------------------- 1 | .experience-card { 2 | position: relative; 3 | background-color: rgb(255, 255, 255); 4 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px; 5 | border-radius: 10px; 6 | border: 1px solid rgba(211, 211, 211, 0.397); 7 | } 8 | 9 | .experience-card-dark { 10 | position: relative; 11 | background-color: #171c28; 12 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px; 13 | border-radius: 10px; 14 | border: 1px solid rgba(211, 211, 211, 0.397); 15 | } 16 | 17 | .experience-card:hover { 18 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 19 | } 20 | 21 | .experience-banner { 22 | background-position: center; 23 | background-repeat: no-repeat; 24 | background-size: 150%; 25 | background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); 26 | border-radius: 10px 10px 0px 0px; 27 | -webkit-filter: blur(0px); 28 | -moz-filter: blur(0px); 29 | -o-filter: blur(0px); 30 | -ms-filter: blur(0px); 31 | filter: blur(0px); 32 | height: 11rem; 33 | display: flex; 34 | align-items: flex-end; 35 | justify-content: center; 36 | } 37 | 38 | .experience-blurred_div { 39 | position: absolute; 40 | background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)); 41 | -webkit-filter: blur(5px); 42 | -moz-filter: blur(5px); 43 | -o-filter: blur(5px); 44 | -ms-filter: blur(5px); 45 | filter: blur(5px); 46 | height: 11rem; 47 | top: 0; 48 | left: 0; 49 | width: 100%; 50 | border-radius: 10px 10px 0px 0px; 51 | } 52 | 53 | .experience-div-company { 54 | position: absolute; 55 | background: transparent; 56 | height: 9rem; 57 | top: 0; 58 | left: 0; 59 | width: 100%; 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | } 64 | 65 | .experience-text-company { 66 | text-align: center; 67 | padding: 1.5rem; 68 | margin: 0; 69 | color: #fff; 70 | font-size: 25px; 71 | text-align: center; 72 | font-weight: 700; 73 | text-overflow: ellipsis; 74 | overflow: hidden; 75 | white-space: nowrap; 76 | } 77 | 78 | .experience-roundedimg { 79 | position: absolute; 80 | object-fit: cover; 81 | left: 0; 82 | right: 0; 83 | top: 7rem; 84 | margin-left: auto; 85 | margin-right: auto; 86 | width: 8rem; 87 | height: 8rem; 88 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); 89 | border-radius: 50%; 90 | } 91 | 92 | .experience-text-role { 93 | text-align: center; 94 | color: black; 95 | font-weight: 700; 96 | font-size: 25px; 97 | margin: 0px; 98 | padding-top: 1.5rem; 99 | line-height: normal; 100 | } 101 | .dark-mode-text { 102 | color:white !important; 103 | } 104 | .experience-text-date { 105 | text-align: center; 106 | color: black; 107 | font-size: 20px; 108 | margin: 0px; 109 | padding-top: 1rem; 110 | font-weight: 600; 111 | } 112 | 113 | .experience-text-desc { 114 | text-align: center; 115 | } 116 | 117 | .experience-text-details { 118 | padding: 1.5rem; 119 | margin-top: 2rem; 120 | } 121 | 122 | /* Media Query */ 123 | 124 | @media (max-width: 1380px) { 125 | .experience-text-role { 126 | padding-top: 0.5rem; 127 | font-size: 22px; 128 | } 129 | .experience-text-company { 130 | font-size: 22px; 131 | } 132 | .experience-text-date { 133 | font-size: 18px; 134 | } 135 | .experience-roundedimg { 136 | width: 6.5rem; 137 | height: 6.5rem; 138 | } 139 | } 140 | 141 | @media (max-width: 768px) { 142 | .experience-text-role { 143 | font-size: 22px; 144 | } 145 | .experience-text-company { 146 | font-size: 22px; 147 | } 148 | .experience-text-date { 149 | font-size: 18px; 150 | } 151 | .experience-text-desc { 152 | font-size: 16px; 153 | } 154 | } -------------------------------------------------------------------------------- /src/containers/loading/loading.css: -------------------------------------------------------------------------------- 1 | .sk-circle { 2 | margin: 100px auto; 3 | width: 40px; 4 | height: 40px; 5 | position: relative; 6 | } 7 | .sk-circle .sk-child { 8 | width: 100%; 9 | height: 100%; 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | } 14 | .sk-circle .sk-child:before { 15 | content: ''; 16 | display: block; 17 | margin: 0 auto; 18 | width: 15%; 19 | height: 15%; 20 | background-color: #333; 21 | border-radius: 100%; 22 | -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 23 | animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 24 | } 25 | .sk-circle .sk-circle2 { 26 | -webkit-transform: rotate(30deg); 27 | -ms-transform: rotate(30deg); 28 | transform: rotate(30deg); } 29 | .sk-circle .sk-circle3 { 30 | -webkit-transform: rotate(60deg); 31 | -ms-transform: rotate(60deg); 32 | transform: rotate(60deg); } 33 | .sk-circle .sk-circle4 { 34 | -webkit-transform: rotate(90deg); 35 | -ms-transform: rotate(90deg); 36 | transform: rotate(90deg); } 37 | .sk-circle .sk-circle5 { 38 | -webkit-transform: rotate(120deg); 39 | -ms-transform: rotate(120deg); 40 | transform: rotate(120deg); } 41 | .sk-circle .sk-circle6 { 42 | -webkit-transform: rotate(150deg); 43 | -ms-transform: rotate(150deg); 44 | transform: rotate(150deg); } 45 | .sk-circle .sk-circle7 { 46 | -webkit-transform: rotate(180deg); 47 | -ms-transform: rotate(180deg); 48 | transform: rotate(180deg); } 49 | .sk-circle .sk-circle8 { 50 | -webkit-transform: rotate(210deg); 51 | -ms-transform: rotate(210deg); 52 | transform: rotate(210deg); } 53 | .sk-circle .sk-circle9 { 54 | -webkit-transform: rotate(240deg); 55 | -ms-transform: rotate(240deg); 56 | transform: rotate(240deg); } 57 | .sk-circle .sk-circle10 { 58 | -webkit-transform: rotate(270deg); 59 | -ms-transform: rotate(270deg); 60 | transform: rotate(270deg); } 61 | .sk-circle .sk-circle11 { 62 | -webkit-transform: rotate(300deg); 63 | -ms-transform: rotate(300deg); 64 | transform: rotate(300deg); } 65 | .sk-circle .sk-circle12 { 66 | -webkit-transform: rotate(330deg); 67 | -ms-transform: rotate(330deg); 68 | transform: rotate(330deg); } 69 | .sk-circle .sk-circle2:before { 70 | -webkit-animation-delay: -1.1s; 71 | animation-delay: -1.1s; } 72 | .sk-circle .sk-circle3:before { 73 | -webkit-animation-delay: -1s; 74 | animation-delay: -1s; } 75 | .sk-circle .sk-circle4:before { 76 | -webkit-animation-delay: -0.9s; 77 | animation-delay: -0.9s; } 78 | .sk-circle .sk-circle5:before { 79 | -webkit-animation-delay: -0.8s; 80 | animation-delay: -0.8s; } 81 | .sk-circle .sk-circle6:before { 82 | -webkit-animation-delay: -0.7s; 83 | animation-delay: -0.7s; } 84 | .sk-circle .sk-circle7:before { 85 | -webkit-animation-delay: -0.6s; 86 | animation-delay: -0.6s; } 87 | .sk-circle .sk-circle8:before { 88 | -webkit-animation-delay: -0.5s; 89 | animation-delay: -0.5s; } 90 | .sk-circle .sk-circle9:before { 91 | -webkit-animation-delay: -0.4s; 92 | animation-delay: -0.4s; } 93 | .sk-circle .sk-circle10:before { 94 | -webkit-animation-delay: -0.3s; 95 | animation-delay: -0.3s; } 96 | .sk-circle .sk-circle11:before { 97 | -webkit-animation-delay: -0.2s; 98 | animation-delay: -0.2s; } 99 | .sk-circle .sk-circle12:before { 100 | -webkit-animation-delay: -0.1s; 101 | animation-delay: -0.1s; } 102 | 103 | @-webkit-keyframes sk-circleBounceDelay { 104 | 0%, 80%, 100% { 105 | -webkit-transform: scale(0); 106 | transform: scale(0); 107 | } 40% { 108 | -webkit-transform: scale(1); 109 | transform: scale(1); 110 | } 111 | } 112 | 113 | @keyframes sk-circleBounceDelay { 114 | 0%, 80%, 100% { 115 | -webkit-transform: scale(0); 116 | transform: scale(0); 117 | } 40% { 118 | -webkit-transform: scale(1); 119 | transform: scale(1); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /public/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 37 | 40 | 44 | 48 | 52 | 57 | 62 | 65 | 68 | 69 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/skill.svg: -------------------------------------------------------------------------------- 1 | certificate -------------------------------------------------------------------------------- /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "9inpachi", 10 | "name": "Fawad Ali", 11 | "avatar_url": "https://avatars2.githubusercontent.com/u/36920441?v=4", 12 | "profile": "http://facebook.com/9inpachi", 13 | "contributions": [ 14 | "ideas", 15 | "code" 16 | ] 17 | }, 18 | { 19 | "login": "IamDZN", 20 | "name": "Dasun Navoda", 21 | "avatar_url": "https://avatars0.githubusercontent.com/u/5556085?v=4", 22 | "profile": "https://dasunnavoda.wordpress.com/", 23 | "contributions": [ 24 | "doc" 25 | ] 26 | }, 27 | { 28 | "login": "brianteeman", 29 | "name": "Brian Teeman", 30 | "avatar_url": "https://avatars3.githubusercontent.com/u/1296369?v=4", 31 | "profile": "https://brian.teeman.net", 32 | "contributions": [ 33 | "doc" 34 | ] 35 | }, 36 | { 37 | "login": "rajkumaar23", 38 | "name": "Rajkumar S", 39 | "avatar_url": "https://avatars1.githubusercontent.com/u/37476886?v=4", 40 | "profile": "https://rajkumaar.co.in", 41 | "contributions": [ 42 | "code" 43 | ] 44 | }, 45 | { 46 | "login": "viveksharmaui", 47 | "name": "Slim Coder", 48 | "avatar_url": "https://avatars1.githubusercontent.com/u/28563357?v=4", 49 | "profile": "https://github.com/viveksharmaui", 50 | "contributions": [ 51 | "code", 52 | "doc" 53 | ] 54 | }, 55 | { 56 | "login": "msayyaf1", 57 | "name": "Mohamed Sayyaf", 58 | "avatar_url": "https://avatars3.githubusercontent.com/u/22149734?v=4", 59 | "profile": "http://msayyaf.com", 60 | "contributions": [ 61 | "doc" 62 | ] 63 | }, 64 | { 65 | "login": "ashutosh1919", 66 | "name": "Ashutosh Hathidara", 67 | "avatar_url": "https://avatars3.githubusercontent.com/u/20843596?v=4", 68 | "profile": "https://ashutosh1919.github.io", 69 | "contributions": [ 70 | "code" 71 | ] 72 | }, 73 | { 74 | "login": "Rizwanjamal", 75 | "name": "Rizwan Jamal ⚡️", 76 | "avatar_url": "https://avatars0.githubusercontent.com/u/8683960?v=4", 77 | "profile": "https://www.upwork.com/freelancers/~01d10c23d4ffe3c658", 78 | "contributions": [ 79 | "doc" 80 | ] 81 | }, 82 | { 83 | "login": "MohammadHasham", 84 | "name": "Muhammad Hasham", 85 | "avatar_url": "https://avatars0.githubusercontent.com/u/17927649?v=4", 86 | "profile": "http://www.muhammadhasham.com", 87 | "contributions": [ 88 | "code" 89 | ] 90 | }, 91 | { 92 | "login": "joshiujjawal22", 93 | "name": "UJJAWAL JOSHI", 94 | "avatar_url": "https://avatars3.githubusercontent.com/u/44023234?v=4", 95 | "profile": "https://sourcerer.io/joshiujjawal22", 96 | "contributions": [ 97 | "code" 98 | ] 99 | }, 100 | { 101 | "login": "palak-sethi", 102 | "name": "Palak Sethi", 103 | "avatar_url": "https://avatars2.githubusercontent.com/u/51605219?v=4", 104 | "profile": "https://github.com/palak-sethi", 105 | "contributions": [ 106 | "code" 107 | ] 108 | }, 109 | { 110 | "login": "viniciusbds", 111 | "name": "Vinicius Barbosa", 112 | "avatar_url": "https://avatars3.githubusercontent.com/u/34755896?v=4", 113 | "profile": "https://viniciusbds.github.io/", 114 | "contributions": [ 115 | "code" 116 | ] 117 | }, 118 | { 119 | "login": "BharatKammakatla", 120 | "name": "Bharat Kammakatla", 121 | "avatar_url": "https://avatars1.githubusercontent.com/u/28840761?v=4", 122 | "profile": "https://bharatkammakatla.github.io", 123 | "contributions": [ 124 | "design" 125 | ] 126 | }, 127 | { 128 | "login": "garimasingh128", 129 | "name": "Garima Singh", 130 | "avatar_url": "https://avatars2.githubusercontent.com/u/44302373?v=4", 131 | "profile": "http://bit.ly/garimasingh", 132 | "contributions": [ 133 | "code" 134 | ] 135 | }, 136 | { 137 | "login": "HenryHengZJ", 138 | "name": "Henry Heng", 139 | "avatar_url": "https://avatars2.githubusercontent.com/u/26460777?v=4", 140 | "profile": "https://github.com/HenryHengZJ", 141 | "contributions": [ 142 | "code", 143 | "design" 144 | ] 145 | }, 146 | { 147 | "login": "PulkitBanta", 148 | "name": "Pulkit Banta", 149 | "avatar_url": "https://avatars2.githubusercontent.com/u/43134750?v=4", 150 | "profile": "https://github.com/PulkitBanta", 151 | "contributions": [ 152 | "code", 153 | "bug" 154 | ] 155 | }, 156 | { 157 | "login": "AkshayCHD", 158 | "name": "Akshay Kumar", 159 | "avatar_url": "https://avatars1.githubusercontent.com/u/25455546?v=4", 160 | "profile": "https://github.com/AkshayCHD", 161 | "contributions": [ 162 | "code", 163 | "bug" 164 | ] 165 | }, 166 | { 167 | "login": "AmnaEjaz", 168 | "name": "Amna Ejaz", 169 | "avatar_url": "https://avatars3.githubusercontent.com/u/14257959?v=4", 170 | "profile": "https://github.com/AmnaEjaz", 171 | "contributions": [ 172 | "code", 173 | "ideas" 174 | ] 175 | }, 176 | { 177 | "login": "parasnagpal", 178 | "name": "Paras Nagpal", 179 | "avatar_url": "https://avatars0.githubusercontent.com/u/39419139?v=4", 180 | "profile": "https://github.com/parasnagpal", 181 | "contributions": [ 182 | "code" 183 | ] 184 | }, 185 | { 186 | "login": "sparsh-99", 187 | "name": "Sparsh Garg", 188 | "avatar_url": "https://avatars0.githubusercontent.com/u/56729873?v=4", 189 | "profile": "https://sourcerer.io/sparsh-99", 190 | "contributions": [ 191 | "code" 192 | ] 193 | }, 194 | { 195 | "login": "aashutoshrathi", 196 | "name": "Aashutosh Rathi", 197 | "avatar_url": "https://avatars2.githubusercontent.com/u/21199234?v=4", 198 | "profile": "http://aashutosh.dev", 199 | "contributions": [ 200 | "code" 201 | ] 202 | }, 203 | { 204 | "login": "abhishekashyap", 205 | "name": "Abhishek Kashyap", 206 | "avatar_url": "https://avatars3.githubusercontent.com/u/29458374?v=4", 207 | "profile": "https://abhishekashyap.studio/", 208 | "contributions": [ 209 | "bug" 210 | ] 211 | }, 212 | { 213 | "login": "lcsvcn", 214 | "name": "Lucas V C Nicolau", 215 | "avatar_url": "https://avatars1.githubusercontent.com/u/6011385?v=4", 216 | "profile": "https://github.com/lcsvcn", 217 | "contributions": [ 218 | "doc" 219 | ] 220 | }, 221 | { 222 | "login": "bradleycherrin", 223 | "name": "Bradley C. Herrin", 224 | "avatar_url": "https://avatars0.githubusercontent.com/u/5648785?v=4", 225 | "profile": "http://bradleycherrin.com", 226 | "contributions": [ 227 | "doc", 228 | "ideas" 229 | ] 230 | }, 231 | { 232 | "login": "zekinah", 233 | "name": "Zekinah Lecaros", 234 | "avatar_url": "https://avatars0.githubusercontent.com/u/43392346?v=4", 235 | "profile": "http://www.zekinahlecaros.com", 236 | "contributions": [ 237 | "code" 238 | ] 239 | }, 240 | { 241 | "login": "vandana1499", 242 | "name": "unbeat", 243 | "avatar_url": "https://avatars2.githubusercontent.com/u/29394600?v=4", 244 | "profile": "https://github.com/vandana1499", 245 | "contributions": [ 246 | "doc" 247 | ] 248 | }, 249 | { 250 | "login": "lARSHADl", 251 | "name": "Arshad Ahmed", 252 | "avatar_url": "https://avatars3.githubusercontent.com/u/45604332?v=4", 253 | "profile": "https://github.com/lARSHADl", 254 | "contributions": [ 255 | "doc" 256 | ] 257 | }, 258 | { 259 | "login": "Ergouzii", 260 | "name": "Xiaohui Liu", 261 | "avatar_url": "https://avatars1.githubusercontent.com/u/33507446?v=4", 262 | "profile": "http://xiaohuiliu.me", 263 | "contributions": [ 264 | "doc", 265 | "code", 266 | "design" 267 | ] 268 | }, 269 | { 270 | "login": "Seungyeon-Lee", 271 | "name": "Seungyeon-Lee", 272 | "avatar_url": "https://avatars1.githubusercontent.com/u/26589915?v=4", 273 | "profile": "https://seungyeon-lee.github.io/", 274 | "contributions": [ 275 | "code" 276 | ] 277 | } 278 | ], 279 | "contributorsPerLine": 7, 280 | "projectName": "developerFolio", 281 | "projectOwner": "saadpasta", 282 | "repoType": "github", 283 | "repoHost": "https://github.com", 284 | "skipCi": true 285 | } 286 | -------------------------------------------------------------------------------- /src/portfolio.js: -------------------------------------------------------------------------------- 1 | 2 | /* Change this file to get your personal Portfolio */ 3 | 4 | // Your Summary And Greeting Section 5 | 6 | import emoji from "react-easy-emoji"; 7 | 8 | const greeting = { 9 | /* Your Summary And Greeting Section */ 10 | username: "Saad Pasta", 11 | title: "Hi all, I'm Saad", 12 | subTitle: emoji("A passionate Software Developer 🚀 having an experience of building Web and Mobile applications with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks."), 13 | resumeLink: "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing" 14 | }; 15 | 16 | // Your Social Media Link 17 | 18 | const socialMediaLinks = { 19 | 20 | github: "https://github.com/saadpasta", 21 | linkedin: "https://www.linkedin.com/in/saadpasta/", 22 | gmail: "saadpasta70@gmail.com", 23 | gitlab: "https://gitlab.com/saadpasta", 24 | facebook: "https://www.facebook.com/saad.pasta7", 25 | medium: "https://medium.com/@saadpasta", 26 | stackoverflow: "https://stackoverflow.com/users/10422806/saad-pasta" 27 | // Instagram and Twitter are also supported in the links! 28 | }; 29 | 30 | // Your Skills Section 31 | 32 | const skillsSection = { 33 | title: "What i do", 34 | subTitle: "CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK", 35 | skills: [ 36 | emoji("⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications"), 37 | emoji("⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks"), 38 | emoji("⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean") 39 | ], 40 | 41 | /* Make Sure You include correct Font Awesome Classname to view your icon 42 | https://fontawesome.com/icons?d=gallery */ 43 | 44 | softwareSkills: [ 45 | { 46 | skillName: "html-5", 47 | fontAwesomeClassname: "fab fa-html5" 48 | }, 49 | { 50 | skillName: "css3", 51 | fontAwesomeClassname: "fab fa-css3-alt" 52 | }, 53 | { 54 | skillName: "sass", 55 | fontAwesomeClassname: "fab fa-sass" 56 | }, 57 | { 58 | skillName: "JavaScript", 59 | fontAwesomeClassname: "fab fa-js" 60 | }, 61 | { 62 | skillName: "reactjs", 63 | fontAwesomeClassname: "fab fa-react" 64 | }, 65 | { 66 | skillName: "nodejs", 67 | fontAwesomeClassname: "fab fa-node" 68 | }, 69 | { 70 | skillName: "swift", 71 | fontAwesomeClassname: "fab fa-swift" 72 | }, 73 | { 74 | skillName: "npm", 75 | fontAwesomeClassname: "fab fa-npm" 76 | }, 77 | { 78 | skillName: "sql-database", 79 | fontAwesomeClassname: "fas fa-database" 80 | }, 81 | { 82 | skillName: "aws", 83 | fontAwesomeClassname: "fab fa-aws" 84 | }, 85 | { 86 | skillName: "firebase", 87 | fontAwesomeClassname: "fas fa-fire" 88 | }, 89 | { 90 | skillName: "python", 91 | fontAwesomeClassname: "fab fa-python" 92 | }, 93 | { 94 | skillName: "docker", 95 | fontAwesomeClassname: "fab fa-docker" 96 | } 97 | ] 98 | }; 99 | 100 | // Your education background 101 | 102 | const educationInfo = { 103 | viewEducation: true, // Set it to true to see education section 104 | schools: [ 105 | { 106 | schoolName: "Harvard University", 107 | logo: require("./assets/images/harvardLogo.png"), 108 | subHeader: "Master of Science in Computer Science", 109 | duration: "September 2017 - April 2019", 110 | desc: "Participated in the research of XXX and published 3 papers.", 111 | descBullets: [ 112 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 113 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit" 114 | ] 115 | }, 116 | { 117 | schoolName: "Stanford University", 118 | logo: require("./assets/images/stanfordLogo.png"), 119 | subHeader: "Bachelor of Science in Computer Science", 120 | duration: "September 2013 - April 2017", 121 | desc: "Ranked top 10% in the program. Took courses about Software Engineering, Web Security, Operating Systems, ...", 122 | descBullets: [ 123 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 124 | ] 125 | } 126 | ] 127 | } 128 | 129 | // Your top 3 proficient stacks/tech experience 130 | 131 | const techStack = { 132 | viewSkillBars: true, //Set it to true to show Proficiency Section 133 | experience: [ 134 | { 135 | Stack: "Frontend/Design", //Insert stack or technology you have experience in 136 | progressPercentage: "90%" //Insert relative proficiency in percentage 137 | }, 138 | { 139 | Stack: "Backend", 140 | progressPercentage: "70%" 141 | }, 142 | { 143 | Stack: "Programming", 144 | progressPercentage: "60%" 145 | } 146 | ] 147 | }; 148 | 149 | 150 | // Your top 3 work experiences 151 | 152 | const workExperiences = { 153 | viewExperiences: true, //Set it to true to show workExperiences Section 154 | experience: [ 155 | { 156 | role: "Software Engineer", 157 | company: "Facebook", 158 | companylogo: require("./assets/images/facebookLogo.png"), 159 | date: "June 2018 – Present", 160 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", 161 | descBullets: [ 162 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 163 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit" 164 | ] 165 | }, 166 | { 167 | role: "Front-End Developer", 168 | company: "Quora", 169 | companylogo: require("./assets/images/quoraLogo.png"), 170 | date: "May 2017 – May 2018", 171 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 172 | }, 173 | { 174 | role: "Software Engineer Intern", 175 | company: "Airbnb", 176 | companylogo: require("./assets/images/airbnbLogo.png"), 177 | date: "Jan 2015 – Sep 2015", 178 | desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 179 | }, 180 | ] 181 | }; 182 | 183 | /* Your Open Source Section to View Your Github Pinned Projects 184 | To know how to get github key look at readme.md */ 185 | 186 | const openSource = { 187 | githubConvertedToken: process.env.REACT_APP_GITHUB_TOKEN, 188 | githubUserName: "saadpasta", // Change to your github username to view your profile in Contact Section. 189 | showGithubProfile :"true" // Set true or false to show Contact profile using Github, defaults to false 190 | }; 191 | 192 | 193 | // Some Big Projects You have worked with your company 194 | 195 | const bigProjects = { 196 | title: "Big Projects", 197 | subtitle: "SOME STARTUPS AND COMPANIES THAT I HELPED TO CREATE THEIR TECH", 198 | projects: [ 199 | { 200 | image: require("./assets/images/saayaHealthLogo.webp"), 201 | link: "http://saayahealth.com/" 202 | }, 203 | { 204 | image: require("./assets/images/nextuLogo.webp"), 205 | link: "http://nextu.se/" 206 | } 207 | ] 208 | }; 209 | 210 | // Your Achievement Section Include Your Certification Talks and More 211 | 212 | const achievementSection = { 213 | 214 | title: emoji("Achievements And Certifications 🏆 "), 215 | subtitle: "Achievements, Certifications, Award Letters and Some Cool Stuff that I have done !", 216 | 217 | achievementsCards: [ 218 | { 219 | title: "Google Code-In Finalist", 220 | subtitle: "First Pakistani to be selected as Google Code-in Finalist from 4000 students from 77 different countries.", 221 | image: require("./assets/images/codeInLogo.webp"), 222 | footerLink: [ 223 | { name: "Certification", url: "https://drive.google.com/file/d/0B7kazrtMwm5dYkVvNjdNWjNybWJrbndFSHpNY2NFV1p4YmU0/view?usp=sharing" }, 224 | { name: "Award Letter", url: "https://drive.google.com/file/d/0B7kazrtMwm5dekxBTW5hQkg2WXUyR3QzQmR0VERiLXlGRVdF/view?usp=sharing" }, 225 | { name: "Google Code-in Blog", url: "https://opensource.googleblog.com/2019/01/google-code-in-2018-winners.html" } 226 | ] 227 | }, 228 | { 229 | title: "Google Assistant Action", 230 | subtitle: "Developed a Google Assistant Action JavaScript Guru that is available on 2 Billion devices world wide.", 231 | image: require("./assets/images/googleAssistantLogo.webp"), 232 | footerLink: [{ name: "View Google Assistant Action", url: "https://assistant.google.com/services/a/uid/000000100ee688ee?hl=en" }] 233 | }, 234 | 235 | { 236 | title: "PWA Web App Developer", 237 | subtitle: "Completed Certifcation from SMIT for PWA Web App Development", 238 | image: require("./assets/images/pwaLogo.webp"), 239 | footerLink: [ 240 | { name: "Certification", url: "" }, 241 | { name: "Final Project", url: "https://pakistan-olx-1.firebaseapp.com/" } 242 | ] 243 | } 244 | ] 245 | }; 246 | 247 | // Blogs Section 248 | 249 | const blogSection = { 250 | 251 | title: "Blogs", 252 | subtitle: "With Love for Developing cool stuff, I love to write and teach others what I have learnt.", 253 | 254 | blogs: [ 255 | { 256 | url: "https://blog.usejournal.com/create-a-google-assistant-action-and-win-a-google-t-shirt-and-cloud-credits-4a8d86d76eae", 257 | title: "Win a Google Assistant Tshirt and $200 in Google Cloud Credits", 258 | description: "Do you want to win $200 and Google Assistant Tshirt by creating a Google Assistant Action in less then 30 min?" 259 | }, 260 | { 261 | url: "https://medium.com/@saadpasta/why-react-is-the-best-5a97563f423e", 262 | title: "Why REACT is The Best?", 263 | description: "React is a JavaScript library for building User Interface. It is maintained by Facebook and a community of individual developers and companies." 264 | } 265 | ] 266 | }; 267 | 268 | // Talks Sections 269 | 270 | const talkSection = { 271 | title: "TALKS", 272 | subtitle: emoji("I LOVE TO SHARE MY LIMITED KNOWLEDGE AND GET A SPEAKER BADGE 😅"), 273 | 274 | talks: [ 275 | { 276 | title: "Build Actions For Google Assistant", 277 | subtitle: "Codelab at GDG DevFest Karachi 2019", 278 | slides_url: "https://bit.ly/saadpasta-slides", 279 | event_url: "https://www.facebook.com/events/2339906106275053/" 280 | } 281 | ] 282 | }; 283 | 284 | // Podcast Section 285 | 286 | const podcastSection = { 287 | title: emoji("Podcast 🎙️"), 288 | subtitle: "I LOVE TO TALK ABOUT MYSELF AND TECHNOLOGY", 289 | 290 | // Please Provide with Your Podcast embeded Link 291 | podcast: ["https://anchor.fm/codevcast/embed/episodes/DevStory---Saad-Pasta-from-Karachi--Pakistan-e9givv/a-a15itvo"] 292 | }; 293 | 294 | const contactInfo = { 295 | title: emoji("Contact Me ☎️"), 296 | subtitle: "Discuss a project or just want to say hi? My Inbox is open for all.", 297 | number: "+92-3243454077", 298 | email_address: "saadpasta70@gmail.com" 299 | }; 300 | 301 | //Twitter Section 302 | 303 | const twitterDetails = { 304 | 305 | userName : "twitter"//Replace "twitter" with your twitter username without @ 306 | 307 | }; 308 | export { greeting, socialMediaLinks, skillsSection, educationInfo, techStack, workExperiences, openSource, bigProjects, achievementSection, blogSection, talkSection, podcastSection, contactInfo , twitterDetails}; 309 | -------------------------------------------------------------------------------- /src/assets/images/jsFramework.svg: -------------------------------------------------------------------------------- 1 | JavaScript frameworks -------------------------------------------------------------------------------- /src/assets/images/programmer.svg: -------------------------------------------------------------------------------- 1 | programming --------------------------------------------------------------------------------