Introduction

FlatDesk is an innovative portfolio template built with WebGL (Three.js). It is as simple as it sounds: there is a desk, on which you can place built in items: dynamic (like phone, tablet or briefcase, which are used to present your work) and decorative (like lamp, mouse or keyboard). Thanks to provided advanced configurator, FlatDesk is a powerful tool for creating unique and extraordinary portfolio page. Each item on the desk is customizable (like colors, positions, etc.), so the FlatDesk has infinitely many different compositions, and the only limit is your creativity.

Overview

Target

You can use this portfolio template for nearly any area in which you operate, for example: web design, photography, print design, painting, video production, sculpture, architecture, blogging, souvenirs, decor and much more.

Features

• Innovative concept for a portfolio template
• Responsive
• Unique and courageous approach of using 3D space in Web Portfolio
• Modern, minimal and clean design
• Advanced configurator:
  • Really easy to use, just fill the form, change properties, export and import config file
  • Express yourself. Almost everything is configurable here. You can make this template look way different, so give free rein to your imagination!
  • Customization options:
    • Size of desk
    • Camera types
    • Light properties
    • Shadow properties
    • Colors of objects
    • Position of objects
    • Rotation of objects
    • Content of objects, of course. You can present your work with image slides, interactive prototype embed (i.e. invision), html file, or just url to project
    • Enabling/disabling objects
    • Your social media links
    • Textures – they are separated image files, so you can always replace them
  • Customizable objects in scene
    • phone
    • tablet
    • desktop PC
    • briefcase
    • postcard
    • business card
    • personal resume
    • coffee
    • mouse
    • keyboard
    • speakers
    • table lamp
  • You can preview the configurator here
• Written in modern technologies, such as HTML5, CSS3, AngularJS, ThreeJS (But don’t worry – you don’t have to know/understand any of them to use or customize this template)
• Contact form included
• Lightweight
• Font awesome icons
• 24/7 Support
• Cross browser
• Documentation included
• PSD files included

Fonts used

• Lato
• Font awesome

We’re open for your feedback!

Exactly. We are sure that this template is a really creative way of presenting your work. That’s the most important thing in portfolio, right? We also believe that we can improve it even more, but we need your feedback! Possibilities are almost unlimited here.

Credits

• three.js – lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser
• AngularJS – Superheroic JavaScript MVW Framework designed for building web-apps
• GSAP – The new standard for HTML5 and javascript animation
• Bootstrap – the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
• InVision – the world’s leading prototyping, collaboration & workflow platform
• StartBootstrap – collection of free to download Bootstrap themes and templates
• Modernizr: the feature detection library for HTML5/CSS3
• animate.css – A cross-browser library of CSS animations
• angular-animate – support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks
• angular-bootstrap – native AngularJS (Angular) directives for Bootstrap
• angular-bootstrap-colorpicker – native AngularJS colorpicker
• angular-file-saver – AngularJS service that provides cross-browser compatibility of the HTML5 saveAs()
• angular-sanitize – provides functionality to sanitize HTML
• angular-swiper – wraps nolimits4web/swiper library for AngularJS
• angular-ui-router – The de-facto solution to flexible routing with nested views in AngularJS
• angular-ui-select – native AngularJS implementation of Select2/Selectize by the AngularUI Team