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)

San Pedro de Lloc


After a long, unplanned — yet welcomed — break from work; I'm finally getting back on the saddle and I bring with me a new time lapse video. This time, from the very land that saw me grow up, San Pedro de Lloc — [That's in Peru](https://www.google.com/maps/place/San+Pedro+de+Lloc/@-7.4208997,-79.5021343,15z/data=!4m2!3m1!1s0x904d4ee60ea7ea8d:0x3b6fba0e805d6306)!

This work is a collaboration with [Eduardo Isla Hernández](http://www.youtube.com/eduardoislah), an old friend of mine, with whom I spent the last few days running around the town in an effort to finish the project in time.

Just an awesome, quick and dirty, yet-not-so-dirty, mashup at 1440p of some of the places around town. I hope you enjoy it!

___

Después de una larga pero muy bienvenida vacación, finalmente estoy volviendo a mi ritmo de trabajo y traigo conmigo un nuevo video en _time lapse_. Esta vez, de la misma tierra que me vio crecer, San Pedro de Lloc— ¡[En Perú](https://www.google.com/maps/place/San+Pedro+de+Lloc/@-7.4208997,-79.5021343,15z/data=!4m2!3m1!1s0x904d4ee60ea7ea8d:0x3b6fba0e805d6306)!

Este trabajo es una colaboración con [Eduardo Isla Hernández](http://www.youtube.com/eduardoislah), un viejo amigo mío, con quien pasé los últimos días corriendo por toda la ciudad en un esfuerzo por terminar el proyecto a tiempo.

Simplemente una rápida pero espectacular, mezcla de imágenes a 1440 pixels de algunos de los lugares llamativos de San Pedro de Lloc. ¡Espero les guste!

## Behind the scenes

### sp-001

[![sp-001](/content/images/posts/sp-001.jpg)](/content/images/posts/sp-001.jpg)

### sp-002

[![sp-002](/content/images/posts/sp-002_1.jpg)](/content/images/posts/sp-002_1.jpg)

### sp-003

[![sp-003](/content/images/posts/sp-003.jpg)](/content/images/posts/sp-003.jpg)

View of the Ficus trees at the Centenario avenue.

### sp-004

[![sp-004](/content/images/posts/sp-004.jpg)](/content/images/posts/sp-004.jpg)

Eduardo Isla saying “Hi!”

### sp-005

[![sp-005](/content/images/posts/sp-005.jpg)](/content/images/posts/sp-005.jpg)

### sp-006

[![sp-006](/content/images/posts/sp-006.jpg)](/content/images/posts/sp-006.jpg)

### sp-007

[![sp-007](/content/images/posts/sp-007.jpg)](/content/images/posts/sp-007.jpg)

### sp-008

[![sp-008](/content/images/posts/sp-008.jpg)](/content/images/posts/sp-008.jpg)

### sp-009

[![sp-009](/content/images/posts/sp-009.jpg)](/content/images/posts/sp-009.jpg)

A friendly passerby greeting us.

### sp-010

[![sp-010](/content/images/posts/sp-010.jpg)](/content/images/posts/sp-010.jpg)

Selfie time!

### Taking a Bite!

[![Taking a Bite!](/content/images/posts/sp-000.jpg)](/content/images/posts/sp-000.jpg)

Perhaps a little too revealing but I couldn't resist uploading this.

Wet Brush Test


I've been experimenting with photoshop brushes and I kinda like the result I got here. These remind me of the ink and watercolor brushes in [Paper](http://www.fiftythree.com/paper).

Who Am I?


_Who am I?_ was a semester long project for portraiture class which required us to look into our thoughts, fears, and dreams. While I have spend much time exploring my own psyche, this project allowed for a different approach and consequently different answers. Below you will find a series of self-portraits that explore portraiture as well as my mind.

### Mini Self Portrait #2

[![Mini Self Portrait #2](/content/images/posts/mini-self-portrait-2.jpg)](/content/images/posts/mini-self-portrait-2.jpg)

Digital Painting. This is the second of a series of five mini self-portraits — they were done in small cards. This marked the beginning of the Who am I? project and required a basic exploration of how we see ourselves.

### Myself and Me

[![Myself and Me](/content/images/posts/IMG_0003.jpg)](/content/images/posts/IMG_0003.jpg)

Charcoal. This piece is a representation of myself and a version of myself I wished to be. At the time there was nothing I wanted more than to be outside watching the Orionids meteor shower.

### Myself and the Duckling

[![Myself and the Duckling](/content/images/posts/IMG_0088.jpg)](/content/images/posts/IMG_0088.jpg)

Charcoal. If you had to chose a bird to accompany you in a portrait, what would it be? Although my first choices were a raven or a penguin, I decided to take a different route.

### On My Way Up

[![On My Way Up](/content/images/posts/on-my-way-up-medium.jpg)](/content/images/posts/on-my-way-up-medium.jpg)

Digital Painting. This assignment required us to look into our fears. After some thinking, I could think of one fear that had always haunted me, failure. In this piece I am not only representing my fear but I chose to picture myself overcoming it through endurance and persistence; biting my lips in excitement as I make my way to the top.

### When One Door Closes

[![When One Door Closes](/content/images/posts/when-one-door-closes.jpg)](/content/images/posts/when-one-door-closes.jpg)

Digital painting. This is a continuation to my analysis of fear. While failure is terrifying, it is also inevitable. Sooner or later we are all bound to fall. The problem then is getting back up on our feet. Sometimes this can be difficult, it is understandable to want to hang on to a door that just closed behind us, becoming oblivious to other doors, to other opportunities. When one door closes...

### Myself, Unfinished

[![Myself, Unfinished](/content/images/posts/myself-unfinished.jpg)](/content/images/posts/myself-unfinished.jpg)

The last portrait is meant to be one final representation of our fears. While I did not plan for this painting to turn this way, it could not be more appropriate.

Quick Study


Decided to correct some bad habits by relearning some of the basics. I noticed that when working on digital paintings I was relying too much on the Brush Transfer settings, for opacity. This would require me to do multiple passes at a single spot which resulted in works that took a long time and were rather pale.

While finding the correct color palette is still taking me a long time this should get faster overtime. I'm also now using Coolorous, a really cool plugin for Photoshop — and other applications. This plugin is a great replacement for Photoshop's default Color panel and it makes the process of picking colors a breeze. If you don't feel like paying $10 for the plugin there are others out there for free but not nearly as good.

## Update

I've added two more studies. The first one is of a glass with passion fruit juice and of a clock. The glass study was particularly difficult since I was really thirsty. I had originally gotten the glass to drink it but while looking for something to work on, I couldn't find anything else that interested me.

In these studies I made a copy of the original sketch to overlay it. I put considerably more time than I usually put in the sketch stage, trying to get the proportions right and really studying the perspective.

### Tumbler Study

[![Tumbler Study](/content/images/posts/cup-study.jpg)](/content/images/posts/cup-study.jpg)

### Clock Study

[![Clock Study](/content/images/posts/clock-study.jpg)](/content/images/posts/clock-study.jpg)

### Glass Study

[![Glass Study](/content/images/posts/glass-study.jpg)](/content/images/posts/glass-study.jpg)

I decided to work on another poster this time inspired by The X Files, which I've been watching over the last few weeks. This is a recreation of Mulder's iconic poster which can be seen in his office.

I Want to Believe


[![I Want to Believe](/content/images/posts/i-want-to-believe.jpg)](/content/images/posts/i-want-to-believe.jpg)

Once again I worked with a noise based texture (I know... give it a rest!). In this case I was going after a particular style used by [Dan Matutina](https://twitter.com/danmatutina) from [TwistedFork](http://twistedfork.me/). No, I didn't come even close to it; I'm gonna blame it on how focused I was on The X Files...

On the bright side, I'm beginning to understand his process and realizing how much work he puts into his artworks. They're awesome. A lot of his work can be seen in [MediaTemple](http://mediatemple.net/), which is how I learned about him.

In the process of researching this poster I learned that there are two versions. The original, which is the one I recreated, had to be switched with a new custom one due to copyright issues. If I understand correctly, these issues arose when they tried to release the poster for sale. Anyway, I figured the original poster was more adequate.

Done in Photoshop. Original size is 18 x 24 in.

After working with Git for a couple years, the Terminal has become one of my primary tools when working in a project. Here you'll find some tweaks I made to it for a better experience. Keep in mind that these changes are very basic, if you're looking for more advanced tweaks, follow the links at the bottom.

Workspace Terminal


[![Command Prompt Screenshot](/content/images/posts/command-prompt-screenshot.jpg)](/content/images/posts/command-prompt-screenshot.jpg)

## Third-party Software Used

-   [TotalTerminal](http://totalterminal.binaryage.com/) - for cool Quake like terminal
-   [Solarized theme](http://ethanschoonover.com/solarized) - Very nice & subtle theme.

## Settings

### Local Command Prompt

My .bash\_profile file contains the following:

#### .bash\_profile

```bash
# Custom Command Prompt
export PS1="[\e[0;36m]\n\h: [\e[0;33m]\w\n[\e[0m]→ "
```

Where `\n` creates a line break; `\h` gets the hostname;`\w` gets the current working directory; and the arrow is just cool! The other parts are colors: `\[\e[0;36m\]` is cyan; `\[\e[0;33m\]` is yellow; and `\[\e[0m\]` is back to normal, in the case of Solarized, grey. And so it outputs the following (though with some color):

#### .bash\_profile Output

```bash

UNKN0WN: ~
→
```

There is a line break at the beginning to create a little padding between the last entry/output and your new entry.

### SSH Command Prompt

Since my server uses Linux, the commands are slightly different and had to be adjusted:

#### .bash\_profile for Linux

```bash
export PS1='\e[0;36m\n\u@\h: \e[0;33m\w\n\e[m→ '
```

### Don't forget to...

Run the following in terminal to avoid a second non visor window, if you are using TotalTerminal, of course:

#### Command to prevent Visor bug

```bash
defaults write com.apple.Terminal TotalTerminalCloseWindowsOnStart -bool YES
```

## Sources

-   [Better Bash Prompt](http://beckism.com/2009/02/better_bash_prompt/)
-   [Prompt Magic](http://www.ibm.com/developerworks/linux/library/l-tip-prompt/)
-   [How to customize your command prompt](http://net.tutsplus.com/tutorials/tools-and-tips/how-to-customize-your-command-prompt/)
-   [Change the color of my shell prompt under linux](http://www.cyberciti.biz/faq/bash-shell-change-the-color-of-my-shell-prompt-under-linux-or-unix/)

## Source Links

-   [View Source Code](https://gist.github.com/cballenar/6330685)

Base12 is a framework that provides you with a basic SCSS folder structure for your projects. Its measurements are built around the number 12 for increased flexibility & math goodies.

Base12


[![Base12](/content/images/posts/base-12.jpg)](/content/images/posts/base-12.jpg)

Because Base12 uses the starting CSS from the [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/), it can be used in combination with it.

## How do I use it?

1.  Start a new project with the Classic H5BP
2.  Replace the `css` folder with Base12's
3.  Setup your preprocessor to compile `main.scss`
4.  Code away!

## Source Links

-   [View Site](http://cballenar.github.io/base12/)
-   [View Source Code](https://github.com/cballenar/base12)
-   [Download](https://github.com/cballenar/base12/archive/v0.5.1-beta.zip)