Building My Own Design Portfolio

I put in a great deal of work to make my portfolio. There has been many trials and tribulations that I went through to make it happen. This is a quick walkthrough of what it took to make my portfolio. The first step I made was creating a mood board. This contained inspirations to get me on the right track.

Mood Board

My mood board contained many different assets that helped identify the style of my portfolio. I added on and subtracted a good amount of concepts from the mood board I created. This is the original mood board:

Mood board created in the web development of


When creating a new website, I find it to be a much easier process to wireframe first. The proper planning is crucial when it is early in the stage of the design process. In this phase, I create a wireframe to consider the overall structure of the website. This is the wireframe I created:

Design portfolio wireframe geared towards flat design.

Web Development

I created my website using WordPress with a child theme from the parent, Divi.  I made a good amount of customizations based off of my original mockups. I also found the plugin called, Divi Booster, to be very useful. Granted, I could have made a large amount of the adjustments myself, but I feel like the convenience of this plugin very useful. The best part is that I am not entirely relying on this plugin to the point where if a client needed an edit, I wouldn’t be tied down to limited customization.

Web Animation

I wanted to make my design portfolio a fun place to land on. This is why I felt that a nice little animation on the homepage would be perfect for anyone visiting. Since design solutions are somewhat of a journey, I decided to relate my first read to space exploration. All you see on the first page is a five second video being looped over and over again. Here is a screenshot of the After Effects file:

Rocket ship animation in After Effects. A first read animation for my design portfolio.

Portfolio Pieces

This one right here is probably one of the most important parts of an online portfolio. Examples of work should be the most important aspect and should be displayed at the utmost quality. This is why every project page in my portfolio takes over the first read. Although, this could be considered a bad practice on SEO standards, I am willing to take the sacrifice to bring my work front and center. Here is an example of one of the projects on my portfolio:

Screenshot of Schneider Electric Trade Show Design.

Wrapping it up

There is a good amount that goes into the creation of an online portfolio. I went through a great deal of trial and error and learned a great deal about myself and WordPress development. I am very happy with what I made and I am even more happy that I am just scratching the surface of what I will do in the future.

The Icing on The Cake

One more thing, how about an icon if anyone saves my website to their phone? I found this was a very easy process for any WordPress developer out there. This is what I am talking about:

screengrab from a Samsung Edge Plus. WordPress website icon.

This is simple, all you have to do is upload an image in the WordPress dashboard under Appearance > Customize > “Site Identity.” Thanks for reading through my process of my design portfolio creation!

Share This