Front-End Web Developer

You can click on the tab to read a brief of the project and on the handwritten links over the samples to see some examples of my code.

Ideascale

This is a project I’ve really enjoyed. I got into it referred by their UX/graphic designer, Mariano A. García, when they needed someone to code the designs.

IdeaScale offers a tool for creating feedback communities in minutes (crowdsourcing) which is actually one of the best in the world.

Rob and Jeremy were great to work with – the type of clients as they all should be - and thus I did my best to keep them happy. And I think they were because when this project was completed, they referred me to their own customers (GSA, FCC, NASA…) to customize their communities.

The skills I used to put together this project were:

XHTML + CSS
jQuery
Microformats

IdeaScale

- IdeaScale Community Front End
  
  When starting any project, the first thing I do is analyze the content blocks in order to mark it up.
  
  I use as few classes and ids as possible and I don’t start with the CSS until the content is all marked up.
  
  I find this way of working to be the best in order to get the most semantic code possible, and it also turns out to be the fastest method for me.
  
  Another advantage of doing it like this is that if the deadline is very short, the back-end guys can start integrating the htmls.
  
  This is what happened with IdeaScale. When they approached me, they were pressed for time and wanted to start integrating ASAP. So I marked up the home page in a few hours and they were able to start integrating it with their Velocity Template Engine.
  
  I find this approach to be very efficient in terms of project management, making it able to optimize the work flow and parallel tasks that otherwise would have had a waterfall model.
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile='http://purl.org/uF/2008/03/ http://microformats.org/profile/vote-links http://microformats.org/profile/hcard http://microformats.org/profile/hcalendar'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IdeaScale</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/nyroModal.full.css" type="text/css" media="screen" /> <link rel="shortcut icon" href="favicon.ico" />   </head> <body> <div class="confirmation message"> <p> Insert confirmation/error message here. </p> </div> <div id="page"> <div id="header"> <a id="skip" href="#main" name="skip">Skip to content</a> <a id="client-link" title="Go to ------- website; link opens off this site" href="#" name="client-link">Client Website</a> <h1 class="main-title"> Community Title </h1> <div id="logo"> <img src="images/logo2.png" alt="Company name!!" title="Company name!!" /> </div> <a href="#" class="ideascale-color" title="Goto IdeaScale home site" rel="home">Powered by IdeaScale</a> <div id="session"> <span>Welcome, Joe</span> <a href="#" title="Go to your profile page">My Profile</a> <a href="#" title="Finish session">Sign out</a> </div> <div id="search"> <input type='text' id='search-field' name="search-field" value="Search ideas" onblur="if(this.value.length == 0) this.value='Search ideas';" onclick="if(this.value == 'Search ideas') this.value='';" /> <input type="button" value="Search" /> </div> </div> <div id="message-user" class="success">HELLO THIS IS A STATUS MESSAGE</div> <div id="about"> <div id="intro"> <h3> How does it work? </h3> <ul> <li class="user-step-1"> Users submit their ideas. </li> <li class="user-step-2"> Our community discusses and votes for ideas. </li> <li class="user-step-3"> The best ideas bubble up to the top and are implemented. </li> </ul> </div> <div id="client-txt"> <h2> Client title </h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. </p> </div> <form id="got-an-idea-home" method="get" action="submit-overlay.html"> <label for="description" class="h1">Got an idea for us?</label> <textarea class="big-field" name="description" id="description" cols="40" rows="5" onblur="if(this.value.length == 0) this.value='I suggest you...';" onclick="if(this.value == 'I suggest you...') this.value='';"> I suggest you... </textarea> <input type="submit" class="submit" value="Submit" /> </form> </div> <div id="main-content-wrapper"> <div id="sidebar">  <div class="section"> <h3> Categories </h3> <ul>  <li class="current-category"> <a rel="tag category" href="#">Customer Service</a> (92) </li> <li> <a rel="tag category" href="#">Our Products</a> (55) </li> </ul> <h4> Support </h4> <ul> <li> <a rel="tag category" href="#">Customer Service</a> (92) </li> <li> <a rel="tag category" href="#">Our Products</a> (55) </li> <li> <a rel="tag category" href="#">Promotions</a> (125) </li> <li> <a rel="tag category" href="#">Translation</a> (12) </li> <li> <a rel="tag category" href="#">Website</a> (7) </li> </ul> <h4> Another category </h4> <ul> chi <li> <a rel="tag category" href="#">Customer Service</a> (92) </li> <li> <a rel="tag category" href="#">Our Products</a> (55) </li> </ul> </div> <div class="section tag-cloud"> <h3> What we're discussing </h3> <a href="~/lorem-ipsum" class='very-high' title='Used 150+ times' rel="tag">Lorem Ipsum </a> <a href="~/ffc" class='active high' title='Used 121-150 times' rel="tag">FFC</a> <a href="~/law" class='medium-high' title='Used 91-120 times' rel="tag">Law</a> <a href="~/computers" class='medium' title='Used 61-90 times' rel="tag">Computers</a> <a href="~/federal-employees" class='medium-low' title='Used 31-60 times' rel="tag">Federal employees</a> <a href="~/participation" class='low' title='Used 11-30 times' rel="tag">Participation</a> <a href="~/gsa" class='very-low' title='Used 1-10 times' rel='tag'>GSA </a> </div> <div class="section"> <h3> Usage statistics </h3> <div id="stats"> <p id="ideas-stats"> <span class="number">9825</span> ideas posted </p> <p id="other-stats"> <span class="number">534</span> comments <span class="number">534</span> votes <span class="number">534</span> users </p> </div> </div> <div class="section"> <h3> Subscribe </h3> <ul> <li> <a class="twitter" title="Follow us on Twitter; link opens off this site" href="#">Follow us on Twitter</a> </li> <li> <a class="email" title="Receive New Ideas by email; link opens off this site" href="#">Receive New Ideas by e-mail</a> </li> <li> <a class="feed" title="Subscribe to the new ideas feed; link opens off this site" href="#">New Ideas RSS feed</a> </li> <li> <a class="feed" title="Subscribe to the new comments feed; link opens off this site" href="#">New Comments RSS feed</a> </li> </ul> </div> <div id="main"> <h2 class="listing-title"> Browse </h2> <div id="content-language"> <label for="cont-language">View ideas in:</label> <select id='cont-language' name="cont-language"> <option value="all"> All languages </option> <option value="English"> English </option> <option value="French"> Français </option> <option value="Spanish"> Español </option> </select> </div> <ul id="listing-nav"> <li class="active"> <a href="#" title="shows list of most popular ideas">Most popular</a> </li> <li> <a href="#" title="shows list of most controversial ideas">Most controversial</a> </li> <li> <a href="#" title="shows list of most recent ideas">Most recent</a> </li> <li> <a href="#" title="shows list of ideas in progress">In progress</a> </li> <li> <a href="#" title="shows list of implemented ideas">Implemented</a> </li> </ul> <ul id="ideas" class="hfeed">  <li class="idea hentry" > <a class="idea-status new-pending" href="#" title="This idea is pending">This idea is pending</a> <a href="#" class="moderate-idea" title="Moderate this idea">Moderate Idea</a> <div class="admin-idea"> <h4>Change Idea Status</h4> <ul class="possible-status"> <li class="new-pending"><a href="#" title="some title">Pending Moderation</a></li> <li class="active"><a href="#" title="some title">Active</a></li> <li class="under-review"><a href="#" title="some title">Under Review</a></li> <li class="in-progress"><a href="#" title="some title">In Progress</a></li> <li class="closed"><a href="#" title="some title">Closed</a></li> <li class="completed"><a href="#" title="some title">Complete</a></li> </ul> <h4>Edit idea</h4> <ul> <li><a href="#" title="some title">Edit idea</a></li> <li><a href="#" title="some title">Delete Idea</a></li> </ul> </div> <div class="content"> <a class="idea-category" href="#" rel="category" title="Go to this idea's category">WEBSITE <span>»</span></a> <h3 class="entry-title"> <a href="#" title="some title">Publish comparisons of contracts</a> </h3> <p class="entry-summary"> The government was forced to outsource for so long. Let's publish the comparison of how much the government pays for contract employees vs. federal government employees. It would reduce outsourcing in favor of hiring.<a href="#" class="more-link" rel="bookmark">Read more...</a> </p> <a href="#" title="View comments on this idea" class="comments create-comment">create comment</a> <p class="details vcard author"> Submited by <a href="#" rel="user" class="fn nickname">Vicky_C</a> <span class="updated published">  <span class="value-title" title="2010-02-25T13:00:00">  </span> 14 days ago</span> </p> </div> <div class="voting"> <a href="#" class="agreed" title="you voted for this idea">You agreed</a> <p class="votes"> <span class="vote-number">8735</span> <span class="unit">votes</span> </p> <a href="#" rev="vote-against" class="disagree" title="Vote against this idea">I disagree</a> </div> </li>  <li class="idea hentry"> <a class="idea-status active" href="#" title="This idea is in progress">This idea is in progress</a> <a href="#" class="moderate-idea" title="Moderate this idea">Moderate Idea</a> <div class="admin-idea"> <h4>Change Idea Status</h4> <ul class="possible-status"> <li class="new-pending"><a href="#" title="some title">Pending Moderation</a></li> <li class="active"><a href="#" title="some title">Active</a></li> <li class="under-review"><a href="#" title="some title">Under Review</a></li> <li class="in-progress"><a href="#" title="some title">In Progress</a></li> <li class="closed"><a href="#" title="some title">Closed</a></li> <li class="completed"><a href="#" title="some title">Complete</a></li> </ul> <h4>Edit idea</h4> <ul> <li><a href="#" title="some title">Edit idea</a></li> <li><a href="#" title="some title">Delete Idea</a></li> </ul> </div> <div class="content"> <a class="idea-category" href="#" rel="category" title="Go to this idea's category">WEBSITE <span>»</span></a> <h3 class="entry-title"> <a href="#" title="some title">Publish comparisons of contracts</a> </h3> <p class="entry-summary"> Short Line!.<a href="#" class="more-link" rel="bookmark">Read more...</a> </p> <a href="#" title="View comments on this idea" class="comments">21 comments</a> <p class="details vcard author"> Submited by <a href="#" rel="user" class="fn nickname">Vicky_C</a> <span class="updated published"> <span class="value-title" title="2010-02-25T13:00:00"> </span> 14 days ago</span> </p> </div> <div class="voting"> <a href="#" rev="vote-for" class="agree" title="Vote for this idea">I agree</a> <p class="votes"> <span class="vote-number">1</span> <span class="unit">votes</span> </p> <a href="#" class="disagreed" title="You voted against this idea">You disagreed</a> </div> </li> </ul> <p class="displaying">Displaying 1 - 5 of 91 Ideas</p> <ul class="pagination"> <li class="current"> 1 </li> <li> <a href="#" title="Go to page number 2">2</a> </li> <li> <a href="#" title="Go to page number 3">3</a> </li> <li> <a href="#" title="Go to next page">Next page ›</a> </li> </ul> </div> </div> </div> <div id="footer"> <p> Copyright © 2010 <a href="#" rel="home" title="Go to IdeaScale home site">Home</a> | <a href="#" title="Download the idea widget">Widget</a> | <a href="#" title="Contact developers">Developers</a> | <a href="#" title="Read the terms of service">Terms of Service</a> </p> <a href="#" class="ideascale-bw" title="Go to IdeaScale home site" rel="home">Powered by IdeaScale</a> </div> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.js"></script> <script type="text/javascript" src="js/vtip.js"></script> <script type="text/javascript" src="js/jquery.NobleCount.min.js"></script> <script type="text/javascript" src="js/functions.js"></script> </body> </html>
- VoteLinks Microformat
  
  It's not a big deal, but, hey, I'm proud to know that my code is as semantic as it can be. VoteLinks Microformat was just the right way to mark this up.
  VoteLinks, as an elemental microformat, is extremely simple and it only indicates endorsement (or lack thereof) via a link relationship, and that's just what the IdeaScale voting system needed.
  Also, note that there are no superfluous tags - every single tag is there because it has to be. There are no because-the-design kind of tags, which means that if you ever want to change how the site looks, only CSS would be necessary.
  <div class="voting"> <a id="idea-839-vote-for" href="#" rev="vote-for" class="agree" title="Vote for this idea">I agree</a> <p class="votes"> <span id="idea-839-votes" class="vote-number">-2</span> <span id="idea-839-votes-label" class="unit">votes</span> </p> <a id="idea-839-vote-against" href="#" rev="vote-against" class="disagree" title="Vote against this idea">I disagree</a> </div>
