In this project, I first created a mockups on Photoshop. There were three mockups, each for desktop, tablet and mobile phone display. Then I designed an exact look-alike of these mockup. CSS code was added to make the design responsive for different screen size based on key breakpoints.
Screen-shots of the original mockups can be found in the photoshop-design folder. The portfolio.html is the main html file. The responsiveness of the main file can be evaluated by modifying the browser (screen) size of this file. As it can be seen, the design html file exactly matches up the original photoshop design.