How I Created My Portfolio: From Thought Process To Deployment.
Tags: showdev, tutorial, webdev, react
Published: 2020-09-11 08:08:59

It had always been in my bucket list to have a portfolio before entering the corporate world and I am glad to share that around a month ago that task has been completed🎉.

You can check my portfolio at **[https://prafulla.tech](https://prafulla.tech)**.

In this post, I would like to share my journey from thought process to deployment.

I would break down the entire process in the following section
1. [Planning & Design](#planning-amp-design)
2. [Project Strucutre](#project-structure)
3. [Optimization](#optimization)
4. [Deployment](#deployment)

# Planning & Design

In this phase, I have used a browser-based design & prototype tool **[Figma](https://www.figma.com/)**. Other tools like Adobe XD, Sketch, etc would also work.

This is the Figma planning board for my portfolio.
![Figma Planning Board](https://dev-to-uploads.s3.amazonaws.com/i/xqrbg4vqiow1dt71yfxb.png)

The reason why I have put the planning & designing phase on a single page is that it makes implementing thoughts into actions easier.

The planning phase consists of two steps:
#### Objectives 

Writing down basic requirements expected out of the portfolio helps in generating a stronger purpose & makes one think twice if the implemented design & content will fulfill them.

**Example:-** 
![Objectives](https://dev-to-uploads.s3.amazonaws.com/i/4w8fn1ucv9ltxjx5m4gj.png)

#### References

Before directly jumping into development & design, it's better to refer some sample websites and list out some idea's you like about them.

You can find reference websites easily by simply searching
`Top portfolio websites in <xyz> field`.

Following are some of the portfolios I referred:
* [saurabhdaware.in](https://saurabhdaware.in/)
* [rleonardi.com](http://www.rleonardi.com/)

Make a note of features that you feel you must have in your portfolio.
**Example:-** 
![References](https://dev-to-uploads.s3.amazonaws.com/i/htx0kdcnmhko6qgqyjhb.png)

#### Designing Phase

This is the phase where I put the visualized design into action.

I put my design in the following format for every page/section.
`Requirements`
`Light Mode Mobile & Desktop View`
`Dark Mode Mobile & Desktop View`

**Example:-**

![Design](https://dev-to-uploads.s3.amazonaws.com/i/3m2iqr2jksutxlv1qq7r.png)

The Requirement specifies the components which I feel should be present in this page/section.

Putting requirements besides section designs helps find creative ways to implement the requirement and also reduces the chances of missing out putting important details.

# Project Structure

In this section, I would like to talk more about the tech stack I have used & the way I have organized my code.

I have used react.js to create my portfolio since I had just started learning about javascript frameworks at that point in time. 

My portfolio is totally static with no back-end requirement, hence there was no need to implement complex state management, database connectivity, etc.

I have used SASS, which is a CSS Preprocessor which makes styling components more flexible.

**Stack Used**
- React.js [Learn More](https://reactjs.org/)
- SASS (For Styling) [Learn More](https://sass-lang.com/)

Since I wanted a single page application(SPA), there was no need to even implement a react-router.

**File Structure**
```bash
.
├── src
    ├──📂components
         ├──📂about
              ├── 📄About.scss
              ├── 📄About.js
         ├──📂footer
         ├──📂....(Other Components)

│   └──📂services (APIs)  
|   └──📄App.js (Root App) 
|   └──📄index.js
|   └──📄_variables.scss (Variables) 
```

In my codebase, every page/section of portfolio is **React Class Based Component** stored in components directory with its respective style file.

**📄App.js**
It is a root level component which consists of all the components in the desired order. Here is a rough template of my App.js

```js
// Module Imports

class App extends React.Component {
  constructor(props){
    super(props);
    let theme = localStorage.getItem("theme");
    // Switch Theme as per time Logic

  }

  componentDidMount(){
    // Console Log Messages
  }
  changeTheme = (theme)=>{
    // Change Theme Helper Function
  }
  render(){
    // * Render the components as a SPA
    return <div className={'App app-'+this.state.theme}>
          <ThemeToggler theme={this.state.theme} changeTheme={this.changeTheme}></ThemeToggler>
          <NavWidget theme={this.state.theme}></NavWidget>
          <Landing theme={this.state.theme}></Landing>
          <Projects theme={this.state.theme}></Projects>
          <About theme={this.state.theme}></About>
          <Skills theme={this.state.theme}></Skills>
          <Hobbies theme={this.state.theme}></Hobbies>
          <Footer theme={this.state.theme}></Footer>
      </div>;
  }
}

export default App;
```

The **📂services** directory consists of helper methods which call the backend APIs needed (For example I use DEV's API to fetch my articles and display it on my portfolio)

**📄_variables.scss** 
It is a SASS file which consist of color combinations & other helpful variables that can be imported in other styles to make them more reusable.
**Example**
```scss
 // Text Colors
  $lightPrimaryText:#3F3D56;
  $darkPrimaryText:#FAFAFA;
  $darkSecondaryColor:#FDCA13;
  $lightSecondaryColor:#66BB6A;
  $lightTextColorGray:#828282;
  $darkTextColorBlue:#0d47a1;
  // Container Colors
  $lightContainerColor:#FFFFFF;
  $darkContainerColor:#202D36;
  $maxWidth: 800px;
```

The main idea here is to **Define things once, call multiple times**

# Optimization

**_Don't think your portfolio is good enough? How do you benchmark it?_**

There are some of the tools which help you benchmark your websites with different parameters:
* [web.dev](http://web.dev/) 
* [gtmetrix.com](https://gtmetrix.com/)
* [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/)

These sites will benchmark your websites & will also provide a detailed report to help you make them better.

**Example**
![Report](https://dev-to-uploads.s3.amazonaws.com/i/p91xv9dl55tzqxk6w24q.png)

Following are some of the steps which I found helpful to increase my SEO and Performance:

 * Use Content Delivery Network (CDN) to serve static assets (I use [Cloudinary](http://cloudinary.com/)) 
 * Half of the SEO is meta tags (keywords, description, title, favicon, open-graph tags, etc) and the other half is content (make sure to include content related to keywords).
 * Minify CSS & JS Files (You will find various tools online to do so)
 * Lazy Load Images/Videos
 * Use Compressed File Formats (Example **.webp** for images)
 * Use plugins to check color contrasts (Check [this](https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker) for Figma)
 * Have a xml sitemap, submit sitemap to google.


# Deployment

This is the last phase which consists of hosting your websites.

Following are some the free hosting providers 
* [Netlify](https://www.netlify.com/) (Provides free SSL)
* [Firebase hosting](https://firebase.google.com/docs/hosting) (Provides free SSL)
* [000webhost](https://in.000webhost.com/)
* [Heroku](https://www.heroku.com/) (One of the most popular to host full stack applications with both a client & a server) 

Following are some of the widely used paid providers
* [GoDaddy](https://in.godaddy.com/)
* [Digital Ocean](https://www.digitalocean.com/)

I use Netlify & Heroku mostly because it is easier to integrate with GitHub's Continuous Integration & Deployment.

# 💖 Feel free to share your portfolios and any other helpful resources in the comments.