Getting your work online behance.net | cargo collective | krop | coroflot | behance online presence behance.net has a free and pro version. The free version is fine for getting internships.
Free Version Pros Cons networked into AIGA looks ok but not great linked to LinkedIn limited customization when including a link to your online website in an e-mail use the /frame url... http://www.behance.net/lukelisi/frame
Pro Version networked into AIGA costs $11 a month linked to LinkedIn Served sites Easy (very easy no CSS to costomize) Looks good Can switch from pro to free and back any time examples of pro sites http://www.brucemaudesign.com/ http://maartendeckers.com/ http://portfolio.emilymaye.com/
cargo online presence cargocollective.com is free (up to 12 projects). To start a cargo site you need to get an account. Go to Contact Us and apply. Talk sweetly to them...
There are a number of advantages to a Cargo site. It is free for up to 12 projects. Looks professional. Many templates to choose from. You can edit the css. examples http://thea2.com/ http://jordanjacobson.com/ http://www.brianrio.com/ http://www.megancollins-design.com/ http://www.jaclynco.com/
tips
Type of files : both cargo and behance take jpgs. Import motion as .mov file or embed vimeo. Use issuu.com to embed pdfs. SWF files you need to post onto a webserver. I can help you with that if you have a .swf file you want to upload.
Sizing photos : size your images in photoshop opposed to letting behance or cargo do it for you. Use 72 (or 150 dpi). Width: 400 – 700 px (depends on your layout/template) Height: max 800 px
Determine max width and max height (images should be as large as they can be but you do not want to scroll to see the image on a laptop. Some of your work will be at the max height and some at the max width and sometimes both. Save as jpgs. png files are good but usually file size is too large
ISSUU.com is a great place to upload pdfs (process books) and can be embedded into Cargo or Behance. *Upload as SINGLE page pdfs (not spreads)
Helpful Cargo tips how-to-make-a-great-thumbnail how-to-make-thumbnail-hover-states setting-up-a-custom-url how-to-use-slideshow-captions
CSS hex colors: 6 digit numbers or combo of letters and numbers system fonts: web design requires you use system fonts*
*in some cases you can embed fonts. if you want a non-system font for project titles, etc you can use Typekit.com. I think you may have to be have a pro account to use typekit. margin, padding.....
10/27/11 7:25 PM
/* Global California styles ***********************************************************************************************************/
body, html { margin: 0px; padding: 0px; }
body { background: #D9D8D3; color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; height: 100%; line-height: 1.5; width: 100%; word-spacing: 1px; }
/* Header / Navigation ***********************************************************************************************************/
.header_img { position: fixed; left: 20px; top: 0px; z-index: 11; }
.nav_container { background: #ffffff; line-height: 1.8; margin: 0px; padding: 20px 0 20px 20px; position: fixed; top: 130px; left: 20px; white-space: nowrap; width: 200px; z-index: 12; }
.nav_container.horizontal { /* Enabled via Display Options */ left: auto; padding: 35px 0 20px 35px; position: relative; top: auto; width: 670px; z-index: 25; }
about:blank Page 1 of 14 10/27/11 7:25 PM
.nav_container.horizontal div { float: left; padding-right: 10px; }
#nav_loadspin { display: none; position: fixed; top: 37px; left: 40px; z-index: 100; }
/* Navigation > Links ***************************************************************************************************/
.nav_container a { /* Applied to each navigation link */ font-size: 12px; text-decoration: none; }
.project_link a { color: #000000; } .project_link a:hover { color: #ff3333; } .project_link a:active { color: #999999; }
.page_link a { color: #999999; } .page_link a:hover { color: #ff3333; } .page_link a:active { color: #000000; }
.link_link a { color: #999999; text-decoration: underline; } .link_link a:hover { color: #ff3333; } .link_link a:active { color: #000000; }
.nav_active a { color: #000000; font-weight: bold; } .nav_active a:active { color: #999999; }
.pagination { color: #999999; font-size: 11px; z-index:11; } .pagination a { color: #00AF8A; } .pagination a:hover { background: #ffff00; color: #222222; } .pagination a:active { background: #000000; color: #ffffff; }
.nav_follow { color: #999999; font-size: 11px; z-index: 11; } .nav_follow a { color: #999999; font-size: 11px; text-decoration: underline; } .nav_follow a:hover { color: #333333; } .nav_follow a:active { color: #000000; }
.view_tag_info { color: #999999; padding-left: 3px; font-size: 11px; }
.view_tag_info a { color: #0066ff; } .view_tag_info a:hover { background: #ffff00; color: #000000; } .view_tag_info a:active { background: #000000; color: #ffffff; } about:blank Page 2 of 14 10/27/11 7:25 PM
/* Content ***********************************************************************************************************/
#content_container { background: #ffffff; left: 250px; margin-bottom: 20px; padding: 10px 0px 0px 10px; position: relative; top: 20px; width: 680px; z-index:11; }
/* Content > Project content ***************************************************************************************************/
#maincontainer { display: none; margin: 0 0 35px 0; width: 690px; }
.bodycopy a { color: #000000; text-decoration: underline; } .bodycopy a:hover { background: #ffff00; color: #000000; text-decoration: none; } .bodycopy a:active { background: #000000; color: #ffffff; }
.project_content { width: 560px; }
.project_title { color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5; margin: -4px 0 0 0; padding: 0 0 53px 0; }
/* Project content > Header about:blank Page 3 of 14 10/27/11 7:25 PM
*******************************************************************************************/
.project_header { position: absolute; top: 10px; right: 10px; z-index: 99; }
.project_header div { float: right; }
.project_header a { color: #999999; font-size: 12px; text-decoration: none; }
.project_header a:hover { background: none !important; color: #000000; }
.project_header a:active { background: #000000!important; color: #ffffff; }
.project_divider { color: #bbbbbb; float: right; }
/* Styling of default typographic headers and elements */
h1 { font-size: 22px; line-height: 165%; }
h2 { font-size: 16px; line-height: 165%; }
h3 { font-size: 14px; line-height: 150%; }
blockquote { color: #666666; margin-top: 0; margin-bottom: 0; about:blank Page 4 of 14 10/27/11 7:25 PM
}
.project_content img { margin: 0px 10px 10px 0px; }
/* Project content > Slideshows *******************************************************************************************/
#slideshow_container img { margin: 0px; }
.slideshow_caption { clear: both; display: block; font-size: 11px; padding: 5px 0 5px 0; }
.slideshow_wrapper { clear: both; margin: 0 10px 10px 0px; }
.slideshow_wrapper a, .slideshow_wrapper a:hover, .slideshow_wrapper a:active { background: none !important; }
.slideshow_nav { clear: both; color: #999999; margin: -24px 0 0 0; padding-bottom: 6px; font-size: 12px; }
.slideshow_nav a { background: none !important; color: #999999; text-decoration: none; }
.slideshow_nav a:hover { background: none !important; color: #000000; text-decoration: none; }
about:blank Page 5 of 14 10/27/11 7:25 PM
.slideshow_count { color: #999999; }
ul.slideshow_thumbs { margin: 0; padding: 0; }
.slideshow_thumb { float: left; list-style: none; margin: -3px 7px 7px -3px; }
.slideshow_thumb a { background: none !important; border: 1px solid transparent; display: block; padding: 2px; }
.slideshow_thumb a:hover { background: none !important; border: 1px solid #ccc; }
a.activeSlide { background: none; border: 1px solid #ccc; }
.slideshow_thumb a:active, a.activeSlide:active { background: none !important; border: 1px solid #666; }
.slideshow_thumb img { border: 0; display: block; margin: 0; height: 60px; }
/* Project content > Project footer *******************************************************************************************/
.project_footer { color: #999999; clear: both; about:blank Page 6 of 14 10/27/11 7:25 PM
font-size: 11px; padding: 20px 0px 0px 0px; }
.footer_title_type { color: #000000; font-weight: bold; }
.project_views { color: #999999; font-style: italic; }
/* Project Footer Links */
.project_footer .permalink a { color: #999999; } .project_footer .permalink a:hover { color: #333333; } .project_footer .permalink a:active { color: #000000; }
.tags { color: #999999; } .tags a { color: #999999; text-decoration: underline; } .tags a:hover { color: #000000; } .tags a:active { color: #000000; }
.project_footer .editlink a { color: #0aaf86; text-decoration: underline; } .project_footer .editlink a:hover { color: #000000; } .project_footer .editlink a:active { color: #ff3333; }
.project_bottom { clear: both; height: 9px; width: 670px; }
/* Content > Thumbnails ***************************************************************************************************/
.project_thumb { float: left; margin: 10px 15px 10px 10px; position: relative; }
.project_thumb .hover { cursor: pointer; text-decoration: none; }
.project_thumb .nohover { about:blank Page 7 of 14 10/27/11 7:25 PM
text-decoration: none; }
.project_thumb .hover .thumb_title span { color: #ff3333; }
.project_thumb .hover .cardimgcrop { border: 5px solid #dddddd; }
.project_thumb.active .cardimgcrop { border: 5px solid #dddddd; }
.project_thumb.active .thumb_title span { color: #ff3333; }
.cardimgcrop { border: 5px solid transparent; margin: -5px -5px 5px -5px; position: relative; min-width: 200px; min-height: 134px; }
.loader_holder { display: none; position: absolute; text-align: center; top: 8px; left: 8px; z-index: 3; }
.thumb_title { overflow: hidden; white-space: nowrap; text-align: left; width: 200px; }
.thumb_title .text { color: #000000; font-size: 11px; font-weight: bold; line-height: 12px; overflow: hidden; white-space: nowrap; }
.thumb_tag { color: #999999; height: 3em; about:blank Page 8 of 14 10/27/11 7:25 PM
line-height: 15px; overflow: hidden; width: 200px; }
.thumb_tag a { color: #999999; font-size: 11px; line-height: 1.5em; text-decoration: none; }
.thumb_tag a:hover { text-decoration: underline; }
.thumb_tag.notitle { margin-top: 12px; }
/* Search results *******************************************************************************************/
#search_form { position: fixed; bottom: 45px; left: 20px; }
#search_form #search_term { background: #D9D8D3; color: #666666; border: 1px solid #adaca8; font-size: 12px; width: 160px; }
#search_form_results { padding-bottom: 90px; }
.search_header { color: #000000; float: left; font-size: 14px; font-style: normal; font-weight: normal; margin: 0; padding: 5px 0; width: 145px; } about:blank Page 9 of 14 10/27/11 7:25 PM
#search_term { background: #ffffff; border: 1px solid #cccccc; color: #000000; float: left; font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0; padding: 5px; width: 220px; }
#search_results { float: left; }
.result { clear: both; font-size: 14px; line-height: 22px; margin-bottom: 60px; }
.search_thumb { float: left; margin: 4px 25px 35px 0px; }
.search_thumb img { width: 120px; height: auto; }
.search_text { width: 500px; margin-left: 145px; }
.search_title a { color: #000000; font-weight: bold; text-decoration: underline; }
.search_title a:hover { background: #ffff00; color: #000000; text-decoration: none; }
.search_title a:active { background: #000000; color: #ffffff; text-decoration: none; about:blank Page 10 of 14 10/27/11 7:25 PM
}
.search_tags { color: #999999; font-size: 11px; }
.search_tags a { color: #999999; text-decoration: none; }
.search_tags a:hover { background: none; color: #000000; text-decoration: underline; }
.search_tags a:active { color: #666666; }
/* Footer ***********************************************************************************************************/
.bottompad { clear: both; position: relative; height: 35px; margin: 35px 0 0 0; width: 705px; }
/* Video component ***********************************************************************************************************/
.video_component { float: left; margin: 0 15px 15px 0; }
/* Audio component about:blank Page 11 of 14 10/27/11 7:25 PM
***********************************************************************************************************/
.audio_component { color: #777777; font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif; font-size: 10px; height: 30px; line-height: 26px; width: 300px; }
.audio_component div { height: 26px; }
.audio_component .border { border: 2px solid #aaaaaa; opacity: 0.5;
-moz-border-radius: 5px; -webkit-border-radius: 5px; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; }
.audio_component .vertical_border { background: #aaaaaa; opacity: 0.50;
filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; }
.audio_component .controls { top: 2px; left: 2px; }
.audio_component .play_pause { background: url("/_gfx/playpause.png"); }
.audio_component .spectrum .spectrum_bar { background: #666666; }
.audio_component .loading { background: #bbbbbb; opacity: 0.25;
filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; about:blank Page 12 of 14 10/27/11 7:25 PM
}
.audio_component .progress { background: #bbbbbb; border-right: 1px dotted #333333; opacity: 0.25;
filter: alpha(opacity=25); -moz-opacity: 0.25; -khtml-opacity: 0.25; }
.audio_component .volume_slide.hover { background: #bbbbbb; opacity: 0.3;
filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; }
/* Other ***********************************************************************************************************/
.toolset { /* Admin and following icons — only seen by members */ position: fixed; top: 10px; right: 10px; z-index: 9999; }
.cargo_link { /* "Running on Cargo" */ color: #666666; font-size: 11px; line-height:165%; position: fixed; bottom: 15px; left: 20px; z-index:99; }
.cargo_link a { color: #666666; text-decoration: underline; } .cargo_link a:hover { color: #cccccc; text-decoration: underline; } .cargo_link a:active { color: #ffffff; }
/* In-browser code editing made "almost bearable" by CodeMirror: http://marijn.haverbeke.nl/codemirror about:blank Page 13 of 14