├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── portfolio.png ├── public ├── android-chrome-192x192.png ├── android-chrome-384x384.png ├── apple-touch-icon.png ├── browserconfig.xml ├── cpLogo.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── manifest.json ├── mstile-150x150.png ├── robots.txt └── safari-pinned-tab.svg └── src ├── App.css ├── App.js ├── App.test.js ├── assets ├── fonts │ ├── Agustina.woff │ └── Montserrat-Regular.ttf ├── images │ ├── airbnbLogo.png │ ├── codeInLogo.webp │ ├── contactMail.webp │ ├── contactMailDark.svg │ ├── cpLogo.png │ ├── developerActivity.svg │ ├── ersteLogo.jpg │ ├── facebookLogo.png │ ├── googleAssistant.svg │ ├── googleAssistantLogo.webp │ ├── harvardLogo.png │ ├── jsFramework.svg │ ├── manOnTable.svg │ ├── nextuLogo.webp │ ├── programmer.svg │ ├── pwa.webp │ ├── pwaLogo.webp │ ├── quoraLogo.png │ ├── saayaHealthLogo.webp │ ├── skill.svg │ ├── stanfordLogo.png │ ├── talksCardBack.svg │ └── vodafoneLogo.png └── lottie │ ├── build.json │ ├── codingPerson.json │ ├── email.json │ └── landingPerson.json ├── components ├── ToggleSwitch │ ├── ToggleSwitch.css │ └── ToggleSwitch.js ├── achievementCard │ ├── AchievementCard.css │ ├── AchievementCard.js │ └── AchivementCard.js ├── blogCard │ ├── BlogCard.css │ └── BlogCard.js ├── button │ ├── Button.css │ └── Button.js ├── displayLottie │ └── DisplayLottie.js ├── educationCard │ ├── EducationCard.css │ └── EducationCard.js ├── experienceCard │ ├── ExperienceCard.css │ └── ExperienceCard.js ├── footer │ ├── Footer.css │ └── Footer.js ├── githubProfileCard │ ├── GithubProfileCard.css │ └── GithubProfileCard.js ├── githubRepoCard │ ├── GithubRepoCard.css │ └── GithubRepoCard.js ├── header │ ├── Header.css │ └── Header.js ├── socialMedia │ ├── SocialMedia.css │ └── SocialMedia.js ├── softwareSkills │ ├── SoftwareSkill.css │ └── SoftwareSkill.js └── talkCard │ ├── TalkCard.css │ └── TalkCard.js ├── containers ├── Main.css ├── Main.js ├── StartupProjects │ ├── StartupProject.js │ └── StartupProjects.css ├── achievement │ ├── Achievement.css │ └── Achievement.js ├── blogs │ ├── Blog.css │ └── Blogs.js ├── contact │ ├── Contact.css │ └── Contact.js ├── education │ ├── Education.css │ └── Education.js ├── greeting │ ├── Greeting.css │ └── Greeting.js ├── loading │ ├── Loading.js │ └── loading.css ├── podcast │ ├── Podcast.css │ └── Podcast.js ├── profile │ └── Profile.js ├── projects │ ├── Project.css │ └── Projects.js ├── skillProgress │ ├── Progress.css │ └── skillProgress.js ├── skills │ ├── Skills.css │ └── Skills.js ├── talks │ ├── Talks.css │ └── Talks.js ├── topbutton │ ├── Top.css │ └── Top.js ├── twitter-embed │ ├── twitter.css │ └── twitter.js └── workExperience │ ├── WorkExperience.css │ └── WorkExperience.js ├── contexts └── StyleContext.js ├── index.css ├── index.js ├── logo.svg ├── portfolio.js └── serviceWorker.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | build 3 | yarn.lock 4 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # # Clever Programmer ReactJS Portfolio Template 2 | 3 | ![ReactJS Resume Website Template](portfolio.png?raw=true "ReactJS Resume Website Template") 4 | 5 | ## LIVE DEMO 6 | 7 | ## Description 8 | This is a ReactJS based personal resume website template for participants of The 6 Figure JavaScript ReactJS Challenge by Clever 9 | 10 | ## Make it Your Own! 11 | #### PREREQUISITES: 12 | - Sign up for a Netlify account HERE 13 | - Install Node JS in your computer HERE 14 | #### PROCEDURE: 15 | - Download the zip folder from Github and unzip it 16 | Here is the link to download zip 👉 17 | HERE 18 | - Open the folder in VS Code 19 | - Edit src/portfolio.js and add your personal details and projects 20 | - Open terminal in VS Code 21 | - RUN npm init , this command can be used to set up a new or existing npm package 22 | - RUN npm install , this command pulls out all the require node modules 23 | - RUN npm run build, this command will create a build folder for you 24 | - DRAG AND DROP the BUILD folder on Netlify, your app is live now for the world to see 25 | 26 | 27 | ## Credits 28 | 29 | #### Credits to Saad Pasta Original Repo 30 | -------------------------------------------------------------------------------- /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-lottie": "^1.2.3", 17 | "react-reveal": "^1.2.2", 18 | "react-scripts": "^3.4.3", 19 | "react-twitter-embed": "3.0.3" 20 | }, 21 | "scripts": { 22 | "predeploy": "npm run build", 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "deploy": "gh-pages -b master -d build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject", 28 | "format": "prettier --write \"./**/*.{js,css,json}\"" 29 | }, 30 | "eslintConfig": { 31 | "extends": "react-app" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "devDependencies": { 46 | "prettier": "^2.2.1" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /portfolio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/portfolio.png -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/android-chrome-384x384.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #603cba 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/cpLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/cpLogo.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/favicon.ico -------------------------------------------------------------------------------- /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 | My Portfolio | 5 Day React Challenge 🚀 52 | 53 | 54 | 55 |
56 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/public/mstile-150x150.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /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/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/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./App.css"; 3 | import Main from "./containers/Main"; 4 | 5 | function App() { 6 | return ( 7 |
8 |
9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/assets/fonts/Agustina.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/fonts/Agustina.woff -------------------------------------------------------------------------------- /src/assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /src/assets/images/airbnbLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/airbnbLogo.png -------------------------------------------------------------------------------- /src/assets/images/codeInLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/codeInLogo.webp -------------------------------------------------------------------------------- /src/assets/images/contactMail.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/contactMail.webp -------------------------------------------------------------------------------- /src/assets/images/cpLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/cpLogo.png -------------------------------------------------------------------------------- /src/assets/images/ersteLogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/ersteLogo.jpg -------------------------------------------------------------------------------- /src/assets/images/facebookLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/facebookLogo.png -------------------------------------------------------------------------------- /src/assets/images/googleAssistant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/googleAssistantLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/googleAssistantLogo.webp -------------------------------------------------------------------------------- /src/assets/images/harvardLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/harvardLogo.png -------------------------------------------------------------------------------- /src/assets/images/jsFramework.svg: -------------------------------------------------------------------------------- 1 | JavaScript frameworks -------------------------------------------------------------------------------- /src/assets/images/nextuLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/nextuLogo.webp -------------------------------------------------------------------------------- /src/assets/images/programmer.svg: -------------------------------------------------------------------------------- 1 | programming -------------------------------------------------------------------------------- /src/assets/images/pwa.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/pwa.webp -------------------------------------------------------------------------------- /src/assets/images/pwaLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/pwaLogo.webp -------------------------------------------------------------------------------- /src/assets/images/quoraLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/quoraLogo.png -------------------------------------------------------------------------------- /src/assets/images/saayaHealthLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/saayaHealthLogo.webp -------------------------------------------------------------------------------- /src/assets/images/skill.svg: -------------------------------------------------------------------------------- 1 | certificate -------------------------------------------------------------------------------- /src/assets/images/stanfordLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/stanfordLogo.png -------------------------------------------------------------------------------- /src/assets/images/talksCardBack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/images/vodafoneLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/portfolio-react-cp/0b64f74403e6518862f3270779df0f93b35219b0/src/assets/images/vodafoneLogo.png -------------------------------------------------------------------------------- /src/assets/lottie/email.json: -------------------------------------------------------------------------------- 1 | {"v":"5.7.1","fr":30,"ip":0,"op":30,"w":1920,"h":1080,"nm":"Lottie Tutorial New","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"evelope","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[959.906,561.464,0],"to":[0,-7.333,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":14,"s":[959.906,517.464,0],"to":[0,0,0],"ti":[0,-7.333,0]},{"t":28.0000011404634,"s":[959.906,561.464,0]}],"ix":2},"a":{"a":0,"k":[210.768,158.138,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.26,0],[0,0],[0,7.261],[0,0],[0,0],[-3.071,0],[-2.48,2.146],[0,0],[0,0]],"o":[[0,0],[-7.26,0],[0,0],[0,0],[2.48,2.145],[3.071,0],[0,0],[0,0],[-0.001,7.26]],"v":[[171.045,131.573],[-171.044,131.573],[-184.202,118.415],[-184.202,-102.753],[-8.622,49.417],[0,52.629],[8.622,49.417],[184.203,-102.753],[184.203,118.416]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-1.555,-0.647],[0,0],[0,0],[-1.788,0]],"o":[[1.788,0],[0,0],[0,0],[1.554,-0.646],[0,0]],"v":[[171.045,-131.573],[176.088,-130.555],[0,22.061],[-176.088,-130.555],[-171.045,-131.573]],"c":true},"ix":2},"nm":"Tracé 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[21.767,0],[0,0],[0,-21.766],[0,0],[-21.767,0],[0,0],[0,21.766],[0,0]],"o":[[0,0],[-21.767,0],[0,0],[0,21.766],[0,0],[21.767,0],[0,0],[0,-21.766]],"v":[[171.045,-157.888],[-171.044,-157.888],[-210.517,-118.416],[-210.517,118.416],[-171.044,157.888],[171.045,157.888],[210.517,118.416],[210.517,-118.416]],"c":true},"ix":2},"nm":"Tracé 3","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.4,0,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[210.767,158.138],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"evelope-shadow","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[1043.578,612.154,0],"to":[0,-7.333,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":14,"s":[1043.578,568.154,0],"to":[0,0,0],"ti":[0,-7.333,0]},{"t":28.0000011404634,"s":[1043.578,612.154,0]}],"ix":2},"a":{"a":0,"k":[115.3,100.942,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.181,185.983],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[115.05,-100.692],[115.05,77.015],[91.371,100.692],[-115.05,100.692]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[115.3,100.942],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"wave","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[775.703,248.429,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":14,"s":[775.703,254.42900000000003,0],"to":[0,0,0],"ti":[0,0,0]},{"t":28.0000011404634,"s":[775.703,248.429,0]}],"ix":2},"a":{"a":0,"k":[76.35,61.296,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-18.541,-18.541],[0,0]],"o":[[0,0],[18.541,18.541],[0,0]],"v":[[-33.595,0],[1.267,0],[33.595,0]],"c":false},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":17.102,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[76.35,61.296],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"circle1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[666.721,728.644,0],"to":[0,2.167,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":14,"s":[666.721,741.644,0],"to":[0,0,0],"ti":[0,2.167,0]},{"t":28.0000011404634,"s":[666.721,728.644,0]}],"ix":2},"a":{"a":0,"k":[57.806,57.806,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-8.313],[8.313,0],[0,8.313],[-8.312,0]],"o":[[0,8.313],[-8.312,0],[0,-8.313],[8.313,0]],"v":[[15.051,0],[0,15.051],[-15.051,0],[0,-15.051]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":17.102,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[57.806,57.806],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"plus","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[1257.728,623.464,0],"to":[0,1.589,0],"ti":[0,-0.535,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":14,"s":[1257.728,633,0],"to":[0,0.535,0],"ti":[0,1.054,0]},{"t":28.0000011404634,"s":[1257.728,626.677,0]}],"ix":2},"a":{"a":0,"k":[33.16,8.725,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[32.91,8.475],[-32.91,8.475],[-32.91,-8.475],[32.91,-8.475]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[33.16,8.725],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"plus2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[1257.728,623.264,0],"to":[0,1.623,0],"ti":[0,-0.569,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":14,"s":[1257.728,633,0],"to":[0,0.569,0],"ti":[0,1.054,0]},{"t":28.0000011404634,"s":[1257.728,626.677,0]}],"ix":2},"a":{"a":0,"k":[8.724,33.16,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-8.474,-32.91],[8.474,-32.91],[8.474,32.91],[-8.474,32.91]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[8.724,33.16],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"circle2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[1249.252,355.177,0],"to":[0,-1,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":14,"s":[1249.252,349.177,0],"to":[0,0,0],"ti":[0,-1,0]},{"t":28.0000011404634,"s":[1249.252,355.177,0]}],"ix":2},"a":{"a":0,"k":[67.097,67.097,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-13.444],[13.444,0],[0,13.444],[-13.444,0]],"o":[[0,13.444],[-13.444,0],[0,-13.444],[13.444,0]],"v":[[24.343,0],[0,24.342],[-24.343,0],[0,-24.342]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":17.102,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[67.097,67.097],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"shadow","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[959.905,865.667,0],"ix":2},"a":{"a":0,"k":[153.686,22.08,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":14,"s":[81,81,100]},{"t":28.0000011404634,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-12.057],[84.742,0],[0,12.057],[-84.74,0]],"o":[[0,12.057],[-84.74,0],[0,-12.057],[84.742,0]],"v":[[153.436,-0.001],[-0.001,21.831],[-153.436,-0.001],[-0.001,-21.831]],"c":true},"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8862745098039215,0.8235294117647058,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fond 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[153.686,22.081],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30.0000012219251,"st":0,"bm":0}],"markers":[{"tm":0,"cm":"1","dr":0},{"tm":395.00001608868,"cm":"2","dr":0}]} -------------------------------------------------------------------------------- /src/components/ToggleSwitch/ToggleSwitch.css: -------------------------------------------------------------------------------- 1 | .switch { 2 | position: relative; 3 | display: inline-block; 4 | width: 50px; 5 | height: 26px; 6 | } 7 | 8 | /* Fix visible slider checkbox */ 9 | input { 10 | transform: scale(0.5); 11 | } 12 | 13 | .slider { 14 | position: absolute; 15 | cursor: pointer; 16 | top: 0; 17 | left: 0; 18 | right: 0; 19 | bottom: 0; 20 | background-color: #ccc; 21 | -webkit-transition: 0.4s; 22 | transition: 0.4s; 23 | } 24 | 25 | .slider::before { 26 | position: absolute; 27 | content: ""; 28 | height: 26px; 29 | width: 28px; 30 | left: 0; 31 | bottom: 0; 32 | background-color: white; 33 | -webkit-transition: 0.4s; 34 | transition: 0.4s; 35 | } 36 | 37 | input:checked + .slider { 38 | background-color: #2196f3; 39 | } 40 | 41 | input:focus + .slider { 42 | box-shadow: 0 0 1px #2196f3; 43 | } 44 | 45 | input:checked + .slider::before { 46 | -webkit-transform: translateX(26px); 47 | -ms-transform: translateX(26px); 48 | transform: translateX(26px); 49 | } 50 | 51 | /* Rounded sliders */ 52 | .slider.round { 53 | border-radius: 34px; 54 | } 55 | 56 | .slider.round::before { 57 | border-radius: 50%; 58 | } 59 | 60 | .slider::after { 61 | display: inline; 62 | position: absolute; 63 | right: 9.3%; 64 | bottom: 17.5%; 65 | } 66 | 67 | input:checked + .slider::after { 68 | display: inline; 69 | position: absolute; 70 | right: 56.3%; 71 | bottom: 14.5%; 72 | } 73 | 74 | @media all and (max-width: 786px) and (min-width: 425px) { 75 | input:checked + .slider::after { 76 | right: 60.3%; 77 | bottom: 20.5%; 78 | } 79 | .slider::after { 80 | right: 15.3%; 81 | bottom: 22.5%; 82 | } 83 | } 84 | 85 | @media all and (max-width: 2560px) and (min-width: 1552px) { 86 | .slider::after { 87 | bottom: 12.5% !important; 88 | } 89 | } 90 | 91 | @media all and (max-width: 1552px) and (min-width: 1440px) { 92 | .slider::after { 93 | bottom: 7.5% !important; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/ToggleSwitch.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useContext} from "react"; 2 | import StyleContext from "../../contexts/StyleContext"; 3 | import "./ToggleSwitch.css"; 4 | 5 | const ToggleSwitch = () => { 6 | const {isDark} = useContext(StyleContext); 7 | const [isChecked, setChecked] = useState(isDark); 8 | const styleContext = useContext(StyleContext); 9 | 10 | return ( 11 | 22 | ); 23 | }; 24 | export default ToggleSwitch; 25 | -------------------------------------------------------------------------------- /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 | -webkit-transition: all 0.3s ease; 25 | -o-transition: all 0.3s ease; 26 | transition: all 0.3s ease; 27 | } 28 | .certificate-detail-div { 29 | text-align: center; 30 | } 31 | .certificate-card:hover { 32 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 33 | } 34 | .dark-mode.certificate-card:hover { 35 | box-shadow: rgba(255, 255, 255, 0.2) 0px 20px 30px -10px; 36 | } 37 | .certificate-image-div { 38 | position: relative; 39 | height: 250px; 40 | overflow: hidden; 41 | text-align: center; 42 | } 43 | .achievement-cards-div { 44 | display: grid; 45 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 46 | gap: 1rem 1rem; 47 | } 48 | .certificate-card-footer { 49 | display: flex; 50 | align-items: center; 51 | flex-wrap: wrap; 52 | justify-content: center; 53 | } 54 | .certificate-card-footer span.certificate-tag { 55 | background: #55198b; 56 | color: #f5f2f4; 57 | vertical-align: middle; 58 | align-items: center; 59 | border-radius: 4px; 60 | display: inline-flex; 61 | font-size: 0.75rem; 62 | height: 2em; 63 | justify-content: center; 64 | white-space: nowrap; 65 | line-height: 1.5; 66 | margin: 0 0.5rem 0.5rem 0; 67 | padding: 0 0.75em; 68 | cursor: pointer; 69 | transition: 0.2s ease-in; 70 | } 71 | span.certificate-tag:hover { 72 | background: #8c43ce; 73 | } 74 | -------------------------------------------------------------------------------- /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)} 32 | > 33 | {v.name} 34 | 35 | ); 36 | })} 37 |
38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/components/achievementCard/AchivementCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function AchivementCard({cardInfo}) { 4 | function openUrlInNewTab(url) { 5 | var win = window.open(url, "_blank"); 6 | win.focus(); 7 | } 8 | 9 | return ( 10 |
11 |
12 | PWA 13 |
14 |
15 |
{cardInfo.title}
16 |

{cardInfo.description}

17 |
18 |
19 | {cardInfo.footer.map((v, i) => { 20 | return ( 21 |

openUrlInNewTab(v.url)}> 22 | {v.name} 23 |

24 | ); 25 | })} 26 |
27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /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/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 | 21 |

22 | {blog.title} 23 |

24 |

25 | {blog.description} 26 |

27 |
28 |
→
29 |
30 | 31 |
32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /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 0.3s ease-in-out 0s; 18 | } 19 | .main-button:hover { 20 | background-color: #ffffff; 21 | color: #55198b; 22 | transition: all 0.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/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 | -------------------------------------------------------------------------------- /src/components/displayLottie/DisplayLottie.js: -------------------------------------------------------------------------------- 1 | import React, {Component, Suspense} from "react"; 2 | import Lottie from "react-lottie"; 3 | import Loading from "../../containers/loading/Loading"; 4 | 5 | export default class DisplayLottie extends Component { 6 | render() { 7 | const animationData = this.props.animationData; 8 | const defaultOptions = { 9 | loop: true, 10 | autoplay: true, 11 | animationData: animationData 12 | }; 13 | 14 | return ( 15 | }> 16 | {/* To override default onClick pause by Lottie */} 17 |
18 | 19 |
20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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 | height: 27px; 39 | } 40 | 41 | .education-roundedimg { 42 | object-fit: cover; 43 | margin-right: 2rem; 44 | width: 6rem; 45 | height: 6rem; 46 | box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); 47 | border-radius: 50%; 48 | } 49 | 50 | .education-card-right { 51 | max-width: 70%; 52 | } 53 | 54 | .education-text-subHeader { 55 | color: black; 56 | font-weight: 700; 57 | font-size: 19px; 58 | margin: 0px; 59 | padding-top: 0.8rem; 60 | line-height: normal; 61 | } 62 | 63 | .education-text-duration { 64 | color: #000000; 65 | font-size: 19px; 66 | margin: 0px; 67 | padding-top: 0.5rem; 68 | } 69 | 70 | .education-text-desc { 71 | margin-top: 0.5rem; 72 | margin-bottom: 0.5rem; 73 | } 74 | 75 | .education-text-bullets > ul { 76 | margin-top: 0.5rem; 77 | } 78 | 79 | /* Media Query */ 80 | 81 | @media (max-width: 1380px) { 82 | .education-card { 83 | flex-direction: column; 84 | padding-bottom: 10px; 85 | } 86 | .education-card-right { 87 | max-width: 90%; 88 | } 89 | .education-card-border { 90 | width: 90%; 91 | } 92 | .education-text-subHeader { 93 | padding-top: 0.5rem; 94 | font-size: 16px; 95 | } 96 | .education-text-school { 97 | font-size: 20px; 98 | height: 23px; 99 | } 100 | .education-text-duration { 101 | font-size: 16px; 102 | } 103 | .education-roundedimg { 104 | width: 4rem; 105 | height: 4rem; 106 | margin-bottom: 0.5rem; 107 | margin-right: 0px; 108 | } 109 | } 110 | 111 | @media (max-width: 768px) { 112 | .education-card { 113 | text-align: center; 114 | } 115 | .education-card-right { 116 | max-width: 100%; 117 | } 118 | .education-card-border { 119 | width: 100%; 120 | } 121 | .education-roundedimg { 122 | margin-top: 10px; 123 | width: 4rem; 124 | height: 4rem; 125 | margin-bottom: 1rem; 126 | margin-right: 0; 127 | } 128 | .education-text-bullets > ul { 129 | max-width: 80%; 130 | margin: auto; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /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, i) => ( 12 |
  • 13 | {item} 14 |
    • 15 | )) 16 | : null; 17 | }; 18 | const {isDark} = useContext(StyleContext); 19 | return ( 20 |
    21 | 22 |
    23 |
    24 | {school.schoolName} 31 |
    32 |
    33 |
    {school.schoolName}
    34 | 35 |
    36 |
    43 | {school.subHeader} 44 |
    45 |

    50 | {school.duration} 51 |

    52 |

    {school.desc}

    53 |
    54 |
      55 | 56 |
    57 |
    58 |
    59 |
    60 |
    61 |     62 | 63 |
    64 |     65 |
    66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /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 | } 155 | -------------------------------------------------------------------------------- /src/components/experienceCard/ExperienceCard.js: -------------------------------------------------------------------------------- 1 | import React, {useState, 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" 16 | ? null 17 | : "rgb(" + values.join(", ") + ")"; 18 | } 19 | 20 | const GetDescBullets = ({descBullets, isDark}) => { 21 | return descBullets 22 | ? descBullets.map((item, i) => ( 23 |
  • 27 | {item} 28 |
    • 29 | )) 30 | : null; 31 | }; 32 | 33 | return ( 34 |
    35 |
    36 |
    37 |
    38 |
    {cardInfo.company}
    39 |
    40 | 41 | {cardInfo.company} getColorArrays()} 48 | /> 49 |
    50 |
    51 |
    58 | {cardInfo.role} 59 |
    60 |
    67 | {cardInfo.date} 68 |
    69 |

    76 | {cardInfo.desc} 77 |

    78 |
      79 | 80 |
    81 |
    82 |
    83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /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/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 by Saad Pasta | Modified by David Rakosi @CleverProgrammer")} 14 |

    15 |

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

    21 |
    22 |     23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /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/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 | 39 | {prof.location} 40 | 41 |
    42 | )} 43 |
    44 | 45 | Open for opportunities: {prof.hireable} 46 | 47 |
    48 | 49 |
    50 |
    51 | {prof.name} 56 |
    57 |
    58 |
    59 |     60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /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 | -webkit-transition: all 0.3s ease; 8 | -o-transition: all 0.3s ease; 9 | transition: all 0.3s ease; 10 | } 11 | .repo-card-div:hover { 12 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 13 | } 14 | 15 | .repo-stats { 16 | display: flex; 17 | -webkit-box-pack: justify; 18 | justify-content: space-between; 19 | font-size: 13px; 20 | color: rgb(106, 115, 125); 21 | } 22 | 23 | .repo-left-stat { 24 | -webkit-box-flex: 1; 25 | flex-grow: 1; 26 | display: flex; 27 | } 28 | 29 | .language-color { 30 | width: 10px; 31 | height: 10px; 32 | background-color: blue; 33 | margin-right: 0.25rem; 34 | border-radius: 100%; 35 | } 36 | 37 | .repo-left-stat span { 38 | display: flex; 39 | -webkit-box-align: center; 40 | align-items: center; 41 | margin-right: 0.75rem; 42 | } 43 | 44 | .repo-name-div { 45 | display: flex; 46 | align-items: center; 47 | } 48 | 49 | .repo-svg { 50 | margin-right: 0.5rem; 51 | min-width: 16px; 52 | } 53 | 54 | .repo-name { 55 | white-space: nowrap; 56 | text-overflow: ellipsis; 57 | color: rgb(36, 41, 46); 58 | margin-bottom: 0.75rem; 59 | font-size: 25px; 60 | font-weight: 700; 61 | letter-spacing: -0.5px; 62 | overflow: hidden; 63 | margin: 0px; 64 | height: 30px; 65 | } 66 | 67 | .repo-star-svg { 68 | margin-right: 0.3rem; 69 | } 70 | 71 | .repo-description { 72 | overflow: hidden; 73 | display: -webkit-box; 74 | -webkit-line-clamp: 2; 75 | -webkit-box-orient: vertical; 76 | } 77 | 78 | .dark-card-mode { 79 | background-color: #171c28 !important; 80 | color: white; 81 | } 82 | .dark-card-mode p { 83 | color: white; 84 | } 85 | .dark-card-mode:hover { 86 | background-color: #55198b !important; 87 | box-shadow: 0px 0px 16px #d9dbdf; 88 | } 89 | -------------------------------------------------------------------------------- /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 | 33 |

    {repo.node.name}

    34 |
    35 |

    {repo.node.description}

    36 |
    37 |
    38 | {repo.node.primaryLanguage !== null && ( 39 | 40 |
    44 |

    {repo.node.primaryLanguage.name}

    45 |     46 | )} 47 | 48 | 62 |

    {repo.node.forkCount}

    63 |     64 | 65 | 79 |

    {repo.node.stargazers.totalCount}

    80 |     81 |
    82 |
    83 |

    {repo.node.diskUsage} KB

    84 |
    85 |
    86 |
    87 |
    88 |     89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /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/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 { 7 | greeting, 8 | workExperiences, 9 | skillsSection, 10 | openSource, 11 | blogSection, 12 | talkSection, 13 | achievementSection 14 | } from "../../portfolio"; 15 | 16 | function Header() { 17 | const {isDark} = useContext(StyleContext); 18 | const viewExperience = workExperiences.display; 19 | const viewOpenSource = openSource.display; 20 | const viewSkills = skillsSection.display; 21 | const viewAchievement = achievementSection.display; 22 | const viewBlog = blogSection.display; 23 | const viewTalks = talkSection.display; 24 | 25 | return ( 26 | 27 |
    28 | 29 | < 30 | {greeting.username} 31 | /> 32 | 33 | 34 | 41 |
      42 | {viewSkills && ( 43 |
    • 44 | Skills 45 |
      • 46 | )} 47 | {viewExperience && ( 48 |
    • 49 | Work Experiences 50 |
      • 51 | )} 52 | {viewOpenSource && ( 53 |
    • 54 | Open Source 55 |
      • 56 | )} 57 | {viewAchievement && ( 58 |
    • 59 | Achievements 60 |
      • 61 | )} 62 | {viewBlog && ( 63 |
    • 64 | Blogs 65 |
      • 66 | )} 67 | {viewTalks && ( 68 |
    • 69 | Talks 70 |
      • 71 | )} 72 |
    • 73 | Contact Me 74 |
      • 75 |
    • 76 | 77 | 78 | 79 |
      • 80 |
    81 |
    82 |     83 | ); 84 | } 85 | export default Header; 86 | -------------------------------------------------------------------------------- /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/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 | if (!socialMediaLinks.display) { 7 | return null; 8 | } 9 | return ( 10 |
    11 | {socialMediaLinks.github ? ( 12 | 18 | 19 | 20 | 21 | ) : null} 22 | 23 | {socialMediaLinks.linkedin ? ( 24 | 30 | 31 | 32 | 33 | ) : null} 34 | 35 | {socialMediaLinks.gmail ? ( 36 | 42 | 43 | 44 | 45 | ) : null} 46 | 47 | {socialMediaLinks.gitlab ? ( 48 | 54 | 55 | 56 | 57 | ) : null} 58 | 59 | {socialMediaLinks.facebook ? ( 60 | 66 | 67 | 68 | 69 | ) : null} 70 | 71 | {socialMediaLinks.instagram ? ( 72 | 78 | 79 | 80 | 81 | ) : null} 82 | 83 | {socialMediaLinks.twitter ? ( 84 | 90 | 91 | 92 | 93 | ) : null} 94 | 95 | {socialMediaLinks.medium ? ( 96 | 102 | 103 | 104 | 105 | ) : null} 106 | 107 | {socialMediaLinks.stackoverflow ? ( 108 | 114 | 115 | 116 | 117 | ) : null} 118 |
    119 | ); 120 | } 121 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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, i) => { 11 | return ( 12 |
    • 17 | 18 |

      {skills.skillName}

      19 |
      • 20 | ); 21 | })} 22 |
    23 |
    24 |
    25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /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: 0px 0px 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/talkCard/TalkCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./TalkCard.css"; 3 | 4 | export default function TalkCard({talkDetails}) { 5 | return ( 6 |
    7 |
    8 |
    13 |
    14 |
    {talkDetails.title}
    15 |

    {talkDetails.subtitle}

    16 | 17 |
    18 | 19 | Slides 20 | 21 | 22 | Event 23 | 24 |
    25 |
    26 |
    27 |
    28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/containers/Main.css: -------------------------------------------------------------------------------- 1 | .dark-mode { 2 | background-color: #171c28; 3 | color: white; 4 | transition: "0.1s"; 5 | } 6 | -------------------------------------------------------------------------------- /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 Footer from "../components/footer/Footer"; 12 | import Talks from "./talks/Talks"; 13 | import Podcast from "./podcast/Podcast"; 14 | import Education from "./education/Education"; 15 | import Top from "./topbutton/Top"; 16 | import Twitter from "./twitter-embed/twitter"; 17 | import {StyleProvider} from "../contexts/StyleContext"; 18 | import "./Main.css"; 19 | import Profile from "./profile/Profile"; 20 | 21 | export default class Main extends Component { 22 | constructor(props) { 23 | super(props); 24 | this.state = { 25 | isDark: false 26 | }; 27 | } 28 | 29 | componentDidMount() { 30 | if (localStorage.getItem("isDark") === null) { 31 | const darkPref = window.matchMedia("(prefers-color-scheme: dark)"); 32 | localStorage.setItem("isDark", darkPref.matches); 33 | } 34 | this.setState({isDark: JSON.parse(localStorage.getItem("isDark"))}); 35 | } 36 | changeTheme = () => { 37 | this.setState({isDark: !this.state.isDark}, () => { 38 | localStorage.setItem("isDark", this.state.isDark); 39 | }); 40 | }; 41 | 42 | render() { 43 | return ( 44 |
    45 | 48 |
    49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | // 60 | 61 | 62 |
    63 | 64 | 65 |
    66 | ); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /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 | if (!bigProjects.display) { 14 | return null; 15 | } 16 | return ( 17 | 18 |
    19 |
    20 |

    {bigProjects.title}

    21 |

    28 | {bigProjects.subtitle} 29 |

    30 | 31 |
    32 | {bigProjects.projects.map((project, i) => { 33 | return ( 34 |
    42 | {project.image ? ( 43 |
    44 | {project.projectName} 49 |
    50 | ) : null} 51 |
    52 |
    55 | {project.projectName} 56 |
    57 |

    62 | {project.projectDesc} 63 |

    64 | {project.footerLink ? ( 65 |
    66 | {project.footerLink.map((link, i) => { 67 | return ( 68 | openProjectInNewWindow(link.url)} 74 | > 75 | {link.name} 76 | 77 | ); 78 | })} 79 |
    80 | ) : null} 81 |
    82 |
    83 | ); 84 | })} 85 |
    86 |
    87 |
    88 |     89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /src/containers/StartupProjects/StartupProjects.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 | .project-card { 19 | display: flex; 20 | flex-direction: column; 21 | background-color: rgb(255, 255, 255); 22 | padding: 1.5rem; 23 | border-radius: 10px; 24 | border: 1px solid rgba(211, 211, 211, 0.397); 25 | justify-content: center; 26 | } 27 | .project-card-light { 28 | box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px; 29 | -webkit-transition: all 0.3s ease; 30 | -o-transition: all 0.3s ease; 31 | transition: all 0.3s ease; 32 | } 33 | 34 | .project-card-dark { 35 | box-shadow: 0px 10px 30px -15px #d9dbdf; 36 | -webkit-transition: all 0.3s ease; 37 | -o-transition: all 0.3s ease; 38 | transition: all 0.25s ease; 39 | } 40 | 41 | .project-detail { 42 | text-align: center; 43 | } 44 | .project-card-light:hover { 45 | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px -10px; 46 | } 47 | .project-card-dark:hover { 48 | box-shadow: #d9dbdf 0px 20px 30px -10px; 49 | } 50 | .project-image { 51 | position: relative; 52 | height: 250px; 53 | overflow: hidden; 54 | text-align: center; 55 | } 56 | 57 | .projects-container { 58 | display: grid; 59 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 60 | gap: 1rem 1rem; 61 | } 62 | 63 | .project-card-footer span.project-tag { 64 | background: #55198b; 65 | color: #f5f2f4; 66 | vertical-align: middle; 67 | align-items: center; 68 | border-radius: 4px; 69 | display: inline-flex; 70 | font-size: 0.75rem; 71 | height: 2em; 72 | justify-content: center; 73 | white-space: nowrap; 74 | line-height: 1.5; 75 | margin: 0 0.5rem 0.5rem 0; 76 | padding: 0 0.75em; 77 | cursor: pointer; 78 | transition: 0.2s ease-in; 79 | } 80 | 81 | @media (max-width: 768px) { 82 | .project-subtitle { 83 | font-size: 16px; 84 | text-align: center; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /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/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 | if (!achievementSection.display) { 10 | return null; 11 | } 12 | return ( 13 | 14 |
    15 |
    16 |
    17 |

    24 | {achievementSection.title} 25 |

    26 |

    33 | {achievementSection.subtitle} 34 |

    35 |
    36 |
    37 | {achievementSection.achievementsCards.map((card, i) => { 38 | return ( 39 | 49 | ); 50 | })} 51 |
    52 |
    53 |
    54 |     55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /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/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 | if (!blogSection.display) { 10 | return null; 11 | } 12 | return ( 13 | 14 |
    15 |
    16 |

    {blogSection.title}

    17 |

    22 | {blogSection.subtitle} 23 |

    24 |
    25 |
    26 |
    27 | {blogSection.blogs.map((blog, i) => { 28 | return ( 29 | 39 | ); 40 | })} 41 |
    42 |
    43 |
    44 |     45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /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/contact/Contact.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./Contact.css"; 3 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 4 | import {illustration, contactInfo} from "../../portfolio"; 5 | import {Fade} from "react-reveal"; 6 | import email from "../../assets/lottie/email"; 7 | import DisplayLottie from "../../components/displayLottie/DisplayLottie"; 8 | import StyleContext from "../../contexts/StyleContext"; 9 | 10 | export default function Contact() { 11 | const {isDark} = useContext(StyleContext); 12 | return ( 13 | 14 |
    15 |
    16 |
    17 |

    {contactInfo.title}

    18 |

    25 | {contactInfo.subtitle} 26 |

    27 | 47 |
    48 |
    49 | {illustration.animated ? ( 50 | 51 | ) : ( 52 | Man working 56 | )} 57 |
    58 |
    59 |
    60 |     61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /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/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 | if (educationInfo.display) { 8 | return ( 9 |
    10 |

    Education

    11 |
    12 | {educationInfo.schools.map(school => ( 13 | 14 | ))} 15 |
    16 |
    17 | ); 18 | } 19 | return null; 20 | } 21 | -------------------------------------------------------------------------------- /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 | .greeting-main { 15 | display: flex; 16 | } 17 | 18 | .subTitle { 19 | color: #868e96 !important; 20 | } 21 | 22 | .greeting-main { 23 | display: flex; 24 | } 25 | 26 | .greeting-main > * { 27 | flex: 1; 28 | margin-bottom: 30px; 29 | } 30 | .button-greeting-div { 31 | display: flex; 32 | margin-top: 20px; 33 | } 34 | 35 | .greeting-text { 36 | font-size: 70px; 37 | line-height: 1.1; 38 | color: black !important; 39 | } 40 | 41 | .greeting-text-p { 42 | font-size: 30px; 43 | line-height: 40px; 44 | } 45 | 46 | .greeting-image-div > img { 47 | max-width: 100%; 48 | height: auto; 49 | } 50 | 51 | .wave-emoji { 52 | animation-duration: 1.8s; 53 | animation-iteration-count: infinite; 54 | animation-name: wave; 55 | display: inline-block; 56 | transform-origin: 70% 70%; 57 | } 58 | 59 | @keyframes wave { 60 | 0% { 61 | transform: rotate(0deg); 62 | } 63 | 10% { 64 | transform: rotate(-10deg); 65 | } 66 | 20% { 67 | transform: rotate(12deg); 68 | } 69 | 30% { 70 | transform: rotate(-10deg); 71 | } 72 | 40% { 73 | transform: rotate(9deg); 74 | } 75 | 50% { 76 | transform: rotate(0deg); 77 | } 78 | 100% { 79 | transform: rotate(0deg); 80 | } 81 | } 82 | 83 | /* Media Query */ 84 | @media (max-width: 1380px) { 85 | .greeting-text { 86 | font-size: 50px; 87 | } 88 | .greeting-text-p { 89 | font-size: 20px; 90 | } 91 | } 92 | @media (max-width: 768px) { 93 | .button-greeting-div { 94 | justify-content: space-around; 95 | } 96 | .greeting-text { 97 | font-size: 30px; 98 | text-align: center; 99 | } 100 | .greeting-text-p { 101 | font-size: 16px; 102 | line-height: normal; 103 | text-align: center; 104 | } 105 | .greeting-main { 106 | display: block; 107 | } 108 | .greeting-image-div { 109 | height: 256px; 110 | } 111 | } 112 | 113 | @media (max-width: 320px) { 114 | .main { 115 | width: auto; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /src/containers/greeting/Greeting.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import {Fade} from "react-reveal"; 3 | import emoji from "react-easy-emoji"; 4 | import "./Greeting.css"; 5 | import landingPerson from "../../assets/lottie/landingPerson"; 6 | import DisplayLottie from "../../components/displayLottie/DisplayLottie"; 7 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 8 | import Button from "../../components/button/Button"; 9 | 10 | import {illustration, greeting} from "../../portfolio"; 11 | import StyleContext from "../../contexts/StyleContext"; 12 | 13 | export default function Greeting() { 14 | const {isDark} = useContext(StyleContext); 15 | if (!greeting.displayGreeting) { 16 | return null; 17 | } 18 | return ( 19 | 20 |
    21 |
    22 |
    23 |
    24 |

    27 | {" "} 28 | {greeting.title}{" "} 29 | {emoji("👋")} 30 |

    31 |

    38 | {greeting.subTitle} 39 |

    40 | 41 |
    42 |
    49 |
    50 |
    51 |
    52 | {illustration.animated ? ( 53 | 54 | ) : ( 55 | man sitting on table 59 | )} 60 |
    61 |
    62 |
    63 |     64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /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/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 | } 30 | .sk-circle .sk-circle3 { 31 | -webkit-transform: rotate(60deg); 32 | -ms-transform: rotate(60deg); 33 | transform: rotate(60deg); 34 | } 35 | .sk-circle .sk-circle4 { 36 | -webkit-transform: rotate(90deg); 37 | -ms-transform: rotate(90deg); 38 | transform: rotate(90deg); 39 | } 40 | .sk-circle .sk-circle5 { 41 | -webkit-transform: rotate(120deg); 42 | -ms-transform: rotate(120deg); 43 | transform: rotate(120deg); 44 | } 45 | .sk-circle .sk-circle6 { 46 | -webkit-transform: rotate(150deg); 47 | -ms-transform: rotate(150deg); 48 | transform: rotate(150deg); 49 | } 50 | .sk-circle .sk-circle7 { 51 | -webkit-transform: rotate(180deg); 52 | -ms-transform: rotate(180deg); 53 | transform: rotate(180deg); 54 | } 55 | .sk-circle .sk-circle8 { 56 | -webkit-transform: rotate(210deg); 57 | -ms-transform: rotate(210deg); 58 | transform: rotate(210deg); 59 | } 60 | .sk-circle .sk-circle9 { 61 | -webkit-transform: rotate(240deg); 62 | -ms-transform: rotate(240deg); 63 | transform: rotate(240deg); 64 | } 65 | .sk-circle .sk-circle10 { 66 | -webkit-transform: rotate(270deg); 67 | -ms-transform: rotate(270deg); 68 | transform: rotate(270deg); 69 | } 70 | .sk-circle .sk-circle11 { 71 | -webkit-transform: rotate(300deg); 72 | -ms-transform: rotate(300deg); 73 | transform: rotate(300deg); 74 | } 75 | .sk-circle .sk-circle12 { 76 | -webkit-transform: rotate(330deg); 77 | -ms-transform: rotate(330deg); 78 | transform: rotate(330deg); 79 | } 80 | .sk-circle .sk-circle2:before { 81 | -webkit-animation-delay: -1.1s; 82 | animation-delay: -1.1s; 83 | } 84 | .sk-circle .sk-circle3:before { 85 | -webkit-animation-delay: -1s; 86 | animation-delay: -1s; 87 | } 88 | .sk-circle .sk-circle4:before { 89 | -webkit-animation-delay: -0.9s; 90 | animation-delay: -0.9s; 91 | } 92 | .sk-circle .sk-circle5:before { 93 | -webkit-animation-delay: -0.8s; 94 | animation-delay: -0.8s; 95 | } 96 | .sk-circle .sk-circle6:before { 97 | -webkit-animation-delay: -0.7s; 98 | animation-delay: -0.7s; 99 | } 100 | .sk-circle .sk-circle7:before { 101 | -webkit-animation-delay: -0.6s; 102 | animation-delay: -0.6s; 103 | } 104 | .sk-circle .sk-circle8:before { 105 | -webkit-animation-delay: -0.5s; 106 | animation-delay: -0.5s; 107 | } 108 | .sk-circle .sk-circle9:before { 109 | -webkit-animation-delay: -0.4s; 110 | animation-delay: -0.4s; 111 | } 112 | .sk-circle .sk-circle10:before { 113 | -webkit-animation-delay: -0.3s; 114 | animation-delay: -0.3s; 115 | } 116 | .sk-circle .sk-circle11:before { 117 | -webkit-animation-delay: -0.2s; 118 | animation-delay: -0.2s; 119 | } 120 | .sk-circle .sk-circle12:before { 121 | -webkit-animation-delay: -0.1s; 122 | animation-delay: -0.1s; 123 | } 124 | 125 | @-webkit-keyframes sk-circleBounceDelay { 126 | 0%, 127 | 80%, 128 | 100% { 129 | -webkit-transform: scale(0); 130 | transform: scale(0); 131 | } 132 | 40% { 133 | -webkit-transform: scale(1); 134 | transform: scale(1); 135 | } 136 | } 137 | 138 | @keyframes sk-circleBounceDelay { 139 | 0%, 140 | 80%, 141 | 100% { 142 | -webkit-transform: scale(0); 143 | transform: scale(0); 144 | } 145 | 40% { 146 | -webkit-transform: scale(1); 147 | transform: scale(1); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /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/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 | if (!podcastSection.display) { 10 | return null; 11 | } 12 | return ( 13 | 14 |
    15 |
    16 |

    {podcastSection.title}

    17 |

    24 | {podcastSection.subtitle} 25 |

    26 |
    27 |
    28 | {podcastSection.podcast.map((podcastLink, i) => { 29 | return ( 30 |
    31 | 37 |
    38 | ); 39 | })} 40 |
    41 |
    42 |     43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /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(() => 9 | import("../../components/githubProfileCard/GithubProfileCard") 10 | ); 11 | export default function Profile() { 12 | const [prof, setrepo] = useState([]); 13 | function setProfileFunction(array) { 14 | setrepo(array); 15 | } 16 | function getProfileData() { 17 | const client = new ApolloClient({ 18 | uri: "https://api.github.com/graphql", 19 | request: operation => { 20 | operation.setContext({ 21 | headers: { 22 | authorization: `Bearer ${openSource.githubConvertedToken}` 23 | } 24 | }); 25 | } 26 | }); 27 | 28 | client 29 | .query({ 30 | query: gql` 31 | { 32 | user(login:"${openSource.githubUserName}") { 33 | name 34 | bio 35 | isHireable 36 | avatarUrl 37 | location 38 | } 39 | } 40 | ` 41 | }) 42 | .then(result => { 43 | setProfileFunction(result.data.user); 44 | }) 45 | .catch(function (error) { 46 | console.log(error); 47 | setProfileFunction("Error"); 48 | console.log( 49 | "Because of this Error Contact Section is Showed instead of Profile" 50 | ); 51 | openSource.showGithubProfile = "false"; 52 | }); 53 | } 54 | useEffect(() => { 55 | if (openSource.showGithubProfile === "true") { 56 | getProfileData(); 57 | } 58 | }, []); 59 | if ( 60 | openSource.display && 61 | openSource.showGithubProfile === "true" && 62 | !(typeof prof === "string" || prof instanceof String) 63 | ) { 64 | return ( 65 | 66 | 67 | 68 | ); 69 | } else { 70 | return ; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /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 | } 33 | -------------------------------------------------------------------------------- /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 StyleContext 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 | // todo: remove useContex because is not supported 17 | const {isDark} = useContext(StyleContext); 18 | useEffect(() => { 19 | getRepoData(); 20 | }, []); 21 | 22 | function getRepoData() { 23 | const client = new ApolloClient({ 24 | uri: "https://api.github.com/graphql", 25 | request: operation => { 26 | operation.setContext({ 27 | headers: { 28 | authorization: `Bearer ${openSource.githubConvertedToken}` 29 | } 30 | }); 31 | } 32 | }); 33 | 34 | client 35 | .query({ 36 | query: gql` 37 | { 38 | user(login: "${openSource.githubUserName}") { 39 | pinnedItems(first: 6, types: [REPOSITORY]) { 40 | totalCount 41 | edges { 42 | node { 43 | ... on Repository { 44 | name 45 | description 46 | forkCount 47 | stargazers { 48 | totalCount 49 | } 50 | url 51 | id 52 | diskUsage 53 | primaryLanguage { 54 | name 55 | color 56 | } 57 | } 58 | } 59 | } 60 | } 61 | } 62 | } 63 | ` 64 | }) 65 | .then(result => { 66 | setrepoFunction(result.data.user.pinnedItems.edges); 67 | console.log(result); 68 | }) 69 | .catch(function (error) { 70 | console.log(error); 71 | setrepoFunction("Error"); 72 | console.log( 73 | "Because of this Error, nothing is shown in place of Projects section. Projects section not configured" 74 | ); 75 | }); 76 | } 77 | 78 | function setrepoFunction(array) { 79 | setrepo(array); 80 | } 81 | if ( 82 | !(typeof repo === "string" || repo instanceof String) && 83 | openSource.display 84 | ) { 85 | return ( 86 | 87 |
    88 |

    Open Source Projects

    89 |
    90 | {repo.map((v, i) => { 91 | return ( 92 | 93 | ); 94 | })} 95 |
    96 |
    103 |     104 | ); 105 | } else { 106 | return ; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /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/containers/skillProgress/skillProgress.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Progress.css"; 3 | import {illustration, techStack} from "../../portfolio"; 4 | import {Fade} from "react-reveal"; 5 | import Build from "../../assets/lottie/build"; 6 | import DisplayLottie from "../../components/displayLottie/DisplayLottie"; 7 | 8 | export default function StackProgress() { 9 | if (techStack.viewSkillBars) { 10 | return ( 11 | 12 |
    13 |
    14 |

    Proficiency

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

    {exp.Stack}

    22 |
    23 | 24 |
    25 |
    26 | ); 27 | })} 28 |
    29 | 30 |
    31 | {illustration.animated ? ( 32 | 33 | ) : ( 34 | Skills 38 | )} 39 |
    40 |
    41 |     42 | ); 43 | } 44 | return null; 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/skills/Skills.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./Skills.css"; 3 | import SoftwareSkill from "../../components/softwareSkills/SoftwareSkill"; 4 | import {illustration, skillsSection} from "../../portfolio"; 5 | import {Fade} from "react-reveal"; 6 | import codingPerson from "../../assets/lottie/codingPerson"; 7 | import DisplayLottie from "../../components/displayLottie/DisplayLottie"; 8 | import StyleContext from "../../contexts/StyleContext"; 9 | 10 | export default function Skills() { 11 | const {isDark} = useContext(StyleContext); 12 | if (!skillsSection.display) { 13 | return null; 14 | } 15 | return ( 16 |
    17 |
    18 | 19 |
    20 | {illustration.animated ? ( 21 | 22 | ) : ( 23 | Man Working 27 | )} 28 |
    29 |     30 | 31 |
    32 |

    35 | {skillsSection.title}{" "} 36 |

    37 |

    44 | {skillsSection.subTitle} 45 |

    46 | 47 |
    48 | {skillsSection.skills.map((skills, i) => { 49 | return ( 50 |

    58 | {skills} 59 |

    60 | ); 61 | })} 62 |
    63 |
    64 |     65 |
    66 |
    67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | if (!talkSection.display) { 11 | return null; 12 | } 13 | return ( 14 | 15 |
    16 |
    17 |

    {talkSection.title}

    18 |

    25 | {talkSection.subtitle} 26 |

    27 | {talkSection.talks.map((talk, i) => { 28 | return ( 29 | 40 | ); 41 | })} 42 |
    43 |
    44 |     45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /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/containers/topbutton/Top.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Top.css"; 3 | 4 | export default function Top() { 5 | function TopEvent() { 6 | document.body.scrollTop = 0; // For Safari 7 | document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera 8 | } 9 | // When the user scrolls down 20px from the top of the document, show the button 10 | function scrollFunction() { 11 | if ( 12 | document.body.scrollTop > 20 || 13 | document.documentElement.scrollTop > 20 14 | ) { 15 | document.getElementById("topButton").style.visibility = "visible"; 16 | } else { 17 | document.getElementById("topButton").style.visibility = "hidden"; 18 | } 19 | } 20 | window.onscroll = function () { 21 | scrollFunction(); 22 | }; 23 | window.onload = function () { 24 | scrollFunction(); 25 | }; //To make sure that this button is not visible at starting. 26 | // When the user clicks on the button, scroll to the top of the document 27 | return ( 28 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /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/containers/twitter-embed/twitter.js: -------------------------------------------------------------------------------- 1 | import React, {Suspense, 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.display) { 25 | return null; 26 | } 27 | if (twitterDetails.userName) { 28 | return ( 29 | 30 |
    31 |
    32 | 44 |
    45 |
    46 |     47 | ); 48 | } else { 49 | return null; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /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 | } 38 | -------------------------------------------------------------------------------- /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.display) { 11 | return ( 12 |
    13 | 14 |
    15 |
    16 |

    Experiences

    17 |
    18 | {workExperiences.experience.map((card, i) => { 19 | return ( 20 | 32 | ); 33 | })} 34 |
    35 |
    36 |
    37 |     38 |
    39 | ); 40 | } 41 | return null; 42 | } 43 | -------------------------------------------------------------------------------- /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/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Agustina Regular"; 3 | font-style: normal; 4 | font-weight: normal; 5 | src: local("Agustina Regular"), 6 | url("./assets/fonts/Agustina.woff") format("woff"); 7 | font-display: swap; 8 | } 9 | @font-face { 10 | font-family: "Montserrat"; 11 | src: local("Montserrat"), 12 | url("./assets/fonts/Montserrat-Regular.ttf") format("woff"); 13 | font-display: swap; 14 | } 15 | code { 16 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 17 | monospace; 18 | } 19 | html, 20 | body { 21 | scroll-behavior: smooth; 22 | } 23 | body { 24 | margin: 0; 25 | font: 19px / 23px Montserrat, "Montserrat", sans-serif; 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | /* Media Query */ 30 | @media (max-width: 1380px) { 31 | html, 32 | body { 33 | font-size: 16px; 34 | line-height: normal; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /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/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/portfolio.js: -------------------------------------------------------------------------------- 1 | /* Change this file to get your personal Portfolio */ 2 | 3 | // Summary And Greeting Section 4 | 5 | import emoji from "react-easy-emoji"; 6 | 7 | const illustration = { 8 | animated: true // set to false to use static SVG 9 | }; 10 | 11 | const greeting = { 12 | username: "David Rakosi", 13 | title: "Hi all, I'm David", 14 | subTitle: emoji( 15 | "A passionate Full Stack Software Developer 🚀 having an experience of designing and building Web and Mobile applications with JavaScript / Reactjs / Nodejs and some other cool libraries and frameworks." 16 | ), 17 | resumeLink: 18 | "https://drive.google.com/file/d/1ofFdKF_mqscH8WvXkSObnVvC9kK7Ldlu/view?usp=sharing", 19 | displayGreeting: true // Set false to hide this section, defaults to true 20 | }; 21 | 22 | // Social Media Links 23 | 24 | const socialMediaLinks = { 25 | github: "https://github.com/drakosi99", 26 | // linkedin: "https://www.linkedin.com/in/", 27 | gmail: "contact@davidrakosi.com", 28 | // gitlab: "https://gitlab.com/", 29 | // facebook: "https://www.facebook.com/", 30 | medium: "https://medium.com/@davidrakosi", 31 | stackoverflow: "https://stackoverflow.com/users/13263979/drakosi", 32 | instagram: 'https://www.instagram.com/davidrakosi/', 33 | twitter: 'https://twitter.com/davidrakosi_', 34 | display: true // Set true to display this section, defaults to false 35 | }; 36 | 37 | // Skills Section 38 | 39 | const skillsSection = { 40 | title: "What I do", 41 | subTitle: "CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK", 42 | skills: [ 43 | emoji( 44 | "⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications" 45 | ), 46 | emoji("⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks"), 47 | emoji( 48 | "⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean" 49 | ) 50 | ], 51 | 52 | /* Make Sure to include correct Font Awesome Classname to view your icon 53 | https://fontawesome.com/icons?d=gallery */ 54 | 55 | softwareSkills: [ 56 | { 57 | skillName: "html-5", 58 | fontAwesomeClassname: "fab fa-html5" 59 | }, 60 | { 61 | skillName: "css3", 62 | fontAwesomeClassname: "fab fa-css3-alt" 63 | }, 64 | { 65 | skillName: "sass", 66 | fontAwesomeClassname: "fab fa-sass" 67 | }, 68 | { 69 | skillName: "JavaScript", 70 | fontAwesomeClassname: "fab fa-js" 71 | }, 72 | { 73 | skillName: "reactjs", 74 | fontAwesomeClassname: "fab fa-react" 75 | }, 76 | { 77 | skillName: "nodejs", 78 | fontAwesomeClassname: "fab fa-node" 79 | }, 80 | { 81 | skillName: "swift", 82 | fontAwesomeClassname: "fab fa-swift" 83 | }, 84 | { 85 | skillName: "npm", 86 | fontAwesomeClassname: "fab fa-npm" 87 | }, 88 | { 89 | skillName: "sql-database", 90 | fontAwesomeClassname: "fas fa-database" 91 | }, 92 | { 93 | skillName: "firebase", 94 | fontAwesomeClassname: "fas fa-fire" 95 | } 96 | ], 97 | display: true // Set false to hide this section, defaults to true 98 | }; 99 | 100 | // Education Section 101 | 102 | const educationInfo = { 103 | display: false, // Set false to hide this section, defaults to true 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 | ] 114 | }, 115 | { 116 | schoolName: "Stanford University", 117 | logo: require("./assets/images/stanfordLogo.png"), 118 | subHeader: "Bachelor of Science in Computer Science", 119 | duration: "September 2013 - April 2017", 120 | desc: 121 | "Ranked top 10% in the program. Took courses about Software Engineering, Web Security, Operating Systems, ...", 122 | descBullets: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit"] 123 | } 124 | ] 125 | }; 126 | 127 | // Your top 3 proficient stacks/tech experience 128 | 129 | const techStack = { 130 | viewSkillBars: true, //Set it to true to show Proficiency Section 131 | experience: [ 132 | { 133 | Stack: "Frontend / Design", //Insert stack or technology you have experience in 134 | progressPercentage: "90%" //Insert relative proficiency in percentage 135 | }, 136 | { 137 | Stack: "Backend", 138 | progressPercentage: "70%" 139 | }, 140 | { 141 | Stack: "Programming", 142 | progressPercentage: "90%" 143 | } 144 | ], 145 | displayCodersrank: true // Set true to display codersrank badges section need to changes your username in src/containers/skillProgress/skillProgress.js:17:62, defaults to false 146 | }; 147 | 148 | // Work experience section 149 | 150 | const workExperiences = { 151 | display: true, //Set it to true to show workExperiences Section 152 | experience: [ 153 | { 154 | role: "Software Engineer", 155 | company: "Clever Programmer", 156 | companylogo: require("./assets/images/cpLogo.png"), 157 | date: "September 2020 – Present", 158 | desc: 159 | "Changing lives of developers one line of code at a time.", 160 | descBullets: [ 161 | "Custom building applications", 162 | "Coaching", 163 | "Streaming live on YouTube", 164 | "Creating tutorials" 165 | ] 166 | }, 167 | { 168 | role: "Product Owner (PSD2)", 169 | company: "Erste Bank", 170 | companylogo: require("./assets/images/ersteLogo.jpg"), 171 | date: "July 2019 – September 2020", 172 | desc: 173 | "I lead software developers building the API for the bank in order to fulfil the PSD2 regulation requirements." 174 | }, 175 | { 176 | role: "Junior Information Security & Systems Representative", 177 | company: "Vodafone", 178 | companylogo: require("./assets/images/vodafoneLogo.png"), 179 | date: "November 2018 – July 2019", 180 | desc: 181 | "I've conducted internal audit making sure the organization is compliant with the GDPR." 182 | } 183 | ] 184 | }; 185 | 186 | /* Your Open Source Section to View Your Github Pinned Projects 187 | To know how to get github key look at readme.md */ 188 | 189 | const openSource = { 190 | githubConvertedToken: process.env.REACT_APP_GITHUB_TOKEN, 191 | githubUserName: "drakosi99", // Change to your github username to view your profile in Contact Section. 192 | showGithubProfile: "true", // Set true or false to show Contact profile using Github, defaults to true 193 | display: false // Set false to hide this section, defaults to true 194 | }; 195 | 196 | // Some big projects you have worked on 197 | 198 | const bigProjects = { 199 | title: "Big Projects", 200 | subtitle: "SOME STARTUPS AND COMPANIES THAT I HELPED TO CREATE THEIR TECH", 201 | projects: [ 202 | { 203 | image: require("./assets/images/saayaHealthLogo.webp"), 204 | projectName: "Saayahealth", 205 | projectDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 206 | footerLink: [ 207 | { 208 | name: "Visit Website", 209 | url: "fa" 210 | } 211 | // you can add extra buttons here. 212 | ] 213 | }, 214 | { 215 | image: require("./assets/images/nextuLogo.webp"), 216 | projectName: "Nextu", 217 | projectDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 218 | footerLink: [ 219 | { 220 | name: "Visit Website", 221 | url: "" 222 | } 223 | ] 224 | } 225 | ], 226 | display: false // Set false to hide this section, defaults to true 227 | }; 228 | 229 | // Achievement Section 230 | // Include certificates, talks etc 231 | 232 | const achievementSection = { 233 | title: emoji("Achievements And Certifications 🏆 "), 234 | subtitle: 235 | "Achievements, Certifications, Award Letters and Some Cool Stuff that I have done !", 236 | 237 | achievementsCards: [ 238 | { 239 | title: "Google Code-In Finalist", 240 | subtitle: 241 | "First Pakistani to be selected as Google Code-in Finalist from 4000 students from 77 different countries.", 242 | image: require("./assets/images/codeInLogo.webp"), 243 | footerLink: [ 244 | { 245 | name: "Certification", 246 | url: 247 | "" 248 | }, 249 | { 250 | name: "Award Letter", 251 | url: 252 | "" 253 | }, 254 | { 255 | name: "Google Code-in Blog", 256 | url: 257 | "" 258 | } 259 | ] 260 | }, 261 | { 262 | title: "Google Assistant Action", 263 | subtitle: 264 | "Developed a Google Assistant Action JavaScript Guru that is available on 2 Billion devices world wide.", 265 | image: require("./assets/images/googleAssistantLogo.webp"), 266 | footerLink: [ 267 | { 268 | name: "View Google Assistant Action", 269 | url: 270 | "" 271 | } 272 | ] 273 | }, 274 | 275 | { 276 | title: "PWA Web App Developer", 277 | subtitle: "Completed Certifcation from SMIT for PWA Web App Development", 278 | image: require("./assets/images/pwaLogo.webp"), 279 | footerLink: [ 280 | {name: "Certification", url: ""}, 281 | { 282 | name: "Final Project", 283 | url: "" 284 | } 285 | ] 286 | } 287 | ], 288 | display: false // Set false to hide this section, defaults to true 289 | }; 290 | 291 | // Blogs Section 292 | 293 | const blogSection = { 294 | title: "Blogs", 295 | subtitle: 296 | "With Love for Developing cool stuff, I love to write and teach others what I have learnt.", 297 | 298 | blogs: [ 299 | { 300 | url: 301 | "https://blog.usejournal.com/create-a-google-assistant-action-and-win-a-google-t-shirt-and-cloud-credits-4a8d86d76eae", 302 | title: "Win a Google Assistant Tshirt and $200 in Google Cloud Credits", 303 | description: 304 | "Do you want to win $200 and Google Assistant Tshirt by creating a Google Assistant Action in less then 30 min?" 305 | }, 306 | { 307 | url: "https://medium.com/@saadpasta/why-react-is-the-best-5a97563f423e", 308 | title: "Why REACT is The Best?", 309 | description: 310 | "React is a JavaScript library for building User Interface. It is maintained by Facebook and a community of individual developers and companies." 311 | } 312 | ], 313 | display: true // Set false to hide this section, defaults to true 314 | }; 315 | 316 | // Talks Sections 317 | 318 | const talkSection = { 319 | title: "TALKS", 320 | subtitle: emoji( 321 | "" 322 | ), 323 | 324 | talks: [ 325 | { 326 | title: "", 327 | subtitle: "", 328 | slides_url: "", 329 | event_url: "" 330 | } 331 | ], 332 | display: false // Set false to hide this section, defaults to true 333 | }; 334 | 335 | // Podcast Section 336 | 337 | const podcastSection = { 338 | title: emoji("Podcast 🎙️"), 339 | subtitle: "I LOVE TO TALK ABOUT MYSELF AND TECHNOLOGY", 340 | 341 | // Please Provide with Your Podcast embeded Link 342 | podcast: [ 343 | "" 344 | ], 345 | display: false // Set false to hide this section, defaults to true 346 | }; 347 | 348 | const contactInfo = { 349 | title: emoji("Contact Me ☎️"), 350 | subtitle: 351 | "Discuss a project or just want to say hi? My Inbox is open for all.", 352 | number: "(323) 768 0674", 353 | email_address: "contact@davidrakosi.com" 354 | }; 355 | 356 | // Twitter Section 357 | 358 | const twitterDetails = { 359 | userName: "davidrakosi_", //Replace "twitter" with your twitter username without @ 360 | display: true // Set true to display this section, defaults to false 361 | }; 362 | 363 | export { 364 | illustration, 365 | greeting, 366 | socialMediaLinks, 367 | skillsSection, 368 | educationInfo, 369 | techStack, 370 | workExperiences, 371 | openSource, 372 | bigProjects, 373 | achievementSection, 374 | blogSection, 375 | talkSection, 376 | podcastSection, 377 | contactInfo, 378 | twitterDetails 379 | }; 380 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------