Portfolio Builder

A simple configuration that turns out into a beautiful portfolio

Table of Content 📝

• Demo Link
• Running Locally
• Configuration
• Report Bugs
• Contribution Guidelines
• Contributors
• Licence

Demo Link 🔗

Access my site at link

Running Locally 💻

Clone the project

  git clone https://github.com/tauseefansari/Portfolio-Builder

Go to the project directory

  cd Portfolio-Builder

Install dependencies

  pnpm install

Start the server

  pnpm start

Configuration ⚙️

Configuration is a json file which contains all the configuration of portfolio. Any changes in configuration will reload the portfolio if project is running. Feel free to customize the json as per your need.

Note: Make sure the format of json file is proper. There should not be any error in json. Feel free to take a look at my own Configuration just avoid using emailKey because then all your emails will be redirect to my email. If you want you can generate you own emailKey using BootStrap Studio Pro

Tab / Project Title (Optional) ⚠️

Tab / Project Title:

tabTitle is an optional field and is used to set Tab Tile if no tabTable is provided it's default to Portfolio

Field	Type	Example
tabTitle?	string	tabTile: 'Tauseef Ansari'

Images Preload (Mandatory) ⛔

Images Preload:

imagesPreload is a mandatory field of type string[] which contains names of all the images with extension which you want to preload before project run.

Note: Make sure all the images should be in the images folder

Field	Type	Example
imagesPreload	string[]	imagesPreload: [ 'my-image.png' ]

Social Links(Mandatory) ⛔

Social Links:

social is a mandatory field of type Social[] where each Social is of type

{ 
  iconName: 'MUI Icon Name', 
  url: 'string' 
}

here iconName is an any icon name from MUI Icon and url is the actual URL.

Field	Type	Example
social	Social[]	[ { iconName: 'Github', url: 'https://github.com/tauseefansari' } ]

Navigation (Mandatory) ⛔

Navigation:

navigation is a mandatory field of type Links[] where each Link is of type

