2020 Portfolio
The portfolio is a fate for every designer and artist. I first made my portfolio eight years ago in high school. Back then, when I was learning the basics of HTML and CSS, the responsive design was not a requirement. But now, time changed. Everything must be functional and look beautiful on every screen and different platforms.
When I first started to learn code, I used Dreamweaver. Until a couple of years, I thought the Dreamweaver was the only way to see the code in live. But I was wrong.
There are many ways to code. One of my friends, who’s a back-end developer, said, “Code is like a language. HTML, Java, Python, C++, and any other types of codes are like different grammar. Once you understand the syntax, you can code.”
This is not my case. For me, every time I go back to update my portfolio, I feel like I know nothing. I forget everything that I’ve done in the past. Then I start over and over again. By the way, I don’t like the design and page that I’d design last time.
Here are my past portfolios:
Past portfolios, I wanted to show everything that I’ve done. Literally everything from every class that I took in my undergrads. From introductory course to professional photography. But I didn’t write much about the content. I just showed things I’ve done. Then I realized that it is not a user perspective. People don’t care about what I can do in a variation. They want to know the whole story of the project.
During the winter break, I’ve worked on my portfolio. I update every end of the year to go back and see what I’ve done in the past. Unlike past portfolios, I’ve taken a different route. First, I wrote the content, designed layout on the Sketch, then created any visual components.
Content brainstorm
Based on feedback and articles, I started to focus on Why, how, and what.
- Why did I start this project?
- What are the challenges, and how did I resolve them?
- What is the outcome?
Luckily, I didn’t have to start from the beginning. While I was taking the courses, I knew I was going to use it for my portfolio. I kept all the documents and feedbacks. It was a matter of how I should organize the content as to why, how, and what.
Design layouts
Once I organize all the contents, coming up with the layout and visual component wasn’t tricky. I designed the layout using Sketch. I’ve tried my best to simplify and use lots of negative space to look modern and minimal.
The hero section is mostly center-aligned with one headline and a short subhead. All the other elements below the fold are two columns. It can be either copy on the right or left and image on the side. By using a full-colored background, it differentiates between each section.
Execution
The initial plan was to build a website using Anima plug-in. However, after I designed desktop(1024ppi), tablet(758ppi), and mobile(320ppi) and linked breakpoints, it started to crumble.
The headline was not in the position, and when I make the screen wider, I realized the spacing is different than 1024ppi. Then I added another screen for the desktop (1440ppi).
While I was in a preview mode, there were errors. So, I decided to export the file then make some updates in code. But all the elements were not organized as I’ve planed. They were all crammed in one folder.
My second option was to go back to the Wordpress template that I had last year, but it didn’t work out as I hoped for.
I was trying to avoid writing code from scratch. I told my situation to a friend, and she gave her an HTML template. The template had most of the elements that I’ve wanted. I did not have to start from scratch, and it turns out it looks good as I envisioned.
Conclusion
Overall, I’m satisfied with what I have accomplished. It was a long journey and a lot of struggles. Though, it was worth it.
Please visit ychoidesign.com if you are interested!
Thank you for reading.
