How I got around to building my design portfolio website from scratch
At the start of the pandemic in 2020, I finally had no excuse to delay the biggest goal I set for myself a year ago: launch my design portfolio hand-coded and designed the way I always imagined.
My interest in web development started to grow as I joined an agency a while back to work on designing e-commerce stores for B2B businesses. Since I was the only designer in the entire organization and one that was also client-facing to consult on certain UX aspects, I got involved in projects early on and got the chance to collaborate with all departments, especially front-end. Development, in my mind, when I started doing digital product design in 2018, was like some kind of black magic. Type some cryptic lines, and you get a beautiful interface. Sitting down with my front-end developers for reviews, I started to learn about their concerns, and a lot of that taught me how to be a better designer.
Coding started to become less intimidating to me, and I’ve always wanted to have my design portfolio coded from scratch instead of using a traditional CMS, so I thought it was about time for me to just do it. Plus, as we were all in lockdown due to a public health crisis right now, there’s no better time to pick up more skills — if you have the luxury to do it. Now I’m probably a little behind since Design Twitter thinks learning to code is so 2010, so I suppose I have some catching up to do ¯\(ツ)/¯
Ultimately, the reason I decided to code my site instead of using a CMS is because of the complete control over the design.
What the process was like finding a solution to host my portfolio, as I tried various formats: PDF → Notion → Adobe Portfolio → GitHub Pages
Why previous solutions didn’t quite work out (at the time) the way I wanted:
- PDF: time-consuming and too manual, more suitable for portfolio presentation deck, not the best user experience for online viewers due to screen sizes and devices used
- Notion: Notion branding, no custom domain unless you use extensions, navigation can be cumbersome on mobile, unintended interactions can lead to poor user experience
- Adobe Portfolio: no custom CSS, no mobile customization, limited page semantics, meta info, and SEO options
Other options I considered but didn’t go with:
- Squarespace: offers more customization than Adobe Portfolio, but the building experience is more complicated. I didn’t feel it was worth my time if the result would come out to be more or less the same as Adobe Portfolio
How I started writing the first lines of code on my site and publishing it
- Started using Codecademy to brush up on basic coding knowledge
- Learned about freeCodeCamp and liked the practical lessons better
- Started coding the structure of my site in Atom while using Skillshare and Udemy for examples to dive into details. I recommend Chris Dodd’s lessons on Skillshare and Angela Yu’s videos on Udemy if you’re a beginner like I am; I find their content and the way they teach super engaging, and they make it fun to learn!
- Learned about hosting websites for free on Github through YouTube and various articles
- Set up a Github repo
- Trial and errors as I tested my site
- Launched!
A little backstory, I actually tried Codecademy in 2015 to learn web development out of curiosity, but I never got to finish past the CSS modules. I think a big reason was that I didn’t have an end goal for it, so it felt like I was just watching and typing through tutorials just to get to the next one. I didn’t see a use case because at that time I was in college, working in retail pharmacy (quite a career shift, I know), and didn’t exactly need a custom personal website let alone a web application. After working in digital design and web design, I went back to these tutorials and found them to be easier to digest, especially the semantics.
Overall, the whole process took about a month. I spent almost all day, for a couple of weeks, watching HTML and CSS tutorials on the various platforms I mentioned above. As I was learning, I was able to apply my knowledge right away. Incremental improvements were made daily to the site as I learned new tips. My biggest concern, or effort, had been in semantics, accessibility, and web performance across all platforms. They say it’s like a product, and it really is. So far I’ve kept it quite simple, just pure HTML and CSS for everything, including interactions and maybe small animations.
I’m pretty happy with how it turned out so far, even though the site hasn’t been updated in terms of new case studies. My next lesson is naturally JavaScript, but I don’t see the need to use it for the site just yet, so maybe that’s why the motivation to learn it has been kinda low. The higher priority goal this year for me is to actually have at least a couple of case studies written to showcase my contribution and growth at the startup I’ve been working at for the last 2 years, which is another challenge but ultimately a great way for me to reflect and learn — just like what I did writing my first case study and my first lines of code.
