Master-Portfolio :Create a Portfolio Website in Minutes
Tags: hacktoberfest, opensource, github, react
Published: 2020-10-12 02:50:52

[![Master-Portfolio](https://dev-to-uploads.s3.amazonaws.com/i/ytu0u25atwdn7vvpvy58.png)](https://github.com/vimalverma558/Master-Portfolio)

[![Run on Repl.it](https://repl.it/badge/github/vimalverma558/Master-Portfolio)](https://repl.it/github/vimalverma558/Master-Portfolio)




# Master-Portfolio
- A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
- The website is completely built on `react-js` framework of `javascript`🔥.
- In this project, there are basically Personal Information that you need to change to customize this to anyone else's portfolio
- You will find `src/Name.js` file which contains the complete information about the user. The file looks something like below 

- 
    ``` 
    const greeting = {
        title: "Your Name",
        logo_name: "Name",
        subTitle:
        "subTitle.",
    };
    const socialMedia = {
        facebook: "Your facebook link",
        twitter: "Your twitter link",
        instagram: "Your instagram link",
        github: "Your github link",
        gitlab: "Your gitlab link",
        devto: "Your devto link",
        mailto: "mailto:Your mail"
    };
    const about = {
        School: "Your School Name",
        College: "Your College Name",
        university: "Your university Name",
        Home: "Your Home city"
    };
    const projects = [
    {
        id: "1",
        name: "project 1",
        Description: "this is Description",
        Code_Link: "this is code link",
        Live_link: "this is Live link",
        tool_used: "html,css,js"
    },
    .........
    ]
    ```
[![Master-Portfolio](https://dev-to-uploads.s3.amazonaws.com/i/hhtwref17hjbh8rq0378.png)](https://vima.netlify.app/)
[![Website](https://img.shields.io/website?style=for-the-badge&up_message=Demo&url=https%3A%2F%2Fvima.netlify.app%2F)](https://vima.netlify.app/)




# You can Customize it to make your own portfolio by Three Method ✏️
- [Using Netfify deploy](#using-netlify-deploy)
- [Using Vercel deploy](#using-vercel-deploy)
- [Using gh-pages](#using-gh-pages)



## Using Netlify deploy
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/vimalverma558/Master-Portfolio)
- Click on Deploy button ☝️
- <details>
  <summary>Click on connect to Github</summary>
  <img alt="m1" src="https://dev-to-uploads.s3.amazonaws.com/i/doiuwyqpj2cjfl0oldnb.png" />
  </details>
- <details>
  <summary>Click on Authorize netlify</summary>
  <img alt="m2" src="https://dev-to-uploads.s3.amazonaws.com/i/b4hzjalos23mb3wdb8g9.png" />
  </details>
- <details>
  <summary>Chose a github repository name and click on Save and Deploy</summary>
  <img alt="m3" src="https://dev-to-uploads.s3.amazonaws.com/i/yhrj0wem8z7vmdm62k7f.png" />
  </details>
- <details>
  <summary>Your portfolio website is live 🚀</summary>
  <img alt="m4" src="https://dev-to-uploads.s3.amazonaws.com/i/34ic64hnleg8m1i10tqe.png" />
  </details> 
- Those step ☝️ create a repository in your github account, go to that repository
- Edit `src/Name.js` 
- Commit change and push 🎉 Your Portfolio website is ready.🥳


## Using Vercel deploy
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvimalverma558%2FMaster-Portfolio)
- Click on Deploy button ☝️
- <details>
  <summary>Type a Project name and click on continue</summary>
  <img alt="m1" src="https://dev-to-uploads.s3.amazonaws.com/i/et8nymoy08ea4aensgc5.png" />
  </details>
- <details>
  <summary>Install Vercel for Github(If not already) </summary>
  <img alt="m2" src="https://dev-to-uploads.s3.amazonaws.com/i/blk95d3ct24htbxyjlhq.png" />
  </details>
- <details>
  <summary>Chose a github repository name and click on continue</summary>
  <img alt="m3" src="https://dev-to-uploads.s3.amazonaws.com/i/fodei482ko1xnu7wodeq.png" />
  </details>
- <details>
  <summary>Verify Framework preset is Create React App and Click on Deploy</summary>
  <img alt="m4" src="https://dev-to-uploads.s3.amazonaws.com/i/yu2me8cuy6c7qianvwcw.png" />
  </details> 
- <details>
  <summary>Your portfolio website is live 🚀</summary>
  <img alt="m4" src="https://dev-to-uploads.s3.amazonaws.com/i/eujvs4iobjsfrya5xljv.png" />
  </details> 
- Those step ☝️ create a repository in your github account, go to that repository
- Edit `src/Name.js` 
- Commit change and push 🎉 Your Portfolio website is ready.🥳




## Using gh-pages
- Fork or import [this repository](https://github.com/vimalverma558/Master-Portfolio)
- clone `git clone https://github.com/<your-github-username>/Master-Portfolio`
- To download required dependencies to your system, navigate to the directory where the cloned repository resides and execute following command: `npm install`
- change "homepage " to `https://<your-github-username>.github.io/Master-Portfolio` in `package.json` 
- Edit `src/Name.js` 
- You can check it using `npm start`, it will open the website locally on your browser.
- Commit change and push.
- Once you are done with your setup and have successfully completed all steps above, 
- Run `npm run deploy` to build and create a branch called `gh-pages`. It will push the build files to that branch.
-  🎉 Your Portfolio website is ready.🥳 And live at `https://<your-github-username>.github.io/Master-Portfolio`.


{% github vimalverma558/Master-Portfolio %}

You can resolve any open issues or add some exciting features to this repository!!!
Thanks