├── .gitattributes ├── .gitignore ├── README.md ├── fetch.js ├── package-lock.json ├── package.json ├── public ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── mstile-150x150.png ├── robots.txt └── safari-pinned-tab.svg ├── screen1.png ├── screen2.png ├── screen3.png └── src ├── App.css ├── App.js ├── App.scss ├── App.test.js ├── _globalColor.scss ├── assets ├── fonts │ ├── Agustina.woff │ └── Montserrat-Regular.ttf ├── images │ ├── airbnbLogo.png │ ├── codeInLogo.webp │ ├── contactMail.webp │ ├── contactMailDark.svg │ ├── developerActivity.svg │ ├── developing.jpg │ ├── developing1.jpg │ ├── facebookLogo.png │ ├── googleAssistant.svg │ ├── googleAssistantLogo.webp │ ├── jsFramework.svg │ ├── manOnTable.svg │ ├── nextuLogo.webp │ ├── programmer.svg │ ├── quoraLogo.png │ ├── skill.svg │ ├── talksCardBack.svg │ ├── tiger.jpg │ ├── tiger1.jpg │ └── tiger2.jpg └── lottie │ ├── build.json │ ├── codingPerson.json │ ├── email.json │ ├── landingPerson.json │ └── splashAnimation.json ├── components ├── ToggleSwitch │ ├── ToggleSwitch.js │ └── ToggleSwitch.scss ├── button │ ├── Button.js │ └── Button.scss ├── displayLottie │ └── DisplayLottie.js ├── footer │ ├── Footer.js │ └── Footer.scss ├── githubProfileCard │ ├── GithubProfileCard.js │ └── GithubProfileCard.scss ├── githubRepoCard │ ├── GithubRepoCard.js │ └── GithubRepoCard.scss ├── header │ ├── Header.js │ └── Header.scss ├── socialMedia │ ├── SocialMedia.js │ └── SocialMedia.scss └── softwareSkills │ ├── SoftwareSkill.js │ └── SoftwareSkill.scss ├── containers ├── Main.js ├── Main.scss ├── contact │ ├── Contact.js │ └── Contact.scss ├── greeting │ ├── Greeting.js │ └── Greeting.scss ├── loading │ ├── Loading.js │ └── loading.scss ├── profile │ └── Profile.js ├── skillProgress │ ├── Progress.scss │ └── skillProgress.js ├── skills │ ├── Skills.js │ └── Skills.scss ├── splashScreen │ ├── SplashScreen.css │ └── SplashScreen.js └── topbutton │ ├── Top.js │ └── Top.scss ├── contexts └── StyleContext.js ├── hooks └── useLocalStorage.js ├── index.css ├── index.js ├── logo.svg ├── portfolio.js ├── reportWebVitals.js ├── serviceWorker.js ├── setupTests.js └── utils.js /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf 2 | 3 | # Denote all files that are truly binary and should not be modified 4 | *.ttf binary 5 | *.png binary 6 | *.webp binary 7 | *.woff binary 8 | 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 13 | 14 | The page will reload when you make changes.\ 15 | You may also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 35 | 36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 39 | 40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /fetch.js: -------------------------------------------------------------------------------- 1 | fs = require("fs"); 2 | const https = require("https"); 3 | process = require("process"); 4 | require("dotenv").config(); 5 | 6 | const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN; 7 | const GITHUB_USERNAME = process.env.GITHUB_USERNAME; 8 | const USE_GITHUB_DATA = process.env.USE_GITHUB_DATA; 9 | const MEDIUM_USERNAME = process.env.MEDIUM_USERNAME; 10 | 11 | const ERR = { 12 | noUserName: 13 | "Github Username was found to be undefined. Please set all relevant environment variables.", 14 | requestFailed: 15 | "The request to GitHub didn't succeed. Check if GitHub token in your .env file is correct.", 16 | requestFailedMedium: 17 | "The request to Medium didn't succeed. Check if Medium username in your .env file is correct." 18 | }; 19 | if (USE_GITHUB_DATA === "true") { 20 | if (GITHUB_USERNAME === undefined) { 21 | throw new Error(ERR.noUserName); 22 | } 23 | 24 | console.log(`Fetching profile data for ${GITHUB_USERNAME}`); 25 | var data = JSON.stringify({ 26 | query: ` 27 | { 28 | user(login:"${GITHUB_USERNAME}") { 29 | name 30 | bio 31 | avatarUrl 32 | location 33 | pinnedItems(first: 6, types: [REPOSITORY]) { 34 | totalCount 35 | edges { 36 | node { 37 | ... on Repository { 38 | name 39 | description 40 | forkCount 41 | stargazers { 42 | totalCount 43 | } 44 | url 45 | id 46 | diskUsage 47 | primaryLanguage { 48 | name 49 | color 50 | } 51 | } 52 | } 53 | } 54 | } 55 | } 56 | } 57 | ` 58 | }); 59 | const default_options = { 60 | hostname: "api.github.com", 61 | path: "/graphql", 62 | port: 443, 63 | method: "POST", 64 | headers: { 65 | Authorization: `Bearer ${GITHUB_TOKEN}`, 66 | "User-Agent": "Node" 67 | } 68 | }; 69 | 70 | const req = https.request(default_options, res => { 71 | let data = ""; 72 | 73 | console.log(`statusCode: ${res.statusCode}`); 74 | if (res.statusCode !== 200) { 75 | throw new Error(ERR.requestFailed); 76 | } 77 | 78 | res.on("data", d => { 79 | data += d; 80 | }); 81 | res.on("end", () => { 82 | fs.writeFile("./public/profile.json", data, function (err) { 83 | if (err) return console.log(err); 84 | console.log("saved file to public/profile.json"); 85 | }); 86 | }); 87 | }); 88 | 89 | req.on("error", error => { 90 | throw error; 91 | }); 92 | 93 | req.write(data); 94 | req.end(); 95 | } 96 | 97 | if (MEDIUM_USERNAME !== undefined) { 98 | console.log(`Fetching Medium blogs data for ${MEDIUM_USERNAME}`); 99 | const options = { 100 | hostname: "api.rss2json.com", 101 | path: `/v1/api.json?rss_url=https://medium.com/feed/@${MEDIUM_USERNAME}`, 102 | port: 443, 103 | method: "GET" 104 | }; 105 | 106 | const req = https.request(options, res => { 107 | let mediumData = ""; 108 | 109 | console.log(`statusCode: ${res.statusCode}`); 110 | if (res.statusCode !== 200) { 111 | throw new Error(ERR.requestMediumFailed); 112 | } 113 | 114 | res.on("data", d => { 115 | mediumData += d; 116 | }); 117 | res.on("end", () => { 118 | fs.writeFile("./public/blogs.json", mediumData, function (err) { 119 | if (err) return console.log(err); 120 | console.log("saved file to public/blogs.json"); 121 | }); 122 | }); 123 | }); 124 | 125 | req.on("error", error => { 126 | throw error; 127 | }); 128 | 129 | req.end(); 130 | } 131 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "homepage": "https://smartluck.js.org/", 3 | "name": "SmartLuck1125", 4 | "version": "0.1.0", 5 | "private": true, 6 | "dependencies": { 7 | "colorthief": "^2.3.0", 8 | "enzyme": "^3.11.0", 9 | "enzyme-adapter-react-16": "^1.15.6", 10 | "gh-pages": "^2.1.1", 11 | "jest-canvas-mock": "^2.3.1", 12 | "lottie-react": "^2.4.0", 13 | "react": "^16.10.2", 14 | "react-dom": "^16.14.0", 15 | "react-easy-emoji": "^1.8.1", 16 | "react-headroom": "^3.0.0", 17 | "react-reveal": "^1.2.2", 18 | "react-scripts": "^5.0.1", 19 | "react-test-renderer": "^16.10.2", 20 | "react-twitter-embed": "3.0.3", 21 | "sass": "^1.32.8", 22 | "web-vitals": "^3.5.2" 23 | }, 24 | "scripts": { 25 | "predeploy": "npm run build", 26 | "start": "node fetch.js && react-scripts start", 27 | "build": "node fetch.js && react-scripts build", 28 | "deploy": "gh-pages -b master -d build", 29 | "test": "react-scripts test", 30 | "eject": "react-scripts eject", 31 | "format": "prettier --write \"./**/*.{js,css,json,scss}\"", 32 | "check-format": "prettier -c \"./**/*.{js,css,json,scss}\"" 33 | }, 34 | "eslintConfig": { 35 | "extends": "react-app" 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.3%", 40 | "not ie 11", 41 | "not dead", 42 | "not op_mini all" 43 | ], 44 | "development": [ 45 | ">0.3%", 46 | "not ie 11", 47 | "not dead", 48 | "not op_mini all", 49 | "last 1 chrome version", 50 | "last 1 firefox version", 51 | "last 1 safari version" 52 | ] 53 | }, 54 | "devDependencies": { 55 | "@babel/plugin-proposal-private-property-in-object": "^7.21.11", 56 | "dotenv": "^8.2.0", 57 | "prettier": "^2.3.1" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #603cba 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 26 | 27 | 28 | 29 | 30 | My profile 31 | 32 | 33 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/public/mstile-150x150.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/screen1.png -------------------------------------------------------------------------------- /screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/screen2.png -------------------------------------------------------------------------------- /screen3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/screen3.png -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import React from "react"; 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.scss: -------------------------------------------------------------------------------- 1 | @import "./globalColor"; 2 | 3 | .App { 4 | text-align: center; 5 | width: 100%; 6 | overflow-x: hidden; 7 | } 8 | 9 | .App-logo { 10 | height: 40vmin; 11 | } 12 | 13 | .App-header { 14 | background-color: $appHeaderBG; 15 | min-height: 100vh; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | justify-content: center; 20 | font-size: calc(0.625rem + 2vmin); 21 | color: $textColorDark; 22 | } 23 | 24 | .App-link { 25 | color: $appLink; 26 | } 27 | 28 | .subTitle { 29 | color: $subTitle; 30 | } 31 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/_globalColor.scss: -------------------------------------------------------------------------------- 1 | /* Change colors in this file to style to your needs on a global level. 2 | Certain colors are used for different and multiply types of elements. 3 | For greater control over colors visit each components .scss file. */ 4 | 5 | // button colors 6 | $buttonColor: #55198b; 7 | $buttonHover: #8c43ce; 8 | $topButtonHover: #000; 9 | 10 | // text colors light theme 11 | $titleColor: #000000; 12 | $textColor: #000000; 13 | $subTitle: #868e96; 14 | $cardSubtitle: #666666; 15 | $talkCardSubTitle: #7f8287; 16 | $blogCardTitleColor: #262626; 17 | 18 | // text color dark theme 19 | $textColorDark: #ffffff; 20 | 21 | // toggle switch colors 22 | $toggleCheck: #2196f3; 23 | $toggleSwitchSliderBG: #ccc; 24 | 25 | // githubRepo specific colors 26 | $githubRepoCardLanguageColorBG: #0000ff; 27 | $githubRepoCardColor: rgb(88, 96, 105); 28 | $githubRepoCardRepoCardStatsColor: rgb(106, 115, 125); 29 | $githubRepoCardRepoNameColor: rgb(36, 41, 46); 30 | $githubProfileCardLocationTS: #ffebcd; 31 | $githubProfileCardBorder: #6c63ff; 32 | 33 | // light background colors 34 | $lightBackground1: #fff; 35 | $lightBackground2: rgb(255, 255, 255); 36 | $lightBackground3: #f5f2f4; 37 | $blogCardContainerColor: #586069; 38 | // dark background colors 39 | $darkBackground: #171c28; 40 | 41 | // light theme box shadows 42 | $lightBoxShadowDark: rgba(0, 0, 0, 0.2); 43 | $lightBoxShadow: rgba(0, 0, 0, 0.1); 44 | $lightBoxShadowDarker: rgba(0, 0, 0, 0.3); 45 | 46 | // dark theme box shadows 47 | $darkBoxShadow: #d9dbdf; 48 | $darkBoxShadow2: #ffffff; 49 | 50 | // linear gradients 51 | $experienceCardBlurredDivLG: linear-gradient( 52 | rgba(0, 0, 0, 0.4), 53 | rgba(0, 0, 0, 0.2) 54 | ); 55 | $experienceCardBannerLG: linear-gradient( 56 | rgba(0, 0, 0, 0.7), 57 | rgba(0, 0, 0, 0.5) 58 | ); 59 | 60 | // borders 61 | $progressBarBackground: rgb(243, 239, 239); 62 | $lightBorder1: rgba(211, 211, 211, 0.397); 63 | $educationCardBorder: #a9a7f9; 64 | 65 | // hovers 66 | $achievementCertificateCardHoverDark: rgba(255, 255, 255, 0.2); 67 | $blogCardHoverSmallColor: rgba(255, 255, 255, 0.8); 68 | $headerHoverBG: #f4f4f4; 69 | $contactDetailHoverTS: #b5b5b5; 70 | 71 | // misc backgrounds 72 | $progressBarSpanBG: #aaa5ff; 73 | $iconBackground: #333; 74 | $appHeaderBG: #282c34; 75 | 76 | // misc colors 77 | $skillsColor: #645beb; 78 | $appLink: #09d3ac; 79 | 80 | // social media icons 81 | $faceBook: #3b5998; 82 | $linkedin: #0e76a8; 83 | $github: #333; 84 | $gitlab: #fca326; 85 | $google: #ea4335; 86 | $twitter: #1da1f2; 87 | $medium: #000; 88 | $stackoverflow: #f48024; 89 | $instagram: #c13584; 90 | $kaggle: #20beff; 91 | -------------------------------------------------------------------------------- /src/assets/fonts/Agustina.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/fonts/Agustina.woff -------------------------------------------------------------------------------- /src/assets/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /src/assets/images/airbnbLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/airbnbLogo.png -------------------------------------------------------------------------------- /src/assets/images/codeInLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/codeInLogo.webp -------------------------------------------------------------------------------- /src/assets/images/contactMail.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/contactMail.webp -------------------------------------------------------------------------------- /src/assets/images/contactMailDark.svg: -------------------------------------------------------------------------------- 1 | envelope -------------------------------------------------------------------------------- /src/assets/images/developerActivity.svg: -------------------------------------------------------------------------------- 1 | developer activity -------------------------------------------------------------------------------- /src/assets/images/developing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/developing.jpg -------------------------------------------------------------------------------- /src/assets/images/developing1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/developing1.jpg -------------------------------------------------------------------------------- /src/assets/images/facebookLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/facebookLogo.png -------------------------------------------------------------------------------- /src/assets/images/googleAssistant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/googleAssistantLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/googleAssistantLogo.webp -------------------------------------------------------------------------------- /src/assets/images/jsFramework.svg: -------------------------------------------------------------------------------- 1 | JavaScript frameworks -------------------------------------------------------------------------------- /src/assets/images/nextuLogo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/nextuLogo.webp -------------------------------------------------------------------------------- /src/assets/images/programmer.svg: -------------------------------------------------------------------------------- 1 | programming -------------------------------------------------------------------------------- /src/assets/images/quoraLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/quoraLogo.png -------------------------------------------------------------------------------- /src/assets/images/skill.svg: -------------------------------------------------------------------------------- 1 | certificate -------------------------------------------------------------------------------- /src/assets/images/talksCardBack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/images/tiger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/tiger.jpg -------------------------------------------------------------------------------- /src/assets/images/tiger1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/tiger1.jpg -------------------------------------------------------------------------------- /src/assets/images/tiger2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smartluck1125/myportfolio/a2bff3db049903e3dfd42dff15b2235990a1d9c2/src/assets/images/tiger2.jpg -------------------------------------------------------------------------------- /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.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useContext} from "react"; 2 | import emoji from "react-easy-emoji"; 3 | import StyleContext from "../../contexts/StyleContext"; 4 | import "./ToggleSwitch.scss"; 5 | 6 | const ToggleSwitch = () => { 7 | const {isDark} = useContext(StyleContext); 8 | const [isChecked, setChecked] = useState(isDark); 9 | const styleContext = useContext(StyleContext); 10 | 11 | return ( 12 | 25 | ); 26 | }; 27 | export default ToggleSwitch; 28 | -------------------------------------------------------------------------------- /src/components/ToggleSwitch/ToggleSwitch.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .switch { 4 | position: relative; 5 | display: inline-block; 6 | width: 50px; 7 | height: 26px; 8 | } 9 | 10 | /* Fix visible slider checkbox */ 11 | input { 12 | transform: scale(0.5); 13 | } 14 | 15 | .slider { 16 | position: absolute; 17 | cursor: pointer; 18 | top: 0; 19 | left: 0; 20 | right: 0; 21 | bottom: 0; 22 | background-color: $toggleSwitchSliderBG; 23 | -webkit-transition: 0.4s; 24 | transition: 0.4s; 25 | } 26 | 27 | .slider::before { 28 | position: absolute; 29 | content: ""; 30 | height: 26px; 31 | width: 28px; 32 | left: 0; 33 | bottom: 0; 34 | background-color: $textColorDark; 35 | -webkit-transition: 0.4s; 36 | transition: 0.4s; 37 | } 38 | 39 | input:checked + .slider { 40 | background-color: $toggleCheck; 41 | } 42 | 43 | input:focus + .slider { 44 | box-shadow: $toggleCheck; 45 | } 46 | 47 | input:checked + .slider::before, 48 | input:checked + .slider > .emoji { 49 | -webkit-transform: translateX(26px); 50 | -ms-transform: translateX(26px); 51 | transform: translateX(26px); 52 | } 53 | 54 | /* Rounded sliders */ 55 | .slider.round { 56 | border-radius: 34px; 57 | display: flex; 58 | align-items: center; 59 | } 60 | 61 | .slider.round::before { 62 | border-radius: 50%; 63 | display: grid; 64 | place-items: center; 65 | } 66 | 67 | .slider::after { 68 | display: inline; 69 | position: absolute; 70 | right: 9.3%; 71 | bottom: 17.5%; 72 | } 73 | 74 | input:checked + .slider::after { 75 | display: inline; 76 | position: absolute; 77 | right: 56.3%; 78 | bottom: 14.5%; 79 | } 80 | 81 | .emoji { 82 | z-index: 10; 83 | display: flex; 84 | align-items: center; 85 | margin-left: 2px; 86 | } 87 | 88 | @media all and (max-width: 786px) and (min-width: 425px) { 89 | input:checked + .slider::after { 90 | right: 60.3%; 91 | bottom: 20.5%; 92 | } 93 | .slider::after { 94 | right: 15.3%; 95 | bottom: 22.5%; 96 | } 97 | } 98 | 99 | @media all and (max-width: 2560px) and (min-width: 1552px) { 100 | .slider::after { 101 | bottom: 12.5% !important; 102 | } 103 | } 104 | 105 | @media all and (max-width: 1552px) and (min-width: 1440px) { 106 | .slider::after { 107 | bottom: 7.5% !important; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/components/button/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Button.scss"; 3 | 4 | export default function Button({text, className, href, newTab}) { 5 | return ( 6 |
7 | 8 | {text} 9 | 10 |
11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/button/Button.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .main-button { 4 | background-color: $buttonColor; 5 | border: solid 1px $buttonColor; 6 | color: $textColorDark; 7 | font-weight: 700; 8 | width: max-content; 9 | padding: 13px 22px; 10 | margin-right: 50px; 11 | text-transform: uppercase; 12 | border-radius: 6px; 13 | text-align: center; 14 | text-decoration: none; 15 | display: block; 16 | margin-top: 20px; 17 | font-size: 1rem; 18 | cursor: pointer; 19 | transition: all 0.3s ease-in-out 0s; 20 | } 21 | .main-button:hover { 22 | background-color: $darkBoxShadow2; 23 | color: $buttonColor; 24 | transition: all 0.3s ease 0s; 25 | transform: translateY(-3px); 26 | } 27 | .project-button { 28 | display: flex; 29 | justify-content: center; 30 | margin-top: 20px; 31 | } 32 | .project-button > .main-button { 33 | margin-right: 0 !important; 34 | } 35 | /* Media Query */ 36 | @media (max-width: 768px) { 37 | .main-button { 38 | font-size: 0.938rem; 39 | padding: 12px 18px; 40 | margin-right: 0px; 41 | } 42 | } 43 | @media (max-width: 320px) { 44 | .main-button { 45 | font-size: 0.75rem; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/displayLottie/DisplayLottie.js: -------------------------------------------------------------------------------- 1 | import React, {Component, Suspense} from "react"; 2 | import Lottie from "lottie-react"; 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 | 20 | 21 | ); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./Footer.scss"; 3 | import {Fade} from "react-reveal"; 4 | import emoji from "react-easy-emoji"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | 7 | export default function Footer() { 8 | const {isDark} = useContext(StyleContext); 9 | return ( 10 | 11 |
12 |

13 | {emoji("Made with ❤️ by SmartLuck Team")} 14 |

15 |

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

21 |
22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /src/components/footer/Footer.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .footer-text { 4 | text-align: center; 5 | color: $subTitle !important; 6 | } 7 | 8 | .dark-mode { 9 | color: $textColorDark !important; 10 | } 11 | 12 | .footer-div { 13 | margin-top: 2rem; 14 | padding-bottom: 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/githubProfileCard/GithubProfileCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./GithubProfileCard.scss"; 3 | import SocialMedia from "../../components/socialMedia/SocialMedia"; 4 | import {contactInfo, isHireable} from "../../portfolio"; 5 | import emoji from "react-easy-emoji"; 6 | import {Fade} from "react-reveal"; 7 | 8 | export default function GithubProfileCard({prof}) { 9 | if (isHireable) { 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 | 40 | {prof.location} 41 | 42 |
43 | )} 44 |
45 | 46 | Open for opportunities: {prof.hireable} 47 | 48 |
49 | 50 |
51 |
52 | {prof.name} 57 |
58 |
59 |
60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/components/githubProfileCard/GithubProfileCard.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .profile-image { 4 | border-radius: 50%; 5 | border: 0.5rem solid $githubProfileCardBorder; 6 | margin-left: auto; 7 | width: 100%; 8 | max-width: 350px; 9 | height: auto; 10 | box-shadow: $lightBoxShadow 0 30px 30px -30px; 11 | transition: all 0.3s ease-out; 12 | } 13 | 14 | .profile-image:hover { 15 | box-shadow: none; 16 | } 17 | 18 | .prof-title { 19 | margin: 0; 20 | font-size: 40px; 21 | font-weight: 400; 22 | } 23 | 24 | .location-div { 25 | text-shadow: $githubProfileCardLocationTS; 26 | } 27 | 28 | .opp-div { 29 | padding-bottom: 1rem; 30 | } 31 | 32 | .row { 33 | display: flex; 34 | } 35 | 36 | .main-content-profile { 37 | flex: 80%; 38 | } 39 | 40 | .image-content-profile { 41 | text-align: right; 42 | flex: 20%; 43 | max-width: 100%; 44 | height: auto; 45 | } 46 | 47 | .bio-text { 48 | line-height: 30px; 49 | font-size: 22px; 50 | } 51 | 52 | .desc-prof { 53 | line-height: 45px; 54 | font-size: 19px; 55 | } 56 | 57 | .subTitle { 58 | color: $subTitle; 59 | } 60 | 61 | @media (max-width: 768px) { 62 | .row { 63 | display: flex; 64 | flex-direction: column; 65 | } 66 | 67 | .main-content-profile { 68 | text-align: center; 69 | order: 2; 70 | } 71 | 72 | .bio-text { 73 | font-size: 16px; 74 | } 75 | 76 | .image-content-profile { 77 | margin-left: auto; 78 | margin-right: auto; 79 | order: 1; 80 | } 81 | 82 | .desc-prof { 83 | line-height: 30px; 84 | font-size: 16px; 85 | } 86 | 87 | .profile-image { 88 | margin-left: auto; 89 | margin-right: auto; 90 | width: 100%; 91 | max-width: 250px; 92 | height: auto; 93 | } 94 | 95 | .profile-image:hover { 96 | box-shadow: $lightBoxShadow 0 50px 50px -50px; 97 | transition: 0.3s ease-out; 98 | } 99 | 100 | .prof-title { 101 | padding-bottom: 1rem; 102 | font-size: 32px; 103 | text-align: center; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/components/githubRepoCard/GithubRepoCard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./GithubRepoCard.scss"; 3 | import {Fade} from "react-reveal"; 4 | import {formatFileSizeDisplay} from "../../utils"; 5 | 6 | export default function GithubRepoCard({repo, isDark}) { 7 | function openUrlInNewTab(url, name) { 8 | if (!url) { 9 | console.log(`URL in ${name} is undefined`); 10 | return; 11 | } 12 | var win = window.open(url, "_blank"); 13 | win.focus(); 14 | } 15 | 16 | return ( 17 | 18 |
19 |
openUrlInNewTab(repo.node.url, repo.node.name)} 23 | > 24 |
25 | 38 |

{repo.node.name}

39 |
40 |

{repo.node.description}

41 |
42 |
43 | {repo.node.primaryLanguage !== null && ( 44 | 45 |
49 |

{repo.node.primaryLanguage.name}

50 | 51 | )} 52 | 53 | 67 |

{repo.node.forkCount}

68 | 69 | 70 | 84 |

{repo.node.stargazers.totalCount}

85 | 86 |
87 |
88 |

{formatFileSizeDisplay(repo.node.diskUsage)}

89 |
90 |
91 |
92 |
93 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /src/components/githubRepoCard/GithubRepoCard.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .repo-card-div { 4 | color: $githubRepoCardColor; 5 | background-color: $lightBackground2; 6 | box-shadow: $lightBoxShadowDark 0px 10px 30px -15px; 7 | padding: 2rem; 8 | cursor: pointer; 9 | -webkit-transition: all 0.3s ease; 10 | -o-transition: all 0.3s ease; 11 | transition: all 0.3s ease; 12 | } 13 | .repo-card-div:hover { 14 | box-shadow: $lightBoxShadowDark 0px 20px 30px -10px; 15 | } 16 | 17 | .repo-stats { 18 | display: flex; 19 | -webkit-box-pack: justify; 20 | justify-content: space-between; 21 | font-size: 13px; 22 | color: $githubRepoCardRepoCardStatsColor; 23 | } 24 | 25 | .repo-left-stat { 26 | -webkit-box-flex: 1; 27 | flex-grow: 1; 28 | display: flex; 29 | } 30 | 31 | .language-color { 32 | width: 10px; 33 | height: 10px; 34 | background-color: $githubRepoCardLanguageColorBG; 35 | margin-right: 0.25rem; 36 | border-radius: 100%; 37 | } 38 | 39 | .repo-left-stat span { 40 | display: flex; 41 | -webkit-box-align: center; 42 | align-items: center; 43 | margin-right: 0.75rem; 44 | } 45 | 46 | .repo-name-div { 47 | display: flex; 48 | align-items: center; 49 | } 50 | 51 | .repo-svg { 52 | margin-right: 0.5rem; 53 | min-width: 16px; 54 | } 55 | 56 | .repo-name { 57 | white-space: nowrap; 58 | text-overflow: ellipsis; 59 | color: $githubRepoCardRepoNameColor; 60 | margin-bottom: 0.75rem; 61 | font-size: 25px; 62 | font-weight: 700; 63 | letter-spacing: -0.5px; 64 | overflow: hidden; 65 | margin: 0px; 66 | height: 30px; 67 | } 68 | 69 | .repo-star-svg { 70 | margin-right: 0.3rem; 71 | } 72 | 73 | .repo-description { 74 | overflow: hidden; 75 | display: -webkit-box; 76 | -webkit-line-clamp: 2; 77 | -webkit-box-orient: vertical; 78 | } 79 | 80 | .dark-card-mode { 81 | background-color: $darkBackground; 82 | color: $textColorDark; 83 | } 84 | .dark-card-mode p { 85 | color: $textColorDark; 86 | } 87 | 88 | .dark-card-mode .repo-svg { 89 | fill: $textColorDark; 90 | } 91 | 92 | .dark-card-mode:hover { 93 | background-color: $buttonColor !important; 94 | box-shadow: 0px 0px 16px $darkBoxShadow; 95 | } 96 | -------------------------------------------------------------------------------- /src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import Headroom from "react-headroom"; 3 | import "./Header.scss"; 4 | import ToggleSwitch from "../ToggleSwitch/ToggleSwitch"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | import { 7 | greeting, 8 | skillsSection, 9 | } from "../../portfolio"; 10 | 11 | function Header() { 12 | const {isDark} = useContext(StyleContext); 13 | const viewSkills = skillsSection.display; 14 | 15 | return ( 16 | 17 |
18 | 19 | < 20 | {greeting.username} 21 | /> 22 | 23 | 24 | 31 |
    32 | {viewSkills && ( 33 |
  • 34 | Skills 35 |
    • 36 | )} 37 |
  • 38 | Proficiency 39 |
    • 40 |
  • 41 | Contact Me 42 |
    • 43 |
  • 44 | {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} 45 | 46 | 47 | 48 |
    • 49 |
50 |
51 | 52 | ); 53 | } 54 | export default Header; 55 | -------------------------------------------------------------------------------- /src/components/header/Header.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | /*React-headroom*/ 4 | .headroom-wrapper { 5 | max-height: 100px; 6 | } 7 | 8 | /* header */ 9 | 10 | .dark-menu { 11 | background-color: $darkBackground !important; 12 | color: $textColorDark; 13 | } 14 | 15 | .dark-menu li a { 16 | color: $textColorDark !important; 17 | } 18 | 19 | .dark-menu li a:hover { 20 | background-color: $buttonColor !important; 21 | } 22 | 23 | .header { 24 | background-color: $lightBackground1; 25 | max-width: 100%; 26 | padding: 15px 20px; 27 | margin: 0px auto; 28 | } 29 | 30 | .header ul { 31 | margin: 0; 32 | padding: 0; 33 | list-style: none; 34 | overflow: hidden; 35 | } 36 | 37 | .grey-color { 38 | color: $subTitle; 39 | } 40 | 41 | .header li a { 42 | display: block; 43 | padding: 15px 20px; 44 | color: $textColor; 45 | text-decoration: none; 46 | } 47 | 48 | .header li a:hover, 49 | .header .menu-btn:hover { 50 | background-color: $headerHoverBG; 51 | } 52 | 53 | .header .logo { 54 | display: block; 55 | flex: none; 56 | float: left; 57 | font-size: 1.5em; 58 | text-decoration: none; 59 | margin-top: 10px; 60 | line-height: normal; 61 | } 62 | 63 | .header .logo-name { 64 | font-family: "Agustina Regular"; 65 | font-weight: bold; 66 | font-variant-ligatures: no-common-ligatures; 67 | -webkit-font-variant-ligatures: no-common-ligatures; 68 | padding: 0 10px; 69 | } 70 | 71 | /* menu */ 72 | 73 | .header .menu { 74 | clear: both; 75 | max-height: 0; 76 | transition: max-height 0.2s ease-out; 77 | } 78 | 79 | /* menu icon */ 80 | 81 | .header .menu-icon { 82 | cursor: pointer; 83 | display: inline-block; 84 | float: right; 85 | padding: 28px 20px; 86 | position: relative; 87 | user-select: none; 88 | } 89 | 90 | .header .menu-icon .navicon { 91 | background: $iconBackground; 92 | display: block; 93 | height: 2px; 94 | position: relative; 95 | transition: background 0.2s ease-out; 96 | width: 18px; 97 | } 98 | 99 | .header .menu-icon .navicon-dark { 100 | background: $textColorDark; 101 | } 102 | 103 | .header .menu-icon .navicon:before, 104 | .header .menu-icon .navicon:after { 105 | background: $iconBackground; 106 | content: ""; 107 | display: block; 108 | height: 100%; 109 | position: absolute; 110 | transition: all 0.2s ease-out; 111 | width: 100%; 112 | } 113 | 114 | .header .menu-icon .navicon-dark:before, 115 | .header .menu-icon .navicon-dark:after { 116 | background: $textColorDark !important; 117 | content: ""; 118 | display: block; 119 | height: 100%; 120 | position: absolute; 121 | transition: all 0.2s ease-out; 122 | width: 100%; 123 | } 124 | 125 | .header .menu-icon .navicon:before { 126 | top: 5px; 127 | } 128 | 129 | .header .menu-icon .navicon:after { 130 | top: -5px; 131 | } 132 | 133 | /* menu btn */ 134 | 135 | .header .menu-btn { 136 | display: none; 137 | } 138 | 139 | .header .menu-btn:checked ~ .menu { 140 | max-height: 486px; 141 | } 142 | 143 | .header .menu-btn:checked ~ .menu-icon .navicon { 144 | background: transparent !important; 145 | } 146 | 147 | .header .menu-btn:checked ~ .menu-icon .navicon:before { 148 | transform: rotate(-45deg); 149 | } 150 | 151 | .header .menu-btn:checked ~ .menu-icon .navicon:after { 152 | transform: rotate(45deg); 153 | } 154 | 155 | .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, 156 | .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { 157 | top: 0; 158 | } 159 | 160 | /* 48em = 768px */ 161 | 162 | @media (min-width: 48em) { 163 | .header li { 164 | float: left; 165 | } 166 | .header { 167 | display: flex; 168 | align-items: center; 169 | justify-content: space-between; 170 | } 171 | .header .menu { 172 | max-height: none; 173 | } 174 | .header .menu-icon { 175 | display: none; 176 | } 177 | } 178 | @media (max-width: 960px) and (min-width: 768px) { 179 | .header { 180 | font-size: 12px; 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /src/components/socialMedia/SocialMedia.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./SocialMedia.scss"; 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 | {socialMediaLinks.kaggle ? ( 120 | 126 | 127 | 128 | 129 | ) : null} 130 |
131 | ); 132 | } 133 | -------------------------------------------------------------------------------- /src/components/socialMedia/SocialMedia.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .social-media-div { 4 | font-size: 2em; 5 | } 6 | 7 | .icon-button { 8 | margin-bottom: 10px; 9 | } 10 | 11 | .icon-button i { 12 | color: $textColorDark; 13 | border-radius: 2.6rem; 14 | cursor: pointer; 15 | display: inline-block; 16 | font-size: 1.3rem; 17 | height: 2.6rem; 18 | line-height: 2.6rem; 19 | margin: 0 5px; 20 | position: relative; 21 | text-align: center; 22 | -webkit-user-select: none; 23 | -moz-user-select: none; 24 | -ms-user-select: none; 25 | user-select: none; 26 | width: 2.6rem; 27 | margin-bottom: 10px; 28 | transition: 0.2s ease-in; 29 | } 30 | 31 | .facebook i { 32 | background-color: $faceBook; 33 | } 34 | 35 | .linkedin i { 36 | background-color: $linkedin; 37 | } 38 | 39 | .github i { 40 | background-color: $github; 41 | } 42 | 43 | .gitlab i { 44 | background-color: $gitlab; 45 | } 46 | 47 | .google i { 48 | background-color: $google; 49 | } 50 | 51 | .twitter i { 52 | background-color: $twitter; 53 | } 54 | 55 | .medium i { 56 | background-color: $medium; 57 | } 58 | 59 | .stack-overflow i { 60 | background-color: $stackoverflow; 61 | } 62 | 63 | .kaggle i { 64 | background-color: $kaggle; 65 | } 66 | 67 | .instagram i { 68 | background-color: $instagram; 69 | } 70 | 71 | /* Hover Transition */ 72 | .twitter i:hover, 73 | .google i:hover, 74 | .gitlab i:hover, 75 | .github i:hover, 76 | .linkedin i:hover, 77 | .facebook i:hover, 78 | .instagram i:hover, 79 | .stack-overflow i:hover, 80 | .kaggle i:hover, 81 | .medium i:hover { 82 | background-color: $textColor; 83 | } 84 | 85 | /* Media Query */ 86 | @media (max-width: 768px) { 87 | .social-media-div { 88 | text-align: center; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/components/softwareSkills/SoftwareSkill.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./SoftwareSkill.scss"; 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/softwareSkills/SoftwareSkill.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .dev-icons { 4 | padding-left: 0; 5 | list-style: none; 6 | font-size: 3rem; 7 | margin-bottom: 0px; 8 | margin-top: 0px; 9 | text-align: center; 10 | } 11 | 12 | .software-skill-inline { 13 | display: inline-block; 14 | margin-right: 20px; 15 | margin-bottom: 20px; 16 | } 17 | 18 | .software-skill-inline > i { 19 | color: $subTitle; 20 | } 21 | 22 | .software-skill-inline > i:hover { 23 | color: $skillsColor; 24 | } 25 | .software-skill-inline > p { 26 | color: $subTitle; 27 | font-size: 10px; 28 | } 29 | .software-skill-inline > i:hover ~ p { 30 | color: $skillsColor; 31 | } 32 | -------------------------------------------------------------------------------- /src/containers/Main.js: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useState} 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 Footer from "../components/footer/Footer"; 7 | import ScrollToTopButton from "./topbutton/Top"; 8 | import Profile from "./profile/Profile"; 9 | import SplashScreen from "./splashScreen/SplashScreen"; 10 | import {splashScreen} from "../portfolio"; 11 | import {StyleProvider} from "../contexts/StyleContext"; 12 | import {useLocalStorage} from "../hooks/useLocalStorage"; 13 | import "./Main.scss"; 14 | 15 | const Main = () => { 16 | const darkPref = window.matchMedia("(prefers-color-scheme: dark)"); 17 | const [isDark, setIsDark] = useLocalStorage("isDark", darkPref.matches); 18 | const [isShowingSplashAnimation, setIsShowingSplashAnimation] = 19 | useState(false); 20 | 21 | useEffect(() => { 22 | if (splashScreen.enabled) { 23 | const splashTimer = setTimeout( 24 | () => setIsShowingSplashAnimation(false), 25 | splashScreen.duration 26 | ); 27 | return () => { 28 | clearTimeout(splashTimer); 29 | }; 30 | } 31 | }, []); 32 | 33 | const changeTheme = () => { 34 | setIsDark(!isDark); 35 | }; 36 | 37 | return ( 38 |
39 | 40 | {isShowingSplashAnimation && splashScreen.enabled ? ( 41 | 42 | ) : ( 43 | <> 44 |
45 | 46 | 47 | 48 | 49 |
50 | 51 | 52 | )} 53 | 54 |
55 | ); 56 | }; 57 | 58 | export default Main; 59 | -------------------------------------------------------------------------------- /src/containers/Main.scss: -------------------------------------------------------------------------------- 1 | @import "../_globalColor"; 2 | 3 | .dark-mode { 4 | background-color: $darkBackground; 5 | color: white; 6 | transition: "0.1s"; 7 | } 8 | -------------------------------------------------------------------------------- /src/containers/contact/Contact.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./Contact.scss"; 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 |
32 | {contactInfo.number && ( 33 | <> 34 | 38 | {contactInfo.number} 39 | 40 |
41 |
42 | 43 | )} 44 | 48 | {contactInfo.email_address} 49 | 50 |
51 |
52 | 53 |
54 |
55 |
56 | {illustration.animated ? ( 57 | 58 | ) : ( 59 | Man working 63 | )} 64 |
65 |
66 |
67 | 68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/containers/contact/Contact.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .contact-div-main { 4 | display: flex; 5 | } 6 | 7 | .dark-mode a { 8 | color: $textColorDark; 9 | } 10 | 11 | .contact-div-main > * { 12 | flex: 1; 13 | } 14 | 15 | .contact-title { 16 | font-size: 65px; 17 | font-weight: 400; 18 | } 19 | 20 | .contact-detail, 21 | .contact-detail-email { 22 | margin-top: 20px; 23 | font-size: 40px; 24 | font-weight: 400; 25 | color: $subTitle; 26 | text-decoration: none; 27 | } 28 | 29 | .contact-detail:hover, 30 | .contact-detail-email:hover { 31 | color: $textColor; 32 | text-shadow: 2px 1px 2px $contactDetailHoverTS; 33 | transition: all 0.3s; 34 | } 35 | 36 | .contact-subtitle { 37 | text-transform: uppercase; 38 | } 39 | 40 | .contact-text-div { 41 | margin-top: 1.5rem; 42 | } 43 | 44 | .contact-margin-top { 45 | margin-top: 4rem; 46 | } 47 | 48 | .contact-image-div > img { 49 | max-width: 100%; 50 | height: auto; 51 | margin-left: 1.5rem; 52 | margin-top: -4rem; 53 | } 54 | 55 | /* Media Query */ 56 | @media (max-width: 1380px), (max-width: 768px) { 57 | .contact-title { 58 | font-size: 56px; 59 | font-weight: 400; 60 | text-align: center; 61 | } 62 | 63 | .contact-title { 64 | font-size: 40px; 65 | text-align: center; 66 | } 67 | 68 | .contact-subtitle { 69 | font-size: 16px; 70 | line-height: normal; 71 | text-align: center; 72 | } 73 | 74 | .contact-text-div { 75 | text-align: center; 76 | margin-top: 1.5rem; 77 | } 78 | 79 | .contact-detail, 80 | .contact-detail-email { 81 | font-size: 20px; 82 | } 83 | 84 | .contact-image-div { 85 | display: none; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /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.scss"; 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 |
51 |
52 |
53 |
54 | {illustration.animated ? ( 55 | man sitting on table 59 | 60 | ) : ( 61 | 62 | )} 63 |
64 |
65 |
66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/containers/greeting/Greeting.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .main { 4 | width: 90%; 5 | padding: 20px 10px; 6 | margin: 0px auto; 7 | margin-top: 4rem; 8 | } 9 | .greet-main { 10 | width: 90%; 11 | padding: 20px 10px; 12 | margin: 0px auto; 13 | margin-top: 2rem; 14 | } 15 | 16 | .greeting-main { 17 | display: flex; 18 | } 19 | 20 | .subTitle { 21 | color: $subTitle !important; 22 | } 23 | 24 | .greeting-main { 25 | display: flex; 26 | } 27 | 28 | .greeting-main > * { 29 | flex: 1; 30 | margin-bottom: 30px; 31 | } 32 | .button-greeting-div { 33 | display: flex; 34 | margin-top: 20px; 35 | } 36 | 37 | .greeting-text { 38 | font-size: 70px; 39 | line-height: 1.1; 40 | color: $textColor !important; 41 | } 42 | 43 | .greeting-text-p { 44 | font-size: 30px; 45 | line-height: 40px; 46 | } 47 | 48 | .greeting-image-div > img { 49 | max-width: 100%; 50 | height: auto; 51 | } 52 | 53 | .wave-emoji { 54 | animation-duration: 1.8s; 55 | animation-iteration-count: infinite; 56 | animation-name: wave; 57 | display: inline-block; 58 | transform-origin: 70% 70%; 59 | } 60 | 61 | @keyframes wave { 62 | 0% { 63 | transform: rotate(0deg); 64 | } 65 | 10% { 66 | transform: rotate(-10deg); 67 | } 68 | 20% { 69 | transform: rotate(12deg); 70 | } 71 | 30% { 72 | transform: rotate(-10deg); 73 | } 74 | 40% { 75 | transform: rotate(9deg); 76 | } 77 | 50% { 78 | transform: rotate(0deg); 79 | } 80 | 100% { 81 | transform: rotate(0deg); 82 | } 83 | } 84 | 85 | /* Media Query */ 86 | @media (max-width: 1380px) { 87 | .greeting-text { 88 | font-size: 50px; 89 | } 90 | .greeting-text-p { 91 | font-size: 20px; 92 | } 93 | } 94 | @media (max-width: 768px) { 95 | .button-greeting-div { 96 | justify-content: space-around; 97 | } 98 | .greeting-text { 99 | font-size: 30px; 100 | text-align: center; 101 | } 102 | .greeting-text-p { 103 | font-size: 16px; 104 | line-height: normal; 105 | text-align: center; 106 | } 107 | .greeting-main { 108 | display: block; 109 | } 110 | .greeting-image-div { 111 | height: 256px; 112 | } 113 | } 114 | 115 | @media (max-width: 320px) { 116 | .main { 117 | width: auto; 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/containers/loading/Loading.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./loading.scss"; 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.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .sk-circle { 4 | margin: 100px auto; 5 | width: 40px; 6 | height: 40px; 7 | position: relative; 8 | } 9 | .sk-circle .sk-child { 10 | width: 100%; 11 | height: 100%; 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | } 16 | .sk-circle .sk-child:before { 17 | content: ""; 18 | display: block; 19 | margin: 0 auto; 20 | width: 15%; 21 | height: 15%; 22 | background-color: $iconBackground; 23 | border-radius: 100%; 24 | -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 25 | animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; 26 | } 27 | .sk-circle .sk-circle2 { 28 | -webkit-transform: rotate(30deg); 29 | -ms-transform: rotate(30deg); 30 | transform: rotate(30deg); 31 | } 32 | .sk-circle .sk-circle3 { 33 | -webkit-transform: rotate(60deg); 34 | -ms-transform: rotate(60deg); 35 | transform: rotate(60deg); 36 | } 37 | .sk-circle .sk-circle4 { 38 | -webkit-transform: rotate(90deg); 39 | -ms-transform: rotate(90deg); 40 | transform: rotate(90deg); 41 | } 42 | .sk-circle .sk-circle5 { 43 | -webkit-transform: rotate(120deg); 44 | -ms-transform: rotate(120deg); 45 | transform: rotate(120deg); 46 | } 47 | .sk-circle .sk-circle6 { 48 | -webkit-transform: rotate(150deg); 49 | -ms-transform: rotate(150deg); 50 | transform: rotate(150deg); 51 | } 52 | .sk-circle .sk-circle7 { 53 | -webkit-transform: rotate(180deg); 54 | -ms-transform: rotate(180deg); 55 | transform: rotate(180deg); 56 | } 57 | .sk-circle .sk-circle8 { 58 | -webkit-transform: rotate(210deg); 59 | -ms-transform: rotate(210deg); 60 | transform: rotate(210deg); 61 | } 62 | .sk-circle .sk-circle9 { 63 | -webkit-transform: rotate(240deg); 64 | -ms-transform: rotate(240deg); 65 | transform: rotate(240deg); 66 | } 67 | .sk-circle .sk-circle10 { 68 | -webkit-transform: rotate(270deg); 69 | -ms-transform: rotate(270deg); 70 | transform: rotate(270deg); 71 | } 72 | .sk-circle .sk-circle11 { 73 | -webkit-transform: rotate(300deg); 74 | -ms-transform: rotate(300deg); 75 | transform: rotate(300deg); 76 | } 77 | .sk-circle .sk-circle12 { 78 | -webkit-transform: rotate(330deg); 79 | -ms-transform: rotate(330deg); 80 | transform: rotate(330deg); 81 | } 82 | .sk-circle .sk-circle2:before { 83 | -webkit-animation-delay: -1.1s; 84 | animation-delay: -1.1s; 85 | } 86 | .sk-circle .sk-circle3:before { 87 | -webkit-animation-delay: -1s; 88 | animation-delay: -1s; 89 | } 90 | .sk-circle .sk-circle4:before { 91 | -webkit-animation-delay: -0.9s; 92 | animation-delay: -0.9s; 93 | } 94 | .sk-circle .sk-circle5:before { 95 | -webkit-animation-delay: -0.8s; 96 | animation-delay: -0.8s; 97 | } 98 | .sk-circle .sk-circle6:before { 99 | -webkit-animation-delay: -0.7s; 100 | animation-delay: -0.7s; 101 | } 102 | .sk-circle .sk-circle7:before { 103 | -webkit-animation-delay: -0.6s; 104 | animation-delay: -0.6s; 105 | } 106 | .sk-circle .sk-circle8:before { 107 | -webkit-animation-delay: -0.5s; 108 | animation-delay: -0.5s; 109 | } 110 | .sk-circle .sk-circle9:before { 111 | -webkit-animation-delay: -0.4s; 112 | animation-delay: -0.4s; 113 | } 114 | .sk-circle .sk-circle10:before { 115 | -webkit-animation-delay: -0.3s; 116 | animation-delay: -0.3s; 117 | } 118 | .sk-circle .sk-circle11:before { 119 | -webkit-animation-delay: -0.2s; 120 | animation-delay: -0.2s; 121 | } 122 | .sk-circle .sk-circle12:before { 123 | -webkit-animation-delay: -0.1s; 124 | animation-delay: -0.1s; 125 | } 126 | 127 | @-webkit-keyframes sk-circleBounceDelay { 128 | 0%, 129 | 80%, 130 | 100% { 131 | -webkit-transform: scale(0); 132 | transform: scale(0); 133 | } 134 | 40% { 135 | -webkit-transform: scale(1); 136 | transform: scale(1); 137 | } 138 | } 139 | 140 | @keyframes sk-circleBounceDelay { 141 | 0%, 142 | 80%, 143 | 100% { 144 | -webkit-transform: scale(0); 145 | transform: scale(0); 146 | } 147 | 40% { 148 | -webkit-transform: scale(1); 149 | transform: scale(1); 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /src/containers/profile/Profile.js: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect, lazy, Suspense} from "react"; 2 | import {openSource} from "../../portfolio"; 3 | import Contact from "../contact/Contact"; 4 | import Loading from "../loading/Loading"; 5 | 6 | const renderLoader = () => ; 7 | const GithubProfileCard = lazy(() => 8 | import("../../components/githubProfileCard/GithubProfileCard") 9 | ); 10 | export default function Profile() { 11 | const [prof, setrepo] = useState([]); 12 | function setProfileFunction(array) { 13 | setrepo(array); 14 | } 15 | 16 | useEffect(() => { 17 | if (openSource.showGithubProfile === "true") { 18 | const getProfileData = () => { 19 | fetch("/profile.json") 20 | .then(result => { 21 | if (result.ok) { 22 | return result.json(); 23 | } 24 | }) 25 | .then(response => { 26 | setProfileFunction(response.data.user); 27 | }) 28 | .catch(function (error) { 29 | console.error( 30 | `${error} (because of this error GitHub contact section could not be displayed. Contact section has reverted to default)` 31 | ); 32 | setProfileFunction("Error"); 33 | openSource.showGithubProfile = "false"; 34 | }); 35 | }; 36 | getProfileData(); 37 | } 38 | }, []); 39 | if ( 40 | openSource.display && 41 | openSource.showGithubProfile === "true" && 42 | !(typeof prof === "string" || prof instanceof String) 43 | ) { 44 | return ( 45 | 46 | 47 | 48 | ); 49 | } else { 50 | return ; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/containers/skillProgress/Progress.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .meter { 4 | height: 20px; 5 | position: relative; 6 | background: $progressBarBackground; 7 | -moz-border-radius: 25px; 8 | -webkit-border-radius: 25px; 9 | border-radius: 25px; 10 | } 11 | .meter > span { 12 | display: block; 13 | height: 100%; 14 | border-top-right-radius: 6px; 15 | border-bottom-right-radius: 6px; 16 | border-top-left-radius: 20px; 17 | border-bottom-left-radius: 20px; 18 | background-color: $progressBarSpanBG; 19 | position: relative; 20 | overflow: hidden; 21 | } 22 | .skill { 23 | line-height: 3.5vw; 24 | } 25 | .skill-bars { 26 | font-size: 28px; 27 | width: 40%; 28 | } 29 | .skills-container { 30 | display: flex; 31 | width: 90%; 32 | padding: 20px 10px; 33 | margin: 0px auto; 34 | margin-top: 2rem; 35 | } 36 | .skills-container > * { 37 | flex: 1; 38 | margin-bottom: 30px; 39 | } 40 | .skills-image > img { 41 | margin-left: 80px; 42 | max-width: 90%; 43 | height: auto; 44 | } 45 | 46 | /* Media Query */ 47 | 48 | @media (max-width: 1456px) { 49 | .skills-bar { 50 | line-height: 4rem; 51 | } 52 | .skills-image { 53 | display: none; 54 | order: 2; 55 | } 56 | } 57 | 58 | @media (max-width: 768px) { 59 | .skills-container { 60 | flex-direction: column; 61 | } 62 | .skills-bar { 63 | line-height: 3rem; 64 | margin: 20px; 65 | } 66 | .skills-image { 67 | display: none; 68 | order: 2; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/containers/skillProgress/skillProgress.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Progress.scss"; 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.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./Skills.scss"; 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 | Man Working 26 | ) : ( 27 | 28 | )} 29 |
30 | 31 | 32 |
33 |

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

38 |

45 | {skillsSection.subTitle} 46 |

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

59 | {skills} 60 |

61 | ); 62 | })} 63 |
64 |
65 | 66 |
67 |
68 | ); 69 | } 70 | -------------------------------------------------------------------------------- /src/containers/skills/Skills.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | .skills-main-div { 4 | display: flex; 5 | width: 100%; 6 | overflow: hidden; 7 | } 8 | 9 | .skills-text-div { 10 | margin-left: 50px; 11 | } 12 | 13 | .skills-main-div > * { 14 | flex: 1; 15 | margin-bottom: 30px; 16 | } 17 | 18 | .skills-image-div > img { 19 | max-width: 100%; 20 | height: auto; 21 | } 22 | 23 | .skills-heading { 24 | font-size: 56px; 25 | font-weight: 400; 26 | } 27 | .subTitle { 28 | color: $subTitle; 29 | } 30 | 31 | /* Media Query */ 32 | @media (max-width: 1380px) { 33 | .skills-heading { 34 | font-size: 40px; 35 | } 36 | } 37 | @media (max-width: 768px) { 38 | .skills-heading { 39 | font-size: 30px; 40 | text-align: center; 41 | } 42 | .greeting-text-p { 43 | font-size: 16px; 44 | line-height: normal; 45 | } 46 | .skills-main-div { 47 | flex-direction: column; 48 | } 49 | .skills-text-div { 50 | margin-left: 0px; 51 | margin: 20px; 52 | } 53 | .skills-text { 54 | font-size: 16px; 55 | } 56 | .skills-text-subtitle { 57 | font-size: 16px; 58 | text-align: center; 59 | } 60 | .skills-image-div { 61 | /* display: none; */ 62 | order: 2; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/containers/splashScreen/SplashScreen.css: -------------------------------------------------------------------------------- 1 | .splash-container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | min-height: 100vh; 7 | } 8 | 9 | .splash-animation-container { 10 | height: 50vh; 11 | } 12 | 13 | .splash-title-container { 14 | font-size: 2.5rem; 15 | text-decoration: none; 16 | } 17 | .splash-title { 18 | font-family: "Agustina Regular", cursive; 19 | font-weight: bold; 20 | font-variant-ligatures: no-common-ligatures; 21 | -webkit-font-variant-ligatures: no-common-ligatures; 22 | padding: 0 20px; 23 | } 24 | -------------------------------------------------------------------------------- /src/containers/splashScreen/SplashScreen.js: -------------------------------------------------------------------------------- 1 | import React, {useContext} from "react"; 2 | import "./SplashScreen.css"; 3 | import DisplayLottie from "../../components/displayLottie/DisplayLottie"; 4 | import {greeting, splashScreen} from "../../portfolio"; 5 | import StyleContext from "../../contexts/StyleContext"; 6 | 7 | export default function SplashScreen() { 8 | const {isDark} = useContext(StyleContext); 9 | return ( 10 |
11 |
12 | 13 |
14 |
15 | < 16 | {greeting.username} 17 | /> 18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/containers/topbutton/Top.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Top.scss"; 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/topbutton/Top.scss: -------------------------------------------------------------------------------- 1 | @import "../../_globalColor"; 2 | 3 | #topButton { 4 | visibility: hidden; 5 | position: fixed; 6 | bottom: 20px; 7 | right: 30px; 8 | z-index: 99; 9 | border: none; 10 | outline: none; 11 | background-color: $buttonColor; 12 | color: white; 13 | cursor: pointer; 14 | padding: 15px; 15 | border-radius: 15px; 16 | font-size: 25px; 17 | } 18 | 19 | #topButton:hover { 20 | background-color: $topButtonHover; 21 | transition: all ease-in-out 0.2s; 22 | } 23 | -------------------------------------------------------------------------------- /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/hooks/useLocalStorage.js: -------------------------------------------------------------------------------- 1 | import {useState} from "react"; 2 | 3 | 4 | export const useLocalStorage = (key, initialValue) => { 5 | // State to store our value 6 | // Pass initial state function to useState so logic is only executed once 7 | const [storedValue, setStoredValue] = useState(() => { 8 | try { 9 | // Get from local storage by key 10 | const item = window.localStorage.getItem(key); 11 | // Parse stored json or if none return initialValue 12 | return item ? JSON.parse(item) : initialValue; 13 | } catch (error) { 14 | // If error also return initialValue 15 | console.log(error); 16 | return initialValue; 17 | } 18 | }); 19 | 20 | // Return a wrapped version of useState's setter function that ... 21 | // ... persists the new value to localStorage. 22 | const setValue = value => { 23 | try { 24 | // Allow value to be a function so we have same API as useState 25 | const valueToStore = 26 | value instanceof Function ? value(storedValue) : value; 27 | // Save state 28 | setStoredValue(valueToStore); 29 | // Save to local storage 30 | window.localStorage.setItem(key, JSON.stringify(valueToStore)); 31 | } catch (error) { 32 | // A more advanced implementation would handle the error case 33 | console.log(error); 34 | } 35 | }; 36 | 37 | return [storedValue, setValue]; 38 | }; 39 | -------------------------------------------------------------------------------- /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 | 10 | @font-face { 11 | font-family: "Montserrat"; 12 | src: local("Montserrat"), 13 | url("./assets/fonts/Montserrat-Regular.ttf") format("woff"); 14 | font-display: swap; 15 | } 16 | 17 | code { 18 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 19 | monospace; 20 | } 21 | html, 22 | body { 23 | scroll-behavior: smooth; 24 | } 25 | body { 26 | margin: 0; 27 | font: 19px / 23px Montserrat, "Montserrat", sans-serif; 28 | -webkit-font-smoothing: antialiased; 29 | -moz-osx-font-smoothing: grayscale; 30 | } 31 | /* Media Query */ 32 | @media (max-width: 1380px) { 33 | html, 34 | body { 35 | font-size: rem; 36 | line-height: normal; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /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 | 8 | ReactDOM.render(, document.getElementById("root")); 9 | 10 | // If you want your app to work offline and load faster, you can change 11 | // unregister() to register() below. Note this comes with some pitfalls. 12 | // Learn more about service workers: https://bit.ly/CRA-PWA 13 | serviceWorker.unregister(); 14 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/portfolio.js: -------------------------------------------------------------------------------- 1 | /* Change this file to get your personal Portfolio */ 2 | 3 | // To change portfolio colors globally go to the _globalColor.scss file 4 | 5 | import emoji from "react-easy-emoji"; 6 | import splashAnimation from "./assets/lottie/splashAnimation"; 7 | 8 | 9 | const splashScreen = { 10 | enabled: true, 11 | animation: splashAnimation, 12 | duration: 2000 13 | }; 14 | 15 | 16 | 17 | const illustration = { 18 | animated: true 19 | }; 20 | 21 | const greeting = { 22 | username: "Smart Luck", 23 | title: "Hi all, I'm Sm@rtLuck1125", 24 | subTitle: emoji( 25 | "A passionate Full Stack Software Developer 🚀 having an experience of building Web with JavaScript / Reactjs / Nodejs and some other cool libraries and frameworks." 26 | ), 27 | resumeLink: 28 | "https://drive.google.com/file/d/1X1Q5S-x78Dfn1n-eRiFcjT6TWvsxpuhW/view?usp=sharing", 29 | displayGreeting: true 30 | }; 31 | 32 | // Social Media Links 33 | 34 | const socialMediaLinks = { 35 | github: "https://github.com/smartluck1125", 36 | linkedin: "https://www.linkedin.com/in/", 37 | gmail: "akiktajohnson@gmail.com", 38 | gitlab: "https://gitlab.com/smartluck1125", 39 | display: false 40 | }; 41 | 42 | // Skills Section 43 | 44 | const skillsSection = { 45 | title: "What I do", 46 | subTitle: "CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK", 47 | skills: [ 48 | emoji( 49 | "⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications" 50 | ), 51 | emoji("⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks"), 52 | emoji( 53 | "⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean" 54 | ) 55 | ], 56 | 57 | softwareSkills: [ 58 | { 59 | skillName: "JavaScript", 60 | fontAwesomeClassname: "fab fa-js" 61 | }, 62 | { 63 | skillName: "React.js/Next.js", 64 | fontAwesomeClassname: "fab fa-react" 65 | }, 66 | { 67 | skillName: "Nodejs", 68 | fontAwesomeClassname: "fab fa-node" 69 | }, 70 | { 71 | skillName: "Django", 72 | fontAwesomeClassname: "fas fa-django" 73 | }, 74 | { 75 | skillName: "Sass", 76 | fontAwesomeClassname: "fab fa-sass" 77 | }, 78 | { 79 | skillName: "MySQL/PostgreSQL/MongoDB/Prisma", 80 | fontAwesomeClassname: "fas fa-database" 81 | }, 82 | { 83 | skillName: "Python", 84 | fontAwesomeClassname: "fab fa-python" 85 | }, 86 | { 87 | skillName: "Docker", 88 | fontAwesomeClassname: "fab fa-docker" 89 | } 90 | ], 91 | display: true 92 | }; 93 | 94 | 95 | 96 | 97 | const techStack = { 98 | viewSkillBars: true, 99 | experience: [ 100 | { 101 | Stack: "Frontend/Design", 102 | progressPercentage: "80%" 103 | }, 104 | { 105 | Stack: "Backend", 106 | progressPercentage: "90%" 107 | }, 108 | { 109 | Stack: "Programming", 110 | progressPercentage: "60%" 111 | } 112 | ], 113 | displayCodersrank: false 114 | }; 115 | 116 | 117 | 118 | const openSource = { 119 | showGithubProfile: "true", 120 | display: true 121 | }; 122 | 123 | 124 | const contactInfo = { 125 | title: emoji("Contact Me ☎️"), 126 | subtitle: 127 | "Discuss a project or just want to say hi? My Inbox is open for all.", 128 | number: "+1 (619) 483-0971", 129 | email_address: "onemoretimeforu@outlook.com" 130 | }; 131 | 132 | const isHireable = false; 133 | 134 | export { 135 | illustration, 136 | greeting, 137 | socialMediaLinks, 138 | splashScreen, 139 | skillsSection, 140 | techStack, 141 | openSource, 142 | contactInfo, 143 | isHireable 144 | }; 145 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl) 104 | .then(response => { 105 | // Ensure service worker exists, and that we really are getting a JS file. 106 | const contentType = response.headers.get('content-type'); 107 | if ( 108 | response.status === 404 || 109 | (contentType != null && contentType.indexOf('javascript') === -1) 110 | ) { 111 | // No service worker found. Probably a different app. Reload the page. 112 | navigator.serviceWorker.ready.then(registration => { 113 | registration.unregister().then(() => { 114 | window.location.reload(); 115 | }); 116 | }); 117 | } else { 118 | // Service worker found. Proceed as normal. 119 | registerValidSW(swUrl, config); 120 | } 121 | }) 122 | .catch(() => { 123 | console.log( 124 | 'No internet connection found. App is running in offline mode.' 125 | ); 126 | }); 127 | } 128 | 129 | export function unregister() { 130 | if ('serviceWorker' in navigator) { 131 | navigator.serviceWorker.ready.then(registration => { 132 | registration.unregister(); 133 | }); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import "jest-canvas-mock"; 2 | import {configure} from "enzyme"; 3 | import Adapter from "enzyme-adapter-react-16"; 4 | 5 | configure({adapter: new Adapter()}); 6 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export const formatFileSizeDisplay = value => { 2 | if (value < 1024) { 3 | return `${value} KB`; 4 | } 5 | return `${parseFloat((value / 1024).toFixed(1))} MB`; 6 | }; 7 | --------------------------------------------------------------------------------