Developer/Designer Page Layout Concept

DeveloperDesignerPageLayout_800x600

View demo Download source

Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When you open the demo, you’ll notice a kind of “glitch” effect on some words and also on the portrait. The glitch reveals the “coder side”. When clicking on the “coder” switch in the lower left corner, the image will be taken apart and animated with little rectangles, revealing another image behind. At this point everything will switch to the developer (or coder) view.

We are using anime.js by Julian Garnier for the animations. The portrait was shot by Janko Ferlic, you can find it on Unsplash.com. For some of the animations we also use Charming.js by Yuan Qing.

The coder image was made with the Text-Image.com generator.

The demo is kindly sponsored by Hired. If you would like to become a demo sponsor, you can find out more here

Attention: This demo uses some modern properties like CSS Flexbox and 3D Transforms without a fallback.

Have a look at the different views.

The initial view is the portfolio in “designer mode”. The image has a effect on some squares sometimes and some of the page elements switch rapidly to the code view, leaving a hint that there’s something more to discover:

DeveloperDesignerPageLayout_01

A little easter egg can be found when hovering over the “Work with me link” in the bottom right corner of the page; the portrait will partly disperse and we are left with a half-coder, half-designer look.

DeveloperDesignerPageLayout_02

Once the “Coder” link is clicked in the lower left corner, the whole portrait will disperse into squares and the developer page look will be revealed with some animations.

DeveloperDesignerPageLayout_03

We hope you enjoy this little concept and find it useful!

References and Credits

View demo Download source

Developer/Designer Page Layout Concept was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants