Skills and attitude

In talking about my skills, I will go through the birth of this website and the technologies I used to build it. I believe this is the best way to show that I know my way around. I will talk about WordPress, Css3, Compass and other very cool stuff, so let’s get started.

I first came to grasps with WordPress about November 2011, when I had a course in Web Marketing in which this guy here and other great folks introduced me to the wonders of geekery. As always, when I jump into something I’m in with both feet right from the outset. I started my first few things and put up an affiliate website which is still maintaining my Apple spoils nowadays. In March I left my job in the fashion industry and switched to full-time WordPress designing in a small seo studio in Cupra Marittima.

GioSensation.com has been the first domain I bought, but I had never done anything with it until this August 2012, when I started crafting this website to test my skills in a relatively safe environment and test technologies such as Compass, icon fonts and other stuff I really wanted to have in my arsenal. The result is in front of you. You might like it or not, with its huge graphics (infinitely scalable, Retina users will love it) and a weird overall look. I am quite happy with it, because I managed to implement pretty everything I was after. Still, if I was to rebuild it tomorrow, I would take a completely different approach.

So, the concept was all in my mind and no mockups were created for this. I just made a couple of basic wireframes in Sketch 2, just to have a bit of a guidance, and went straight to the code. After all, this all begun as a testing field.

I went through a few skeleton themes for developers and found Bones to be the right for me. It is built around Html5 Boilerplate semantic wonders, has Less and Sass in-built, is mobile-first (though I messed completely here, but I will make amends, I promise – already bought half-a-dozen e-books on responsive web design).

So I started playing around with Compass, which – after a bit of confusion – I found to be very simple and incredibly powerful. To empower my Compass experience, I bought CodeKit. I already knew the guy from Less.app, and I have to admit that he is oh so cool. His websites are beautifully designed and the guy is so fun with everything he writes, from testimonials to release notes. Just great.

Anyway, I wanted to test icon fonts and went for FontAwesome, which offers a fair amount of different glyphs and supports sass. I decided to replace the usual post thumbnails with icon fonts and made them selectable on the backend for each post. Icon fonts are great for many reasons. What I was looking for was infinite scalability, simple gigantic graphics that load lightning fast and avoid too many http requests: icon fonts delivered on everything. –Edit: Now I am looking more closely to SVGs which seem to do the job much better, especially when it comes to adaptive design–

The trash symbol has been with me since my teen age, as has the GioSensation nickname (too long a story to tell). I decided to wrap it up in tags to meet up with my current occupation and to give it a little more style. I think it came out pretty nicely, with the red header there. 3D effects were achieved through css3 text-shadow and the result is nice indeed. I am planning to have the logo printed on a t-shirt or something, to look totally geeky and mad.

The slider and its buttons are completely built in css, no images (of course) and no Java. The control buttons are html radio buttons. The overall look of the buttons and graphic elements on the site has been inspired by the trends for iOS UI design, which I have been watching in awe on Dribble. I am aware that web design is currently following other trends, but I wanted to give it a go anyway.

Of course, giosensation.com unleashes the wonders of WordPress template tags to make sure everything on the site is SEO friendly. The site is bilingual, being written in English and Italian, and I used the qTranslate free plugin and its extension for meta tags to achieve the translations. Content is written in English first and then translated back to Italian and I also decided to disable qTranslate default feature of switching languages according to the user’s browser language, cause, folks, you gotta love English!

I guess this is pretty everything there is to it. If you are interested to learn more about me or this website, or want to hire me for a project, do not hesitate to contact me, I will be quite happy to disclose my coding secrets («what secrets?! you jerk!»).

I hope you enjoy this website.

Cheers!