A ReactJs and Bootstrap 5 framework website that dynamically creates a multi-page portfolio site from several JSON files with a central customisation functionality and deployment pipeline.
- Responsive ReactJS website by reading information from multiple JSON files
- Automatically deploy website on each commit that has occurred to the project
- Adapts to different screen sizes, from phones to desktops
- Ability to showcase projects that were defined in JSON files
- Ability to define slide-shows, links and videos for projects
- All sections are defined through the use of a JSON file
- Support personal biography, social media links, education, work, projects and contact sections
- In terminal input
npm installto install the website packages - In terminal input
npm startto launch the website in a local environment - In terminal press
CTRL + Cto terminate the website process
- Fork Repository with
github-username.github.ioas your repository name - In
package.jsonchange"name": "json-portfolio"to"name": "github-username" - In
package-lock.jsonchange"name": "json-portfolio"to"name": "github-username"for both therootandpackages - In
package-lock.jsonchange"homepage": "."to"homepage": "https://github-username.github.io/" - In
public/index.htmlchange<title> JSON Portfolio </title>to<title> Your Name | Portfolio </title> - In
public/index.htmlchange<meta name="description" content="..." />to<meta name="description" content="Website Description" /> - Modify the JSON files to reflect your details and upload any necessary images
- Commit the files on the forked repository
- In Github access the
repository settings > pages > sourcesand selectgh-pageswith/ (root)folder and then clicksave
This section covers every JSON file that is used by the website to generate the portfolio website. The number of entries in educations.json, experiences.json, skills.json and projects.json can be adjusted as long as the same structure is kept.
The socials.json file consists of a predefined list of social media links where the icon is retrieved from Bootstrap Icons. The icon is only shown when the URL link is populated, otherwise it is not shown.
| Property | Description |
|---|---|
| name | Social media name |
| link | Social media link |
The profile.json file is used to populate the about page and certain details are also shared to other pages. The biography description is used to provide an introduction to the portfolio with the support of links through the use of square brackets, which supports the education, work, skills, portfolio and contact. A profile picture is required and be in the following location public/images/ProfilePicture.png.
The contact page makes use of Formspree ID, which requires a Formspree account and creating a new form (New Form). The form id is found in the URL which has the following structure https://formspree.io/forms/########/ where the # values represent the form ID.
| Property | Description | Required |
|---|---|---|
| name | Full name | ✔️ |
| Email Address | ✔️ | |
| heading | Biography Description | ✔️ |
| skills | Skills Description | ✔️ |
| projects | Projects Description | ✔️ |
| experience | Experience Description | ✔️ |
| notFound | Not Found Description | ✔️ |
| formspreeId | Formspree ID | ✔️ |
| Property | Description | Required |
|---|---|---|
| start | Start Date | ✔️ |
| end | End Date | ✔️ |
| course | Attended Course | ✔️ |
| institute | Institution Name | ✔️ |
| location | Institution Location | ✔️ |
| description | Course Description | ❌ |
| bullets | Course Highlights | ❌ |
| technologies | Technologies Used | ❌ |
| Property | Description | Required |
|---|---|---|
| start | Start Date | ✔️ |
| end | End Date | ✔️ |
| role | Role Title | ✔️ |
| company | Employed Company | ✔️ |
| location | Institution Location | ✔️ |
| description | Employment Description | ❌ |
| bullets | Employment Highlights | ❌ |
| technologies | Technologies Used | ❌ |
| Property | Description | Required |
|---|---|---|
| title | Skill Group Name | ✔️ |
| icon | Skill Group Icon | ✔️ |
| overview | Show in About Page | ✔️ |
| technologies | Technologies | ✔️ |
Any project images should be stored in public/images/projects/ where the filename convention of these images is imageHeading##.png. The imageHeading must be unique for every project and ## represent the index starting from 1 padded with zeros such as; 01, 02, 03, etc.
| Property | Description | Required |
|---|---|---|
| start | Start Date | ✔️ |
| end | End Date | ✔️ |
| name | Project Name | ✔️ |
| description | Project Description | ❌ |
| technologies | Technologies | ✔️ |
| buttons | Project Links | ❌ |
| videos | You Tube Links | ❌ |
| images | Amount of Images | ✔️ |
| imageHeading | Project Image Suffix Name | ✔️ |
| overview | Show in About Page | ✔️ |
The website customisation is primarily driven by two primary stylesheets;
styles/Scheme.scssis used for changing colours and padding of content and sectionstyles/Typography.scssis used for setting font sizes of text headings and paragraphs
Please report any issues or submit pull requests with code changes. I love it when my work helps someone. So, if you're utilizing my project or have been inspired to develop something of your own, please let me know! My social media are featured in my portfolio.