Home » Wisdom List » DetailsInvite

How we made portfolio.camplight.net

This wisdom is an overview of the development process of portfolio.camplight.net website. 

2013-03-10, 01:59:08-2013-07-30, 01:07:22


The idea or WHY we did it

#

Very often our potential clients ask us about our portfolio. So we got the brilliant idea to create one ;).

As you know Camplight is all the people who make the magic works, so we had some very interesting points which we needed to keep in mind:

  • one portfolio based on everyone's contributions
  • members' profiles
  • many member's portfolios
  • rating system
Result => Trello card with the basic info (we use Trello for organization and collaboration)


Planning or WHAT we want/need to do

#

At this state of the project we made some ugly wireframes to get the basic idea of how our portfolio will look like and what sections and pages it will have. Thanks, Venhy!

  • Wireframes
Result => Wireframes


Design

#

Mladen Gorchev created first version of the design for our portfolio.
Based on Wireframes he made a design file (psd). 
After some corrections and conversations face to face and online (Trello) - collaboration team - Venhy, Marta, Kosio, the result has come.

Result => psd file - here is part of it.


Design Slicing #

Venhy was very enthusiastic about the portfolio and quickly sliced it. 

Result > html & css files of the pages and how they will look like.


Development #

After we got the sliced design, we had the green light to continue with the development

Here is our first version of the Trello Board we used
First we added in Trello these tasks as cards in "next" column:

  1. setup development environment - Boris created a new git repository with all needed construction files. He released v 0.0.0. ~ 30mins
  2. add static views as jade files - Marta got the html files who Venci did and using this Html to Jade converter got them all in jade page templates. At the same time Boris made admin page templates from scratch using Bootstrap ~ 60mins.
  3. create api and domain model 
  4. convert the static views to dynamic using Backbone Views with Models
  5. login/register
  6. forgotten password
  7. release to staging


Note: Automated tests are very important and required during development. Our gold rule is "release only after all tests pass".

We develop our portfolio based on Organic concept using Nodejs. To learn more about Organic, check out this group of wisdom: Organic or this article


Beta Release #

At this state we needed to collect our friends feedback and make some polishing changes.

While we beta tested and brainstormed our portfolio, Pavel got with an idea, which he quickly visualised. It was the quick sketch shown bellow:
It was like a wave - some people got inspired from the idea and the Trello board become very active. The result was a lot of cards created, moved to "in progress", then the board looked like this:


Release #

Releasing the portfolio comes when most of people like the result. After some discussions and corrections we launched http://portfolio.camplight.net. Only 5 days after the tree sketch.

We will continue improving it. Any suggestions are welcome.


Camplight Portfolio Evolution #

This is a visualization of Camplight's portfolio evolution in short. And bellow is the mobile version of the portfolio.


comments powered by Disqus