{
  id: 'string',
  title: 'string',
  iconName: 'MUI Icon Name'
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section, title is a tooltip title which shows only on large screen devices and iconName is an any icon name from MUI Icon.

Field	Type	Example
navigaton	Links[]	[ { id: 'home', title: 'Home', iconName: 'HomeOutlined' } ]

Header (Mandatory) ⛔

Header:

header is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  subTitle: 'string',
  downloadCVBtn: { 
    title: 'string', 
    url: 'string'
  },
  letsTalkBtn: { 
    title: 'string', 
    link: 'string'
  },
  headerImage: 'string'
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then title and subTitle renders respectively. After that it then renders two buttons downloadCVBtn and letsTalkBtn and then lastly it renders the headerImage.

Note: Make sure the image name provided in headerImage is included in the imagesPreload and in the images folder

Field	Type	Example
header	object	{ id: 'home', header: 'Hello I am', title: 'Tauseef Ansari', subTitle: 'React Developer', downloadCVBtn: { title: 'My Resume', url: 'https://github.com/tauseefansari/Portfolio-Builder' }, letsTalkBtn: { title: 'Let's Talk', link: 'contact' }, headerImage: 'me.png' }

About (Mandatory) ⛔

About:

about is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  aboutImage: 'string',
  aboutCards: [
    {
        iconName: 'MUI Icon Name',
        title: 'string',
        description: 'string'
    }
  ],
  aboutDescriptions: 'string'
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then renders aboutImage, aboutCards and then lastly it renders the aboutDescriptions.

Note: Make sure the image name provided in aboutImage is included in the imagesPreload and in the images folder and the iconName is an any icon name from MUI Icon

Field	Type	Example
about	object	{ id: 'about', header: 'Get to Know', title: 'About Me', aboutImage: 'me-about.png', aboutCards: [ { iconName: 'MilitaryTech', title: 'Experience', description: '1+ Year Experience' } ], aboutDescriptions: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' }

Skills (Mandatory) ⛔

Skills:

skills is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  skillCards: [
    {
        iconName: 'Developer Icon Name',
        title: 'string',
        progress: 'string'
    }
  ]
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then lastly renders skillCards.

Note: Make sure the iconName here is an any icon name from Developer Icons.

Field	Type	Example
skills	object	{ id: 'skills', header: 'What Skill I Have', title: 'My Skills', skillsCards: [ { iconName: 'DiReact', title: 'React', progress: '95%' } ] }

Timeline (Mandatory) ⛔

Timeline:

timeline is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  timelineCards: [
    {
        date: 'string',
        title: 'string',
        description: 'string'
    }
  ]
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then lastly renders timelineCards.

Field	Type	Example
timeline	object	{ id: 'timeline', header: 'How I Reach Here', title: 'My Journey', timelineCards: [ { date: '2022', title: 'My Title 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' } ] }

Portfolio (Mandatory) ⛔

Portfolio:

portfolio is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  portfolioCards: [
    {
        image: 'string',
        title: 'string',
        description: 'string',
        buttons: [
            {
                title: 'string',
                url: 'string'
            }
        ]
    }
  ]
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then lastly renders portfolioCards.

Note: Make sure the image name provided in image is included in the imagesPreload and in the images folder and the iconName is an any icon name from MUI Icon

Field	Type	Example
portfolio	object	{ id: 'portfolio', header: 'My Recent Works', title: 'Portfolio', portfolioCards: [ { image: 'project-1.jpg', title: 'My Project 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', buttons: [ { title: 'GitHub', url: 'https://github.com/tauseefansari/Portfolio-Builder' } ] } ] }

Testimonials (Mandatory) ⛔

Testimonials:

testimonials is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  testimonialsCards: [
    {
        image: 'string',
        title: 'string',
        description: 'string'
    }
  ]
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then lastly renders testimonialsCards.

Note: Make sure the image name provided in aboutImage is included in the imagesPreload and in the images folder and the iconName is an any icon name from MUI Icon

Field	Type	Example
testimonials	object	{ id: 'testimonials', header: 'Reviews From LinkedIn', title: 'Testimonials', testimonialsCards: [ { image: 'member-1.jpg', title: 'Member 1', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' } ] }

Contact (Mandatory) ⛔

Contact:

contact is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  title: 'string',
  mailSubject?: 'string',
  emailKey?: 'string',
  contactCards: [
    {
        iconName: 'MUI Icon Name',
        title: 'string',
        description: 'string',
        link: {
            url: 'string',
            title: 'string'
        }
    }
  ],
  contactForm: [
    {
        type: 'string',
        placeholder: 'string'
    }
  ],
  submitBtn: 'string'
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then renders contactCards and then lastly renders contactForm with submitBtn.

Note: Make sure the iconName is an any icon name from MUI Icon and link is the actual URL.

Field	Type	Example
contact	object	{ id: 'contact', header: 'Get In Touch', title: 'Contact Me', mailSubject: 'Contact Me Portfolio', emailKey: 'MY_SECRET_KEY', contactCards: [ { iconName: 'Email', title: 'Email', description: '[email protected]', link: { url: 'mailto:[email protected]', title: 'Send a message' } } ], contactForm: [ { type: 'text', placeholder: 'Your Full Name' } ], submitBtn: 'Send Message' }

Footer (Mandatory) ⛔

Footer:

footer is a mandatory field of type object which contains the following

{
  id: 'string',
  header: 'string',
  links: [
    {
        id: 'string',
        title: 'string'
    }
  ],
  copyright: 'string'
}

here id is the id of sections like home, timeline etc. so when you click on navigation it will smoothly move down to the desired section. header renders on the top and then renders title. After that it then renders links and then lastly renders copyright text.

Note: Make sure the iconName is an any icon name from MUI Icon and link is same links in which are in Navigations.

Field	Type	Example
footer	object	{ id: 'footer', header: 'Tauseef Ansari', links: [ { id: 'home', title: 'Home' } ], copyright: 'Tauseef Ansari: All rights reserved' }

Report Bugs 🐛

Use GitHub issues to track public bugs. Report a bug by opening a new issue

Contribution Guidelines ⚒️

1. Fork it 🍴
2. Add code that you want to edit 👨‍💻
3. Push to your github and request a pull request to main 🙋

Contributors 👥

License 🪪

MIT license @ Tauseef Ansari