Portfolio Design



The problem I faced was to decide what to put on my portfolio. As a student majoring in computer science, I wished to showcase my strong programming skill. However, I just had limited industry experience, so I had to figure out a way to emphasize my coding skill.


  • Projects Section

Detail of the projects can definitely help me showcase my coding skill. The development process and the technique involved will explain my thinking-process, the skill-set I had and the role I played in a team.

However, I had done lots of school projects before. Should I list most of them on my portfolio? Maybe not. Instead of listing tons of projects on the page and just used a few words to explain each of them, I considered that it would be better for me to choose the most representative three projects and explained them in depth. In this way, I can provide more detail about the projects and leave employers a stronger impression of what kind I person I am.

I chose to list two of my mobile app projects because I want to showcase my proficient programming skill in iOS and Android development and express my strong passion towards mobile development.

  • Work Experience Section

I would also emphasize my work experience, including my tutoring experience and my internship experience. I believe those experience can reflect my passion towards working in real-world. I planned to use several sentences to explain each of my job, in order to help employers understand my work and my skill-set better.


I created several sketches for possible layouts for each section, and it was hard for me to decide which to choose. Here are some of my sketches and explanation of my decisions.


I finally chose to use the second layout because I wanted to make more emphasis to my name and title. The second layout can also make my portfolio more minimalistic.

About Section

In this section, I would introduce myself briefly and put my photo on it. I would introduce my basic information and talk about my passion. In this part would not talk about my technical skill as the following sections will talk about it in depth. I planned keep this part short but at the same time give the user a general idea of what kind of person I am.

Skills / Background

In this section, I planned to explain my technical background. I finally chose to use the second layout because it divides the sections into three parts and therefore, I could talk about three different things about my background(i.e. education , skills and languages). Also, placing three parts into the same row along with some icons makes the design more minimalistic and visually appealing.

Work Experience

I finally chose to use the bubbles to represent each experience. This is because it is more creative and more visually appealing.


I decided to use the second layout as I wanted to put some caption under the project image. In this way, the user will have the idea of what he/she should expect after clicking on the image.

Also, I chose to use pink as the main color of my portfolio, as I wished to make it more childish and feminine :)


I used Html, CSS, and bootstrap to implement my design. As a beginner in web programming, I watched lots of Youtube video to learn those technologies better. I referred to some bootstrap templates as well because they were written in a more professional way and I could learn a lot from using and reading their code. I also used Html and CSS to arrange the layouts and customize the design of the site.





I learned a lot from creating this portfolio. The development process allowed me to study for the layouts of websites and greatly helped me strengthen my web programming skill.