The Dawn of Portfolio
By Grace Chen
In the very first week of COGS 187A, Professor Boyle introduced us to the concept of digital portfolios as an invaluable career tool and proof of work. She showcased a few notable and not so notable ones, commenting on their strengths and weaknesses, and lectured on a few popular portfolio styles. Professor Boyle also presented several portfolio examples, sourced from Team Study Terminal of 2016, to display what she expected out of us by the end of this class. It’ll be hard not to disappoint!
While “MAKE YOUR PORTFOLIO” remained a nagging presence on my to-do lists, I would look on in jealousy at other portfolios while school and other activities took higher priority. Thankfully, this class forces you to actually make one and have a completed project as a bonus!
Getting Started
I could sense my teammates’ growing enthusiasm for this individual assignment, seeing it as an extension of their individuality and already generating ideas for designs during the lecture. I was excited as well, visions of actually moving forward with my career dancing in my head. Following the course assignment, I sat down and really started to think about how I wanted to present myself and my work. What do employers look for? Which foot is my best foot? (The answer to this question is the right one, but choosing the right right one is the tricky part.)
I browsed through what seemed like an endless stream of online portfolios for inspiration, looking at what they did right and what common pitfalls to avoid. With some ideas in mind, I sketched out possible layouts of each page of my nonexistent portfolio, keeping things that I thought might work and revamping elements that didn’t feel as strong. I also wrote down a list of possible features that I wanted to include for later, such as the typing animation every designer seems to love nowadays.
Sidenote: A portfolio that deserves all of its fame.
After I was somewhat content with the layout, I created low-fidelity prototypes. This was the fortunate result of a slight misreading of the course assignment where I skipped over “…of your team’s app/site” and replaced it with “portfolio” in my brain. Although it was more work, creating these prototypes allowed me to concentrate on fleshing out and solidifying the layout in my mind, especially as the low-fidelity prototype allowed for easy edits and a better perspective on how the final page would appear.
Bringing Ideas to Life
Since the class had varied strengths on the more tech-y side of things, the instructional team labored to help us get our portfolios up and running with brief workshops on web-hosting and front-end development. Trevor Wells, the TA, provided the starter materials for a basic webpage and carefully guided attendees through the necessary steps with few hiccups. I had previously set up my UCSD server for an alternate project, but attending kickstarted me into focusing on my end-goal for the summer: the portfolio.
“O Portfoleo, Portfoleo, wherefore art thou Portfoleo?”
— Shakespeare, probably.
Although I had some basic HTML and CSS under my belt (i.e. turning “Hello world!” blue), I had always avoided Bootstrap before this class out of a primal fear. It had seemed mysterious and intimidating, regardless of how others raved about its intuitiveness and endless potential for web design. After this tutorial and a deeper reading of documentation articles, Bootstrap and other front-end development tools seemed friendlier. I was raring to finally begin building my portfolio.
Translating my prototypes from paper to screen was easier said than done. Although my prior planning helped smooth this transition a bit, finding various features and getting all the pieces to fit together the way I envisioned them took all the google-fu (and free time!) I possessed. Trying to find a solution to one problem led down a rabbit-hole of purple links, and at times, even more problems to be dealt with. Every hour I spent on bettering my site seemed to bring only negligible improvements and multiplied the problems I saw. This made it all the more worth it when I got things right. Every little corrected and polished detail sparked a tiny sense of satisfaction and I knew that I was on the right path (paved with good intentions, at the very least).
The one upside to this whole process was my decision to go for a more basic and clean layout. It may be a bit more boring and bland than other portfolios out there, as it was mistaken for a template by some early critics. However, it was a wise and safe choice considering my current programming level and given time constraints. The bells and whistles and inevitable portfolio revamps will have to come later.
Conclusion
What I’ve learned so far:
- Everything breaks.
- I know nothing.
- StackOverflow knows everything.
This initial stage of creating my portfolio really opened my eyes to the reality of how much work I still have to do and how much I have yet to learn. Although all I have at the moment is simply a bare-bone website skeleton (only slightly spooky), I’m constantly re-iterating and adding to my portfolio’s to-do list. Three weeks isn’t a lot of time to produce an award-winning portfolio and the greatest team project this summer, but I think we’ll do just fine. For now, I’ll be happy with learning and improving what I can and be proud of what I have accomplished.
Best of luck in your own portfolio process, and don’t forget Hemingway’s 5 Rules of Writing after you’re done building your site. It’s going to be a challenging but worthwhile journey for all of us!
