https://github.com/william-versatile/my-portfolio
https://github.com/william-versatile/my-portfolio
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/william-versatile/my-portfolio
- Owner: William-versatile
- License: mit
- Created: 2024-02-05T12:38:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-05T15:18:57.000Z (over 2 years ago)
- Last Synced: 2025-02-10T15:17:08.260Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://William-potter.com
- Size: 15.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: License.md
Awesome Lists containing this project
README
# A React Portfolio Template for GitHub
[](https://github.com/mshuber1981/William Potter/stargazers/) [](https://github.com/mshuber1981/William Potter/network/members)
A performant, accessible, progressive React portfolio template that uses the [GitHub REST API](https://docs.github.com/en/free-pro-team@latest/rest).
Add your GitHub username once and all of your info will automatically be updated. Deploy to GitHub pages in a few simple steps.
## [Live Demo](https://mshuber1981.github.io/William Potter/#/)
[Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
## Light And Dark Themes
### Getting Started
1. [Create a repository from this template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template)
2. [Clone your repository](https://developers.google.com/speed/pagespeed/insights/)
3. Make sure [Node](https://nodejs.org/en/) is installed
4. Open your project and install the dependencies
```bash
npm install
```
5. Navigate to the src directory and open data.js
6. Add your GitHub username ([data.js](https://github.com/mshuber1981/William Potter/blob/main/src/data.js#L17) lines 17-21)
```javascript
/* START HERE
**************************************************************
Add your GitHub username (string - "YourUsername") below.
*/
export const githubUsername = "Your GitHub username here";
```
7. Start the development server to view the results
```bash
npm start
```
### Updating the Projects section
1. Follow the instructions to update the filteredProjects array ([data.js](https://github.com/mshuber1981/William Potter/blob/main/src/data.js#L91) lines 91-95)
```javascript
/* Projects
**************************************************************
List the repo names (string - "your-repo-name") you want to include (they will be sorted alphabetically). If empty, only the first 3 will be included.
*/
export const filteredProjects = ["example-1", "example-2", "example-3"];
```
2. Import the projects images you want to use ([data.js](https://github.com/mshuber1981/William Potter/blob/main/src/data.js#L7) lines 7-8) or the default image will be applied
```javascript
// Projects Images (add your images to the images directory and import below)
import Logo from "./images/logo.svg";
```
3. Follow the instructions to update the projectCardImages array ([data.js](https://github.com/mshuber1981/William Potter/blob/main/src/data.js#L97) lines 97-103)
```javascript
// Replace the defualt GitHub image for matching repos below (images imported above - lines 7-8)
export const projectCardImages = [
{
name: "example-1",
image: Logo,
},
];
```
### Updating the Contact section
1. The contact form uses [Formspree](https://formspree.io/), create an account and add your endpoint URL ([data.js](https://github.com/mshuber1981/William Potter/blob/main/src/data.js#L105) lines 105-110)
```javascript
/* Contact Info
**************************************************************
Add your formspree endpoint below.
https://formspree.io/
*/
export const formspreeUrl = "https://formspree.io/f/YourEndpoint";
```
### Deploy
A helpful guide for Create React App deployments with GitHub Pages can be found [here](https://create-react-app.dev/docs/deployment#github-pages).
1. Update the homepage value ([package.json](https://github.com/mshuber1981/William Potter/blob/0133fcc02ab048fefcf73825d02385ffe27c3721/package.json#L3) line 3)
```json
"homepage": "https://YourUsername.github.io/your-app/",
```
2. Run the deploy command
```bash
npm run deploy
```
### Customization Options
Checkout the [Wiki](https://github.com/mshuber1981/William Potter/wiki) for additional customization options:
- [Updating the Hero images](https://github.com/mshuber1981/William Potter/wiki/Updating-the-Hero-images)
- [Add a custom Blog icon](https://github.com/mshuber1981/William Potter/wiki/Updating-the-Hero-images#add-a-custom-blog-icon)
- [Updating the About Me section](https://github.com/mshuber1981/William Potter/wiki/Updating-the-About-Me-section)
- [Updating the Skills section](https://github.com/mshuber1981/William Potter/wiki/Updating-the-Skills-section)
- [Add a link to your resume](https://github.com/mshuber1981/William Potter/wiki/Updating-the-Skills-section#add-a-link-to-your-resume)
- [Updating the Navbar Logo](https://github.com/mshuber1981/William Potter/wiki/Updating-the-Navbar-Logo)
- [Including a Live Demo link on your project cards](https://github.com/mshuber1981/William Potter/wiki/Including-a-Live-Demo-link-on-your-project-cards)
[Back to top :top:](#a-react-portfolio-template-for-github)
### License
[MIT](https://choosealicense.com/licenses/mit/)