Web Posts

Fold & Unfold

When a friend requested a way to present a piece of print media online without losing the novelty created by its multiple folds, we weren't sure if CSS Transforms and Animations would suffice...

Round and Round

CSS animation of a classic optical illusion of rotating items.

Ratio Comparator

When it was time to do an audit of the different image sizes in a Drupal site, I found that there were quite a few image ratios... Just how different were they? I had to find out of course.

Hierarchy Aware Heading Styles

Experiment. What do you do when your beautifully designed large headings seem a little overwhelming against those inevitable small stories? Well, first of, try a little redesign maybe? But then... if the problem persists, perhaps we could get a little... funky with :has().

Semantic Steps Progress Bar

A very clean semantic HTML progress bar styled with nothing but CSS, requires only one class to style all steps, finished or unfinished.

Parallax Animated Illustrations

Animated illustrations that use @patrykzabielski's script, and Jun Luo's digital paintings. Patryk's parallax script is an elegant piece of code that use a data value to animate layered images parallaxically (?). With a few tweaks to the styles, I've added greater control to the ratio of the image, that way we're not limited by a fixed height.

Backup Server to Dropbox

Bash scripts to backup your server's sensitive data to Dropbox, using AndreaFabrizi's Dropbox Uploader script.


A python script to help you back up your SlideShare presentations to PDF.

El Niño. Photo Gallery at UN Diario

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.


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


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

Be a Badass

An experiment with animated css text-shadow through javascript.


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.

CSS Baseline Grid Overlay

This is a baseline grid overlay created using some CSS gradients. it simulates a baseline grid based on ems which will allow you to size it according to your site's base font size.

HTML Typography Test

I created a quick HTML file to test the basic look, arrangement, and alignment of HTML elements, primarily typographic elements. I use it in almost every project to make sure that they work well with each other.


A small URL shortener developed as a small project within CrunchyWeb. This project was a collaboration with Ryan Merl and Wil Hall who developed the backend while I worked on the UI and UX.


In 2011 Carlos co-founded CrunchyWeb, a small web design company focused on creating websites for new and small companies as well as offering consulting services.


Interactive portfolio website for Web Production I class.