Build an Awesome Developer Portfolio Website Using Gatsby and gitconnected API

For every developer a portfolio is essential. That's the opportunity to display your projects and programming languages and libraries you’re passionate about using.

I am going to create a working portfolio website ready for continuous deployment, with the power to be rebuilt when content changes are made. There are tons of tools and services to consider, but one that currently peak my interest is Gatsby a blazing fast modern site generator for React, one of the web’s most popular JavaScript frameworks.

It can be used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. Gatsby makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.

Starters & templates

There are a sufficient amount of GatsbyJs Starter repositories and templates that is as simple as cloning and changing the content of them. In this way you can completely develop websites super quickly and efficient. The documentation is very friendly, and I would recommend you starting from there
Gatsby Starter Library.

Get Started

1. Create a Gatsby site

Use the Gatsby CLI to create a new site, if you are using starters specify and install starter locally

gatsby new <project-name> <starter-url>

2. Start developing

Navigate into your new site's directory and start it up.

cd project-name
gatsby develop

3. Open the code and start customizing!

Taking the default Gatsby starter as an example and looking through some of the most important files in the repository (repo) will give you a clearer picture of how the various parts of your Gatsby site work together.

A quick look at the top-level files and directories you'll see in a this project:

/node_modules:

This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed.

/public:

Automatically generated. The output of the build process will be exposed inside this folder. Should be added to the .gitignore file if not added already.

/src:

This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.

.gitignore:

This file tells git which files it should not track / not maintain a version history for.

package-lock.json:

(See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).

package.json:

A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

README.md:

A text file containing useful reference information about your project.

Start customizing

Once you have a React app up and running all you will have to do now is replace the "public" and "src" folders of your newly built app. Have in mind if you want for example to replace the images with your own YOU MUST KEEP THE SAME NAMES ON THE IMAGES. Your site is now running at http://localhost:8000, by default.

When you're all done, run npm start again and you'll see your new personal resume website! Simple as that. Congratulations!

API for portfolio website

Many of us want to build a web portfolio showcasing our skills and work effectively. To keep it up to date I used gitconnected, a platform for developers and software engineers to connect, collaborate, and learn. That way i build and share personal projects by importing repositories from GitHub.

It's incredibly simple. You can generate Resume with just a few clicks and share anywhere on your portfolio website or it can be downloaded as a PDF.

There is no "pain" of deploying and rebuilding portfolio website to make changes as data is available through the API endpoint and dynamically updates the content.

As easy as those steps:

1. Sign up with 1 click using GitHub OAuth
2. Add your details in your profile
3. View your resume geneator /ivanadokic/resume
4. Access your API with your username /v1/portfolio/ivanadokic

My portfolio website

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!