-
Pyrofolium
Pyrofolium is the website you are looking at right now. It's sort of an interactive
resume and personal site. The objective of the site is to highlight my design and coding
ability as well as showcase some side projects. I wanted to make the design more
unconventional then the usual portfolio site. With the whole "flat" design philosophy
that's pervading the web today, anybody can design a clean and simple layout with
minimal skill. I wanted to differentiate myselffrom what's already out there. The key
for me was to create something that's simple aesthetically yet demonstrates a unique
internal complexity.
-
Following the theme of being unconventional I used 3D computer modeling to create the
logo and it became the backbone of the basic design. In place of the typical design
trend of having a full blown photograph as a cover image I decided to have a sort of
artificial 3D model as the cover instead. 3D computer modeling was something I was
interested in high school but I never had the opportunity to practically use that skill
until now.
-
The "skills" page seemed a bit empty so I wanted to add something that would fill the
empty space and at the same time highlight my abilities. The colorful ring around the
list of "skills" is the result of this. It is actually composed of hundreds of tiny
scalable vector graphic arc paths. When you hover your mouse over one of these elements
it will trigger a sort of "wave" around the circle. This is achieved through recursively
calling a function on successive elements that essentially temporarily "bulges" the
thickness of each arc element.
-
The "cutout" effect was probably the single hardest effect. Essentially it is just a mask
placed over a fixed HTML element. The challenge in creating this effect lies in browser
fragmentation. Webkit, firefox and IE all need different implementations to achieve the
effect. Webkit can mask html elements with any geometric shape with a single line of
css, firefox needs you to embed the html in an svg foreignObject. IE doesn't support
either of these effects so the IE version of the site utilizes a completely different
design that doesn't use the "cutout" effect.
-
For some crazy reason I thought it would be a good learning experience if I restricted
myself to only using jquery as a library. It was a good experience but it's also a huge
headache reimplementing the wheel. At the same time, however, the unique interface would
not have been possible if I used prefabricated components like jquery plugins, twitter
bootstrap and the like. If you're interested the source code, it is available here.
