misc-04

Earlier this year, I developed a beta version of my portfolio. Due to my limited budget, I decided to build a static website in order to further my coding skills.

Summary

This is the first website I ever made. It involved lots of research the first go-around, since I needed to learn what domains and hosting providers and content management systems were, then figure out how to set them up together. I put it on GitHub, because it was free, then booted up Hugo's static site generator on my command prompt, because that was free, too. Over nearly a year of trial and error, I was able to heavily customize my portfolio and write a few shortcodes and scripts of my own.

Here is an abridged list of some of the resources I used:

  • Yusuke Ishimi's Coder
  • Liz Wells' Portfolio
  • Matt Bierner's Two Columns in Markdown
  • Adrian Roselli's CSS Venn Diagram
  • Christopher Aue's Fading Pages

Here are the repositories for the portfolio, which is now hosted at lianeyue.github.io. 

Challenges

Hugo is wonderfully simple and easy to learn, but it is written in Apache and is not natively supported by a browser. This meant I could only make progress on a local machine that was connected to the Internet, and it was difficult to continue where I left off when I changed computers. Additionally, Hugo renders HTML through input files in Markdown, requiring many workarounds across multiple files in order to support the interactions I wanted for my site. In all, it was not a straightforward process and I spent most of my time resolving the errors I encountered.

Solutions

The turning point happened when I was having coffee with a friend, airing out my frustrations over a section of Javascript that had stumped me for months. He looked at me funny and said, "Wait, don't we know a lot of software engineers? Couldn't they fix this in 10 minutes?"

He was right. Turning to a friend for advice and eventually, switching to tools that made more sense for my experience level, made a sizable difference in the outcome of my portfolio. The current site here at lianeyue.com is built on Wordpress with visuals made in Adobe Illustrator, and it took drastically less time. The original might be a failure, but I do regard it with some satisfaction for having attempted an initiative I knew nothing about with such gusto.


Learnings

  • Play in the sandbox. Purposeful experimentation can be exciting and rewarding, stimulating my creativity and giving me a better appreciation for the mastery of other practitioners. That being said, I often found myself in a wormhole of increasingly technical details that were far off the path I had originally set out on. Finally, I decided I needed to...
  • Know when to ask for help. I have learned so much in building this beta website, but at the end of the day, I know that what I sought to achieve as a designer was hampered by what I could feasibly make as a completely untrained "engineer." Everything has a time constraint; if I ever get out of my depth in the future, I now know that I should look up from my workstation once in a while and tap someone on the shoulder.

Portfolio

News InfographicsCommunication Design, Data Visualization

strtchmrks MagazineGraphic Design, UI/UX, Web Development

Hotel Metropole ReservationsApplication Development, Information Systems

Digital Grid ServicesUI/UX Design and Research

Timelapse Camera PrototypeArduino, Laser Cutting, Fabrication

Product Selection ResearchData Modeling, Research

Portfolio WebsiteWeb Development, HTML/CSS, Javascript

Art GalleryFine Art and Digital Illustration

Consulting WorkBusiness and Technology Experience

liane.yue@gmail.com