How I built my first portfolio website using just Angular
Tags: showdev, angular, portfolio, website
Published: 2020-07-10 08:54:09



Finally after over a month of lost weekends, long evenings and some *&%#@ from my beautiful wife! It's finally ready for everyone's eyes.. My first [portfolio](https://vikramkadiam.netlify.app) website, completely built with [#angular](https://angular.io/) and hosted on [#netlify](https://www.netlify.com/).

>[vikramkadiam.netlify.app](vikramkadiam.netlify.app)

---

#### TL;DR - ["How did I build?"](#how-did-i-build)

### Where did it start?

Somewhere around in May 2020, where we were almost two months into COVID-19 lockdown, one day while surfing twitter I came across [#100DaysOfCode](https://twitter.com/search?q=%23100DaysOfCode&src=typeahead_click) and saw some amazing stuff developed by programmers across the world.At that very moment I thought why not build something not just for this twitter challenge but for fun and utilise the time I've at my dispose after office hours.

This gave a kick to my long dream of having my own personal site like an online resume or portfolio.Then I started looking for some inspiration, that's when I came across @jcoelho post.

{% link https://dev.to/jcoelho/personal-website-template-an-open-source-project-5dgl %}

This gave me a lot of inspiration in designing layout and concepts around my site.Thanks to Jose.

Another such inspirational site is from @nicolalc, check it [here](https://dev.to/nicolalc/i-m-creating-an-entire-web-os-as-my-personal-website-for-2021-hc4).

### How did I design?

The site design & layout is super simple with single page encapsulating all necessary details.
1. Home banner
2. About section
3. Technical skills section
4. Work Experience section
5. Blogposts section

Also few little items like Theming, Material design, Mat Icons, Dynamic data from API's etc.,

### How did I build?

Agenda was simple, I wanted my app to be responsive(RWD), progressive web app(PWA), material design, lightening fast, user friendly.

I was also strongly determined to build just using Angular framework libraries and strictly no additional(3rd party) libraries for any kind of functionality.Below are the list of things I used for building all kinds of functionalities in my site.

```
 @angular/cdk                      7.3.7
 @angular/cli                      7.3.10
 @angular/flex-layout              7.0.0-beta.24
 @angular/material                 7.3.7
 @angular/pwa                      0.12.4
```

> P.S - Yes, I could've used Angular 9/10 but when I started building my app I didn't realise which version my local was running until I dived in ;)

The whole data(almost 97%) displayed on the site is dynamic and built on top of [JSON schema](https://jsonresume.org/schema/) for resume details.These are fetched via [gitconnected.com](https://gitconnected.com/) API.

Blogs are from Wordpress as I used to write blogs there, WP has it's own [API](https://developer.wordpress.com/docs/api/console/) to return [ngcoderscope.wordpress.com](https://ngcoderscope.wordpress.com/) blogposts data.

### Performance/Lighthouse score?

Yea like many devs out there, even I was striving for perfect lighthouse score.I've spent most of the last few weeks on tweaking those lighthouse recommendations.As of now the site has below scores.

I used [lighthouse-metrics](https://lighthouse-metrics.com/) and Google [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/).Both give out different results depending on lighthouse different available versions (5.6/6.0/6.1.0).

>lighthouse-metrics - Mobile

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/klmp5du8bww1j27v1zsr.png)

>PageSpeed Insights

* Mobile
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w11x54wjh5elqif3z53c.png)

* Desktop
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gc0pimybbi9ng7tt4zux.png)


### What's next?

* Upgrade from Angular v7 to v10.
* Improve site load performance a.k.a Lighthouse-100.
* Integrate dev.to posts into blogposts section of the site.
* Write more about different components of the site and how I built them.
* Fix bugs if any and implement any feedback/suggestions from you guys.

This is it for this post, it already turned out to be a 3-4 min read for you guys :D Let me know what you think about my site and comment your feedback/suggestions/criticism or anything.

>[vikramkadiam.netlify.app](vikramkadiam.netlify.app)

Are you interested in development journey & process involved in build this Angular app ? DM me [@vikramKadiam](https://twitter.com/vikramKadiam) or Comment below what would you like to know about, I'll include in my next post.Cheers!!

----------------------------

Github repo  {% github https://github.com/KVikram/mybrand no-readme %}