How to build a portfolio site with Node.js

When approaching the task of building an online portfolio of work, there are two main objectives. First, the creative element, how the site and the sample projects it wraps, appears. Applying front end skills in HTML, CSS and Javascript conveys a sense of style and control over the visual aesthetics that reflect personal decisions. The second crucial element is the architecture of the application that wraps the entire site and the sample project elements. The structure of my site mirrors the MVC pattern in Node.js applications, one that separates concerns to manage multiple elements. Similar to separating concerns in front end applications, with separate .html, .css, .js files, the MVC pattern provides structural support to an application that holds multiple projects. To further illustrate the vital importance of this pattern, refer to Jeff Atwood of Coding Horror and his entry on MVC patterns. Here is a quote, I found radical while researching :

image from Coding Horror/Jeff Atwood

The challenge I had was to build a portfolio page with 7 samples and provide a considerate interface for a user to view them. I knew how the portfolio would look, but how would I organize it?

outline of the main page
defining routes for 7 sample projects

MVC, Models, Views, Controllers

Building my portfolio site with a Node.js application solved my problem. First, I defined separate routes for each project. Each route had its own set of controllers to manage the views. And with Express templating, I was able to reuse repeated components in the page for each project. For example, by writing partials for a header and a footer, I was able to insert that into a view instead of repeatedly writing the code in every view.

a partial for a header element
including the header in the main content

Constantly returning to the pattern of separating concerns allowed me to organize the application. By defining routes and controllers for each individual sample project, I was able to manage multiple projects contained within one application. The solution allows a balanced approach to creating applications as I am allowed to freely produce creative samples but manage the user interface accessibilty with Node.js.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.