I finally built my own Personal Portfolio Website and it feels so good.
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.
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.
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!