From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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
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:
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.
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.
We hope you enjoy this little concept and find it useful!
References and Credits
- anime.js by Julian Garnier
- Portrait from Unsplash.com by Janko Ferlic
- Coder image made with Text-Image.com
- Charming.js by Yuan Qing
- imagesLoaded by Dave DeSandro
Always so inventive! Thanks once again for sharing your mad coding and design skills. Long may it continue!
This is so nice and definitely an inspiration for upcoming projects! Thanks for this Mary Lou!
This is intense! Thanks for sharing
That is a cool design! Love your work.
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?
WOW!!
Love this layout! Feels like I’m about to enter the Matrix lol
Wow..Just how do you do this Mary ?? Highly Inspired by your Work. Thanks a lot 🙂
This is so cool! Love it! Thanks for sharing 🙂
Thanks for sharing this!; very usefull
Loved it! Marry Me Mary! 😀
Chal ….be..
Spectacular! good job!!!
Original and Great! manifique and captivating!
Just WOW!
Gonna use it in my next project.
Good job!!!
Awesome layout & great job, thanks for sharing 🙂
This is a truly unique design that is inspiring. Thanks for sharing this.
WOW! Love it! Thanks 🙂
This was just brilliant! Love it!
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.
Awesome design concept loved it. I’ll use this for my next project. Thank you so much for this excellent article and keep posting.
Great article, thank you for sharing with us!
Really…a great design, I will definitely use it for my next designing project. Thank you so much for sharing Ms.Mary Lou.
i’ve now falling in love….EXCELLENT job!