Meet Umo, a one-page portfolio theme for Tumblr aimed at designers, photographers, illustrators, and all kinds of visual artists.
This is a multi-section theme: besides the ubiquitous Portfolio grid, you get an About, Services, Team, Testimonials and Contact section.
The Portfolio grid is quite flexible: you can define the number of columns for different screen resolutions and adjust the thumbnails’ shape and proportions.
The Portfolio grid main attraction is the bespoke Ajax expander, which allows you to display each project details dynamically in an stylish way.
The site footer houses your social links, Twitter and photostream feeds (Dribbble, Flickr, and Instagram).
Please note that Umo only supports Photo, Audio and Video posts. Quote posts are used in addition to populate the Testimonials section. Although regular Text posts aren’t supported, you can create and display custom pages (http://goo.gl/x2Sygw).
Umo includes the following sections, which can be switched on and off:
Homepage: greet your visitors with a custom logo--or avatar--and message. Full page background image cycler with up to five images.
About: introduce yourself or your company and let visitors know what you do best. “Skills” widget can be turned on and off.
Services: be boisterous about your skill-set and expertize! Display up to six services boxes with their own image or icon, title, description and external link. An optional “swiper” lets you group your services into an horizontally scrollable widget.
Portfolio: filterable portfolio grid chock-full of options! Filter your projects using smooth transitions and show their details in-page with the Ajax-powered project expander. Choose between landscape, portrait and square thumbnails, with rounded, circle or square shapes, flat or with shadows.
Team: Display up to six team members, with custom avatars, name, job position, short bio, and the social links of your choice. An optional “swiper” lets you group your team members into an horizontally scrollable widget.
Testimonials: populate your testimonials section by simply creating “Quote” posts on your dashboard. Testimonials will be swipeable both on desktop and mobile thanks to the awesome Swiper jQuery plugin.
Clients: a simple widget that lets you display up to six client logos.
Contact: show your contact information and let people message you effortlessly via Tumblr’s own “Ask me anything” box.
Footer: display icons for all of your social profiles, an integrated Twitter feed, and Dribbble, Instagram and Flickr photostreams.
Umo comes with tons of options to let you customize colors, background images and typography.
Umo supports notes and Disqus comments on project details, either when viewed on the Ajax expander or a separate permalink page.
Umo supports most modern browsers, including Internet Explorer 9.
v1.2.2 December 15, 2015
- New: Buttons on the Services section now obey the “Open Custom Pages In New Tab” setting.
- New: Vine social icon.
- Fixed: Prevent JavaScript errors when Tumblr methods (lightbox, like button, etc.) are not available on App initialization.
- Fixed: Visibility and positioning of Tumblr controls.
- Improved: Better display logic for the “Back to Top” button.
- Minor CSS fixes.
v1.2.1 November 26, 2015
- New: Added ArtStation social icon.
- New: Social icons update and refresh (Google+, BandCamp, etc.)
- Fixed: Updated Dribbble widget to work with the new API.
- Improved: Better responsiveness to user interaction on mobile (tap gestures).
- Minor bugfixes.
v1.2.0 July 15, 2015
- New: Navigation arrows added to “Services” and “Team” sections carousels.
- Minor CSS fixes.
v1.1.5 May 07, 2015
- Improved: Track portfolio filtering and loading content via the expander using Google Analytics.
- Minor CSS change to overlays transition speed.
v1.1.4 March 23, 2015
- Fixed: Expander and header CSS heights issues in iOS Chrome.
- Improved: Expander dimensions and positioning on tablets and phones.
- Updated: New deviantArt icon.
- Minor CSS and JavasScript fixes.
v1.1.3 February 17, 2015
- Fixed: retina logo images (homepage and header) not being displayed sometimes on some mobile browsers (Chrome on iOS).
v1.1.2 January 24, 2015
- Fixed: Thumbnail titles are empty if the option “Move Titles Outside Thumbs” is enabled.
v1.1.1 January 16, 2015
- New: Up to twelve client logos can be uploaded now.
- New: Options to add links (Client URLs) wrapping each client logo.
- Fixed: Expander position could be miscalculated when filtering items in some edge cases.
- Fixed: Small visual glitch with the shadowy separators on the project expander.
- Improved: Use Disqus recommended method for loading comments on AJAX sites.
v1.1.0 January 14, 2015
- Updated isotope jQuery plugin to version 2.
- Updated fotorama script to version 4.6.3.
- Updated hammer.js to version 2 for improved support for ‘tap’ events on more recent mobile browsers.
- Fixed: Video player fullscreen issues in some browsers, related to the isotope plugin.
- Fixed: Fotorama stylesheet was missing, breaking the image galleries inside the portfolio expander.
- Fixed: Footer copyright and credits text color wasn’t applied properly.
- Improved: Better support for non-alphanumeric characters on the portfolio filter.
- New: Option to enable “fat” portfolio filters on phones, for chubby fingers!
v1.0.5 July 25, 2014
- New: Option to center media (photos, audio, video) when a caption isn’t set for the post (“Enable Centered Media”).
- Fixed: certain “tap” events didn’t trigger on some mobile devices.
v1.0.4 March 5, 2014
- New: Navigation menu for custom pages.
- New: Make opening custom pages on new tab/window optional.
- Fixed: Navigation drop-down issues in Safari.
- Fixed: Restored some broken CSS gradients.
- Fixed: Sharing box short URL.
v1.0.3 March 1, 2014
- New: Custom section reordering.
- New: option to vertically center videos.
- New: fitVids.js support for Tumblr’s native video player.
- Fix: Ajax extender close button was unclickable on Safari.
- Fix: Restored Ajax expander media/description separator.
v1.0.2 January 18, 2014
- Allow multiple words for Skills widget labels, they must be entered separated by underscores.
- Better homepage slideshow responsiveness: now the slider starts once the first image has been loaded.
- Fixed: issue with embedded Vimeo videos in fullscreen mode on webkit browsers.
- Added: option to disable Isotope CSS transforms (workaround for fullscreen videos on Safari.)
- Added: option to disable background gradients and tints, for smoother page scrolling.
v1.0.1 January 11, 2014
- Added: option to load portfolio items on demand, using a “load more” button.
- Fixed: make portfolio filter responsive as soon as the first set of posts is available.
- Fixed: navigation links now show user defined colors correctly on “hover” and “active” states.
- Minor CSS fixes.
v1.0.0 December 4, 2013
- Initial release
The wonderful illustrations shown on the demos are the work of YemaYema.
The images used for the sections backgrounds are from Unsplash.
The logos shown on the Clients section are from the Logo / Badge / Insignia Templates Bundle.
The webfont shown on the Section Headings is called Questrial, by Admix Designs.
The Skills Widget is built upon Animated 3d Bar Chart With CSS3 by Codrops.
UMO Folio integrates or borrows from the following jQuery plugins:
Smart Resize -- https://github.com/louisremi/jquery-smartresize
Hammer JS -- http://eightmedia.github.com/hammer.js
FlowType.JS -- http://simplefocus.com/flowtype/
Responsive Elements -- http://kumailht.com/responsive-elements
ImagesLoaded -- https://github.com/desandro/imagesloaded
scrollTo -- https://github.com/flesler/jquery.scrollTo
Isotope -- http://isotope.metafizzy.co
Perfect Scrollbar -- http://noraesae.github.com/perfect-scrollbar
jQuery Waypoints -- https://github.com/imakewebthings/jquery-waypoints
Tooltip -- https://github.com/andrewplummer/tooltip
Swiper -- http://www.idangero.us/sliders/swiper