Hi, I'm Alessandro, a full stack Web developer. I started programming on my own during high school, with Visual Basic on Windows 98SE. Meh. That's a big jump being working with Ruby and Web now, more than 10 years later, but the outcome for me is the same as when I started: I create something. And something great. @@ -28,33 +29,40 @@ I like entrepreneurship, startups, house music, bartending, art, a lot of sports and culture in general!
Competencies
--
-
- - Ruby 1.8.x/1.9.x - -
- - Rails 2.x/3.x - -
Industries of expertise
--
-
- - eCommerce - -
- - Telephony - -
- - Social - -
Portfolio examples
--
-
- portfolio 1 -
- portfolio 2 -
+
+
+ Competencies
+-
+ <% @competencies.each do |name, text| %>
+
-
+ <%= image_tag "#{name}.jpg", :title => name %>
+
+ <%= text %> +
+
+ <% end %>
+
+
+ Industries of expertise
+-
+ <% %w(eCommerce Telephony Social).each do |name| %>
+
-
+ <%= image_tag "#{name}.jpg", :title => name %>
+
+ <%= name %> +
+
+ <% end %>
+
+
+ Portfolio examples
+-
+
- portfolio 1 +
- portfolio 2 +
Contacts (click and expand options)
- diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index e6e15c1..2a01b19 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -1,8 +1,18 @@ +/* float clearing for IE6 */ +* html .clearfix { height: 1%; overflow: visible; } + +/* float clearing for IE7 */ +* + html .clearfix { min-height: 1%; } + +/* float clearing for everyone else */ +.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; font-size: 0; } + #wrapper { font-family: Helvetica; font-size: 18px; line-height: 28.8px; background-color: #f7ede3; color: black; } #wrapper #introduction { text-shadow: 1px 1px 0px #FFFFFF; margin: auto; width: 1200px; height: 706px; background-image: url(../images/ale-filtered.png); background-repeat: no-repeat; } #wrapper #introduction #teaser { background-image: url(../images/quotes.png); background-repeat: no-repeat; width: 400px; position: relative; left: 50%; top: 100px; text-align: center; padding-left: 80px; } #wrapper #introduction #teaser a { font-size: 30px; line-height: 45px; font-weight: bold; color: #802222; } #wrapper #introduction #teaser .title { font-size: 34px; line-height: 51px; font-weight: bold; } +#wrapper #introduction #teaser .availability { font-size: 13px; line-height: 18px; } #wrapper #introduction #info { margin-top: 350px; } #wrapper #introduction #info .name { font-size: 50px; line-height: 60px; font-weight: bold; text-align: right; } #wrapper #introduction #info .description { font-size: 40px; font-weight: bold; text-align: right; font-style: italic; color: #802222; } @@ -11,5 +21,9 @@ #wrapper #details #content #blablabla { background-image: url(../images/white-quotes.png); background-repeat: no-repeat; padding-left: 65px; } #wrapper #details #content #blablabla span.important { text-shadow: 1px 1px 0px #B05252; font-weight: bold; color: black; font-size: 19px; } #wrapper #details #content #blablabla p a { font-weight: bold; text-decoration: underline; color: #f7ede3; } -#wrapper #details #content h2 { font-size: 24px; line-height: 36px; font-weight: bold; margin-top: 30px; color: black; text-shadow: 1px 1px 0px #B05252; } +#wrapper #details #content #competencies ul li, #wrapper #details #content #industries ul li { padding: 5px; width: 290px; height: 50px; float: left; } +#wrapper #details #content #competencies ul li img, #wrapper #details #content #industries ul li img { float: left; width: 50px; height: 50px; margin-right: 15px; } +#wrapper #details #content #competencies ul li p, #wrapper #details #content #industries ul li p { margin-top: 12px; } +#wrapper #details #content #competencies h2, #wrapper #details #content #industries h2 { font-size: 24px; line-height: 36px; font-weight: bold; margin-top: 30px; color: black; text-shadow: 1px 1px 0px #B05252; } +#wrapper #details #content #portfolio h2, #wrapper #details #content #contacts h2 { font-size: 24px; line-height: 36px; font-weight: bold; margin-top: 30px; color: black; text-shadow: 1px 1px 0px #B05252; } #wrapper #details #content #footer { text-align: center; margin-top: 50px; } diff --git a/public/stylesheets/main.scss b/public/stylesheets/main.scss index 1d637b0..4551429 100644 --- a/public/stylesheets/main.scss +++ b/public/stylesheets/main.scss @@ -3,6 +3,27 @@ $bright: #F7EDE3; $black: #000000; $basic_size: 18px; +/* float clearing for IE6 */ +* html .clearfix{ + height: 1%; + overflow: visible; +} + +/* float clearing for IE7 */ +*+html .clearfix{ + min-height: 1%; +} + +/* float clearing for everyone else */ +.clearfix:after{ + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; + font-size: 0; +} + #wrapper { font-family: Helvetica; font-size: $basic_size; @@ -36,6 +57,10 @@ $basic_size: 18px; line-height: 51px; font-weight: bold; } + .availability { + font-size: $basic_size - 5; + line-height: $basic_size; + } } #info { margin-top: 350px; @@ -80,13 +105,42 @@ $basic_size: 18px; color: $bright; } } - h2 { - font-size: 24px; - line-height: 36px; - font-weight: bold; - margin-top: 30px; - color: $black; - text-shadow: 1px 1px 0px #B05252; + #competencies, #industries { + ul { + li { + padding: 5px; + width: 290px; + height: 50px; + float: left; + img { + float: left; + width: 50px; + height: 50px; + margin-right: 15px; + } + p { + margin-top: 12px; + } + } + } + h2 { + font-size: 24px; + line-height: 36px; + font-weight: bold; + margin-top: 30px; + color: $black; + text-shadow: 1px 1px 0px #B05252; + } + } + #portfolio, #contacts { + h2 { + font-size: 24px; + line-height: 36px; + font-weight: bold; + margin-top: 30px; + color: $black; + text-shadow: 1px 1px 0px #B05252; + } } #footer { text-align: center;