Developer/Designer Page Layout Concept

An experimental page layout concept with a developer/designer theme and a special image reveal effect.

By in Playground on
Demo Code

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js

How to Create an AI-Powered Newsletter Aggregator with React and AI Agents

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 25

Comments are closed.

  1. Always so inventive! Thanks once again for sharing your mad coding and design skills. Long may it continue!

  2. This is so nice and definitely an inspiration for upcoming projects! Thanks for this Mary Lou!

  5. Love the design. Though I am never sure why people would make their faces a key (or any) element of their site. Perhaps for something social media based.. But coding and design? Why are You showing off Yourself and not Your work?

  20. That’s an out standing work you have done by showing the concept of page layout with a developer/designer theme and a special image reveal effect. specially love the effect when i move to designer to coder just an amazing work Mary.
    Thnaks for sharing

    keep it up and keep sharing.

  21. Awesome design concept loved it. I’ll use this for my next project. Thank you so much for this excellent article and keep posting.

  23. Really…a great design, I will definitely use it for my next designing project. Thank you so much for sharing Ms.Mary Lou.