🚀 Better GitHub Profile

Use your GitHub profile to create a personal website

Demo page

How it works? 🙋‍♀️

The content of this website is generated dynamically using the GitHub GraphQL API which is used to download your profile README.md and your user data

An extra file extend.json is required to be in your profile readme repository

See this example

// Your "extend.json" file should have this schema

interface ExtendedData {
  resume: string;
  about: {
    paragraphs: string[];
    skills: string[];
    imageUrl: string;
  };
  jobs: Job[];
  featuredProjects: FeaturedProject[];
  otherProjects: Project[];
  contactMessage: string;
}

interface Job {
  title: string;
  company: string;
  companyUrl: string;
  date: {
    from: string;
    to: string;
  };
  accomplishments: string[];
}

interface Project {
  name: string;
  description: string;
  technologies: string[];
  date: {
    from: string;
    to: string;
  };
  repoUrl?: string;
  externalUrl?: string;
}

type FeaturedProject = Project & { imageUrl: string };

Try it out 🧪

By default, the app uses the profile of the username set in src/constants/defaults.ts

To use a different profile, you can use this URL parameter

/?username={username}

Development 💻

This project was bootstrapped with Create React App

# install dependencies
$ npm install

# run the app in development
$ npm start

# generate GraphQL code
$ npm run gen

# build the app for production
$ npm run build

You need to generate a GitHub key to use the GraphQL API. Add this key as an environment variable REACT_APP_GITHUB_KEY in a .env file that needs to be created at the project's root directory