[First Site] Passion Was Here: Portfolio


This was designed during my time with Wix Playground Academy (June 2021).
We were to reinvent my existing personal portfolio into an online presence that uniquely set myself apart —It was also my first time using Editor X .

The process was mostly planned through Miro board with feedback coming from different mentors and a different set of peers each week through Slack.

To put it briefly over the course of a month our process was like this:

  1. Define your personal brand : establish 5 main values that come from your personal interests: movies, music, fashion, food, architecture.

  2. Acquire references that you imagine your site would leverage: typography, layout, interactions, color palettes, mockups (content).

  3. Find your structure by wireframing and frankensteining so we can get a better idea visually without wasting time “pushing pixels.”

  4. With your select-few thought-out / wireframed mockups — start designing .

  5. Move to Editor X and do your best!

My values were found to be: blocks, bold, grunge, pops-of-color, brutalism
We found these by highlighting the most common words I associated across each category.

I was really loose with my wireframes and my mentor highlighted the strongest one: my head tacked onto a “body of work (last one, bottom-right).”

The frankensteins of “head + body” concept got simplified to a simple face and accordion (column 1, row 3, bottom-left corner) . Through the frankenstein-method, I found it extremely difficult to make the initial idea work which would seem heartbreaking but by the end I still came out happy.

I sort of continued to frankenstein but with my own assets: custom art, texture, illustrations, and font choices, onto my boilerplate and then we end up with the final result:


This was my first time using Editor X and going from plan to execution still had its difficulties, but because of a good plan, I got it done and I personally like how it turned out.

Tell me what you think!


Hey @pasionmichael

This is amazing! The steps you took, to first think of how you want to be perceived (your personal brand), styling, getting references (reminds me of some Sex Pistols album covers) and then thinking of how it would be structured, is the way to go.

The brainstorming shared is great to understand your thinking process and ultimately, the result is absolutely great. Well done again :slight_smile:

1 Like

Wow this is amazing. Love the layout and scroll behavior! Thanks so much for sharing your process with us :ok_hand:


Thank you so much! :sparkles::blush::sparkles:

Anytime! Will share more in the future! It was fun to use! :hugs:

Nice! :sunglasses::sparkles: