开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

GitHub React Portfolio Template

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.

Google PageSpeed Insights

LIVE DEMO

Getting Started

1. Create a repository from this template

2. Clone your repostiory

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 lines 23-27)

   • /* START HERE
      ************************************************************** 
      Add your GitHub username below.
     */
     export const githubUsername = "Your GitHub username here";

7. Start the development server to view the results

   • npm start

Updating the Hero images

1. Update the image imports/exports (data.js line 16-21)

   • // Hero Images (add your images to the /images directory with the same names)
     import HeroLight from "./images/hero-light.jpg";
     import HeroDark from "./images/hero-dark.jpg";
     // If you change the import names above then you need to change the export names below
     export { HeroLight as Light };
     export { HeroDark as Dark };

Updating the Skills section

1. Import your desired skill icons (data.js line 1-11)

   • // Skills icons - https://react-icons.github.io/react-icons/
     import {
       FaHtml5,
       FaCss3Alt,
       FaBootstrap,
       FaReact,
       FaGitAlt,
       FaGithubSquare,
       FaLink,
     } from "react-icons/fa";
     import { SiJavascript, SiStyledcomponents, SiRedux } from "react-icons/si";

2. Follow the instructions to update the skillData array (data.js line 39-89)

   • /* Skills
      **************************************************************
      Add or remove skills in the SAME format below, there must be one icon imported above per skill below.
     */
     export const skillData = [
      {
       id: 1,
       skill: <FaHtml5 className="display-4" />,
       name: "HTML5",
      },

Updating the Projects section

1. Follow the instructions to update the filteredProjects array (data.js lines 94-98)

   • /* 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 lines 13-14) or a default image will be applied

   • // Projects Images
     // Add your images to the /assets/images directory and import below
     import colors from "./assets/images/colors.svg";
     import robot from "./assets/images/robot.svg";
     import notepad from "./assets/images/notepad.svg";

3. Follow the instructions to update the projectData array (data.js lines 100-106)

   • // Replace the defualt GitHub image for matching repos below (images imported above - lines 13-14)
     export const projectCardImages = [
       {
         name: "example-1",
         image: Logo,
       },
     ];

Updating the Contact section

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

   • /* 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 in package.json (line 3)

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

2. Run the deploy command

   • npm run deploy

Back to top