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 website, completely built with #angular and hosted on #netlify.
TL;DR - "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 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.
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.
How did I design?
The site design & layout is super simple with single page encapsulating all necessary details.
- Home banner
- About section
- Technical skills section
- Work Experience section
- 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 for resume details.These are fetched via gitconnected.com API.
Blogs are from Wordpress as I used to write blogs there, WP has it's own API to return 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 and Google PageSpeed Insights.Both give out different results depending on lighthouse different available versions (5.6/6.0/6.1.0).
lighthouse-metrics - Mobile
PageSpeed Insights
Mobile
Desktop
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.
Are you interested in development journey & process involved in build this Angular app ? DM me @vikramKadiam or Comment below what would you like to know about, I'll include in my next post.Cheers!!
Github repo
Top comments (1)
Awesome