- Mac-like Tags
  
  To make the tags look like those in Snow Leopard apps, I use CSS3 border-radius property and CSS2 property selectors in combination with the rel-tag microformat. The rest are just regular paddings, borders and colors.
  #content a[rel ~="tag"] { font-weight:normal; background:#dde7f8; border: 1px solid #a4bff0; color:#333; padding: 0 .6em; -webkit-border-radius: .6em; -moz-border-radius: .6em;} #content a[rel~="tag"]:hover { background: #ffc;; border: 1px solid #fc3; color:#333;}
- Clean Tag cloud
  
  I'll probably write a blog post on this. Tag clouds are usually coded with nasty in-line styles. I don't like that, so I code it semantically and use it as a code snippet for every project that needs a tag cloud. This one for IdeaScale is a good example.
  <div class="section tag-cloud"> <h3> What we're discussing </h3> <a href="~/lorem-ipsum" class='very-high' title='Used 150+ times' rel="tag">Lorem Ipsum </a> <a href="~/ffc" class='active high' title='Used 121-150 times' rel="tag">FFC</a> <a href="~/law" class='medium-high' title='Used 91-120 times' rel="tag">Law</a> <a href="~/computers" class='medium' title='Used 61-90 times' rel="tag">Computers</a> <a href="~/federal-employees" class='medium-low' title='Used 31-60 times' rel="tag">Federal employees</a> <a href="~/participation" class='low' title='Used 11-30 times' rel="tag">Participation</a> <a href="~/gsa" class='very-low' title='Used 1-10 times' rel='tag'>GSA </a> </div>

IdeaScale Customizations

Having developed the whole front end of the IdeaScale communities made me the one person in the world who best knew how to customize it. So, when IdeaScale clients asked them about customization, I was the developer they were referred to.

That's how I got to work with the US Government (FCC, GSA, etc.) and some other IdeaScale clients.

The way to work with IdeaScale is a little bit tricky, because there's no actual template system, but you can always use the default one while adding a new CSS and a little bit of HTML to certain places.

This means that you have to make great use of cascade inheritance in CSS and overwrite all those properties you want to change.

I'm pretty happy with the results I've got.

Ideascale Customizations

Motociclismo

When Juan Muñóz asked me to work with them on redesigning Motociclismo.es, he did so because his wife was taking my course on web design and telling him what I was saying about web standards and the need for using them, etc. He realized that what they had already done did not come anywhere near to what I was talking about, so he asked me to work on the markup to convert it into a standards-compliant website.

At first I was only going to redo the markup they had, but while I was working, they decided to change the design, too.

Motociclismo is the oldest and most prestigious magazine specializing in motorbikes in Spain. They’ve been around since the 1950’s and their design team is more specialized in printed design. They are really amazing and make it look easy to design and layout the whole mag in one or two days! (yes, one or two, the mag is weekly and the writers take their time, but, hey, content is king, isn’t it?)

