DEV Community

Cover image for Master-Portfolio :Create a Portfolio Website in Minutes
VIMAL KUMAR for Web

Posted on • Updated on • Originally published at dev.letskhabar.com

Master-Portfolio :Create a Portfolio Website in Minutes

Master-Portfolio

Run on Repl.it

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"
},
.........
]
```
Enter fullscreen mode Exit fullscreen mode

Master-Portfolio
Website

You can Customize it to make your own portfolio by Three Method ✏️

Using Netlify deploy

Deploy to Netlify

  • Click on Deploy button ☝️
  • Click on connect to Github m1
  • Click on Authorize netlify m2
  • Chose a github repository name and click on Save and Deploy m3
  • Your portfolio website is live 🚀 m4
  • 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

  • Click on Deploy button ☝️
  • Type a Project name and click on continue m1
  • Install Vercel for Github(If not already) m2
  • Chose a github repository name and click on continue m3
  • Verify Framework preset is Create React App and Click on Deploy m4
  • Your portfolio website is live 🚀 m4
  • 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
  • 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 logo vimal-verma / Master-Portfolio

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

Master-Portfolio

Netlify Status GitHub forks GitHub Repo stars GitHub GitHub top language GitHub repo size GitHub issues Website GitHub package.json dependency version (prod) GitHub package.json dependency version (prod) GitHub commit activity GitHub contributors Run on Repl.it

Open in Gitpod Website Website

Master-Portfolio

  • A clean, beautiful, responsive and 100% customizable portfolio template for Developers!
  • It can List your all Projects & Certificate
  • it can Also list your All Dev.to articles Using Api (if you have set BlogData.show_Blog: true in src/Name.js)
  • 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: "Hi, I'm Your Name"
        logo_name: "Name",
        logo_img_show: false, // if true than show image(logo) in home page instant of text(logo)
        logo_img: "https://master-portfolio.js.org/src/assets/img/mplogo.png",
        full_name: "your name",
        email: "email id",
        subTitle:
        "I'm a student pursuing {Course} in {department} from {university}. I'm a passionate learner who's always willing to learn and work across technologies and domains. I love

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

Discussion (5)

Collapse
vimal profile image
VIMAL KUMAR Author
Collapse
roninjosue profile image
Reynaldo Josué Cano Bárcenas

Hello, it is a very nice design, I would love to be able to use it for my portfolio

Collapse
vimal profile image
VIMAL KUMAR Author

Thanks, Use this

GitHub logo vimalverma558 / Master-Portfolio

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

Master-Portfolio

Netlify Status GitHub forks GitHub Repo stars GitHub GitHub top language GitHub repo size GitHub issues Website GitHub package.json dependency version (prod) GitHub package.json dependency version (prod) GitHub commit activity Run on Repl.it

Open in Gitpod Website Website

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
Collapse
bot profile image
bot

Amazing, Thanks