Json Portfolio

Overview

The JSON Portfolio Website is a ReactJS and Bootstrap 5 framework website that dynamically creates a multi-page portfolio site from several JSON files. It has a central customization functionality and deployment pipeline. The website is responsive and adapts to different screen sizes, from phones to desktops. It showcases projects defined in JSON files and allows for the definition of slide-shows, links, and videos for each project. The website includes sections for personal biography, social media links, education, work, projects, and contact information.

Features

• Responsive ReactJS website that reads information from multiple JSON files.
• Automatic deployment of the website on each commit to the project.
• Adapts to different screen sizes, from phones to desktops.
• Showcase projects defined in JSON files.
• Ability to define slide-shows, links, and videos for projects.
• All sections are defined through the use of JSON files.
• Supports personal biography, social media links, education, work, projects, and contact sections.

Installation

To preview the website locally, follow these steps:

1. Open the terminal and navigate to the project directory.
2. Run the command npm install to install the website packages.
3. Run the command npm start to launch the website in a local environment.
4. Press CTRL + C in the terminal to terminate the website process.

To deploy the website, follow these steps:

1. Fork the repository with github-username.github.io as your repository name.
2. Open the package.json file and change "name": "json-portfolio" to "name": "github-username".
3. Open the package-lock.json file and change "name": "json-portfolio" to "name": "github-username" for both the root and packages.
4. In the package-lock.json file, change "homepage": "." to "homepage": "https://github-username.github.io/".
5. In the public/index.html file, change <title> JSON Portfolio </title> to <title> Your Name | Portfolio </title>.
6. In the public/index.html file, change <meta name="description" content="..." /> to <meta name="description" content="Website Description" />.
7. Modify the JSON files to reflect your details and upload any necessary images.
8. Commit the files on the forked repository.
9. In Github, access the repository settings > pages > sources and select gh-pages with /(root) folder, then click save.

Summary

The JSON Portfolio Website is a ReactJS and Bootstrap 5 framework website that allows users to create a responsive and customizable portfolio site. It dynamically generates the site using JSON files, showcasing projects and providing sections for personal biography, education, work, and contact information. The website also includes a deployment pipeline to automatically deploy the site on each commit. Overall, it is a convenient and versatile tool for creating professional portfolio websites.