How to make your personal website in Angular

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:

  1. So I created a five components for this page and these are:
    • Header
    • Skills
    • About
    • Contact
    • Footer
  2. 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.
  3. For the fonts, I used Google fonts – Montserrat and Lato. They are imported in style.scss.
  4. For the logo and image, I used an illustratration of myself done by my friend 10 years ago!
  5. I also used `ngx-page-scroll-core` package for the Page Scrolling feature, MDB has this feature as well but for ‘PRO’ ony.
  6. For the skills data, I just stored them in the typescript file, to optimise my HTML
  7. 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.
  8. 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.
  9. Then when completed, I deployed them in Firebase. Here is my tutorial on how to deploy Angular Project to Firebase
  10. 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
  11. 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.

Buy Me A Coffee

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress.com.

Up ↑

%d bloggers like this: