A React Portfolio Template for Parasol Crash Course

This template is a slightly modified version of mshuber1981's github portfolio template which can be found here.

Getting Started

Create a repository from this template
Clone your repository
Make sure Node is installed
Open your project and install the dependencies
```
npm install
```
Navigate to the src directory and open data.js

Add your GitHub username (data.js lines 17-21)

/* START HERE
************************************************************** 
  Add your GitHub username (string - "YourUsername") below.
*/
export const githubUsername = "Your GitHub username here";

Start the development server to view the results
```
npm start
```

Updating the Projects section

Follow the instructions to update the filteredProjects array (data.js lines 91-95)

/* 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"];

Import the projects images you want to use (data.js lines 7-8) or the default image will be applied

// Projects Images (add your images to the images directory and import below)
import Logo from "./images/logo.svg";

Follow the instructions to update the projectCardImages array (data.js lines 97-103)

// 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

The contact form uses Formspree, create an account and add your endpoint URL (data.js lines 105-110)

/* 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.

*Be sure to set the branch as gh-pages and directory as /root in the GitHub Pages settings.

Update the homepage value (package.json line 3)

"homepage": "https://YourUsername.github.io/your-app/",

Run the deploy command
```
npm run deploy
```
**Note that you may not see the updated website live immediately after deploying. This is likely due to your browser caching the webpate and showing you an older version. To verify the changes are live, you can open a different browser and view the changes or check with running npm start.

Parasol Template Specifics

In data.js, update the About Me Section by adding a personal bio. Replace "Add Bio Here" with your bio.

export const moreInfo =
   "Add Bio Here"; // Replace with Bio

Additionally, you can add your linkedin profile link.

export const linkedinURL = "https://www.linkedin.com/"; // Add personal linkedin profile link here

Customization Options

Feel Free to customize the images in the template to your liking. The following links should provide you with instructions on how to do so.

Checkout the Wiki for additional customization options: