Portfolio Design + Development Process

Software Engineer, UX Designer, Entrepenuer

I created a Portfolio because I wanted to showcase the variety in programming work. I also wanted to emphasize talents outside of programming such as marketing and design and how I’ve interleaved them with my coding projects to create a unique product.


First, I did an informal competitive analysis of 10 portfolios that resonated with me and from there I got inspirations for what I wanted my portfolio to look like. The ones I drew the most inspiration from are show down below!

Problem & Solution

I was overwhelmed with all the variety in portfolios and it was hard to narrow down my vision so that I didn’t create something incoherent. I was also limited in my ability to code in HTML & CSS as I’ve only exposed myself to programming languages such as C++ and Java. The problem was:

How am I to make a unique portfolio that genuinely represents me and highlights my skills with the limited experience I had in web design and development?

After some thought I decided to go with the minimalist approach, less is more. It would keeps employers focused on what my qualifications were since my strong suits were in languages other than web. I also decided to add in pictures of my past physical creations (i.e. jewelry, photogrpahy, etc.) in hopes to draw attention to my ability to design. Although I am a novice in web languages, my ability to brand, market, and innovate, shows promise for my growth in UI/UX and implementing them once I’ve got a grasp on the tools.


The first of my designs were done on paper. I had yet to use online prototyping tools so I went with what I knew and made a sketch! I simplified the content on every page so that each one would have one focus sending a concise message. I had my About me, which gave my introduction, a Projects page where I listed my three top projects. Each project filled the screen so that it was the center of focus. I used minimal but key words to convey what my role was and used a picture to give an idea on what the finished product looks like. If my employer were enticed to find out more, I made a link available (bringing you to this page here! ) so they could get in on all the details! I felt this was best to reduce information overload and ease navigation through my page.


The technologies I used to develop were:

  • HTML
  • CSS
  • Twitter Bootstrap
  • Brackets — text editor


There’s still a lot of things I want to try in designing my personal porfolio. I’m intend to improve it as I gain more knowledge but for now, I am proud of what I’ve been able to accomplish with what little knowledge I had started with! Stay tuned for more to come!