How to make a simple portfolio website

Walkthroughs • May 22, 2020

Creating your own portfolio is beneficial in many ways. With a good portfolio you can show off your skills while showcasing your creativity.

I created my portfolio in three days (around twenty hours). I will guide through the process of creating the website. You can see the website here.

TLDR; Source: Github

First thing I did was listing down sections and pages I was hoping to put. I went with the home page, about me page and contact me page. (I added a blog, but that comes later). My home page has the following sections except header and footer.

Hero section
Introduction
Experiences
Skills
Projects
Contact information

The About me page contains simple text. Contact me page has two sections. Description and contact form. For this template I left form action blank as you can decide how to manage the form action.

Then I sketched how those sections were going to line up on the page. I like to have a constant color scheme. So I selected four colors. Which are the main colors of Dota 2. I just went with two font families as I like to keep a minimal look and feel.

Colors:

Fonts:

Allerta
Inconsolata

Finally I decided the tech stack I am going to use. You can see the details below.

Main stack:

React.js with react routes, axios and moment.
Bootstrap as react-bootstrap.
FontAwesome for icons.
Animate on scroll for animations.
SCSS for css.

I didn’t use any state management library or framework as the functionalities of this website are not that much complicated.

You can get the files from above github. I will guide what each file does and the purpose of each directory.

File structure:

│   .gitignore
│   package.json
│   README.md
│   yarn.lock
│
├───public
│   │   favicon.ico
│   │   index.html
│   │   logo192.png
│   │   logo512.png
│   │   manifest.json
│   │   robots.txt
│   │
│   └───assets
│       └───images
│               logo-small.png
│               logo.png
│               profile-reduced.jpg
│
└───src
    │   App.js
    │   App.test.js
    │   index.js
    │   serviceWorker.js
    │   setupTests.js
    │
    ├───assets
    │   └───css
    │    	   style.css
    │    	   style.css.map
    │    	   style.scss
    │
    ├───Data
    │       Companies.js
    │       Projects.js
    │       Skills.js
    │
    └───View
        ├───Page
        │       About.js
        │       Contact.js
        │       Home.js
        │
        └───Partials
            │   ContactMe.js
            │   Footer.js
            │   Header.js
            │
            ├───Project
            │       SingleProject.js
            │
            ├───SkillBar
            │       SkillBarItem.js
            │
            └───Timeline
                    TimelineBadge.js
                    TimelineItem.js
                    TimelineRow.js

This is a react app created with create-react-app. I used yarn as my package manager.

The public directory holds the default react files and the images I used for the website.

The src directory holds all the default source I wrote. First of all I added the style.scss to the assets directory inside src, and imported the generated css file in App.js

Data directory contains the data objects of the website. It does not require a back end system as the website is not going to hold a lot of information and it won't be updated frequently.

Inside the view directory there are some sub directories. Page takes care of the skeleton of the home, about and contact pages.

Partials are commonly used components such as header, footer and contact section. The sub directories inside the Partials are related to templates in the home page.

The Project has a single project item which is iterated and called on the home page.