As many before me, I now face the greatest challenge any web dev/designer must encounter: creating a personal portfolio. If you're a perfectionist like me, then you know how difficult it is to find satisfaction in any one idea, especially when that idea is meant as a direct reflection upon your talent, skills, and overall ability. Making a website for a client: No problem. Making a website for yourself: Battle of the Century.
My previous personal portfolio websites were always basic, in that they used many of the common elements one might find in a typical web portfolio. A little jQuery Isotopes here, a little Scroll.js there, wrap it up behind Foundations framework for responsive design. Boom. Instopresto, you've got a portfolio...one that looks and feels like everyone elses.
Now I'm not trying to reinvent the wheel. A portfolio should accomplish what it is meant to do, display ones previous experience/work and encapsulate ones overall "ability" or skill level.
For this round I really wanted to go with a full width video background. The other design elements are easy to pull off. Give the site an offset menu, perhaps go with a onepage minimalistic design, or use Ajax for page/content navigation.
I keep having trouble with the video background. It's the limitations we face with HTML5 video and how it displays on mobile device. Forcing or tricking a user into having to press a play button is one extra step that kills the idea, and using an image as a fallback defeats the awesomeness of using a video in the first place.
There is an alternative though. Using Three.js and taking advantage of the technology offered in machines today via graphics rendering, let's create an animation for use as a full width background. It's cross browser compatible and works well on tablets and mobile devices.
My question is to those with heavy Javascript or python experience and those who have utilized three.js before. I typically use Cinema4D for animation as it provides a fluid and seamless workflow between itself and After Effects. I've already created a 3D element, given it animation, and created a camera to capture it all.
How can one export from Cinema4D for WebGL use and Three.js. Most tutorials/information on the web is extremely outdated. Even a viable workflow from C4D to Blender to WebGL would work for me if only someone who understands the process could explain it.
Here are a few examples that have fueled the inspiration behind this project:
http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/ - Built using CSS3 for the overall functinality, this is AWESOME and really what I am going for in replicating aesthically.
http://blogs.truthlabs.com/2013/11/12/illustrator-webgl-workflow-tips/ - This tutorial is fantastic, but being based out of Blender I am in no mans land. For a simple solution, this works fine. Creating in C4D would take no time at all, its how to get it to WebGL.
Thank you for any advice and taking the time to read through this post.
-Cheers, Branden Dane