/My-portfolio

Primary LanguageJavaScriptMIT LicenseMIT

A React Portfolio Template for GitHub

[![GitHub Repo stars](https://img.shields.io/github/stars/mshuber1981/William Potter?color=%2361dbfb&style=for-the-badge&logo=github)](https://github.com/mshuber1981/William Potter/stargazers/) [![GitHub Repo Forks](https://img.shields.io/github/forks/mshuber1981/William Potter?color=%2361dbfb&style=for-the-badge&logo=github&label=Forks)](https://github.com/mshuber1981/William Potter/network/members)

A performant, accessible, progressive React portfolio template that uses the GitHub REST API.

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

Page Speed

Light And Dark Themes

Hero Light

Hero Dark

Getting Started

  1. Create a repository from this template

  2. Clone your repository

  3. Make sure Node is installed

  4. Open your project and install the dependencies

    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)

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

    npm start

Updating the Projects section

Projects

  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)

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

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

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

Projects

  1. The contact form uses Formspree, 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)

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

  1. Update the homepage value ([package.json](https://github.com/mshuber1981/William Potter/blob/0133fcc02ab048fefcf73825d02385ffe27c3721/package.json#L3) line 3)

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

  2. Run the deploy command

    npm run deploy

Customization Options

Checkout the [Wiki](https://github.com/mshuber1981/William Potter/wiki) for additional customization options:

Back to top 🔝

License

MIT