I specialize in front-end coding because it’s what I most like. I know that because over the last nine years I’ve taken on almost every possible role in the web design industry, from project manager to UX designer, from back-end developer, to content strategist, from graphic designer to information architect, etc.

When they started with the re-design, I helped as much as I could, providing as much of my knowledge as possible to improve the results.

Motociclismo

- hAtom Microformat
  
  I really like to add semantics to the html I write. I’m convinced of their importance and I don’t think POSH is enough, so when doing the markup for Motociclismo, I realized what they had was content that could be syndicated and that there’s a Microformat just for that: hAtom.
  
  I used it as I thought it could make a difference in terms of SEO. The great thing about microformats is that they don’t take any longer to apply, they just come naturally and make sense.
  <div class="ultimanoticia hentry"> <ol class="pertenecea"> <li><a href="/Deporte/moto-gp/pilotos-estan-dolidos-muerte-tomizawa/10423" rel="tag"><h2>Deporte | Moto GP ></h2></a></li> </ol> <h3 class="titulo entry-title"><a href="/Deporte/moto-gp/pilotos-estan-dolidos-muerte-tomizawa/10423" tabindex="17" title="Leer noticia: Los pilotos están dolidos por la muerte de Tomizawa" rel="self bookmark">Los pilotos están dolidos por la muerte de Tomizawa</a></h3> <p class="subtitulo entry-summary">El fallecimiento de Tomizawa afecta todos los pilotos del Mundial de MotoGP</p> <abbr class="updated published" title="06/09/2010 09:45">06/09/2010 09:45</abbr> <address class="author vcard"> <a class="fn" href="#" title="Página personal del autor">Motociclismo.es. Fotos: Gold and Goose</a> </address> <div class="entry-content"> <a href="/Deporte/moto-gp/pilotos-estan-dolidos-muerte-tomizawa/10423" tabindex="18" title="Leer noticia: Los pilotos están dolidos por la muerte de Tomizawa" rel="self bookmark"><img src="/rcs/noticias/2010/09_Sep/shoya-tomizawa-0609101_g.jpg" alt='Los pilotos están dolidos por la muerte de Tomizawa en Motociclismo.es' /></a> <p>El fallecimiento de Shoya Tomizawa tras el accidente sufrido en la carrera de Moto2 del Gran Premio de San Marino de MotoGP ha afectado a todos los pilotos.</p> </div>
