Skip to content

Commit

Permalink
layout with images for details
Browse files Browse the repository at this point in the history
  • Loading branch information
@aledalgrande
aledalgrande committed Apr 13, 2011
1 parent cd07ee9 commit aaaac7f
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 36 deletions.
21 changes: 21 additions & 0 deletions app/controllers/home_controller.rb
View file
@@ -1,2 +1,23 @@
class HomeController < ApplicationController

def index
@competencies = { :ruby => 'Ruby 1.8.x/1.9.x',
:rails => 'Rails 2.x/3.x',
:rspec => 'RSpec',
:pair => 'Pair Programming',
:jquery => 'jQuery',
:tdd => 'TDD',
:html => 'HTML',
:css => 'CSS',
:ci => 'Continuous Integration',
:agile => 'Agile',
:sinatra => 'Sinatra',
:cucumber => 'Cucumber',
:php => 'PHP 5.2.x/5.3.x',
:phpagi => 'PHPAgi',
:java => 'Java 5/6',
:mac => 'Mac',
:linux => 'Linux' }
end

end
64 changes: 36 additions & 28 deletions app/views/home/index.html.erb
View file
Expand Up @@ -8,6 +8,7 @@
<a href="#contacts">
Hire me
</a>
<p class="availability">(available from 13/6)</p>
</div>
<div id="info">
<p class="name">Alessandro Dal Grande</p>
Expand All @@ -16,7 +17,7 @@
</div>

<div id="details">
<div id="content">
<div id="content" class="clearfix">
<div id="blablabla">
<p>
Hi, I'm Alessandro, a <span class="important">full stack Web developer</span>. 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 <span class="important">create something</span>. And something <span class="important">great</span>.
Expand All @@ -28,33 +29,40 @@
I like entrepreneurship, startups, house music, bartending, art, a lot of sports and culture in general!
</p>
</div>
<h2>Competencies</h2>
<ul>
<li>
Ruby 1.8.x/1.9.x
</li>
<li>
Rails 2.x/3.x
</li>
</ul>
<h2>Industries of expertise</h2>
<ul>
<li>
eCommerce
</li>
<li>
Telephony
</li>
<li>
Social
</li>
</ul>
<h2>Portfolio examples</h2>
<ul>
<li>portfolio 1</li>
<li>portfolio 2</li>
</ul>
<div id="contacts">
<div id="competencies" class="clearfix">
<h2>Competencies</h2>
<ul>
<% @competencies.each do |name, text| %>
<li>
<%= image_tag "#{name}.jpg", :title => name %>
<p>
<%= text %>
</p>
</li>
<% end %>
</ul>
</div>
<div id="industries" class="clearfix">
<h2>Industries of expertise</h2>
<ul>
<% %w(eCommerce Telephony Social).each do |name| %>
<li>
<%= image_tag "#{name}.jpg", :title => name %>
<p>
<%= name %>
</p>
</li>
<% end %>
</ul>
</div>
<div id="portfolio" class="clearfix">
<h2 class="clearfix">Portfolio examples</h2>
<ul>
<li>portfolio 1</li>
<li>portfolio 2</li>
</ul>
</div>
<div id="contacts" class="clearfix">
<h2>Contacts (click and expand options)</h2>
<ul>
<li>
Expand Down
16 changes: 15 additions & 1 deletion public/stylesheets/main.css
View file
@@ -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; }
Expand All @@ -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; }
68 changes: 61 additions & 7 deletions public/stylesheets/main.scss
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit aaaac7f

Please sign in to comment.