Building a Portfolio with Angular, SASS, and Bootstrap

A conversation with someone working in design or development will tell you that tools are constantly changing. Frameworks and versions change frequently, and it can be intimidating to decide whether or not to use them. I decided to re-do my portfolio for performance and staying with the current. After staring at my computer with my chin on my fist for a solid couple of weeks, I had to dive in.

I had to narrow down my use of different libraries. My first portfolio built in 2015 utilized jQuery, PureCSS, and Modernizr. jQuery was used for a lot of the fun clicky things on my site (changing the header image with icons, fading the titles of projects on hover, or clicking links to hide/show divs). At the time, I strongly felt that PureCSS was also easier to use for grid layouts and responsive design. Modernizr allowed me to change some of my interactions for certain conditions, like showing content when on mobile that otherwise would’ve required a hover.


Hello hero images, my old friend.

The design also utilized an old trend – the hero image. Although I did have fun allowing the user switch the background, I decided it was a bit gimmicky and scrapped it.

For my new portfolio, I wanted to use AngularJS to manage the information for my projects. This required re-contextualizing my portfolio as an application, where I would allow the user to use an input (search) in addition to viewing projects. It was the best way for me to get started with Angular (Hello World!). Angular allowed me to put all of my information about my projects (title, description, images, url, categories etc.) into my controller’s scope (the controller holds the data for what’s shown on the page, along with its functionality). This made it easy to loop through all this information without having to create new HTML divs for each of my projects. So now, anytime I add a new project to my portfolio, it will be added to my grid. I also utilized a search bar, which is using a filter to search through my scope and returning any projects that matches the input text.

Tutorial: Live Search with ng-Repeat from JSFiddle 

I also needed a more malleable CSS framework for responsiveness. PureCSS is pretty rigid with its use of paddings and margins, so I turned to good ol’ familiar Bootstrap. After a lot of nudging things around and seeing how the columns worked, I found it was relatively easy to use. Don’t like how the size of that column looks? Forget about ruining all your CSS with one line, just change the column size in your HTML. I also picked up SASS as a pre-processor, mainly because using variables for my colours, fonts, paddings, and margins was such a relief. Being able to nest certain styles also proved to be useful. My old portfolio had 1000 lines of CSS (ridiculous lmao) and my new site uses 500 lines of delicious pre-processed CSS.

Tutorial: Getting Started with SASS from


Now here’s the best part of my portfolio – I’m not done! There are a couple things here and there that need some tweaking, but I’ve learned not to ruminate over perfection. In terms of other Javascript tools, I am looking to implement Grunt as a task runner to optimize my site and minify my css.

The goal was to be faster, cleaner, but still retain some design elements from my old portfolio. You can see my new work here.

I’m curious – what is your decision process on adapting new frameworks? Do you research and weigh out pros and cons or just go straight to tinkering with it?

5 Chrome Extensions for WordPress Designers

Work has been made much easier using the following extensions in Google Chrome. While there are plenty of extensions out there, these five are great to have as your web design starter pack.

  1. Wappalyzer – Wappalyzer lets you see what goes behind the scenes of a website. By seeing what content management systems, Javascript frameworks and servers are utilized, you inform your own decisions on choosing technologies for your projects.
  2. WhatFont – Ever find yourself looking at some gorgeous typography on a website? This extension not only allows you to see what the web font is, but also what service is used (ie. Google Fonts, Typekit).
  3. WordPress Theme & Plugins Detector – This one goes hand in hand with Wappalyzer. If Wappalyzer detects WordPress is being used, this extension goes a level further and finds out what theme and plugins are being used. It’s great for deciding if a plugin would be useful to you, or if you’re looking to create a child theme based off a similar design.
  4. ColorZilla – Personally, this is my favourite extension. I love being able to snag the hex code from a beautiful colour right off the page. It also lets you create CSS gradients and displays a colour palette created from a webpage.
  5. WindowResizer – See how mobile-friendly your design is! While many themes are already built in with responsive design, it’s worthwhile for being able to view your website from different viewports.

I hope these tools improve your workflow and get you juiced up for designing. What extensions have you found valuable to your own work?

Wonder & Wander

This image was taken in Miyajima, Japan. There was something about this particular place that felt like magic. To get from Osaka to Miyajima, you can take the Shinkansen from Shin-Osaka to Hiroshima, then transfer to the JR Sanyo Line to Miyajima-guchi. From there, there’s a ferry to get to the beautiful Itsukushima Shrine. The Itsukushima island is a great place to stay the night and hike – a must for anyone visiting Western Japan.

Font: Colors of Autumn.
Tools: Sony NEX-3N, Adobe Photoshop CC and Illustrator CC.