I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

A portfolio website is a unique way to showcase your work and let others know about yourself. In today’s digital world, a portfolio is arguably more important than a resume, no matter what industry you work in. While all freelancers can hand out business cards and certain freelancers, such as photographers, can distribute physical portfolios to potential clients, a portfolio website provides a way for any freelancer in any industry to reach more clients on a global scale.

COIDEA - Portfolio Website Concept with Advanced Circular Motion

As said, a portfolio is a great way for photographers, designers, developers and a wide range of artists to present their work online. It lets you reflect your identity through your works – photos, graphic design, sketches, etc. And plus, an updated website portfolio can be used to help you gain employment or find new opportunities.

Since your website portfolio will serve as the first impression to potential employers and customers, you will want to make every effort to show off your best work. If you do not know where to start with your website portfolio, this post is for you.

I chose to make one creative concept for a photographer website portfolio. With this in the mind, I wanted this concept to resemble in an abstract way on the lens and that's why this concept contains a circular animation and that's why navigation items are in a circle in the middle of the viewport. All animations are made with the help of CSS3, jQuery and GSAP's TweenMax and excellent GSAP's CSSPlugin. I chose GSAP's CSSPlugin, because it has an excellent function that finds the closest way to performing the rotation. I wanted just to prevent slides from being crazy when rotating. That means, every time we click on one of the navigation items, moving section rotates maximal 180 degrees.

This example has two main functions which are setTweenValues and doTween. Every time we move over navigation items ( or touch them on mobile devices ), we collect all information from this parent item such as rotation value as well as all information about the content (content id, background, etc). After we click on one of the navigation items (at this point we have already all needed information), we are activating our circular motion, putting the active item on the right place and show inner content after that. I hope you liked the way I created a concept for portfolio website as well as circular motion and find my demo inspiring and useful!

References and Credits