- Optimized CSS
  
  I know there are a lot of CSS optimizers online, so everybody can get an optimized CSS, right? Well, yes, but if you use one of those and you ever want to change anything, you’ll probably struggle trying to find out what to change.
  
  In my opinion, it’s much better to optimize the CSS right from the start, and maybe use the optimizers smartly for short snippets just to make sure. That’s what I do, and I’m very happy with the results I get (my clients are too!).
  
  /*Menu principal*/ #menu li{display:inline;font-size:0.9em;} #menu li.primero{margin-left:14px;} #menu li a{vertical-align:middle;color:#fff;border:solid #666;line-height:12px;border-width:4px 9px 9px 9px;} #menu li a.activo{background:#fff;color:#039;border:solid #fff;border-width:4px 9px 10px 9px;text-decoration:none;} #menu li a:hover{text-decoration:underline;} /*-----------------------------*/ /*Submenu principal*/ .submenu{width:95%;border-bottom:2px solid #898989;margin:0 0 0 23px;} .submenu li{display:inline;border-left:1px solid #bebebe;font-size:0.9em;height:16px;vertical-align:text-top;} .submenu li.primero{border-left:none;} .submenu li a{color:#039;height:16px;border-top:4px solid #fff;margin:0 9px 0 9px;} .submenu li a.activo{color:#c00;} .submenu li a:hover{color:#03c;text-decoration:underline;} /*-----------------------------*/
- hReview Microformat
  
  Again, when I saw they were writing reviews of bikes and bike apparel, it seemed very clear to me that the right way to mark it up was by using hReview Microformat. There are many benefits to extending the semantics of the html, but the SEO benefits are remarkable.
  <div class="noticia hreview"> <ol class="pertenecea"> <li>Motos</li> <li><a href="#/carretera" title="Visita la categoría a la que pertenece esta noticia" rel="tag">Carretera ></a></li> </ol> <h2 class="titulo fn"> Triumph Daytona 750 </h2> <h3 class="subtitulo summary"> Polivalente, rápida en carretera y cómoda en ciudad. </h3> <div class="fechayvaloracion"> <abbr class="updated published" title="20080813T13:07:00">13/08/2008 | 13:07</abbr> <div class="valoracion"><span>Valoración</span><abbr class="rating" title="3">★★★☆☆</abbr><span>27 Votos</span></div> </div> <div class="description"> <p class="primerparrafonoticiafinal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec posuere, sem ut venenatis pellentesque, diam est sagittis lorem, a facilisis massa lacus ac mauris. In hac habitasse platea dictumst. Morbi enim. Donec luctus justo. Vivamus convallis ante in velit. Nunc purus. </p> </div> <div class="autores"> <span>Textos:</span><address class="author vcard"> <a class="fn" href="#" title="Página personal del autor">Nombre Apellidos</a> </address> <span>Fotos:</span><address class="author vcard"> <a class="fn" href="#" title="Página personal del autor">Nombre Apellidos</a> </address> </div> </div>

Montes del Pardo

Montes del Pardo is a Pure breeded Spanish horses stud farm based in Madrid, Spain that needed a new website that would work well in search engines. Their needs were simple, six sections with little content, mostly images, but easily modifiable.

I knew it also needed a good content strategy and a solid semantic markup to make sure it was optimized for search engines.

