├── .gitignore ├── BUGS.md ├── LICENSE ├── README.md ├── package.json ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── avatar.png ├── avatar2.png ├── buymeacoffee.svg ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt └── site.webmanifest ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── Components │ ├── Dialogs │ │ └── ColorPickerDialog.tsx │ ├── Items │ │ ├── ListItemWithIcon.tsx │ │ ├── ListTitle.tsx │ │ └── OurListItem.tsx │ ├── Left │ │ ├── AvatarText.tsx │ │ ├── BottomNavigationLinks.tsx │ │ └── NavigationLinks.tsx │ ├── LeftPart.tsx │ ├── Right │ │ ├── Routes │ │ │ ├── AboutRoute.tsx │ │ │ ├── ContactRoute.tsx │ │ │ ├── SkillsRoute.tsx │ │ │ └── WorksRoute.tsx │ │ └── Top │ │ │ ├── RouteLocation.tsx │ │ │ └── TopRightButtons.tsx │ └── RightPart.tsx ├── Helpers │ └── SvgHelper.tsx ├── Others │ ├── Constants.ts │ ├── GlobalMethods.ts │ ├── GlobalVars.ts │ ├── Images.ts │ ├── Interfaces.ts │ ├── OurIcons.ts │ └── Theme.ts ├── Overmind │ ├── OvermindActions.ts │ ├── OvermindHelper.ts │ └── OvermindState.ts ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts └── tsconfig.json /.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 | 25 | yarn.lock 26 | 27 | # others 28 | /.idea -------------------------------------------------------------------------------- /BUGS.md: -------------------------------------------------------------------------------- 1 | ## Identified bugs 2 | ### Bug1 3 | 4 | ![bug1](https://user-images.githubusercontent.com/6418354/198987606-fb710ffb-2148-45a7-8001-144d9a9e619d.gif) 5 | 6 | > in Chrome, after saving an image, the bottom parts of the right side goes up from where it should be. 7 | 8 | ### Bug2 9 | 10 | ![bug2](https://user-images.githubusercontent.com/6418354/201472161-6c1632fa-8efd-44df-88e4-010baf5bfec7.gif) 11 | 12 | > in any web browser from a computer, if we go to inspect by docking it at the bottom, the texts and the contents in the portfolio at the right side keeps disappearing. If we refresh the page at that state, the right part of the portfolio gets cut out and even after closing the devtools, the issue persists. 13 | 14 | ## Found a new bug? 15 | If you have found/identified a new bug that you can reproduce, here's how to report them: 16 | 1. Make a video/gif of how to reproduce the bug 17 | 2. Create/submit a new issue with the video/gif file 18 | 19 | Don't make a pull request by updating this file. Thanks -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Fayaz Bin Salam 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##### The 2nd iteration of My Personal App - created using ReactJS, Overmind, Material UI etc... 2 | 3 | ![p32929](https://user-images.githubusercontent.com/6418354/108698254-2256ee80-752e-11eb-8767-aeb5a4f86536.gif) 4 | 5 | [![](https://badgen.net/github/release/p32929/p32929.github.io)]() [![](https://badgen.net/github/release/p32929/p32929.github.io/stable)]() [![](https://badgen.net/github/tag/p32929/p32929.github.io)]() [![](https://badgen.net/github/watchers/p32929/p32929.github.io)]() [![](https://badgen.net/github/checks/p32929/p32929.github.io)]() [![](https://badgen.net/github/status/p32929/p32929.github.io)]() [![](https://badgen.net/github/stars/p32929/p32929.github.io)]() [![](https://badgen.net/github/forks/p32929/p32929.github.io)]() [![](https://badgen.net/github/issues/p32929/p32929.github.io)]() [![](https://badgen.net/github/open-issues/p32929/p32929.github.io)]() [![](https://badgen.net/github/closed-issues/p32929/p32929.github.io)]() [![](https://badgen.net/github/label-issues/p32929/p32929.github.io/help-wanted/open)]() [![](https://badgen.net/github/prs/p32929/p32929.github.io)]() [![](https://badgen.net/github/open-prs/p32929/p32929.github.io)]() [![](https://badgen.net/github/closed-prs/p32929/p32929.github.io)]() [![](https://badgen.net/github/merged-prs/p32929/p32929.github.io)]() [![](https://badgen.net/github/commits/p32929/p32929.github.io)]() [![](https://badgen.net/github/last-commit/p32929/p32929.github.io)]() [![](https://badgen.net/github/branches/p32929/p32929.github.io)]() [![](https://badgen.net/github/releases/p32929/p32929.github.io)]() [![](https://badgen.net/github/tags/p32929/p32929.github.io)]() [![](https://badgen.net/github/license/p32929/p32929.github.io)]() [![](https://badgen.net/github/contributors/p32929/p32929.github.io)]() [![](https://badgen.net/github/dependents-pkg/p32929/p32929.github.io)]() 6 | 7 | Visit Live: https://p32929.github.io/ 8 | 9 | ## Share 10 | Sharing this repository with your friends is just one click away from here 11 | 12 | [![facebook](https://user-images.githubusercontent.com/6418354/179013321-ac1d1452-0689-493f-9066-940cf2302b6e.png)](https://www.facebook.com/sharer/sharer.php?u=https://github.com/p32929/p32929.github.io/) 13 | [![twitter](https://user-images.githubusercontent.com/6418354/179013351-7d8d6d1c-4ce2-46ab-bef8-4c4765a1b888.png)](https://twitter.com/intent/tweet?url=https://github.com/p32929/p32929.github.io/) 14 | [![tumblr](https://user-images.githubusercontent.com/6418354/179013343-3111f55a-3b90-40c7-8487-9777348672b0.png)](https://www.tumblr.com/share?v=3&u=https://github.com/p32929/p32929.github.io/) 15 | [![pocket](https://user-images.githubusercontent.com/6418354/179013334-b095c45f-becf-49f4-9ee1-5a731a9b1f85.png)](https://getpocket.com/save?url=https://github.com/p32929/p32929.github.io/) 16 | [![pinterest](https://user-images.githubusercontent.com/6418354/179013331-44cd9206-11b1-4b65-becb-5863b61c828f.png)](https://pinterest.com/pin/create/button/?url=https://github.com/p32929/p32929.github.io/) 17 | [![reddit](https://user-images.githubusercontent.com/6418354/179013338-7416ae3f-73ba-4522-86e1-1374d7082d22.png)](https://www.reddit.com/submit?url=https://github.com/p32929/p32929.github.io/) 18 | [![linkedin](https://user-images.githubusercontent.com/6418354/179013327-ca7b7102-1da8-4b1c-858f-1a6e5f21bd70.png)](https://www.linkedin.com/shareArticle?mini=true&url=https://github.com/p32929/p32929.github.io/) 19 | [![whatsapp](https://user-images.githubusercontent.com/6418354/179013353-f477fa0b-3e6f-4138-a357-c9991b23ff88.png)](https://api.whatsapp.com/send?text=https://github.com/p32929/p32929.github.io/) 20 | 21 | or Share my portfolio link ( https://p32929.github.io/ ) with your friends in just a click 22 | 23 | [![facebook](https://user-images.githubusercontent.com/6418354/179013321-ac1d1452-0689-493f-9066-940cf2302b6e.png)](https://www.facebook.com/sharer/sharer.php?u=https://p32929.github.io/) 24 | [![twitter](https://user-images.githubusercontent.com/6418354/179013351-7d8d6d1c-4ce2-46ab-bef8-4c4765a1b888.png)](https://twitter.com/intent/tweet?url=https://p32929.github.io/) 25 | [![tumblr](https://user-images.githubusercontent.com/6418354/179013343-3111f55a-3b90-40c7-8487-9777348672b0.png)](https://www.tumblr.com/share?v=3&u=https://p32929.github.io/) 26 | [![pocket](https://user-images.githubusercontent.com/6418354/179013334-b095c45f-becf-49f4-9ee1-5a731a9b1f85.png)](https://getpocket.com/save?url=https://p32929.github.io/) 27 | [![pinterest](https://user-images.githubusercontent.com/6418354/179013331-44cd9206-11b1-4b65-becb-5863b61c828f.png)](https://pinterest.com/pin/create/button/?url=https://p32929.github.io/) 28 | [![reddit](https://user-images.githubusercontent.com/6418354/179013338-7416ae3f-73ba-4522-86e1-1374d7082d22.png)](https://www.reddit.com/submit?url=https://p32929.github.io/) 29 | [![linkedin](https://user-images.githubusercontent.com/6418354/179013327-ca7b7102-1da8-4b1c-858f-1a6e5f21bd70.png)](https://www.linkedin.com/shareArticle?mini=true&url=https://p32929.github.io/) 30 | [![whatsapp](https://user-images.githubusercontent.com/6418354/179013353-f477fa0b-3e6f-4138-a357-c9991b23ff88.png)](https://api.whatsapp.com/send?text=https://p32929.github.io/) 31 | 32 | ## Create your own portfolio 33 | 1. Fork the repository ( Recommended ) 34 | 2. Change the repository name to `your-github-username.github.io` by going into settings 35 | 3. Clone the repository using `git clone YOUR-REPOSITORY-URL` 36 | 4. Modify the variables in `src/Others/GlobalVars.ts` to add your own data and flavors. 37 | 5. Run: `npm run predeploy` 38 | 6. Run: `npm run deploy` 39 | 7. Check the `settings` of your repository, and change the `source` of the github pages to `master` branch 40 | 41 | & Volla!! Now, you can check your portfolio LIVE version in the `homepage` URL (`https://your-github-username.github.io/`). Github may take a while to update the `github page` into your `homepage` URL. 42 | 43 | If it still doesn't show, do step 5 & 6 again. It usually takes 3-5 minutes for github pages to deploy the changes. 44 | 45 | ## Prerequisites 46 | You need to have `NodeJS` and `NPM` installed in your computer. 47 | If you don't have them installed, install them from here: https://nodejs.org/en/download/ 48 | 49 | ## Run the project 50 | 1. Fork the repository ( Recommended ) 51 | 2. Clone your forked repository using `git clone YOUR-REPOSITORY-URL` 52 | 3. Install all the dependencies using this command: 53 | `npm install` 54 | 4. Run the project using this command: 55 | `npm start` 56 | 57 | ## Thanks 58 | Thanks to everyone for your STARS, WATCHES, FORKS, & VISITS. Special thanks to: 59 | * [Facebook](https://www.facebook.com/) for the [ReactJS](https://reactjs.org/) library 60 | * [Microsoft](https://www.microsoft.com/) for the [TypeScript](https://www.typescriptlang.org/) language 61 | * [mui-org](https://github.com/mui-org/) for the [Material-UI](https://material-ui.com/) Components library 62 | * [casesandberg](https://github.com/casesandberg) for the [react-color](https://casesandberg.github.io/react-color/) library 63 | * [Plabon Dey](https://www.facebook.com/plabon.shuvo1) for the Dynamic Color idea :P 64 | * [Github pages](https://pages.github.com/) for letting me host it for free 65 | * [Vijay Verma](https://www.uplabs.com/realvjy) for the awesome [Glazzy Portfolio](https://www.uplabs.com/posts/glazzy-free-portfolio-psd-template) design 66 | 67 | Am I missing anyone? If yes, Let me know 68 | 69 | ## License 70 | ``` 71 | MIT License 72 | 73 | Copyright (c) 2020 Fayaz Bin Salam 74 | 75 | Permission is hereby granted, free of charge, to any person obtaining a copy 76 | of this software and associated documentation files (the "Software"), to deal 77 | in the Software without restriction, including without limitation the rights 78 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 79 | copies of the Software, and to permit persons to whom the Software is 80 | furnished to do so, subject to the following conditions: 81 | 82 | The above copyright notice and this permission notice shall be included in all 83 | copies or substantial portions of the Software. 84 | 85 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 86 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 87 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 88 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 89 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 90 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 91 | SOFTWARE. 92 | 93 | ``` 94 | 95 | ## FAQ 96 | * Can I use it for any personal/commercial project? 97 | -> Yes. But don't change/remove the `fork icon` and the `URL it redirects to` at the `TOP-RIGHT corner`. So that, others can also benefit from the repository. 98 | 99 | * Can I use it for making my personal/commercial portfolio? 100 | -> Definitely. But make sure you FORK it while doing it :) 101 | 102 | * Can I share your portfolio link with my friends? 103 | -> DEFINITELY! ^_^ 104 | 105 | * Can I contact you if I get stuck while trying to create my own portfolio using the forked source code? 106 | -> DEFINITELY! :) 107 | 108 | ## How to contribute? 109 | Lately, people have been making pull requests just to show their github username in the contributors list. Which I don't think is a good way to be an Open Source contributor. So, here's a few identified bugs: https://github.com/p32929/p32929.github.io/blob/react/BUGS.md 110 | 111 | If you think you can fix the bugs, you may: 112 | 1. Fork the repository 113 | 2. Clone the repository 114 | 3. Create a new branch from the `react` branch with your github username [ Example: My github username is `p32929` ] 115 | 4. Write your code 116 | 5. Add necessary changes to the readme if needed 117 | 6. Commit the code 118 | 7. Push the code in your branch 119 | 8. Create a new pull request 120 | 121 | You're welcome... 122 | 123 | ## Support 124 | [![buymeacoffee](https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-1.svg)](https://www.buymeacoffee.com/p32929) 125 | 126 | ## All my portfolio websites: 127 | Looking for one of my previous portfolio website / source code? Here's the list: 128 | 129 | V1: https://p32929.github.io/portfolio-v1/ ( Source: https://github.com/p32929/portfolio-v1 ) 130 | 131 | V2: https://p32929.github.io/portfolio-v2/ ( Source: https://github.com/p32929/portfolio-v2 ) 132 | 133 | V3 : https://p32929.github.io/ ( Source: https://github.com/p32929/p32929.github.io ) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "p32929-fayaz-bin-salam", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://p32929.github.io/portfolio-v2", 6 | "dependencies": { 7 | "@material-ui/core": "^4.11.4", 8 | "overmind": "28.0.1", 9 | "overmind-react": "29.0.1", 10 | "react": "^17.0.2", 11 | "react-color": "^2.19.3", 12 | "react-dom": "^17.0.2", 13 | "react-router-dom": "^5.2.0", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.1.2" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts --openssl-legacy-provider start", 19 | "serve": "serve -s build", 20 | "build": "react-scripts --openssl-legacy-provider build", 21 | "test": "react-scripts --openssl-legacy-provider test", 22 | "eject": "react-scripts --openssl-legacy-provider eject", 23 | "predeploy": "npm run build", 24 | "deploy": "gh-pages -d build -b master" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | }, 44 | "devDependencies": { 45 | "@testing-library/jest-dom": "^5.12.0", 46 | "@testing-library/react": "^11.2.7", 47 | "@testing-library/user-event": "^13.1.9", 48 | "@types/jest": "^26.0.23", 49 | "@types/node": "^15.6.1", 50 | "@types/react": "^17.0.8", 51 | "@types/react-color": "^3.0.4", 52 | "@types/react-dom": "^17.0.5", 53 | "@types/react-router-dom": "^5.1.7", 54 | "serve": "^11.3.2", 55 | "typescript": "^4.2.4", 56 | "gh-pages": "^3.2.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/avatar.png -------------------------------------------------------------------------------- /public/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/avatar2.png -------------------------------------------------------------------------------- /public/buymeacoffee.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 27 | Fayaz Bin Salam - p32929 28 | 32 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/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/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Fayaz Bin Salam - Portfolio", 3 | "short_name": "Fayaz Bin Salam - Portfolio", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/p32929/portfolio-v2/2a17c8871bfb42df21532c2ce266f6cdca3b43f3/src/App.css -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Theme, Grid, Paper } from "@material-ui/core"; 4 | import { useActions, useAppState } from './Overmind/OvermindHelper'; 5 | import LeftPart from './Components/LeftPart'; 6 | import { GlobalMethods } from './Others/GlobalMethods'; 7 | import RightPart from './Components/RightPart'; 8 | import { useTheme } from "@material-ui/core/styles"; 9 | import useMediaQuery from "@material-ui/core/useMediaQuery"; 10 | import { MemoryRouter, Route, Redirect } from 'react-router-dom'; 11 | import ColorPickerDialog from './Components/Dialogs/ColorPickerDialog'; 12 | 13 | interface Props { 14 | 15 | } 16 | 17 | const getThemeObj = (theme: Theme) => { 18 | return { 19 | root: { 20 | height: '100vh', 21 | maxHeight: '100vh', 22 | }, 23 | content: { 24 | height: '100%', 25 | width: '100%' 26 | }, 27 | paper: { 28 | [theme.breakpoints.down('sm')]: GlobalMethods.getHeightWidthMobile(), 29 | [theme.breakpoints.up('md')]: GlobalMethods.getHeightWidthWeb(), 30 | } 31 | } 32 | } 33 | 34 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 35 | var hiddenLeftFirstTime = false 36 | 37 | const App: React.FC = (props) => { 38 | const { showLeftPart } = useActions() 39 | const { primaryColor, isLeftShowing } = useAppState() 40 | const classes = useStyles(); 41 | 42 | const theme = useTheme() 43 | const belowSm = useMediaQuery(theme.breakpoints.down('sm')) 44 | 45 | if (belowSm) { 46 | if (!hiddenLeftFirstTime) { 47 | setTimeout(() => { 48 | showLeftPart(false) 49 | hiddenLeftFirstTime = true 50 | }, 700) 51 | } 52 | } 53 | 54 | const getLeftPart = () => { 55 | if (belowSm) { 56 | if (isLeftShowing) { 57 | return 58 | } 59 | } else { 60 | return 61 | } 62 | } 63 | 64 | const getRightPart = () => { 65 | if (belowSm) { 66 | if (!isLeftShowing) { 67 | return 68 | } 69 | } else { 70 | return 71 | } 72 | } 73 | 74 | return 76 | 77 | 78 | 79 | 80 | 81 | {/* */} 82 | 83 | 84 | 85 | { 86 | getLeftPart() 87 | } 88 | 89 | { 90 | getRightPart() 91 | } 92 | 93 | 94 | 95 | 96 | } 97 | 98 | export default App; -------------------------------------------------------------------------------- /src/Components/Dialogs/ColorPickerDialog.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Dialog, DialogContent, Divider, Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../Overmind/OvermindHelper'; 5 | import { BlockPicker } from 'react-color' 6 | import { GlobalVars } from '../../Others/GlobalVars'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return {} 14 | } 15 | 16 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 17 | 18 | const ColorPickerDialog: React.FC = (props) => { 19 | const { setPrimaryColor, showColorPickerDialog } = useActions() 20 | const { primaryColor, isColorPickerDialogShowing } = useAppState() 21 | 22 | const classes = useStyles(); 23 | 24 | return { 25 | showColorPickerDialog(false) 26 | }}> 27 | 28 | { 31 | setPrimaryColor(color.hex) 32 | showColorPickerDialog(false) 33 | }} 34 | colors={GlobalVars.otherColors} 35 | /> 36 | 37 | 38 | } 39 | 40 | export default ColorPickerDialog; -------------------------------------------------------------------------------- /src/Components/Items/ListItemWithIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../Overmind/OvermindHelper'; 5 | import { TitledListItemInterface } from '../../Others/Interfaces'; 6 | import ListTitle from './ListTitle'; 7 | import OurListItem from './OurListItem'; 8 | 9 | interface Props { 10 | item: TitledListItemInterface 11 | } 12 | 13 | const getThemeObj = (theme: Theme) => { 14 | return { 15 | root: { 16 | marginTop: 4, 17 | marginLeft: 8, 18 | marginBottom: 16, 19 | }, 20 | itemRoot: { 21 | marginTop: 8 22 | } 23 | } 24 | } 25 | 26 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 27 | 28 | const ListItemWithIcon: React.FC = (props) => { 29 | const { } = useActions() 30 | const { } = useAppState() 31 | const { item } = props 32 | const { text, arr } = item 33 | 34 | const classes = useStyles(); 35 | 36 | return 37 | 38 | 39 | { 40 | arr.sort((a, b) => a.title.localeCompare(b.title)).map((arrItem, index) => { 41 | return 42 | }) 43 | } 44 | 45 | 46 | 47 | } 48 | 49 | export default ListItemWithIcon; -------------------------------------------------------------------------------- /src/Components/Items/ListTitle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {makeStyles} from '@material-ui/core/styles'; 3 | import {Grid, Theme, Typography} from "@material-ui/core"; 4 | import {useActions, useAppState} from '../../Overmind/OvermindHelper'; 5 | import SvgHelper from '../../Helpers/SvgHelper'; 6 | import {OurIcons} from '../../Others/OurIcons'; 7 | 8 | interface Props { 9 | title: string, 10 | fontStyle?: any 11 | } 12 | 13 | const getThemeObj = (theme: Theme) => { 14 | return { 15 | root: { 16 | marginLeft: 8, 17 | }, 18 | text: { 19 | marginLeft: 8, 20 | marginRight: 8, 21 | fontSize: 12, 22 | fontWeight: 600, 23 | color: "#757575" 24 | } 25 | } 26 | } 27 | 28 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 29 | 30 | const ListTitle: React.FC = (props) => { 31 | const {} = useActions() 32 | const {} = useAppState() 33 | const {title, fontStyle} = props 34 | const classes = useStyles(); 35 | 36 | return 37 | 38 | {title} 39 | 40 | 41 | } 42 | 43 | export default ListTitle; -------------------------------------------------------------------------------- /src/Components/Items/OurListItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Avatar, Grid, IconButton, Paper, Theme, Typography } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../Overmind/OvermindHelper'; 5 | import { ListItemInterface } from '../../Others/Interfaces'; 6 | import SvgHelper from '../../Helpers/SvgHelper'; 7 | import { OurIcons } from '../../Others/OurIcons'; 8 | 9 | interface Props { 10 | item: ListItemInterface 11 | } 12 | 13 | const getThemeObj = (theme: Theme) => { 14 | return { 15 | root: { 16 | padding: 2, 17 | }, 18 | textContainer: { 19 | paddingTop: 16, 20 | paddingBottom: 16, 21 | overflow: 'hidden', 22 | alignSelf: 'center' 23 | }, 24 | avatar: { 25 | margin: 16, 26 | }, 27 | title: { 28 | color: "#212121", 29 | lineHeight: 1.25 30 | }, 31 | desc: { 32 | color: "#757575", 33 | lineHeight: 1.25, 34 | overflow: 'hidden', 35 | } 36 | } 37 | } 38 | 39 | // const getLinkIcon = (url: string | undefined) => { 40 | // if (url) { 41 | // if (url.toString().includes('http') || url.toString().includes('skype:')) { 42 | // return 43 | // { 45 | // setTimeout(() => { 46 | 47 | // }, 500) 48 | // }} 49 | // target="_blank" 50 | // href={url} 51 | // size='small'> 52 | // 56 | // 57 | // 58 | // } 59 | // } 60 | // } 61 | 62 | interface LinkIconProps { 63 | url: string | undefined; 64 | } 65 | 66 | const LinkIcon: React.FC = (props) => { 67 | const { } = useActions() 68 | const { url } = props 69 | 70 | const isLinkString = () => { 71 | const linkStrings = [ 72 | 'http', 73 | 'skype:', 74 | 'mailto:' 75 | ] 76 | 77 | for (var i = 0; i < linkStrings.length; i++) { 78 | if ((props?.url ?? "").toString().toLowerCase().includes(linkStrings[i])) { 79 | return true 80 | } 81 | } 82 | 83 | return false 84 | } 85 | 86 | if (url) { 87 | if (isLinkString()) { 88 | return 89 | { 91 | e.stopPropagation() 92 | }} 93 | target="_blank" 94 | href={url} 95 | size='small'> 96 | 100 | 101 | 102 | } 103 | } 104 | 105 | return <> 106 | } 107 | 108 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 109 | 110 | const OurListItem: React.FC = (props) => { 111 | const { } = useActions() 112 | const { } = useAppState() 113 | 114 | const classes = useStyles(); 115 | const { item } = props 116 | const { logo, title, desc, link } = item 117 | 118 | return 119 | { 120 | if (!link) { 121 | // 122 | } 123 | }}> 124 | 125 | 126 | 127 | 128 | {title} 129 | { 130 | (desc || link) && 131 | {desc || link} 132 | } 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | } 142 | 143 | export default OurListItem; -------------------------------------------------------------------------------- /src/Components/Left/AvatarText.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {makeStyles} from '@material-ui/core/styles'; 3 | import {Avatar, Grid, Theme, Typography} from "@material-ui/core"; 4 | import {useActions, useAppState} from '../../Overmind/OvermindHelper'; 5 | import {GlobalVars} from '../../Others/GlobalVars'; 6 | import {LocalImages} from '../../Others/Images'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return { 14 | avatar: { 15 | height: 125, 16 | width: 125, 17 | }, 18 | title: { 19 | color: "#212121", 20 | marginTop: 24, 21 | fontSize: 14, 22 | fontWeight: 600 23 | }, 24 | subtitle: { 25 | fontSize: 12, 26 | color: "#212121", 27 | fontWeight: 600 28 | }, 29 | } 30 | } 31 | 32 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 33 | 34 | const AvatarText: React.FC = (props) => { 35 | const {} = useActions() 36 | const {} = useAppState() 37 | 38 | const classes = useStyles(); 39 | 40 | return 41 | 43 | {GlobalVars.myName.toUpperCase()} 44 | {GlobalVars.myOccupation} 45 | 46 | } 47 | 48 | export default AvatarText; -------------------------------------------------------------------------------- /src/Components/Left/BottomNavigationLinks.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Grid, IconButton, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../Overmind/OvermindHelper'; 5 | import { GlobalVars } from '../../Others/GlobalVars'; 6 | import SvgHelper from '../../Helpers/SvgHelper'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return { 14 | root: { paddingBottom: 8, width: '100%' }, 15 | iconButton: { margin: 3 } 16 | } 17 | } 18 | 19 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 20 | 21 | const BottomNavigationLinks: React.FC = (props) => { 22 | const { } = useActions() 23 | const { } = useAppState() 24 | 25 | const classes = useStyles(); 26 | 27 | return 28 | { 29 | GlobalVars.bottomLinks.map((item, index) => { 30 | return 31 | 34 | 35 | }) 36 | } 37 | 38 | } 39 | 40 | export default BottomNavigationLinks; -------------------------------------------------------------------------------- /src/Components/Left/NavigationLinks.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Hidden, IconButton, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../Overmind/OvermindHelper'; 5 | import { GlobalVars } from '../../Others/GlobalVars'; 6 | import { NavLink } from "react-router-dom"; 7 | import SvgHelper from '../../Helpers/SvgHelper'; 8 | import { OurIcons } from '../../Others/OurIcons'; 9 | import { useTheme } from "@material-ui/core/styles"; 10 | import useMediaQuery from "@material-ui/core/useMediaQuery"; 11 | import { Constants } from '../../Others/Constants'; 12 | 13 | interface Props { 14 | 15 | } 16 | 17 | const getThemeObj = (theme: Theme) => { 18 | return { 19 | link: { 20 | marginLeft: 8, 21 | marginRight: 8, 22 | textDecoration: 'none' 23 | }, 24 | divider: { 25 | height: 1, 26 | margin: 16, 27 | width: 90, 28 | alignSelf: 'center' 29 | }, 30 | } 31 | } 32 | 33 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 34 | 35 | const NavigationLinks: React.FC = (props) => { 36 | const { showLeftPart } = useActions() 37 | const { primaryColor } = useAppState() 38 | const classes = useStyles(); 39 | 40 | const theme = useTheme() 41 | const belowSm = useMediaQuery(theme.breakpoints.down('sm')) 42 | 43 | return 44 | 45 | {/* @ts-ignore */} 46 | 47 | { 48 | showLeftPart(false) 49 | }}> 50 | 51 | 52 | 53 | 54 | 55 | 56 | { 57 | Constants.routes.map((item, index) => { 58 | return 71 | 72 | }) 73 | } 74 | 75 | 76 | 77 | 78 | } 79 | 80 | export default NavigationLinks; -------------------------------------------------------------------------------- /src/Components/LeftPart.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Theme, Grid, Paper } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../Overmind/OvermindHelper'; 5 | import AvatarText from './Left/AvatarText'; 6 | import NavigationLinks from './Left/NavigationLinks'; 7 | import BottomNavigationLinks from './Left/BottomNavigationLinks'; 8 | 9 | interface Props { 10 | 11 | } 12 | 13 | const getThemeObj = (theme: Theme) => { 14 | return { 15 | root: { 16 | height: '100%', 17 | width: '100%', 18 | margin: 0, 19 | padding: 0 20 | } 21 | } 22 | } 23 | 24 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 25 | 26 | const LeftPart: React.FC = (props) => { 27 | const { } = useActions() 28 | const { } = useAppState() 29 | 30 | const classes = useStyles(); 31 | 32 | return 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | } 42 | 43 | export default LeftPart; -------------------------------------------------------------------------------- /src/Components/Right/Routes/AboutRoute.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {makeStyles, useTheme} from '@material-ui/core/styles'; 3 | import {Grid, Theme, Typography} from "@material-ui/core"; 4 | import {useActions, useAppState} from '../../../Overmind/OvermindHelper'; 5 | import {LocalImages} from '../../../Others/Images'; 6 | import useMediaQuery from "@material-ui/core/useMediaQuery"; 7 | import ListTitle from '../../Items/ListTitle'; 8 | import {GlobalVars} from '../../../Others/GlobalVars'; 9 | 10 | interface Props { 11 | 12 | } 13 | 14 | const aboveSmAvatarSize = {height: '95%'} 15 | const belowSmAvatarSize = {height: '75%'} 16 | 17 | const getThemeObj = (theme: Theme) => { 18 | return { 19 | root: { 20 | padding: 8 21 | }, 22 | text: { 23 | paddingLeft: 8, 24 | paddingBottom: 8, 25 | lineHeight: 1.3, 26 | fontWeight: 400, 27 | [theme.breakpoints.up('xl')]: { 28 | fontSize: 18, 29 | }, 30 | [theme.breakpoints.down('sm')]: { 31 | fontSize: 14, 32 | }, 33 | } 34 | } 35 | } 36 | 37 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 38 | 39 | const AboutRoute: React.FC = (props) => { 40 | const {} = useActions() 41 | const {} = useAppState() 42 | 43 | const classes = useStyles(); 44 | 45 | const theme = useTheme() 46 | const belowSm = useMediaQuery(theme.breakpoints.down('sm')) 47 | 48 | return 50 | 52 | 54 | 55 | 56 | 57 | 58 | 59 | {GlobalVars.myDetails} 60 | 61 | 62 | 63 | 64 | 65 | } 66 | 67 | export default AboutRoute; -------------------------------------------------------------------------------- /src/Components/Right/Routes/ContactRoute.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../../Overmind/OvermindHelper'; 5 | import { GlobalVars } from '../../../Others/GlobalVars'; 6 | import ListItemWithIcon from '../../Items/ListItemWithIcon'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return {} 14 | } 15 | 16 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 17 | 18 | const ContactRoute: React.FC = (props) => { 19 | const { } = useActions() 20 | const { } = useAppState() 21 | 22 | const classes = useStyles(); 23 | 24 | return 25 | { 26 | GlobalVars.contacts.map((item, index) => { 27 | return 28 | }) 29 | } 30 | 31 | 32 | } 33 | 34 | export default ContactRoute; -------------------------------------------------------------------------------- /src/Components/Right/Routes/SkillsRoute.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../../Overmind/OvermindHelper'; 5 | import { GlobalVars } from '../../../Others/GlobalVars'; 6 | import ListItemWithIcon from '../../Items/ListItemWithIcon'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return {} 14 | } 15 | 16 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 17 | 18 | const SkillsRoute: React.FC = (props) => { 19 | const { } = useActions() 20 | const { } = useAppState() 21 | 22 | const classes = useStyles(); 23 | 24 | return 25 | { 26 | GlobalVars.skills.map((item, index) => { 27 | return 28 | }) 29 | } 30 | 31 | 32 | } 33 | 34 | export default SkillsRoute; -------------------------------------------------------------------------------- /src/Components/Right/Routes/WorksRoute.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../../Overmind/OvermindHelper'; 5 | import { GlobalVars } from '../../../Others/GlobalVars'; 6 | import ListItemWithIcon from '../../Items/ListItemWithIcon'; 7 | import { OurIcons } from "../../../Others/OurIcons"; 8 | import { WebImages } from "../../../Others/Images"; 9 | import { TitledListItemInterface } from "../../../Others/Interfaces"; 10 | 11 | interface Props { 12 | 13 | } 14 | 15 | const getThemeObj = (theme: Theme) => { 16 | return {} 17 | } 18 | 19 | interface GithubResp { 20 | name: string; 21 | html_url: string; 22 | description: string; 23 | } 24 | 25 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 26 | 27 | const WorksRoute: React.FC = (props) => { 28 | const { } = useActions() 29 | const { } = useAppState() 30 | const [works, setWorks] = useState>([]) 31 | const classes = useStyles(); 32 | 33 | // const getGithubRepos = async () => { 34 | // console.debug(`getGithubRepos`) 35 | // const data = await fetch(`https://api.github.com/users/${GlobalVars.myGithubUsername}/repos?per_page=999`) 36 | // const jsonFromFetch = await data.json() 37 | // const json: Array = jsonFromFetch 38 | 39 | // var newWorks: Array = [ 40 | // ...getWorks() 41 | // ] 42 | // var newWOrkObj: TitledListItemInterface = { 43 | // text: "Others", 44 | // arr: [] 45 | // } 46 | 47 | // for (var i = 0; i < json.length; i++) { 48 | // const obj = json[i] 49 | // newWOrkObj?.arr?.push({ 50 | // title: obj.name, 51 | // logo: WebImages.giftIcon, 52 | // desc: obj.description, 53 | // link: obj.html_url 54 | // }) 55 | // } 56 | // newWorks.push(newWOrkObj) 57 | // setWorks(newWorks) 58 | // } 59 | 60 | const addFeaturedItems = () => { 61 | const featuredItems: TitledListItemInterface = { 62 | text: "Featured", 63 | arr: [], 64 | } 65 | for (var i = 0; i < getWorks().length; i++) { 66 | for (var j = 0; j < getWorks()[i].arr.length; j++) { 67 | if (getWorks()[i].arr[j]?.featured) { 68 | featuredItems.arr.push(getWorks()[i].arr[j]) 69 | } 70 | } 71 | } 72 | var newWorks: Array = [ 73 | featuredItems, 74 | ...getWorks(), 75 | ] 76 | setWorks(newWorks) 77 | } 78 | 79 | useEffect(() => { 80 | addFeaturedItems() 81 | }, []) 82 | 83 | const getWorks = () => { 84 | if (works.length > 0) { 85 | return works 86 | } else { 87 | return GlobalVars.works 88 | } 89 | } 90 | 91 | return 92 | { 93 | getWorks().map((item, index) => { 94 | return 95 | }) 96 | } 97 | 98 | 99 | } 100 | 101 | export default WorksRoute; -------------------------------------------------------------------------------- /src/Components/Right/Top/RouteLocation.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, Hidden, IconButton, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../../Overmind/OvermindHelper'; 5 | import SvgHelper from '../../../Helpers/SvgHelper'; 6 | import { OurIcons } from '../../../Others/OurIcons'; 7 | import { useLocation } from "react-router-dom"; 8 | 9 | interface Props { 10 | 11 | } 12 | 13 | const getThemeObj = (theme: Theme) => { 14 | return { 15 | root: { 16 | padding: 16 17 | }, 18 | divider: { 19 | height: 1, 20 | marginTop: 8, 21 | [theme.breakpoints.down('sm')]: { 22 | width: 160 23 | }, 24 | [theme.breakpoints.up('md')]: { 25 | width: 200 26 | }, 27 | }, 28 | currentRoute: { 29 | fontSize: 14, 30 | fontWeight: 600, 31 | cursor: 'none', 32 | } 33 | } 34 | } 35 | 36 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 37 | 38 | const RouteLocation: React.FC = (props) => { 39 | const { showLeftPart, setMenuClicked } = useActions() 40 | let location = useLocation(); 41 | const { primaryColor, isMenuClicked } = useAppState() 42 | 43 | const classes = useStyles(); 44 | 45 | return 46 | 47 | {/* @ts-ignore */} 48 | 49 | { 50 | showLeftPart(true) 51 | setMenuClicked(true) 52 | }}> 53 |
54 | 55 |
56 | 57 | 58 | 61 | 62 | 63 | 64 | 67 | 68 | 69 | 70 | } 71 | 72 | export default RouteLocation; -------------------------------------------------------------------------------- /src/Components/Right/Top/TopRightButtons.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Button, Divider, Grid, IconButton, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../../../Overmind/OvermindHelper'; 5 | import SvgHelper from '../../../Helpers/SvgHelper'; 6 | import { OurIcons } from '../../../Others/OurIcons'; 7 | 8 | interface Props { 9 | 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return { 14 | iconButton: { 15 | padding: 8 16 | } 17 | } 18 | } 19 | 20 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 21 | 22 | const TopRightButtons: React.FC = (props) => { 23 | const { setPrimaryColor, showColorPickerDialog } = useActions() 24 | const { } = useAppState() 25 | 26 | const classes = useStyles(); 27 | 28 | return 29 | {/* 30 | PLEASE, DON'T CHANGE THIS GITHUB URL. 31 | ( https://github.com/p32929/p32929.github.io/ ) 32 | */} 33 | 34 | 38 | 39 | 40 | {/* 41 | YOU MAY USE THE SOURCE CODE HOWEVER YOU WANT, BUT PLEASE, 42 | KEEP THE GITHUB-ICON & the GITHUB-URL under the icon UNCHANGED, 43 | SO THAT OTHERS CAN ALSO BENIFIT FROM THE ORIGINAL REPOSITORY. 44 | THANKS... :) 45 | */} 46 | 47 | { 48 | showColorPickerDialog(true) 49 | }}> 50 | 54 | 55 | 56 | 57 | } 58 | 59 | export default TopRightButtons; -------------------------------------------------------------------------------- /src/Components/RightPart.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Theme, Grid, useMediaQuery, useTheme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../Overmind/OvermindHelper'; 5 | import RouteLocation from './Right/Top/RouteLocation'; 6 | import TopRightButtons from './Right/Top/TopRightButtons'; 7 | import WorksRoute from './Right/Routes/WorksRoute'; 8 | import ContactRoute from './Right/Routes/ContactRoute'; 9 | import SkillsRoute from './Right/Routes/SkillsRoute'; 10 | import AboutRoute from './Right/Routes/AboutRoute'; 11 | import { GlobalVars } from '../Others/GlobalVars'; 12 | import { 13 | BrowserRouter as Router, 14 | Switch, 15 | Route, 16 | Link, 17 | useLocation 18 | } from "react-router-dom"; 19 | import { Constants } from '../Others/Constants'; 20 | 21 | interface Props { 22 | 23 | } 24 | 25 | const getThemeObj = (theme: Theme) => { 26 | return { 27 | root: { 28 | padding: 16, 29 | }, 30 | content: { 31 | paddingRight: 8, 32 | maxHeight: '100vh', 33 | maxWidth: '100%', 34 | } 35 | } 36 | } 37 | 38 | const routes = [ 39 | AboutRoute, 40 | SkillsRoute, 41 | WorksRoute, 42 | ContactRoute, 43 | ] 44 | 45 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 46 | 47 | const RightPart: React.FC = (props) => { 48 | const { } = useActions() 49 | const { isLeftShowing } = useAppState() 50 | const classes = useStyles(); 51 | const [contentHeight, setContentHeight] = useState(0) 52 | 53 | const theme = useTheme() 54 | const belowSm = useMediaQuery(theme.breakpoints.down('sm')) 55 | let location = useLocation(); 56 | 57 | useEffect(() => { 58 | const rc = document.getElementById('container') 59 | const rt = document.getElementById('right-top') 60 | const rb = document.getElementById('right-bottom') 61 | 62 | if (rc && rt) { 63 | const height = rc?.offsetHeight - rt?.offsetHeight 64 | console.log("Height: " + height); 65 | 66 | setContentHeight(height) 67 | } 68 | }, [isLeftShowing, belowSm]) 69 | 70 | useEffect(() => { 71 | document?.getElementById('right-bottom')?.scroll(0, 0) 72 | }, [location]) 73 | 74 | return 75 | 76 | 77 | 78 | 79 | 80 | 81 | { 82 | Constants.routes.map((item, index) => { 83 | return 84 | }) 85 | } 86 | 87 | 88 | 89 | } 90 | 91 | export default RightPart; -------------------------------------------------------------------------------- /src/Helpers/SvgHelper.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { makeStyles } from '@material-ui/core/styles'; 3 | import { Grid, Theme } from "@material-ui/core"; 4 | import { useActions, useAppState } from '../Overmind/OvermindHelper'; 5 | 6 | interface Props { 7 | size: number, 8 | path: string, 9 | styles?: any, 10 | } 11 | 12 | const getThemeObj = (theme: Theme) => { 13 | return {} 14 | } 15 | 16 | const useStyles = makeStyles((theme: Theme) => (getThemeObj(theme))) 17 | 18 | const SvgHelper: React.FC = (props) => { 19 | const { } = useActions() 20 | const { primaryColor } = useAppState() 21 | 22 | const classes = useStyles(); 23 | const { path, size, styles } = props 24 | 25 | return 26 | 28 | 29 | } 30 | 31 | export default SvgHelper; -------------------------------------------------------------------------------- /src/Others/Constants.ts: -------------------------------------------------------------------------------- 1 | export class Constants { 2 | static routes: Array = [ 3 | "About", 4 | "Skills", 5 | "Works", 6 | "Contact", 7 | ] 8 | } -------------------------------------------------------------------------------- /src/Others/GlobalMethods.ts: -------------------------------------------------------------------------------- 1 | export class GlobalMethods { 2 | static getHeightWidthWeb = () => { 3 | console.debug("Web"); 4 | 5 | return { 6 | width: `calc(100% - 316px)`, 7 | height: `calc(100% - 168px)` 8 | } 9 | } 10 | 11 | static getHeightWidthMobile = () => { 12 | console.debug("Mobile"); 13 | 14 | return { 15 | width: `calc(100% - 48px)`, 16 | height: `calc(100% - 48px)` 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/Others/GlobalVars.ts: -------------------------------------------------------------------------------- 1 | import { OurIcons } from "./OurIcons" 2 | import { NavBottomLinksInterface, TitledListItemInterface } from "./Interfaces" 3 | import { WebImages } from "./Images" 4 | 5 | export class GlobalVars { 6 | 7 | // 8 | static primaryColor = "#00C853" 9 | static otherColors: Array = [ 10 | '#D50000', '#C51162', '#AA00FF', '#6200EA', '#304FFE', 11 | '#2962FF', '#0091EA', '#00B8D4', '#00BFA5', '#00C853', 12 | '#64DD17', '#AEEA00', '#FFD600', '#FFAB00', '#FF6D00', 13 | '#DD2C00' 14 | ] 15 | 16 | // 17 | static myName = 'Fayaz Bin Salam' 18 | static myOccupation = 'Software Engineer' 19 | static myDetails = 'Hark! I am Fayaz Bin Salam, an artful craftsman of software, weaving together intricate webs of code for mobile, web, and desktop. To me, the machines of silicon and plastic are naught but hollow shells, until they hear and heed the whispers of my command. Since 2009, I have honed my skills in the arcane art of programming, penning my first lines of code in Batch and VBScript. Through the years, I have delved deeper into the mysteries of C, C++, Java, Python, and the like, working my magic with libraries and frameworks such as ReactJS and Angular2+. The beauty of my work lies not just in its function, but in its constant evolution and growth. Indeed, I strive to kindle the spark of progress in all that surrounds me, illuminating the way towards a brighter future.' 20 | static myLeftAvatarImage = null 21 | static myRightAvatarImage = null 22 | static helperTexts = "We have a form available for you to write down any queries you may have, which will be sent directly to me. Would you like to view the form now?" 23 | static helperFormLink = "" 24 | 25 | static bottomLinks: Array = [ 26 | { 27 | svgPath: OurIcons.whatsappIcon, 28 | link: 'https://api.whatsapp.com/send?phone=8801796306262' 29 | }, 30 | { 31 | svgPath: OurIcons.emailIcon, 32 | link: 'mailto:p32929.ceo@gmail.com' 33 | }, 34 | { 35 | svgPath: OurIcons.downloadIcon, 36 | link: 'https://docs.google.com/document/d/1vRgTCQ-UvzjGXK7s-TR5VpmjHZ7OmSmOs5G69znPhqA/edit?usp=sharing' 37 | } 38 | ] 39 | 40 | static skills: Array = [ 41 | { 42 | text: "Programming / Markup Languages", 43 | arr: [ 44 | { 45 | title: 'C', 46 | logo: 'https://seeklogo.com/images/C/c-logo-672525892C-seeklogo.com.png', 47 | }, 48 | { 49 | title: 'C++', 50 | logo: 'https://seeklogo.com/images/C/c-logo-1B1817C041-seeklogo.com.png', 51 | }, 52 | { 53 | title: 'Java', 54 | logo: 'https://www.vectorlogo.zone/logos/java/java-icon.svg', 55 | }, 56 | { 57 | title: 'Python', 58 | logo: 'https://www.vectorlogo.zone/logos/python/python-icon.svg', 59 | }, 60 | { 61 | title: 'JavaScript', 62 | logo: 'https://www.vectorlogo.zone/logos/javascript/javascript-icon.svg', 63 | }, 64 | { 65 | title: 'Rust', 66 | logo: 'https://www.rust-lang.org/static/images/rust-logo-blk.svg', 67 | }, 68 | { 69 | title: 'HTML', 70 | logo: 'https://www.vectorlogo.zone/logos/w3_html5/w3_html5-icon.svg', 71 | }, 72 | { 73 | title: 'CSS', 74 | logo: 'https://seeklogo.com/images/C/css3-logo-F1923C8D0E-seeklogo.com.png', 75 | }, 76 | { 77 | title: 'TypeScript', 78 | logo: 'https://www.vectorlogo.zone/logos/typescriptlang/typescriptlang-icon.svg', 79 | }, 80 | { 81 | title: 'Kotlin', 82 | logo: 'https://www.vectorlogo.zone/logos/kotlinlang/kotlinlang-icon.svg', 83 | }, 84 | { 85 | title: 'Dart', 86 | logo: 'https://www.vectorlogo.zone/logos/dartlang/dartlang-icon.svg', 87 | }, 88 | { 89 | title: 'Go', 90 | logo: 'https://go.dev/blog/go-brand/Go-Logo/SVG/Go-Logo_Blue.svg', 91 | }, 92 | ] 93 | }, 94 | { 95 | text: "Databases", 96 | arr: [ 97 | { 98 | title: 'MongoDB', 99 | logo: 'https://cdn.iconscout.com/icon/free/png-128/mongodb-3521676-2945120.png' 100 | }, 101 | { 102 | title: 'SQL', 103 | logo: 'https://w7.pngwing.com/pngs/28/601/png-transparent-sql-logo-illustration-microsoft-azure-sql-database-microsoft-sql-server-database-blue-text-logo-thumbnail.png', 104 | }, 105 | { 106 | title: "DynamoDB", 107 | logo: 'https://cdn.worldvectorlogo.com/logos/aws-dynamodb.svg' 108 | }, 109 | { 110 | title: "PostgreSQL", 111 | logo: 'https://wiki.postgresql.org/images/thumb/a/a4/PostgreSQL_logo.3colors.svg/540px-PostgreSQL_logo.3colors.svg.png' 112 | }, 113 | ] 114 | }, 115 | { 116 | text: "UI Component Libraries", 117 | arr: [ 118 | { 119 | title: 'Ant Design', 120 | logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' 121 | }, 122 | { 123 | title: 'Material-UI', 124 | logo: 'https://mui.com/static/logo.png' 125 | }, 126 | { 127 | title: 'Shadcn', 128 | logo: 'https://ui.shadcn.com/favicon.ico' 129 | }, 130 | { 131 | title: 'Tailwind CSS', 132 | logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/512px-Tailwind_CSS_Logo.svg.png?20230715030042' 133 | }, 134 | { 135 | title: 'Bootstrap', 136 | logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/512px-Bootstrap_logo.svg.png' 137 | }, 138 | ] 139 | }, 140 | { 141 | text: "Libraries / Frameworks / Techs", 142 | arr: [ 143 | { 144 | title: 'Android App Development', 145 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg' 146 | }, 147 | { 148 | title: 'NodeJS', 149 | logo: 'https://www.vectorlogo.zone/logos/nodejs/nodejs-icon.svg' 150 | }, 151 | { 152 | title: 'ExpressJS', 153 | logo: 'https://www.vectorlogo.zone/logos/expressjs/expressjs-icon.svg' 154 | }, 155 | { 156 | title: 'ReactJS', 157 | logo: 'https://www.vectorlogo.zone/logos/reactjs/reactjs-icon.svg' 158 | }, 159 | { 160 | title: 'Redux', 161 | logo: 'https://w7.pngwing.com/pngs/669/447/png-transparent-redux-react-javascript-freecodecamp-npm-others-miscellaneous-purple-violet-thumbnail.png' 162 | }, 163 | { 164 | title: 'React Native', 165 | logo: 'https://d33wubrfki0l68.cloudfront.net/554c3b0e09cf167f0281fda839a5433f2040b349/ecfc9/img/header_logo.svg' 166 | }, 167 | { 168 | title: 'ElectronJS', 169 | logo: 'https://www.vectorlogo.zone/logos/electronjs/electronjs-icon.svg' 170 | }, 171 | { 172 | title: 'Angular2+', 173 | logo: 'https://angular.io/assets/images/logos/angular/angular.svg' 174 | }, 175 | { 176 | title: 'Mongoose', 177 | logo: 'https://avatars.githubusercontent.com/u/7552965?s=200&v=4' 178 | }, 179 | { 180 | title: 'NextJS', 181 | logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/207px-Nextjs-logo.svg.png' 182 | }, 183 | { 184 | title: 'OpenCV', 185 | logo: 'https://www.vectorlogo.zone/logos/opencv/opencv-icon.svg' 186 | }, 187 | { 188 | title: 'Firebase', 189 | logo: 'https://www.vectorlogo.zone/logos/firebase/firebase-icon.svg' 190 | }, 191 | { 192 | title: 'Flutter', 193 | logo: 'https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg' 194 | }, 195 | { 196 | title: 'Beautiful soup', 197 | logo: 'https://github.com/3r4y/react-portfolio-template/assets/6418354/c9199eab-529b-4314-a990-c46deba899e9' 198 | }, 199 | { 200 | title: 'Numpy', 201 | logo: 'https://numpy.org/images/logo.svg' 202 | }, 203 | { 204 | title: 'Tauri', 205 | logo: 'https://raw.githubusercontent.com/tauri-apps/tauri/HEAD/app-icon.png' 206 | }, 207 | { 208 | title: 'VueJS', 209 | logo: 'https://vuejs.org/images/logo.png' 210 | }, 211 | { 212 | title: 'Pandas', 213 | logo: 'https://pandas.pydata.org/static/img/pandas.svg' 214 | }, 215 | { 216 | title: 'Matplotlib', 217 | logo: 'https://matplotlib.org/3.1.0/_images/sphx_glr_logos2_001.png' 218 | }, 219 | { 220 | title: 'Socket.io', 221 | logo: 'https://socket.io/images/logo.svg' 222 | }, 223 | { 224 | title: 'Flask', 225 | logo: 'https://static.javatpoint.com/tutorial/flask/images/flask-tutorial.png' 226 | }, 227 | { 228 | title: 'Docker', 229 | logo: 'https://cdn.iconscout.com/icon/free/png-128/docker-226091.png' 230 | }, 231 | { 232 | title: 'Git', 233 | logo: 'https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg' 234 | }, 235 | { 236 | title: 'Expo', 237 | logo: 'https://www.vectorlogo.zone/logos/expoio/expoio-icon.svg' 238 | }, 239 | { 240 | title: 'NgInx', 241 | logo: 'https://www.vectorlogo.zone/logos/nginx/nginx-icon.svg' 242 | }, 243 | { 244 | title: 'NestJS', 245 | logo: 'https://d33wubrfki0l68.cloudfront.net/e937e774cbbe23635999615ad5d7732decad182a/26072/logo-small.ede75a6b.svg' 246 | }, 247 | 248 | ] 249 | }, 250 | { 251 | text: "Others", 252 | arr: [ 253 | { 254 | title: 'Vim', 255 | logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Vimlogo.svg/544px-Vimlogo.svg.png?20150726190850' 256 | }, 257 | { 258 | title: 'Android Studio', 259 | logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Android_Studio_Icon_3.6.svg/512px-Android_Studio_Icon_3.6.svg.png?20210301045217' 260 | }, 261 | { 262 | title: 'VS Code', 263 | logo: 'https://cdn.icon-icons.com/icons2/2107/PNG/512/file_type_vscode_icon_130084.png' 264 | }, 265 | { 266 | title: 'Jira', 267 | logo: 'https://cdn.iconscout.com/icon/free/png-128/jira-3628861-3030001.png' 268 | }, 269 | { 270 | title: 'AWS', 271 | logo: 'https://cdn.iconscout.com/icon/free/png-128/aws-1869025-1583149.png' 272 | }, 273 | { 274 | title: 'DigitalOcean', 275 | logo: 'https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1478792253/gnlwek2zwhq369yryrzv.jpg' 276 | }, 277 | { 278 | title: 'Figma', 279 | logo: 'https://www.vectorlogo.zone/logos/figma/figma-icon.svg' 280 | }, 281 | { 282 | title: 'Heroku', 283 | logo: 'https://www.vectorlogo.zone/logos/heroku/heroku-icon.svg' 284 | }, 285 | { 286 | title: 'Yarn', 287 | logo: 'https://www.vectorlogo.zone/logos/yarnpkg/yarnpkg-icon.svg' 288 | }, 289 | { 290 | title: 'npm', 291 | logo: 'https://www.vectorlogo.zone/logos/npmjs/npmjs-icon.svg' 292 | }, 293 | { 294 | title: 'Tampermonkey', 295 | logo: 'https://lh3.googleusercontent.com/zoY8FwoOqPlBgFxcmFdNSK2Q4CcLmv-gw7vTjF2KMR9cEabwBsGNrHBTEMitn0Ba6OmCVJ0NcLnFGu3N97BP8Phu0g=w128-h128-e365-rj-sc0x00ffffff' 296 | }, 297 | { 298 | title: 'Greasemonkey', 299 | logo: 'https://addons.mozilla.org/user-media/addon_icons/0/748-64.png?modified=1531822767' 300 | }, 301 | { 302 | title: 'Linux', 303 | logo: 'https://www.freepnglogos.com/uploads/linux-png/file-icons-flat-linux-svg-wikimedia-commons-6.png' 304 | }, 305 | { 306 | title: 'Adobe Photoshop', 307 | logo: 'https://www.adobe.com/content/dam/cc/icons/photoshop-mobile.svg' 308 | }, 309 | ] 310 | }, 311 | ] 312 | 313 | static works: Array = [ 314 | { 315 | text: "Web Apps", 316 | arr: [ 317 | { 318 | title: "Duas", 319 | link: "https://p32929.github.io/duas/", 320 | logo: "https://p32929.github.io/duas/favicon.png", 321 | desc: "A collection of duas I try to regularly recite - created using flutter web", 322 | featured: true, 323 | }, 324 | { 325 | title: "dobd.xyz", 326 | link: "https://www.dobd.xyz/", 327 | logo: "https://www.dobd.xyz/android-chrome-512x512.png", 328 | desc: "Best online downloader for YouTube, Facebook, Instagram, Tiktok and more", 329 | featured: true, 330 | }, 331 | { 332 | title: 'StartPage', 333 | logo: 'https://cdn.iconscout.com/icon/premium/png-128-thumb/homepage-2580329-2151669.png', 334 | desc: 'A minimalistic custom browser startpage that can be configured to your needs. ', 335 | link: 'https://p32929.github.io/startpage/' 336 | }, 337 | { 338 | title: "s3cr3tm3", 339 | link: "https://s3cr3tm3.netlify.app/", 340 | logo: "https://user-images.githubusercontent.com/6418354/173877444-59dbdd3d-1b5d-4b92-ad53-30fada9362d2.png", 341 | desc: "Share secret messages secretely", 342 | featured: true, 343 | }, 344 | { 345 | title: 'OrderZesty', 346 | logo: 'https://orderzesty.com/wp-content/uploads/2021/10/Zesty-icon@3x-300x300.png', 347 | desc: 'Personal chef service delivering fresh signature meals.', 348 | link: 'https://orderzesty.com/', 349 | featured: true, 350 | }, 351 | { 352 | title: 'DramaDB', 353 | logo: 'https://dramadb.vercel.app/apple-icon.png', 354 | desc: 'A serverless hobby project that lets you filter Asian drama by country, genre, status, year and popularity', 355 | link: 'https://dramadb.vercel.app/' 356 | }, 357 | { 358 | title: 'Sh0Sh0', 359 | logo: 'https://github.com/3r4y/react-portfolio-template/assets/6418354/a159e1d8-fabc-4f58-9391-0c3be4d14d7e', 360 | desc: 'A beautifully created Absolutely FREE URL shortener for everyone made using React Shadcn Firebase. ', 361 | link: 'https://sh0sh0.netlify.app/', 362 | }, 363 | { 364 | title: "TheRealWorldFree", 365 | logo: "https://www.therlworld.com/images/Group-427319400-1.webp", 366 | desc: "Enjoy the real world for free :)", 367 | link: "https://trwfree.vercel.app/" 368 | }, 369 | { 370 | title: "BreakingMars", 371 | logo: "https://images.crunchbase.com/image/upload/c_pad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/lg6nxfb2dttgtng5kobb", 372 | desc: '#1 Leading & Effortless Prospect Perceiving Platform', 373 | link: "https://web.archive.org/web/20220413085335/https://www.breakingmars.com/" 374 | }, 375 | { 376 | title: "Voomnow", 377 | desc: "Next generation audio recorder", 378 | logo: "https://user-images.githubusercontent.com/6418354/173876916-e27cb77f-49f1-4190-be54-4c1ddaa2973d.svg", 379 | link: "https://web.archive.org/web/20220326215025/https://www.voomnow.com/" 380 | }, 381 | { 382 | title: 'Shajao', 383 | logo: 'https://sdn.signalhire.co/storage/company/1dfc/9704/f9d3/ff49/cdce/31bb/c4d7/0628.webp', 384 | desc: 'Framing Happiness', 385 | link: "https://web.archive.org/web/20191222090655/https://shajao.com/" 386 | }, 387 | { 388 | title: 'ChargeOnSite', 389 | logo: 'https://static.wixstatic.com/media/182a81_c4e4ee2bac6d4389a866239475519bdf~mv2.png/v1/fill/w_192%2Ch_192%2Clg_1%2Cusm_0.66_1.00_0.01/182a81_c4e4ee2bac6d4389a866239475519bdf~mv2.png', 390 | desc: 'Charge OnSite', 391 | link: "https://www.chargeonsite.com/", 392 | }, 393 | { 394 | title: 'MathFinity', 395 | logo: 'https://p32929.github.io/mathfinity/icons/Icon-192.png', 396 | desc: 'Simple, infinite & fun math game for everyone', 397 | link: "https://p32929.github.io/mathfinity/", 398 | featured: true, 399 | }, 400 | 401 | ] 402 | }, 403 | { 404 | text: "iOS Apps", 405 | arr: [ 406 | { 407 | title: "Adblock for YT", 408 | link: "https://apps.apple.com/au/app/adblock-for-youtube/id1592568016", 409 | logo: "https://is2-ssl.mzstatic.com/image/thumb/Purple126/v4/65/7e/a8/657ea8d9-c3aa-6951-38c8-948c05cd96c3/AppIcon-0-0-85-220-0-0-0-0-4-0-0-0-2x-sRGB-0-0-0-0-0.png/246x0w.webp", 410 | desc: "Removes ads from YT videos, embedded videos on third party websites and streams.", 411 | featured: true 412 | }, 413 | { 414 | title: "Al Quran by Quran Touch", 415 | link: "https://apps.apple.com/gb/app/al-quran-by-quran-touch/id585240351", 416 | logo: "https://is3-ssl.mzstatic.com/image/thumb/Purple112/v4/9d/7e/ed/9d7eedd6-e567-5251-bed6-dce7e868bb57/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/246x0w.webp", 417 | desc: "The most comprehensive Muslim App!", 418 | featured: true 419 | }, 420 | ] 421 | }, 422 | { 423 | text: "Android Apps", 424 | arr: [ 425 | { 426 | title: "Al Quran by Quran Touch", 427 | link: "https://www.apkmonk.com/app/com.qurantouch.qurantouchhd.app/", 428 | logo: "https://is3-ssl.mzstatic.com/image/thumb/Purple112/v4/9d/7e/ed/9d7eedd6-e567-5251-bed6-dce7e868bb57/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/246x0w.webp", 429 | desc: "The most comprehensive Muslim App!" 430 | }, 431 | { 432 | title: 'Thamao', 433 | logo: 'https://cdn.apkmonk.com/logos/com.thamao_150x150.png', 434 | desc: 'বাংলাদেশে স্মার্টফোনের চুরি এবার অসম্ভব', 435 | link: 'https://www.apkmonk.com/app/com.thamao/', 436 | featured: true, 437 | }, 438 | { 439 | title: 'Desplash', 440 | logo: 'https://lh3.googleusercontent.com/ILrto9KguXlr-clbhYKUonpnHszgNp_N5Qvc8_u9QaM71oaqNKcYql2sV3sqZ7nqzsc=s180', 441 | desc: 'Automatic Free High Quality Wallpapers powered by Unsplash.com', 442 | link: 'https://www.xda-developers.com/desplash-wallpaper-app-unsplash/', 443 | featured: true, 444 | }, 445 | { 446 | title: 'The Great Postman', 447 | logo: 'https://lh3.googleusercontent.com/ni-lk3b2nTMZyC7r1wYBW6cm9eYqGAN-t6fXV-kD0lSyw1lO3kenC1We71fZjSryvFII=s180', 448 | desc: 'Powerful, Lightweight REST API client for Android', 449 | link: 'https://apkcombo.com/es/rest-api-client-the-great-postman/p32929.greatpostman/' 450 | }, 451 | { 452 | title: 'Sleepy - Addiction Remover', 453 | logo: 'https://user-images.githubusercontent.com/6418354/192146268-29e1bac2-e477-4010-ae03-96adecbf07e6.png', 454 | desc: 'The one and only EFFECTIVE addiction remover on Google Play store', 455 | link: 'https://apkcombo.com/es/sleepy-phone-addiction-controller/p32929.lazyphone/' 456 | }, 457 | { 458 | title: 'Best CGPA Calculator', 459 | logo: 'https://user-images.githubusercontent.com/6418354/192146303-6e04c9ac-ffb2-4931-bb10-ef54ff7af382.png', 460 | desc: 'A simple yet effective CGPA Calculator for University students', 461 | link: 'https://apkcombo.com/es/cgpa-calculator-for-update-see-the-description/p32929.cgpa_calculator/', 462 | featured: true, 463 | }, 464 | { 465 | title: 'Buy Sell BD', 466 | logo: 'https://image.winudf.com/v2/image1/cDMyOTI5LmJ1eXNlbGxiZF9pY29uXzE1NTkyOTQ5NjVfMDYz/icon.png?w=170&fakeurl=1', 467 | desc: 'A better & more reliable alternative for Bikroy.com - A marketplace app for buying-selling new/used goods', 468 | link: 'https://apkcombo.com/es/buy-sell-bd-buy-sell-everything-easily-in-bd/p32929.buysellbd/' 469 | }, 470 | { 471 | title: 'ExIn', 472 | logo: 'https://lh3.googleusercontent.com/X8mRJd7JajvDXoW7NaluKt2IvC3osH6czkTPoWeSYJ96U2LWLKT4xiFgvNouwf-UvEk=s180', 473 | desc: 'A Simple & user friendly income-expense tracker ', 474 | link: "https://apkcombo.com/es/exin-discontinued/p32929.exin/", 475 | }, 476 | { 477 | title: 'I am free', 478 | logo: 'https://image.winudf.com/v2/image1/cDMyOTI5LmltZnJlZV9pY29uXzE1NzY4ODAwNzVfMDU3/icon.png?w=170&fakeurl=1', 479 | desc: 'বেকার মুক্ত বাংলাদেশ গড়ার লক্ষ্যে - I am FREE', 480 | link: 'https://apkcombo.com/es/i-am-free/p32929.imfree/' 481 | }, 482 | { 483 | title: 'Awesome NCTB', 484 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5uY3RiX2ljb25fMTU3NjU3MjcwNF8wMjI/icon.png?fakeurl=1', 485 | desc: 'Download NCTB Books easily and Free', 486 | link: 'https://apkcombo.com/es/awesome-nctb/org.richit.nctb/' 487 | }, 488 | { 489 | title: 'বৃক্ষ ( Brikkho )', 490 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5icmlra2hvX2ljb25fMTU3MDEyMTU0Ml8wODA/icon.png?fakeurl=1', 491 | desc: 'Learn about trees in your fingertips', 492 | link: 'https://apkcombo.com/es/%E0%A6%AC%E0%A7%83%E0%A6%95%E0%A7%8D%E0%A6%B7-brikkho/org.richit.brikkho/' 493 | }, 494 | { 495 | title: 'IQQuiz', 496 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5pcXF1aXphcHBfaWNvbl8xNTcxMDE0NzcxXzA2Mg/icon.png?fakeurl=1', 497 | desc: 'A simple IQ game', 498 | link: 'https://apkcombo.com/es/iqquiz/org.richit.iqquizapp/' 499 | }, 500 | { 501 | title: 'BirdsLover', 502 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5iaXJkc2xvdmVyX2ljb25fMTU3MjAwNDIxNl8wOTE/icon.png?fakeurl=1', 503 | desc: 'Learn about birds in your fingertips', 504 | link: 'https://apkcombo.com/es/birdslover/org.richit.birdslover/' 505 | }, 506 | { 507 | title: 'Animal Lover', 508 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5hbmltYWxfaWNvbl8xNTc3MjkyMzIzXzAyMw/icon.png?fakeurl=1', 509 | desc: 'Learn about birds in your fingertips', 510 | link: 'https://apkcombo.com/es/animal-lover/org.richit.animal/' 511 | }, 512 | { 513 | title: 'Jibanananda Recitation (Abritti)', 514 | logo: 'https://image.winudf.com/v2/image1/b3JnLnJpY2hpdC5qaWJvbmFuZG9rb2JpdGFzb21vZ3JvX2ljb25fMTU3MDEwNDExNF8wNDc/icon.png?fakeurl=1', 515 | desc: '50+ poems of Jibanananda Das with audio recitation', 516 | link: 'https://apkcombo.com/es/jibanananda-recitation-abritti/org.richit.jibonandokobitasomogro/' 517 | }, 518 | { 519 | title: 'MathLover (Simple, Infinite, Math game)', 520 | logo: 'https://lh3.googleusercontent.com/GaisH_-MeK2c_ct4kp5qbqxbJPE-q4isTdZswR4CocgB8sLNCFk4beXdlmaaFuveKUwd', 521 | desc: 'MathLover is a simple, infinite mathematical problem solving game for everyone.', 522 | link: 'https://apkcombo.com/es/mathlover-simple-infinite-math-game/org.richit.mathblitz/', 523 | }, 524 | { 525 | title: 'Hospitals BD', 526 | logo: 'https://lh3.googleusercontent.com/MMfY8vG1YfAFh1w6iHEp8NXCwl-NSCUDmfPkUAWmqhSGfO3JR7vBvw_XZzV8JxrDag', 527 | desc: 'Get nearest Hospital Information in Bangladesh in your fingertips', 528 | link: 'https://apkcombo.com/es/hospitals-bd/org.richit.contacthospitals/' 529 | }, 530 | { 531 | title: 'BirthdayBot', 532 | logo: WebImages.giftIcon, 533 | desc: 'Birthday wishing apps, made for individual people...', 534 | link: 'https://github.com/p32929/my_android_apps/releases/tag/all' 535 | }, 536 | ] 537 | }, 538 | { 539 | text: "Desktop Apps", 540 | arr: [ 541 | { 542 | title: 'PotatoTimer', 543 | logo: 'https://raw.githubusercontent.com/p32929/PotatoTimer/master/resources/icon.ico', 544 | desc: 'A pomotodo app that forces you to take a break - created using ElectronJS', 545 | link: 'https://github.com/p32929/Electron-Pomotodo' 546 | }, 547 | { 548 | title: 'Pomota', 549 | logo: 'https://github.com/p32929/pomota/blob/master/src-tauri/icons/128x128.png?raw=true', 550 | desc: 'A simple user-friendly cross-platform tauri based pomodoro timer app that forces you to take a break', 551 | link: 'https://github.com/p32929/pomota', 552 | featured: true, 553 | }, 554 | { 555 | title: 'google-calender-widget', 556 | logo: 'https://duckduckgo.com/i/e2d8001c.png', 557 | desc: 'An unofficial google calendar desktop widget for Windows, Mac and Linux ', 558 | link: 'https://github.com/p32929/google-calender-widget', 559 | featured: true, 560 | }, 561 | ] 562 | }, 563 | { 564 | text: "Command Line Interfaces ( CLIs )", 565 | arr: [ 566 | { 567 | title: 'Shortcut-Virus-Remover', 568 | logo: 'https://cdn-icons-png.flaticon.com/128/3223/3223766.png', 569 | desc: 'Shortcut virus remover script for Windows', 570 | link: 'https://github.com/p32929/Shortcut-Virus-Remover', 571 | featured: true, 572 | }, 573 | { 574 | title: 'Fay', 575 | logo: 'https://crates.io/assets/cargo.png', 576 | desc: 'A simple cross platform CLI app written in Rust to automate multiple shell ( bash or cmd ) commands', 577 | link: 'https://crates.io/crates/fay' 578 | }, 579 | { 580 | title: 'SIIN', 581 | logo: 'https://crates.io/assets/cargo.png', 582 | desc: 'A batch installer that downloads and installs a list of apps, written in Rust ( Kinda like Ninite )', 583 | link: 'https://crates.io/crates/siin' 584 | }, 585 | 586 | ] 587 | }, 588 | { 589 | text: "Automations", 590 | arr: [ 591 | { 592 | title: 'Dingtone Bot', 593 | logo: 'https://github.com/p32929/portfolio-v2/assets/6418354/f24e64e7-ef7a-4d2d-a7d9-55f4797043cf', 594 | desc: 'A bot made using Python and UIAutomator2 to automate watching ads on certain apps to get credits', 595 | link: 'https://drive.google.com/file/d/159D_tco3qkpgh2a3CWz-f0ixPEpeUN8V/view?usp=sharing' 596 | }, 597 | { 598 | title: 'Indeed-Linkedin bot', 599 | logo: 'https://github.com/p32929/portfolio-v2/assets/6418354/f24e64e7-ef7a-4d2d-a7d9-55f4797043cf', 600 | desc: 'An automation bot created using playwright to automate applying jobs on Indeed and Linkedin', 601 | link: 'https://drive.google.com/file/d/10Xc4Y0Z5KXxKhb9StF3bQfivYHHeNZsa/view?usp=sharing', 602 | } 603 | ] 604 | }, 605 | { 606 | text: "Libraries / Packages / Crates", 607 | arr: [ 608 | { 609 | title: 'AndroidEasySQL-Library', 610 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 611 | desc: 'An Easier & Lazier approach to SQL database for Android', 612 | link: 'https://github.com/p32929/AndroidEasySQL-Library' 613 | }, 614 | { 615 | title: 'AndroidAppLockscreen', 616 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 617 | desc: 'An Easier & Lazier approach to getting runtime permission in Android ', 618 | link: 'https://github.com/p32929/AndroidAppLockscreen' 619 | }, 620 | { 621 | title: 'ManufacturerBatteryOptimization', 622 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 623 | desc: 'Simple helper class for Android Battery Optimization ignoring in some devices', 624 | link: 'https://gist.github.com/p32929/41e7af650f6a2c11e9306ab600fb9b03' 625 | }, 626 | { 627 | title: 'MyHouseAdsAndroid', 628 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 629 | desc: 'A library for cross promoting own apps within own apps - for Android', 630 | link: 'https://github.com/p32929/MyHouseAdsAndroid' 631 | }, 632 | { 633 | title: 'HouseAds2', 634 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 635 | desc: 'A library ( V2 ) for cross promoting own apps within own apps - for Android', 636 | link: 'https://github.com/p32929/HouseAds2' 637 | }, 638 | { 639 | title: 'AndroidAppUpdater', 640 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 641 | desc: 'A simple, Lightweight App Updater Library for Android', 642 | link: 'https://github.com/p32929/AndroidAppUpdater' 643 | }, 644 | { 645 | title: 'OfficeAbout', 646 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 647 | desc: 'A simple about screen library for Android for a Team of people', 648 | link: 'https://github.com/p32929/OfficeAbout' 649 | }, 650 | { 651 | title: 'JsonViewerAndroid', 652 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 653 | desc: 'A simple JSON Viewer for Android', 654 | }, 655 | { 656 | title: 'Android-Receivers-Library', 657 | logo: 'https://www.vectorlogo.zone/logos/android/android-icon.svg', 658 | desc: 'A library for simpler BroadcastReceiver implementations', 659 | }, 660 | { 661 | title: 'Fay', 662 | logo: 'https://crates.io/assets/cargo.png', 663 | desc: 'A simple cross platform CLI app written in Rust to automate multiple shell ( bash or cmd ) commands', 664 | link: 'https://crates.io/crates/fay' 665 | }, 666 | { 667 | title: 'fayfetch', 668 | logo: 'https://avatars.githubusercontent.com/u/6078720?s=200&v=4', 669 | desc: 'A simple wrapper for Fetch', 670 | link: 'https://www.npmjs.com/package/fayfetch' 671 | }, 672 | { 673 | title: 'fjsondb', 674 | logo: 'https://avatars.githubusercontent.com/u/6078720?s=200&v=4', 675 | desc: 'A fast and simple JSON database for NodeJS', 676 | link: 'https://www.npmjs.com/package/fjsondb' 677 | }, 678 | { 679 | title: 'str_template', 680 | logo: 'https://avatars.githubusercontent.com/u/6078720?s=200&v=4', 681 | desc: 'A fast and simple string templating library, written in TypeScript ( Supports both Client side and Server side JavaScript / TypeScript )', 682 | link: 'https://www.npmjs.com/package/str-template-ts' 683 | }, 684 | { 685 | title: 'EasiestDB', 686 | logo: WebImages.flutterIcon, 687 | desc: 'The Easiest and the Laziest approach to Flutter SQL Database.', 688 | link: 'https://pub.dev/packages/easiestdb' 689 | }, 690 | { 691 | title: "Simply Wifi", 692 | logo: WebImages.flutterIcon, 693 | desc: "A simplified version of the wifi_iot package", 694 | link: "https://pub.dev/packages/simply_wifi" 695 | }, 696 | { 697 | title: "audio_duration", 698 | logo: WebImages.flutterIcon, 699 | desc: "Just a simple flutter package to get the duration of any audio file ( like: mp3 ) in milliseconds", 700 | link: "https://pub.dev/packages/audio_duration", 701 | } 702 | ] 703 | }, 704 | { 705 | text: "Extensions / Plugins / Addons", 706 | arr: [ 707 | { 708 | title: 'vscode-nvim-leave-insertmode', 709 | logo: 'https://code.visualstudio.com/assets/images/code-stable.png', 710 | desc: 'This basic VSCode extension ensures that neovim is in normal mode switching between text editor panels.', 711 | link: 'https://marketplace.visualstudio.com/items?itemName=p32929.vscode-nvim-leave-insertmode' 712 | }, 713 | { 714 | title: 'one-console-log', 715 | logo: 'https://code.visualstudio.com/assets/images/code-stable.png', 716 | desc: 'A modified version of the turbo-console-log that adds only one line of console instead of multiples.', 717 | link: 'https://marketplace.visualstudio.com/items?itemName=p32929.one-console-log', 718 | featured: true, 719 | } 720 | ] 721 | }, 722 | ] 723 | 724 | static contacts: Array = [ 725 | { 726 | text: "Contact me", 727 | arr: [ 728 | { 729 | title: 'WhatsApp ( Recommended )', 730 | logo: 'https://user-images.githubusercontent.com/6418354/155842184-b064bf36-de8e-4317-8f8e-cb7755eed995.png', 731 | link: 'https://api.whatsapp.com/send?phone=8801796306262', 732 | desc: "+8801796306262" 733 | }, 734 | { 735 | title: 'Email', 736 | logo: 'https://cdn3d.iconscout.com/3d/premium/thumb/email-address-4437044-3684811.png', 737 | desc: 'p32929.ceo@gmail.com', 738 | link: 'mailto:p32929.ceo@gmail.com' 739 | }, 740 | ] 741 | }, 742 | { 743 | text: "Others", 744 | arr: [ 745 | { 746 | title: 'Anywhere on the internet', 747 | logo: 'https://user-images.githubusercontent.com/6418354/155840900-91ac076a-8d2b-45dc-b346-66f72d376d4b.png', 748 | desc: "@p32929" 749 | }, 750 | { 751 | title: 'GitHub', 752 | logo: 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png', 753 | link: 'https://github.com/p32929/' 754 | }, 755 | { 756 | title: 'LinkedIn', 757 | logo: 'https://user-images.githubusercontent.com/6418354/155841027-8698cb12-7ddd-4604-a4ea-c618ddbc1cd8.png', 758 | link: 'https://www.linkedin.com/in/p32929/' 759 | }, 760 | { 761 | title: 'Facebook', 762 | logo: 'https://user-images.githubusercontent.com/6418354/155840898-9e2327aa-a280-45e3-8266-8268242abda4.png', 763 | link: 'https://www.facebook.com/p32929' 764 | }, 765 | { 766 | title: 'Twitter', 767 | logo: 'https://user-images.githubusercontent.com/6418354/155841031-532d5d6e-797a-4da1-8064-48d266b69ab2.png', 768 | link: 'https://twitter.com/p32929' 769 | }, 770 | { 771 | title: 'Instagram', 772 | logo: 'https://user-images.githubusercontent.com/6418354/155841023-0b842621-56a3-42ec-81f1-3944034b09c7.png', 773 | link: 'https://www.instagram.com/p32929/' 774 | }, 775 | { 776 | title: 'Fiverr', 777 | logo: 'https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/09/fiverr-2018.png?auto=format&q=60&fit=max&w=200', 778 | link: 'https://www.fiverr.com/users/fayazbinsalam/' 779 | }, 780 | { 781 | title: "Upwork", 782 | logo: "https://cdn.worldvectorlogo.com/logos/upwork.svg", 783 | link: "https://www.upwork.com/freelancers/~017dbf657b99b0c1c1" 784 | }, 785 | { 786 | title: "Medium", 787 | logo: "https://seeklogo.com/images/M/medium-logo-93CDCF6451-seeklogo.com.png", 788 | link: "https://medium.com/@p32929_77176" 789 | }, 790 | { 791 | title: "xda", 792 | logo: "https://www.svgrepo.com/show/331651/xda-developers.svg", 793 | link: "https://forum.xda-developers.com/m/p32929.5346826/" 794 | }, 795 | { 796 | title: "Product Hunt", 797 | logo: "https://seeklogo.com/images/P/product-hunt-logo-A144953C4C-seeklogo.com.png?v=637846885100000000", 798 | link: "https://www.producthunt.com/@p32929" 799 | }, 800 | { 801 | title: "UVA Online Judge", 802 | logo: "https://uhunt.onlinejudge.org/images/uva.png", 803 | link: "https://uhunt.onlinejudge.org/id/590978" 804 | }, 805 | { 806 | title: "URI Online Judge", 807 | logo: "https://user-images.githubusercontent.com/26368939/110052090-be0a0b00-7d35-11eb-8827-993190a9568e.png", 808 | link: "https://www.beecrowd.com.br/judge/en/profile/76542" 809 | }, 810 | { 811 | title: "Buy Me a Coffee", 812 | logo: "https://www.buymeacoffee.com/assets/img/guidelines/logo-mark-1.svg", 813 | link: "https://www.buymeacoffee.com/p32929" 814 | }, 815 | { 816 | title: 'Skype', 817 | logo: 'https://user-images.githubusercontent.com/6418354/155840899-62c1fe8e-66a6-4492-9acc-5bd504ac21ef.png', 818 | desc: 'p32929', 819 | link: 'skype:p32929?chat' 820 | }, 821 | ] 822 | }, 823 | { 824 | text: "Thank you for visiting my portfolio", 825 | arr: [ 826 | { 827 | title: "Click on the link button", 828 | desc: 'To create your own portfolio. It will only take around 3 minutes', 829 | logo: WebImages.giftIcon, 830 | link: 'https://github.com/p32929/p32929.github.io/' 831 | } 832 | ] 833 | } 834 | ] 835 | } 836 | 837 | 838 | -------------------------------------------------------------------------------- /src/Others/Images.ts: -------------------------------------------------------------------------------- 1 | export class LocalImages { 2 | static avatar = 'https://github.com/p32929/portfolio-v2/assets/6418354/ac4ee1a0-8580-494a-985b-51047ae532b2' 3 | static avatar_with_laptop = "https://github.com/p32929/portfolio-v2/assets/6418354/41a4f774-8ef2-4469-945f-4c99a8c6ed78" 4 | } 5 | 6 | export class WebImages { 7 | static giftIcon = 'https://user-images.githubusercontent.com/6418354/155841091-9bdc3b05-fabd-4e58-a0fd-fe90b08275e4.png' 8 | static flutterIcon = 'https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg' 9 | } -------------------------------------------------------------------------------- /src/Others/Interfaces.ts: -------------------------------------------------------------------------------- 1 | export interface NavBottomLinksInterface { 2 | svgPath: string, 3 | link: string, 4 | } 5 | 6 | export interface ListItemInterface { 7 | title: string, 8 | desc?: string, 9 | logo: string, 10 | link?: string, 11 | featured?: boolean 12 | } 13 | 14 | export interface TitledListItemInterface { 15 | text: string, 16 | arr: Array 17 | } -------------------------------------------------------------------------------- /src/Others/OurIcons.ts: -------------------------------------------------------------------------------- 1 | // These are all svg icon paths copied from https://materialdesignicons.com/ 2 | 3 | export class OurIcons { 4 | // websites 5 | static githubIcon = 'M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z'; 6 | static facebookIcon = 'M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'; 7 | static whatsappIcon = 'M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'; 8 | static wordpressIcon = "M3.42,12C3.42,10.76 3.69,9.58 4.16,8.5L8.26,19.72C5.39,18.33 3.42,15.4 3.42,12M17.79,11.57C17.79,12.3 17.5,13.15 17.14,14.34L16.28,17.2L13.18,8L14.16,7.9C14.63,7.84 14.57,7.16 14.11,7.19C14.11,7.19 12.72,7.3 11.82,7.3L9.56,7.19C9.1,7.16 9.05,7.87 9.5,7.9L10.41,8L11.75,11.64L9.87,17.27L6.74,8L7.73,7.9C8.19,7.84 8.13,7.16 7.67,7.19C7.67,7.19 6.28,7.3 5.38,7.3L4.83,7.29C6.37,4.96 9,3.42 12,3.42C14.23,3.42 16.27,4.28 17.79,5.67H17.68C16.84,5.67 16.24,6.4 16.24,7.19C16.24,7.9 16.65,8.5 17.08,9.2C17.41,9.77 17.79,10.5 17.79,11.57M12.15,12.75L14.79,19.97L14.85,20.09C13.96,20.41 13,20.58 12,20.58C11.16,20.58 10.35,20.46 9.58,20.23L12.15,12.75M19.53,7.88C20.2,9.11 20.58,10.5 20.58,12C20.58,15.16 18.86,17.93 16.31,19.41L18.93,11.84C19.42,10.62 19.59,9.64 19.59,8.77L19.53,7.88M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,21.54C17.26,21.54 21.54,17.26 21.54,12C21.54,6.74 17.26,2.46 12,2.46C6.74,2.46 2.46,6.74 2.46,12C2.46,17.26 6.74,21.54 12,21.54Z"; 9 | static skypeIcon = "M18,6C20.07,8.04 20.85,10.89 20.36,13.55C20.77,14.27 21,15.11 21,16A5,5 0 0,1 16,21C15.11,21 14.27,20.77 13.55,20.36C10.89,20.85 8.04,20.07 6,18C3.93,15.96 3.15,13.11 3.64,10.45C3.23,9.73 3,8.89 3,8A5,5 0 0,1 8,3C8.89,3 9.73,3.23 10.45,3.64C13.11,3.15 15.96,3.93 18,6M12.04,17.16C14.91,17.16 16.34,15.78 16.34,13.92C16.34,12.73 15.78,11.46 13.61,10.97L11.62,10.53C10.86,10.36 10,10.13 10,9.42C10,8.7 10.6,8.2 11.7,8.2C13.93,8.2 13.72,9.73 14.83,9.73C15.41,9.73 15.91,9.39 15.91,8.8C15.91,7.43 13.72,6.4 11.86,6.4C9.85,6.4 7.7,7.26 7.7,9.54C7.7,10.64 8.09,11.81 10.25,12.35L12.94,13.03C13.75,13.23 13.95,13.68 13.95,14.1C13.95,14.78 13.27,15.45 12.04,15.45C9.63,15.45 9.96,13.6 8.67,13.6C8.09,13.6 7.67,14 7.67,14.57C7.67,15.68 9,17.16 12.04,17.16Z" 10 | static emailIcon = 'M12,15C12.81,15 13.5,14.7 14.11,14.11C14.7,13.5 15,12.81 15,12C15,11.19 14.7,10.5 14.11,9.89C13.5,9.3 12.81,9 12,9C11.19,9 10.5,9.3 9.89,9.89C9.3,10.5 9,11.19 9,12C9,12.81 9.3,13.5 9.89,14.11C10.5,14.7 11.19,15 12,15M12,2C14.75,2 17.1,3 19.05,4.95C21,6.9 22,9.25 22,12V13.45C22,14.45 21.65,15.3 21,16C20.3,16.67 19.5,17 18.5,17C17.3,17 16.31,16.5 15.56,15.5C14.56,16.5 13.38,17 12,17C10.63,17 9.45,16.5 8.46,15.54C7.5,14.55 7,13.38 7,12C7,10.63 7.5,9.45 8.46,8.46C9.45,7.5 10.63,7 12,7C13.38,7 14.55,7.5 15.54,8.46C16.5,9.45 17,10.63 17,12V13.45C17,13.86 17.16,14.22 17.46,14.53C17.76,14.84 18.11,15 18.5,15C18.92,15 19.27,14.84 19.57,14.53C19.87,14.22 20,13.86 20,13.45V12C20,9.81 19.23,7.93 17.65,6.35C16.07,4.77 14.19,4 12,4C9.81,4 7.93,4.77 6.35,6.35C4.77,7.93 4,9.81 4,12C4,14.19 4.77,16.07 6.35,17.65C7.93,19.23 9.81,20 12,20H17V22H12C9.25,22 6.9,21 4.95,19.05C3,17.1 2,14.75 2,12C2,9.25 3,6.9 4.95,4.95C6.9,3 9.25,2 12,2Z' 11 | static downloadIcon = 'M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M12,19L8,15H10.5V12H13.5V15H16L12,19Z' 12 | 13 | // Common icons 14 | static buymeacoffee = 'M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z' 15 | static linkIcon = 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z' 16 | static close = 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z' 17 | static fork = 'M6,2A3,3 0 0,1 9,5C9,6.28 8.19,7.38 7.06,7.81C7.15,8.27 7.39,8.83 8,9.63C9,10.92 11,12.83 12,14.17C13,12.83 15,10.92 16,9.63C16.61,8.83 16.85,8.27 16.94,7.81C15.81,7.38 15,6.28 15,5A3,3 0 0,1 18,2A3,3 0 0,1 21,5C21,6.32 20.14,7.45 18.95,7.85C18.87,8.37 18.64,9 18,9.83C17,11.17 15,13.08 14,14.38C13.39,15.17 13.15,15.73 13.06,16.19C14.19,16.62 15,17.72 15,19A3,3 0 0,1 12,22A3,3 0 0,1 9,19C9,17.72 9.81,16.62 10.94,16.19C10.85,15.73 10.61,15.17 10,14.38C9,13.08 7,11.17 6,9.83C5.36,9 5.13,8.37 5.05,7.85C3.86,7.45 3,6.32 3,5A3,3 0 0,1 6,2M6,4A1,1 0 0,0 5,5A1,1 0 0,0 6,6A1,1 0 0,0 7,5A1,1 0 0,0 6,4M18,4A1,1 0 0,0 17,5A1,1 0 0,0 18,6A1,1 0 0,0 19,5A1,1 0 0,0 18,4M12,18A1,1 0 0,0 11,19A1,1 0 0,0 12,20A1,1 0 0,0 13,19A1,1 0 0,0 12,18Z' 18 | static menu = 'M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' 19 | static star = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z' 20 | static palette = "M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z" 21 | 22 | // not used anymore 23 | static circle = 'M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' 24 | } -------------------------------------------------------------------------------- /src/Others/Theme.ts: -------------------------------------------------------------------------------- 1 | import {createTheme} from '@material-ui/core/styles'; 2 | import {red} from '@material-ui/core/colors'; 3 | 4 | // Create a theme instance. 5 | export const theme = createTheme({ 6 | palette: { 7 | primary: { 8 | main: '#556cd6', 9 | }, 10 | secondary: { 11 | main: '#19857b', 12 | }, 13 | error: { 14 | main: red.A400, 15 | }, 16 | background: { 17 | default: '#fff', 18 | }, 19 | action: { 20 | disabled: "#212121" 21 | } 22 | }, 23 | overrides: { 24 | MuiAvatar: { 25 | img: { 26 | objectFit: 'contain', 27 | } 28 | } 29 | } 30 | }); 31 | -------------------------------------------------------------------------------- /src/Overmind/OvermindActions.ts: -------------------------------------------------------------------------------- 1 | import { Context } from './OvermindHelper' 2 | 3 | // export const increaseCounter = ({state}: Context, value: number) => { 4 | // state.counter += value; 5 | // } 6 | 7 | export const setPrimaryColor = ({ state }: Context, value: string) => { 8 | state.primaryColor = value; 9 | } 10 | 11 | export const showLeftPart = ({ state }: Context, value: boolean) => { 12 | state.isLeftShowing = value; 13 | } 14 | 15 | export const showColorPickerDialog = ({ state }: Context, value: boolean) => { 16 | state.isColorPickerDialogShowing = value; 17 | } 18 | 19 | export const setMenuClicked = ({ state }: Context, value: boolean) => { 20 | state.isMenuClicked = value; 21 | } 22 | 23 | -------------------------------------------------------------------------------- /src/Overmind/OvermindHelper.ts: -------------------------------------------------------------------------------- 1 | import {IContext} from 'overmind' 2 | import {state} from './OvermindState' 3 | import * as actions from './OvermindActions' 4 | import {createActionsHook, createStateHook} from 'overmind-react' 5 | 6 | export const config = { 7 | state, 8 | actions 9 | }; 10 | 11 | export type Context = IContext<{ 12 | state: typeof config.state 13 | actions: typeof config.actions 14 | }> 15 | 16 | 17 | export const useAppState = createStateHook() 18 | export const useActions = createActionsHook() 19 | -------------------------------------------------------------------------------- /src/Overmind/OvermindState.ts: -------------------------------------------------------------------------------- 1 | import { GlobalVars } from "../Others/GlobalVars"; 2 | 3 | export interface State { 4 | primaryColor: string, 5 | isLeftShowing: boolean, 6 | isColorPickerDialogShowing: boolean, 7 | isMenuClicked: boolean, 8 | } 9 | 10 | export const state: State = { 11 | primaryColor: GlobalVars.primaryColor, 12 | isLeftShowing: true, 13 | isColorPickerDialogShowing: false, 14 | isMenuClicked: false, 15 | } 16 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | ::-webkit-scrollbar { 16 | width: 0.75em; /* Remove scrollbar space */ 17 | } 18 | 19 | /* Optional: show position indicator in red */ 20 | ::-webkit-scrollbar-thumb { 21 | background: slategrey; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-color: rgba(0, 0, 0, 0.1); 26 | outline: 1px solid slategrey; 27 | } 28 | 29 | /* 30 | '*::-webkit-scrollbar': { 31 | width: '0.4em' 32 | }, 33 | '*::-webkit-scrollbar-track': { 34 | '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' 35 | }, 36 | '*::-webkit-scrollbar-thumb': { 37 | backgroundColor: 'rgba(0,0,0,.1)', 38 | outline: '1px solid slategrey' 39 | } 40 | */ 41 | 42 | #right-bottom { 43 | scroll-behavior: smooth; 44 | } 45 | 46 | /**/ 47 | 48 | .bounce { 49 | animation: shake 1.5s linear both infinite; 50 | transform: translate3d(0, 0, 0); 51 | backface-visibility: hidden; 52 | perspective: 1000px; 53 | } 54 | 55 | @keyframes shake { 56 | 10%, 90% { 57 | transform: translate3d(-1px, 0, 0); 58 | } 59 | 60 | 20%, 80% { 61 | transform: translate3d(2px, 0, 0); 62 | } 63 | 64 | 30%, 50%, 70% { 65 | transform: translate3d(-4px, 0, 0); 66 | } 67 | 68 | 40%, 60% { 69 | transform: translate3d(4px, 0, 0); 70 | } 71 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import reportWebVitals from './reportWebVitals'; 5 | import { Provider } from "overmind-react"; 6 | import { ThemeProvider } from '@material-ui/core'; 7 | import { createOvermind } from 'overmind' 8 | import { config } from './Overmind/OvermindHelper' 9 | import { theme } from "./Others/Theme"; 10 | import App from './App'; 11 | import { GlobalVars } from './Others/GlobalVars'; 12 | 13 | const overmind = createOvermind(config) 14 | 15 | ReactDOM.render( 16 | 17 | 18 | 19 | 20 | 21 | 22 | , 23 | document.getElementById('root') 24 | ); 25 | 26 | // If you want to start measuring performance in your app, pass a function 27 | // to log results (for example: reportWebVitals(console.log)) 28 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 29 | reportWebVitals(); 30 | document.title = GlobalVars.myName; 31 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------