Portfolio Website

This portfolio website which is completely designed and hand-coded by me has experienced many iterations based on experts' suggestions.

·   ·   ·


Every time I use my personal website as my portfolio for my job applications, the interviewers tend to offer some feedback about it such as “I don't know which work is the most important,” “Works should be the most important part of your website,” or “Your category is not clear.” This prompted me to embark on a redesign journey.

This website serves as a part of my job applications, and the interviewers are the users. I collected all the advice I have received, for which I am so grateful because it allowed me to identify the problems and improve my website for the better.

Role: UX/UI Design, Responsive Web Design

Time: 2017/1 - Present

GitHub: yuyuchinglin.github.io (GitHub Page)

·   ·   ·

Qualitative Interviews

When I went to a job interview, I would ask the interviewers about their feelings on and suggestions for my portfolio website in the one-on-one section. These included people aged between 28 and 50 years who were supervisors with technology, design, or management backgrounds. Their responses included the following:

“You did a great job. I can see you take it very seriously. However, there are some suggestions. When I went to the website, I want to see your portfolio, the portfolio should be the most important part.”
- Blockchain tech lead, male, 40 years old

“There are almost ten works on your website. Some of them are design work, and some of them are coding work. The works’ category should be more clear. Besides, I don’t know which is the most important work. You should highlight your favorite work.”
- Project manager, female, 35 years old

“The color scheme on your website doesn’t look nice. I felt a little dirty because your background is not black enough. I think the color should be more clear.”
- Software engineer, male, 30 years old

·   ·   ·

Problems & Solutions

According to the interviews, there are two main problems: One is the works displayed, and the other is the color scheme. My solutions are provided below.

(1) Works:
Instead of putting a lot of information such as introduction, skills, and pictures on my index page, I now only put my works on this page to highlight the importance of the portfolio. I have reduced the number of works to ensure the portfolio’s quality. Furthermore, I have put a filter on my works. If users want to see the coding work, they can use the filter to reveal it.

(2) Color:
For the second version, I wanted it to be professional, elegant, and warm, so I changed my color scheme. To reduce interviewers’ cognitive loading, I used a white background, which is typical for portfolio websites, instead of a black background.

·   ·   ·

GitHub Page

I hand-coded this website and deployed it to the GitHub page. In addition, I host a custom domain on this website. Therefore I can remotely add, commit, or push to the GitHub repository, and my changes will appear on my website.

My portfolio's GitHub repository
·   ·   ·

Google Analytics

I use Google Analytics to track user activity, which provides me with useful data. For example, I can see the time or page the user visited, what country they originate from, and what devices they used. This will give me some inspiration to improve my website.

Google Analytics for my portfolio website
·   ·   ·

Website Version 2 (2019/3-Present)

You are now in the second version of my website, which I have redesigned according to the advice of interviewers. Hope you feel much better now! If you still have some suggestions, please feel free to tell me!

This is my new portfolio website after redesigning.
·   ·   ·

Website Version 1 (2017-2019/3)

This is the first version of my portfolio website. I chose this design because of its classic and elegant façade. However, I need to enhance it further to ensure a user-friendly interface.

This is the first version of my portfolio website.
Up Next