Portfolio

Each student will create a portfolio that looks just like the one you are looking at now. The portfolio has two kinds of pages:

• The index page, which has a grid of square icons that link to the individual pages.
• The item pages that show the various portfolio items.

Requirements for the index page are:

• The icons must be perfectly square. You can create your icons in SVG code, in Adobe Illustrator, or by using Photoshop to crop existing graphics or screen shots of your work.
• The icons must be laid out in a perfectly regular grid, centered, with uniform margins and padding.
• The icons must be in a figure tag that has a caption. (In this portfolio, the captions do not appear until you hover over the icons.)

Requirements for the item pages are:

• Each item must have a title, a caption, an image or working animation, a case study, and navigation.
• The caption may be in an H1 tag at the top of the page. However, some SVG drawings might have captions within the drawing; in that case, no additional H1 tag is needed.
• The item pages must use consistent fonts and styles. You can put the styles at the top of each page, but it is better to use a common file such as portfolio.css.
• The item pages must use a Google Font, either for the caption (suggested) or for the text. Google Fonts used for text must be readable and tasteful.
• A case study consists of the following sections: Objective, Problem, and Solution.
• The Objective is the statement of the assignment requirements or customer requirements.
• The Problem is a statement of (one or more of) the design problems encountered. A design problem is one inherent in the project or in the customer requirements. Your lack of skill or knowledge is not a design problem. Design problems usually relate to user interaction difficulties or conflicts in the requirements.
• The Solution is a statement of how you solved the problem.
• Each page should have navigation that leads to the previous page, the next page, and home (the index page).
• You must make the navigation icons yourself, using SVG or Adobe Illustrator. Illustrator drawings should be exported in a suitable format (PNG) and size. Navigation icons must be square, with a transparent background so you can apply background colors using CSS.
• Navigation should be driven by a data file that contains the order of pages and JavaScript code to create the suitable links forward, back, and home.
• iOS App screen shots should be displayed within a bezel that looks like the app is running on an actual device.