This was a very personal project. Kayllon, my brother, is a successful electrical engineer. However, as he was about to become a father, he temporarily pivoted to working as a front-end developer so he could work remotely and be present for such an important moment.
As he was learning the ins-and-outs of web development, he wanted a portfolio for himself to showcase his skills and land a new job. Thus, he asked me to design his portfolio for him to code and publish and sort of simulate what it would be like working with a product designer. However, I knew going into this project I had some restrictions to keep in mind.
First was that he was a beginner in this new role, so the design had to be simple and yet offer interesting challenges to overcome. Secondly, as is the norm, the website should not only be responsive to different screen sizes, but also adapt to a mobile or tablet layout. And lastly, all he had was the projects developed throughout his course, so I had to find a way to highlight them without letting them feel too simplistic (we also agreed to pretend he made my website as a bonus project, but don’t tell anyone).
I started out benchmarking other web development portfolios. Neal.fun was a masterclass in the field, but I had to start smaller. Eventually, I was inspired by the simplicity and effectiveness in Aayush Mishra‘s portfolio and went from there, adapting to our current reality.
I kept showing him my findings and process, initially aiming for simple elements that were easier to implement, but he pushed me to try to find a middle ground between being simple and challenging and raising the ceiling I started with. So I pressed myself to invest a bit more time into motion design to achieve something he could improve his skills with while making his portfolio.
After wrapping it all up, I helped him refine his coding to recreate more faithfully the prototype I made. In the end, we achieved all he could hope for: simulating the relationship between product designer and developer, from benchmarking to feature definition and all the way to handoff.
The website is offline nowadays, since he’s back on the road working on Electrical Engineering. But you can view the prototype itself on the link below.