# Developer Portfolio ⚑️ ![banner.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1667244598234/Ou3-O18HW.gif align="left") ⭐ Star on GitHub β€” [Repo](https://github.com/tamojit-123/developerPortfolio.git) ### Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer or use [Docker](https://www.docker.com/products/docker-desktop). ```BASH node@v10.16.0 or higher npm@6.9.0 or higher git@2.17.1 or higher ``` ### Docker Commands ```BASH 1) BUILD IMAGE : docker build -t developersportfolio:latest . 2) RUN IMAGE : docker run -t -p 3000:3000 developersportfolio:latest ``` ## Sections πŸ“ βœ”οΈ Summary and About me\ βœ”οΈ Skills \ βœ”οΈ Education\ βœ”οΈ Certifications, Achievement and Badges πŸ†\ βœ”οΈ Experience\ βœ”οΈ Open Source Projects Connected with Github\ βœ”οΈ Contact me\ βœ”οΈ Blogs\ βœ”οΈ Location To view a live example, **[click here](https://developersportfolio.netlify.app/)** ## Clone And Use πŸ“‹ - The website is completely built on `react-js` framework of `javascript` and that's why we need `nodejs` and `npm` installed. - While installing `nodejs` and `npm`, try to install versions which are equal or greater than the versions mentioned in badges above. - In case you want to help developing it or simply saving it, you can fork the repository just by clicking the button on the top-right corner of this page. - After the successful installation of `nodejs` and `npm`, clone the repository into your local system using below command: ```BASH git clone https://github.com/tamojit-123/developerPortfolio.git ``` - This will clone the whole repository in your system.- To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command: ```BASH npm install ``` - Now, the project is ready to use. - You can check it using ```BASH npm start ``` it will open the website locally `localhost:3000` on your browser. it is recommended to use Chrome browser for better experience and customization. ## Customize your own portfolio βš™οΈ In this project, there are basically 4 things that you need to change to customize this to anyone else's portfolio: **package.json**, **Personal Information**, **Github Information** and **Splash Logo**. ### package.json Open this file, which is in the main cloned directory, choose any "name" and change "homepage " to `https://.github.io`. Do not forget the `https://`, otherwise fonts will not load. ### Personal Information You will find `src/portfolio.js` file which contains the complete information about the user. The file looks something like below: ***Edit*** : *"Lorem ipsum dolor sit amet, consectetur adipiscing elit."* to your own preference. ```json // Home Page const greeting = { ... } // Social Media const socialMediaLinks = { ... } ... ``` You can change the personal information, experience, education, social media, certifications, blog information, contact information etc. in `src/portfolio.js` to directly reflect them in portfolio website. ### Github Information You will find `git_data_fetcher.js` file in the main directory of the repository. This file is used to fetch the data (Pull requests, Issues, Organizations, Pinned projects etc.) from your github. If you open the file, you will see below component at the top of the file. You need to change only that component. ```json const openSource = { githubConvertedToken: "process.env.ENTER_YOUR_GITHUB_TOKEN", githubUserName: "process.env.ENTER_YOUR_GITHUB_USER_NAME", }; ``` You can get a github token as described [here](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token). Give all permissions while generating token. Also add your `githubUserName` in the correct field inside `git_data_fetcher.js`. Now, you need to run following command. **Warning:** Treat your tokens like passwords and keep them secret. When working with the API, use tokens as environment variables instead of hardcoding them into your programs. ``` node git_data_fetcher.js ``` This will fetch all the data from your github and it will automatically replace my data with yours. Whenever you want to update the github related information on the website you need to run this command. ### Profile Picture - First put your profile image in `./src/assets/images` directory. - Then to put you own profile pictue in your portfolio. Go to `./src/containers/greeting/Greeting.js` edit src in `` tag ```html profile picture ``` - After this close the react server and start again by running the command. ```BASH npm start ``` Hooray!! profile picture set. ### Splash Illustration Note here that if you click [Developer's Portfolio](https://developersportfolio.netlify.app/), you can see animating the Illustration at the beginning. I have designed the illustration in [`Figma`](https://www.figma.com/) and then animated it using css. Therefore, this part of portfolio is not customizable. But don't worry we have a solution to this problem. You have below two alternatives: - If you want to design your own logo, then you can design it using `Figma` or `Adobe XD` or `Adobe Illustrator` or `Inkscape`. If you want to animate it, you can refer to `./src/components/Loader` directory which contains `js` and `css` files which animates the logo. - If you don't want Splash screen or you don't know how to design logo, then this option is for you. - You can open `src/portfolio.js` file and at the top of this file you will see `settings` component as below: ```json // Website related settings const settings = { isSplash: true, }; ``` - Change `isSplash` from `true` to `false`. - Now, if you see your website using ```BASH npm start ``` it will directly open `home` rather than animating logo `splash` screen. - If you design your logo in future, then edit the files in `./src/components/Loader` and then revert `isSplash` to `true` in `src/portfolio.js`. ## Themes πŸŸͺ🟦🟩🟨🟧πŸŸ₯ ![gif](https://user-images.githubusercontent.com/40804626/106269537-a0d3af80-6252-11eb-9a2e-69a6b2a2f822.gif) - You can take a look at `src/theme.js` file where all available themes are mentioned with respective color codes. ***Available Themes:*** ```json export const blueTheme = {...}; export const brownTheme = {...}; export const purpleTheme = {...}; export const greenTheme = {...}; export const redTheme = {...}; export const blackTheme = {...}; export const pinkTheme = {...}; export const violetTheme = {...}; export const tealTheme = {...}; export const orangeTheme = {...}; export const yellowTheme = {...}; export const materialDarkTheme = {...}; export const materialLightTheme = {...}; export const materialTealTheme = {...}; ``` - At the bottom of this file you will see the below code: ```json export const chosenTheme = materialDarkTheme; ``` - You need to change the name from `materialDarkTheme` to whatever theme you want to set your website to. - You can define new theme similarly as other themes and you can assign name of that new defined theme to `chosenTheme`. - That's it. You just need to change the theme name and the code will take care of everything else. Run : ```BASH npm start ``` to check if everything is **ok**. ## Deployment βœ… - Once you are done with your setup and have successfully completed all steps above, you need to put your website online! - I highly recommend using [Github Pages](https://create-react-app.dev/docs/deployment/#github-pages) / Netlify to achieve this the EASIEST WAY. - To deploy your website, you have two options. First you need to create a github repository with the name `.github.io`. Please don't give it any other name. - Now, you need to generate a production build and deploy the website. **Option 1:** - Run ```BASH npm run build ``` to generate the production build folder. - Enter the build folder, `git init` and push the generated code to the `master` branch of your new repository. That's it. Done. You may need to `git init` and force push at every new build. **Option 2 (will not work with [user pages](https://docs.github.com/en/github/working-with-github-pages/about-github-pages)):** - Run ```BASH npm run deploy ``` to build and create a branch called `gh-pages`. It will push the `build` files to that branch. - The last step in deploying is to enable `Github Pages` in settings of the repository and select `gh-pages` branch. Now, your website is successfully deployed and you can visit it at `.github.io`. If you are stuck somewhere and want to observe the deployment process in depth, then please feel free to raise an issue or PR if you can resolve. **Option 3 (Netflify deployment):** After push the code to the github repository. You could also host directly with Netlify by linking your own repository. [![Deploy To Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/tamojit-123/developerPortfolio) **->** *Recommendation* Easy Process ***To do a manual deploy to Netlify’s CDN:*** - In the terminal of the ide type the following command to predeploy : ```BASH npm run deploy ``` It will make a `./build/` folder in the `root/` directory will contains all the deploy contents which is generated as production build. - Then run the following command: ```BASH npm install netlify-cli -g ``` This command will create a Netlify deploy CLI in react project folder. - Then run ```BASH netlify deploy ``` - Choose `build` as the path to deploy. **To setup continuous delivery:** With this setup Netlify will build and deploy when you push to git or open a pull request: 1. [Start a new netlify project](https://app.netlify.com/signup) 2. Pick your Git hosting service and select your repository 3. Click `Build your site` ***Developers information*** **Support for client-side routing:** To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules: ``` /* /index.html 200 ``` When you build the project, Create React App will place the `public` folder contents into the build output. # Technologies, designs, illustrations and animations used for developement πŸ› οΈ - [React](https://reactjs.org/) - [graphql](https://graphql.org/) - [apollo-boost](https://www.apollographql.com/docs/react/get-started/) - [baseui](https://github.com/uber/baseweb) - [react-reveal](https://www.react-reveal.com/) - [styled-components](https://styled-components.com/) - Design, Illustrations and Animations πŸ₯ --[LottieFiles](https://lottiefiles.com/) --[UnDraw](https://undraw.co/illustrations) # License πŸ“„ This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details. # References πŸ‘πŸ» - Some Design and Implementation Ideas are taken from [Saad Pasta's Portfolio Project](https://github.com/saadpasta/developerFolio) & [Ashutosh's Software Developer Master Portfolio](https://github.com/ashutosh1919/masterPortfolio). - The Logo and designs is inspired from [LottieFile](https://lottiefiles.com/) & [Figma](https://www.figma.com/files/recent). ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

Tamojit Das
πŸ’» 🎨 πŸ“– 🚧 πŸ“
Imgbot
πŸ‘€ πŸ”§
Rattle Coder
πŸ“–
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!