https://github.com/aabuhijleh/better-github-profile
Use your GitHub profile to create a personal website
https://github.com/aabuhijleh/better-github-profile
github graphql profile react readme styled-components
Last synced: 7 months ago
JSON representation
Use your GitHub profile to create a personal website
- Host: GitHub
- URL: https://github.com/aabuhijleh/better-github-profile
- Owner: aabuhijleh
- License: mit
- Created: 2020-12-09T13:34:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T22:48:39.000Z (over 1 year ago)
- Last Synced: 2025-04-12T20:12:09.817Z (10 months ago)
- Topics: github, graphql, profile, react, readme, styled-components
- Language: TypeScript
- Homepage: https://github.aabuhijleh.com
- Size: 4.15 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Better GitHub Profile
> Use your GitHub profile to create a personal website
[Demo page](https://www.aabuhijleh.com/)
## How it works? 🙋♀️
The content of this website is generated dynamically using the [GitHub GraphQL API](https://docs.github.com/en/graphql) which is used to download your [profile README.md](https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme) and your [user data](https://docs.github.com/en/graphql/reference/objects#user)
An extra file `extend.json` is required to be in your profile readme repository
[See this example](https://github.com/aabuhijleh/aabuhijleh/blob/main/extend.json)
```ts
// 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
```plaintext
/?username={username}
```
## Development 💻
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
```sh
# 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](https://docs.github.com/en/graphql/guides/forming-calls-with-graphql#authenticating-with-graphql) 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