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.
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 scotch.io
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?