So I created my personal website in 2 days, without spending a penny, and not spending too much time on it using Angular, MDBoostrap and Firebase. You can visit it here – portfolio.aralovelace.dev. It is just a simple personal web page that is a Single Progressive App and can be hosted easily in Firebase.
So let me breakdown to you the structure of the website using Angular:
- So I created a five components for this page and these are:
- Header
- Skills
- About
- Contact
- Footer
- For the CSS Framework, instead of just using Bootstrap I used Angular MDBootstrap so it is more sleek and it is easy to use. I used the free version.
- For the fonts, I used Google fonts – Montserrat and Lato. They are imported in style.scss.
- For the logo and image, I used an illustratration of myself done by my friend 10 years ago!
- I also used `ngx-page-scroll-core` package for the Page Scrolling feature, MDB has this feature as well but for ‘PRO’ ony.
- For the skills data, I just stored them in the typescript file, to optimise my HTML
- On each of the skills images, it has a pop up where it describes the languages plus portfolio links. If I have the opportunity, I will add links to the ones that I have done and add all of them in the modals.
- For the contact form, when the user hits submit, the data will be stored in the Firebase Database. since sending an email function requires a backend API, and I want to keep things simple.
- Then when completed, I deployed them in Firebase. Here is my tutorial on how to deploy Angular Project to Firebase
- Since I have aralovelace.dev domain, I wanted to add a custom domain of portfolio.aralovelace.dev for this page, it’s so simple – here is my tutorial on How to add custom domain in Firebase Hosting
- And you are done!
It is so quick! Especially when you use CSS Frameworks like MDBootstrap and with firebase it is easy to deploy with zero cost.
Leave a Reply