How to automate your portfolio website [Part 1]

  • Automatically display and link my projects from GitHub
  • Automatically display and link my blogs from Hashnode

The steps I took

The GitHub API

Preparing the fetch request

All the work is happening inside a component

created() { fetch('https://api.github.com/users/ahmedaltaai/repos') .then( res.json()) .then( console.log(data) }) }

The response

Afterwards

  • Name
  • Language
  • Description
  • Repository URL
  • URL of the project for live preview

Storing the response into an array

Populating the empty array which was created prior

created() { fetch('https://api.github.com/users/ahmedaltaai/repos') .then( res.json()) .then( this.repos = data }) }

Looping over the repos

This is how my component looks like. I will spare the styling which you can find in my GitHub repo

This is how it looks like in the browser

This is how to do it

The result of the if-statement

The solution: computed properties

The new outcome with computed properties

example

Say no more

  • Go to the desired repository
  • Click the cog icon

Congratulations on automating your projects section on your portfolio homepage.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store