About Me …
A portfolio site usually only requires one page with a simple layout showing basic info - short and to the point.
Naviagting can be either a scroll down nav as shown above or viewport scroll as shown to the irght of the window
Design
The design has to impress without overkill in terms of pizzazz. Any animation must be unique and used to draw attention to items in a smooth and subtle way.
Recent Projects
Display
Show off and briefly describe a couple of finished projects to grab attention.
Never show too many and choose the very best!
Portfolio Essentials
A well designed portfolio page needs to grab attention with a unique hero item and present the relevant facts briefly and simply …
- The first page MUST download in under 2 seconds - even on mobile devices
- Contact info must be easily seen and in view on page load and repeated at the bottom of the page
- Absolutely no popups or cookie warnings
- Make text content brief and relevant
- Limit the number of images to between 3 and 5 and make sure they are your best
- Clearly list your skills and qualifications
- Show one example of your work and link to another page with more
- Provide references with easily accessible contact links
- Refine and update your portfolio regularly
Tone
Refrain from an oversell - nobody believes that you are the best, smartest or ideal. They need facts to create an opinion about your suitability and personality.
ShowcaseSkills
Skills
HTML595%
CSS398%
jQuery Plugins81%
Website Layout92%
Graphics86%
Web Component Design92%
Scroll Navigation
Most portfolio website consist if just one page so a scroll down navigation can be used.
The ThemeKit Folio Scroll Navigation smooth scrolls to anchors and has the option to add a smooth scroll to the top function.
The links have active indicators on hover and the ThemeKit Folio Heading, ThemeKit Folio Line/Spacer and the ThemeKit Folio Content Fade In widgets can all be used as anchors.
An alternative to the scroll navigation would be the ThemeKit Folio Scroll widget which scrolls down the page in viewport height steps and has a back to the top function.
References
Card Grid
The ThemeKit Folio Cards widget creates an auto grid by setting a min height and main width for the cards - no media queries required to make it respond to changes in browser/device window width. The grid can have up to 48 cards.
Each card has a heading for the company name, a field for the person's name and one for their position.
The phone number is optional and changes to a phone call function on mobile phones.
The spam protected email fumction has an SVG icon and the optional info link is at the top right.
Card Styles
In the example the cords have a 10px white border and a bottom box shadow. There is also a control to set a border radius.
The stripe with the contrasting color is optional.
Footers
Large footers stuffed with info and hard to find contact info have no place in a responsive web page unless the footer can be removed for mobile devices.
Footer Bar
The show/hide footer bar allows the essential functions of home/info link, phone, email and smooth scroll to the top to be always easily accessible.