GitHub GraphQL API Portfolio website

Table of Contents

Description

A portfolio website built with the GitHub GraphQL. You can see all GitHub projects of a person and see more details about it.

Entree

portfolio

Details

portfoliodetails

Features

This is app is a portfolio site where you can see all your GitHub repositories. You see your repository with a description on the homepage and the languages the code consists of. You have two buttons, one for the live demo and one to go to a detail page. On the detail page, you can read the README of that project. With the button at the top, you can pick a background color.

Paid attention

While building this project, we paid extra attention that the site would be supported on all devices. We did this by adding support tags in our code.

Example

@supports (display: flex) {
  header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em 4em;
  }
}

Installation

Clone this repository

https://github.com/ROEL2407/Github-GraphQL-API-portfolio.git

Install the packages

npm install

Start the app

npm start

Live Demo

The website can be viewed live on here

Checklist

  • Show repo's
  • Detail of repo's
  • Language('s) of repo's
  • README in detail page displayed
  • Change color of webpage
  • Save changed color in localstorage
  • Contact page with form
  • About page
  • Page with a form to fill the about page
  • Login for admin purposes

Commits

In this repo we will commit our work. To make this more visible for ourselves and others, we've added little headers to the commit titles:

  • Created = a file is created
  • Updated = updated a file or piece of code
  • Delete = deleted a file

Authors

Made by Marloes Tacx & Roel Komen

Resources

Credits

  • Our teachers at the minor Web Development.
  • Our fellow students who've helped us to resolve some problems and learn us new types of tricks.
  • Stack Overflow for giving us the answers that we could tweak or that helped us understand our problem in the code better.

License

Usage is provided under the MIT License. See LICENSE for the full details.