In September 2015, the people of Pacasmayo were bracing themselves for a the next possible El Niño phenomenon. At UN Diario, images of the last "big hit" were available in the archives and we thought it would be valuable to refresh people's minds of the devastating effects it can have when not prepared.

El Niño. Photo Gallery at UN Diario


## About the Website

The [landing page designed for the gallery](https://undiario.pe/proyectos/el-nino/) was a one pager that included a preview of the images that would be displayed in the gallery. For design, as well as copyright protection, the images received an effect reminiscent of old CRT monitor artifacts along with an exagerated sepia tone overlay and desaturation. See example below:

![Comparison of effects applied to photograph](/content/images/posts/2015-09-18-el-nino-image-comparison.jpg)

The information in the page sits behind the two buttons in the lower left corner and was designed to be presented as if the buttons transformed to take up the entire viewport. This was based on the [Morphing Button](https://tympanus.net/Development/ButtonComponentMorph/) created by the (always inspiring) [Codrops](https://tympanus.net/) team. 

![Button transformation demonstration](/content/images/posts/2015-09-18-el-nino-button-animation.gif)

There's a very subtle audio track playing in the background of rain that and storm. The track is [Long Silence at Top](https://www.youtube.com/watch?v=snPfcQzQcHg) and was provided by the YouTube Audio Library; this can be controlled by a small button on the bottom right corner.

## About the Gallery

The gallery would be presented in this open space that once hosted the large newspaper Linotype machines. We had to work with an industrial like ceiling held in place by construction iron rods. In these cases the best option is of course to lean into it and hope for the best. So we took a very rustic approach where possible, relying on barriers made from wood and thick twine rope, for the lights we designed these pallet-like fixtures that were suspended in the same construction iron rods.

![Rustic style barriers made from wood and rope to guide the public through the floating gallery. Detail photo of the pallet like light fixtures made to hold the bulbs. Test of the light fixtures.](/content/images/posts/2015-09-18-el-nino-gallery-guide-ropes.jpeg,/content/images/posts/2015-09-18-el-nino-gallery-lightning-detail.jpeg,/content/images/posts/2015-09-18-el-nino-gallery-lightning-test.jpeg)

For the selection of images, we went through the photo archives finding those that best presented the many aspects that take place in events such as El Niño. We found all kinds of photographs from the truly terrifying, to the historic, to the comic ones that provided hope in spite of the situation. Due to the lack of a scanner, the photos were photographed with a DSLR. This actually resulted in high resolution images with —despite the best efforts to avoid it— small signs of lens blur; which actually gave a more organic feel to some of the photos.

![Photographs from archive were scanned by taking a high resolution photo. Multiple photos lined up for selection and sorting.](/content/images/posts/2015-09-18-el-nino-gallery-sample-capture.jpeg,/content/images/posts/2015-09-18-el-nino-gallery-sample-selection.jpeg)

After selection and sorting of the photographs, these were glued to custom two-sided frames made of a piece of red foam sandwiched between two white pasteboards. This gave a subtle hint of the brand behind the gallery and helped the frames stand out. This would be essential as, late in the game, we decided to come up with a floating gallery...

![Photo of the stack of custom frames made. Detail photo of the hand made hangers used to hold the photographs.](/content/images/posts/2015-09-18-el-nino-gallery-sample-preparation.jpeg,/content/images/posts/2015-09-18-el-nino-gallery-sample-hangers.jpeg)

Contrary to our initial schematics —where we intended to build divisions in the room, for a corridor like experience— the floating gallery turned out to be a fantastic idea not only because of the layering effect it created but it also allowed this very open space to exist where people could interact more freely. The frames were hanged with wire rope and small clamps that were cut and fitted for the gallery.

![Wide view of the center of the gallery. Photo of the images hanged in the gallery showing the layering effect created. Photo of the opening day with multiple people navigating the gallery. Photo from a low angle displaying the twists and turns created by the gallery.](/content/images/posts/2015-09-18-el-nino-gallery-wide-view.jpeg,/content/images/posts/2015-09-18-el-nino-gallery-1.jpg,/content/images/posts/2015-09-18-el-nino-gallery-2.jpg,/content/images/posts/2015-09-18-el-nino-gallery-3.jpg)

The design of the gallery was an incredible collaboration with my brother in law, Elias, who is always ready to take an idea and make it happen. Without him I may have hesitated too much to see this project through. I also owe my sister, MC, a huge thanks for giving me the freedom to bring in so many different ideas into this project.

## Other Printed Material

Banners was designed to help give information and context to the public. Use the following link to [download and view the banners](/content/documents/2015-09-15-el-nino-banner.pdf).


Stepping out of the comfort zone and trying out different grid systems.

DaGrid


![Screenshot of DaGrid experiment](/content/images/posts/dagrid.jpg)

I worked on this project a couple years back and had never made it public. While looking for some inspiration I ran into it again so I decided to publish it. The code is now available on GitHub and it's written on SCSS.

This layout is a variation of [Gridset's The Carson](https://gridsetapp.com/specs/carson/), which references [David Carson's design](http://www.davidcarsondesign.com/) and his work in [Ray Gun](http://www.davidcarsondesign.com/t/tag/raygun/).

It is organized so that the body of the article uses but a portion of the screen. This gives us plenty of space on the left for multimedia. This side could easily be populated by a large image or multiple ones on a pile. Combine this with something like [StickyJS](http://stickyjs.com/) and you could end up with a very fancy presentation.

## Source Links

- [View Site](http://cballenar.github.io/dagrid/)
- [View Source Code](https://github.com/cballenar/dagrid)


A PX to EM calculator for the non-mathie CSS writer.

Emzy


![Screenshot of Emzy App](/content/images/posts/emzy.jpg)

Emzy is a PX to EM calculator that allows you to keep track of multiple elements and output the final results as CSS.

I worked on Emzy a few years back and, much like [DaGrid](/posts/2015/dagrid/), I never bothered to publish it. But here it is!

I saw this project done at [EMCalc](http://riddle.pl/emcalc) and decided to make my own version. Unfortunately, EMCalc doesn't seem to be available anymore.

## Source Links

- [View Site](http://cballenar.github.io/emzy/)
- [View Source Code](https://github.com/cballenar/emzy)
- [Download](https://github.com/cballenar/emzy/archive/master.zip)


Quick video scrap. Practicing free lensing on video.

Free the Lens


## IMG 6561
![Screenshot of DaGrid design](/content/images/posts/IMG_6561.jpg)

## IMG 6558
![Screenshot of DaGrid design](/content/images/posts/IMG_6558.jpg)

## IMG 6560
![Screenshot of DaGrid design](/content/images/posts/IMG_6560.jpg)


Fotos del muelle de Pacasmayo. Long Exposure.

Muelle de Pacasmayo


## Cold and Warm and All the Same
![Photograph title 'Cold and Warm and All the Same' shows the under side of a dock which divides the landscape in a warm sunny side on the left and a cool blue sky on the left.](/content/images/posts/IMG_6386.jpg)

## Bajo el Muelle
![Bajo el Muelle](/content/images/posts/IMG_6416.jpg)

## IMG 6493
![IMG 6493](/content/images/posts/IMG_6493.jpg)
Experimentando con fotografía de exposición prolongada.

## IMG 6507
![IMG 6507](/content/images/posts/IMG_6507.jpg)
Experimentando con fotografía de exposición prolongada.

## Playa Pacasmayo
![Playa Pacasmayo](/content/images/posts/IMG_6472_6476-hdr-merged-processed-v2-watermarked.jpg)


Ants


Just a morning exercise to wake up the mind. This morning I saw these little guys working hard and I couldn't resist getting them on camera.


Photo sequences, and other photographs, of skateboarders performing tricks as draft for possible banners promoting the skateboarding world.

Skateboarding Es Cultura


## Skateboarding es cultura - banner 1
![Skateboarding es cultura - banner 1](/content/images/posts/skateboarding-es-cultura-banner-1.jpg)

## Skateboarding es cultura - banner 2
![Skateboarding es cultura - banner 2](/content/images/posts/skateboarding-es-cultura-banner-2.jpg)

## sk8-1
![sk8-1](/content/images/posts/sk8-1.jpg)

## sk8-2
![sk8-2](/content/images/posts/sk8-2.jpg)

## sk8-3
![sk8-3](/content/images/posts/sk8-3.jpg)

## sk8-4
![sk8-4](/content/images/posts/sk8-4.jpg)

## sk8-5
![sk8-5](/content/images/posts/sk8-5.jpg)

## sk8-fck-yeah
![sk8-fck-yeah](/content/images/posts/sk8-fck-yeah.jpg)


Skateboarding en San Pedro


A glimpse of the skateboarding culture in San Pedro de Lloc.


Collaboration with old friend, classmate, and colleague, Jun Luo.

Jun Luo Illustration & Design


For this project the website and brand were designed by Jun and I handled the development. [Check it out!](http://jluodesign.com/)

## Notes

Although the website relies heavily on Javascript to work, it is built in such a way that the entire site will work without it. All the images that would display in an overlay simply link to their real page counterpart, the same way that the Biography and Contact Form do. The whole process was particularly easy to do thanks to what has become my favorite CMS, [Craft](http://buildwithcraft.com/).

## Source Links

- [View Site](http://jluodesign.com/)


An experiment with animated css text-shadow through javascript.

Be a Badass


Be a Badass uses javascript to change the text shadow based on the position of the cursor on the screen relative to the center of the object. Thus creating a spotlight like effect. It also gave me a chance to play with typography and colors.

You can find a simplified version of the code below and by following the [Source Code Link](http://jsbin.com/bejaveda/3/edit) and here, the [Final Version](http://pets.cballenar.me/be-a-badass/).

## Notes

### CSS3 `box-shadow` vs. `text-shadow`

While at first sight these may seem like the same property applied to different elements, they take different arguments. Unlike box shadow, text shadow does not take a value for `spread`, which would make the shadow larger. In this case having the ability to increase the spread value gives the circle in the demo a more realistic look.

### Math

Who says that the good ol' math days were useless? Albeit, not very complex, I had a chance to use the Pythagorean theorem in order to calculate the distance from the center of the target to the cursor.

### Other Goodies

- The text is sized using the viewport width (`vw`) measurement. [Read more about it](http://css-tricks.com/viewport-sized-typography/).
- Font used is [Zalamander by Just Another Foundry](http://justanotherfoundry.com/zalamander).
- Touch support. It currently detects tap position on mobile devices but maybe it could detect the orientation? That'd be cool.

## Source Links
- [View Site](http://pets.cballenar.me/be-a-badass/)
- [View Source Code](http://jsbin.com/bejaveda/3/edit)