They are a little computer leaned client and needed a CMS that was extremely easy to use. That excluded Drupal, as it s powerful but complicated. On the other hand they needed a flexible CMS as a number of non-traditional fields, it added to its budget was low, led me to exclude Wordpress, customize the fields as it takes time.

I shuffled several possibilities, and I finally decided on Perch CMS. Definitely the right choice!

Perch is simple, flexible and easy to integrate with the markup, yet extremely easy to use for someone who knows very little about computers.

I did everything in this project, from the brief to the Google statics and optimization.

Montes del Pardo

ActionTeam

ActionTeam is a motorbike club organized by Motorpress Iberica which used to have a very old, table-based layout website and really needed a new one.

At that time, I was working there. They were having internal problems with the IT development team as they were too busy to make changes and didn’t trust any open-source CMS.

Wordpress came to the rescue! We (some co-workers and I) formed an unofficial team in our free time in order to work on supplying ActionTeam with a great website, while also proving to the IT manager that WP was not only a blog platform, but very reliable as a CMS.

We were right and the club has now a great platform for their users and a cool Motorbike influenced graphic design. They are really happy with it, and I'm happy I could help.

I worked on the home page front end, a little bit on some of the internal pages and on customizing Wordpress fields. I wished I´d had time to help more, as I'm sure I could have cleaned up some of the code. No matter, I'm pretty happy with the final results.

ActionTeam

IdeaScale
IdeaScale Customizations
Motociclismo
Montes del Pardo
ActionTeam

I'm available for freelance work, Hire me!

My Skills

Well-Structured HTML

Clean, well-structured HTML makes your content easy for people and search engines to find.

I write HTML thinking about what every piece of content really is, and not about how it'll look, and so I don't write any tag that doesn't really have to be there.

No matter if I write HTML 4.01, XHTML, or HTML5, I use XHTML syntax, whose principles I apply to my code.
Optimized CSS

Good use of selectors, cascade and sound knowledge of properties, makes a website easier to edit and maintain, but years of practice and understanding is needed in orther to master the CSS magic.

I make sure to optimize my CSS as much as possible, but not too much, so anybody can easily understand it.
Extended Semantic Markup

If you add semantics to your code, you extend machine readability of content so machines can put it into context.

I think it's important to extend markup semantics with Microformats and RDFa so machines can get closer to understanding content the way we humans do.
Unobtrusive Javascript

To make a website a real "experience", interactivity is needed, and that's done in the behavior layer through Javascript.

I love to work on projects with a progressive enhancement strategy in mind, writing in Javascript to add a functionality layer to a web which, while functioning perfectly well without it, thus becomes a more pleasant experience for the user.

I like to work with jQuery because it makes Javascript clean and fun.
Wordpress customization

Wordpress has become a great CMS, offering a lot of possibilities, with millions of websites using it. If you've chosen it to be the back-end of your site, I might be the person you’re looking for to customize your wordpress. It’s my favorite!

This website is Proudly powered by WordPress. . What do you think? Does it look like a blog?
Drupal themes

Drupal is probably the most powerful open source CMS nowadays, with people using it to build anything from simple blogs to portals and social networks, but customizing it might be a little bit tricky.

I'm not a Drupal back-end expert, I'd be lying to say so, but I sure know how it works from the inside out and can customize a Drupal theme with excellent results.
PHP

It’s good for a front-end developer to know some server-side language to get a better understanding in order to work with the back-end guys. So I learned PHP.

I could be a PHP developer as I really know a lot about PHP and MySQL, but I prefer not to. I have more fun working on the client side, but all this knowledge comes in very handy when working with a back-end team.
Project Management

Having worked as a project manager makes me fully understand the project as a whole and thus makes me easier to work with.

My work is always delivered on-time or ahead of schedule. On every single project I try very hard to build long term relationships with my clients. That’s why most of them have actually become friends of mine.

I'm available for freelance work, Hire me!

Front-End Web Developer

Ideascale

IdeaScale Community Front End

VoteLinks Microformat

Mac-like Tags

IdeaScale Customizations

Motociclismo

hAtom Microformat

Optimized CSS

hReview Microformat

Montes del Pardo

ActionTeam

My Skills

Well-Structured HTML

Optimized CSS

Extended Semantic Markup

Unobtrusive Javascript

Wordpress customization

Drupal themes

PHP

Project Management

What I'm Saying...

What I’ve been listening to

Find me on