I finally built my own Personal Portfolio Website and it feels so good.

Early design of my Blog page

It has been 6 months since I started my first journey to becoming a web developer. Hundreds of hours watching videos about how people can create such website and internet magic, also hundreds of hours scratching my head trying to solve all the challenges in freeCodeCamp, asking questions about “Why does this div element won’t be at full height?” or even “Why does Javascript’s and Java return statement behave differently in forEach?”, I finally ready to build my own personal website.

I started to look around people’s personal website, slowly scanning all the things that look nice, so I can learn from it, hopefully. I browse through /r/webdev every day, jumping from post to post, hoping that there is a post that explains what needs to be on your portfolio website, and what not. And there it is, I’m ready to plan my website.

The Purpose and Goals

Truthfully, the first time I am thinking to make my own personal website is so I can be a lot cooler than my friends in college. How cool can it be when you have a professional yet friendly looking site to show off to your friends, proving that you are really studying for the future. After a while, I realize that looking cool is just the bonus. I want to have a job. I want to be paid for my hard earned skills. So in the end, I conclude my purposes of making this website, which is:

  • To get a job.
  • To show what I am capable of to my future employer, be it Coding, Designing, or Writing.
  • To learn more by doing a real thing.
  • To build a better professional looking persona.
  • To look cool. Even if my friends do not really care.

The Tech Stack

I have learned a lot in the couple months before. I came from someone who is a game developer wannabe, to someone who wants to own the biggest web-app startup ever. I have learned React and Redux to be added to my weaponry. I even learned some basic backend development to help me build my own fun projects later. Just before I am planning the tech stack to be used for my own personal website, I am wondering my biggest question ever.

Will ReactJS be an overkill for my personal portfolio website?

I have asked around Reddit, hoping to find an answer. And finally, there is one answer that I still remember, even now.

Overkill in personal projects isn’t a problem, it’s something to consider for enterprise projects.

And that’s it, my technology stacks are concluded:

  • I will use ReactJS for my website, to make it looks more like of a Single Page Application.
  • I will use minimal to no CSS frameworks, with no CSS pre-processor.
  • I will use a free serverless hosting, such as Firebase.
  • I will have my blog post stored somewhere, where it will feed my website using RESTful API.

The Process

If the hardest question of making this website is whether React will an overkill or not, then the second one would be “Does these fonts and colors look good?”. I spent designing most of it at the start before I even write my first line of code. Stylesheet created, and then I finally ready to jump into the code part.

I make my website components by components, page by page, until it slowly builds up to looks more like of a website. Everything goes quite easy when I started making it, especially the Javascript parts, until the time that browser compatibilities errors start kicking in. I swear to god that CSS is harder than Javascript. I can not count on how many hacks I have written to make things look right in Safari or even Firefox, I even wonder if there is even any definition of “looks right” among all of the browsers.

The Result

I finally have a website!

Skipping a couple months of dedication later, which is now, my website is finally almost finished. The first thing that comes to my mind is, I finally have something to show off to my friend! But still, I am very happy that I can finally finish something that I really want. I don’t know if it will look that good for people or not, but the most important thing is I have gained so much from this project, there are so many lessons learned that I think I won’t get if I haven’t done this project, which are:

  • More basic CSS, CSS Grid, and cross-browser compatibility with CSS Grid and Flexbox.
  • Basic designing and typography.
  • Using Contentful’s service to create the backend for a website, in this case, a blog.
  • Workflow management.
  • Hundreds of little coding things, hacks, that I can’t keep counting on.
  • And one of the best one is, I have learned my own weakness by making this website.

I believe that website development is an iterative process, and my website is far from finished. So far, I am proud of my first personal portfolio website, and I think it will last a couple months, or even year before I redesign it iteratively.

There are some things that I need to learn more, to be my goal in near-future, which are:

  • Create a high-quality CSS code.
  • Start using CSS Preprocessor such as Sass into real projects.
  • More on design consistency.

That’s it, folks. If you’re kind enough, please kindly visit and browse my website, read my other posts, or drop your feedbacks or two cents to my Contact page. Thank you for reading this!

TL; DR

After learning for 6 months, I finally created my own personal website. Using the tech stack of basic HTML, CSS without any frameworks, Javascript and React. I design my own website, made it responsive and looks good in almost all browsers, even the old one, using CSS Grid if supported, or Flexbox. I feel proud with my first ever personal portfolio website, many lessons are learned, and I am eager to learn more!

Check out my website! or Check out the repository of this project!