Master Portfolio 2.0

栏目: IT技术 · 发布时间: 4年前

Software Developer Master Portfolio :fire:

A clean, beautiful, responsive and 100% customizable portfolio template for Software Developers!

:star: Star us on GitHub — it helps!

Sections :books:

:heavy_check_mark: Summary and About me

:heavy_check_mark: Skills

:heavy_check_mark: Open Source Projects Connected with Github

:heavy_check_mark: Experience

:heavy_check_mark: Certifications :trophy:

:heavy_check_mark: Blogs

:heavy_check_mark: Education

:heavy_check_mark: Contact me

To view a live example, click here

Clone And Use :clipboard:

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.
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:
- ```
git clone https://github.com/ashutosh1919/masterPortfolio.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:
- ```
npm install
```
Now, the project is ready to use.
You can check it using npm start , it will open the website locally on your browser.

Customize it to make your own portfolio :pencil2:

In this project, there are basically 3 things that you need to change to customize this to anyone else's portfolio: Personal Information , Github Information and Splash Logo .

Personal Information

You will find src/portfolio.js file which contains the complete information about the user. The file looks something like below:

// 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.

const openSource = {
  githubConvertedToken: "Your Github Token Here.",
  githubUserName: "Your Github Username Here.",
};

You can get github token as described here . Give all permissions while generating token. Also add your github username. Now, you need to run following command.

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.

Splash Logo

Note here that if you click my portfolio , you can see animating the logo at the beginning. I have designed that logo in Figma 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:
- ```
// Website related settings
const settings = {
  isSplash: true,
};
```
- Change isSplash from true to false .
- Now, if you see your website using 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 .

Choose Theme :rainbow:

You can take a look at src/theme.js file where all available themes are mentioned with respective color codes.

At the bottom of this file you will see the below code:

export const chosenTheme = blueTheme;
blueTheme
chosenTheme

That's it. You just need to change the theme name and the code will take care of everything else.

Deployment :package:

Once you have done with your setup and you have successfully completed all steps above, You need to put your website online!
I highly recommend to use Github Pages to achieve this on the EASIEST WAY.
To deploy your website, first you need to create github repository with name <your-github-username>.github.io . Please don't give any other name.
Push the generated code to the master branch of this repository.
Now, we need to generate production build and deploy website.
- npm run build command will generate the production build.
- npm run deploy will create another branch called gh-pages and 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 <your-github-username>.github.io .