title: Creating basic portfolio website using Locomotive CMS (Ruby on rails, haml)
body: <p>I've been trying to create a basic portfolio such as this one (www.tommyblue.it) using Locomotive CMS,
  I've managed to set up all the needed gems and required programs, mongodb, homebrew etc... 
  However due to the extreme difficulty of finding decent haml or Locomotive CMS documentation (for a newbie) online I'm stuck with it. My goal would be to have running app before the end of the month, crazy uh? </p>
  
  <p>Any help is truly appreciated. </p>
  
  <p>Basically this is what I'm stuck with atm: </p>
  
  <pre><code>{{ 'js.js' | javascript_tag }}
  {{ 'main.js' | javascript_tag }}
  {{ 'custom.js' | javascript_tag }}
  {{ 'jquery-1.7.1.min.js' | javascript_tag }}
  {{ 'jquery.easing.1.3.js' | javascript_tag }}
  {{ 'jquery.masonry.min.js' | javascript_tag }}
  {{ 'jquery.prettyPhoto.js' | javascript_tag }}
  {{ 'jquery.quicksand.js' | javascript_tag }}
  {{ 'jquery.tweet.js' | javascript_tag }}
  {{ 'modernizr.js' | javascript_tag }}
  {{ 'style.css' | stylesheet_tag }}
  {{ 'font.css' | stylesheet_tag }}
  {{ 'prettyPhoto.css' | stylesheet_tag }}
  {{ 'reset.css' | stylesheet_tag }}
  {{ 'typography.css' | stylesheet_tag }}
  
  
  
  
  
  &lt;!DOCTYPE HTML&gt;
  &lt;html&gt;  
      &lt;head&gt;
  
  
  
  
          &lt;meta charset="UTF-8"&gt;
      {{ Design.Diverso }}
  
  
      &lt;/head&gt;
  &lt;!--[if lt IE 7 ]&gt; &lt;body class="ie6"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7 ]&gt;    &lt;body class="ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8 ]&gt;    &lt;body class="ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 9 ]&gt;    &lt;body class="ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if (gt IE 9)|!(IE)]&gt;&lt;!--&gt; &lt;body&gt; &lt;!--&lt;![endif]--&gt;  
  
  
  
      &lt;div class="body-inside"&gt;
              &lt;!-- begin header --&gt;
              &lt;header id="header"&gt;
                  &lt;!-- begin slider --&gt;
                  &lt;div id="f_slider"&gt;
  
                      &lt;div class="slider"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;div class="row"&gt;
                                      &lt;h5&gt;HELLO,&lt;/h5&gt;
                                      &lt;h2&gt;WELCOME TO &lt;span class="h_black"&gt;NONAME&lt;/span&gt;&lt;/h2&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row"&gt;   
                                          &lt;h4&gt;                                                                    
                                              Enjoy our company For the design &amp; production of all manner of digital creative.                                            
                                          &lt;/h4&gt;                                                   
                                  &lt;/div&gt;
  
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;div class="row text-center"&gt;
                                      &lt;h2&gt;Enjoy &lt;span class="h_black"&gt; our &lt;/span&gt;company  &lt;/h2&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row one-half text-right"&gt;   
                                      &lt;h4&gt;Who we are&lt;/h4&gt; 
                                      &lt;div class="content_big"&gt;                       
                                          Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
                                          Lorem ipsum dolor sit amet, consecadipiscing elit. 
                                      &lt;/div&gt;                                                          
                                  &lt;/div&gt;
                                  &lt;div class="row one-half last"&gt;
                                      &lt;h4&gt;What we've done&lt;/h4&gt;    
                                      &lt;div class="content_big"&gt;                       
                                          Lorem ipsum dolor sit amet, consecadipiscing elit. Duis nec purus tellus, quis pulvinar tortor.
                                          Lorem ipsum dolor sit amet, &lt;a href="#"&gt;consecadipiscing&lt;/a&gt; elit. 
                                      &lt;/div&gt;  
                                  &lt;/div&gt;
                                  &lt;span class="clear"&gt;&lt;/span&gt;
                              &lt;/li&gt;       
                              &lt;li&gt;
                                  &lt;div class="row one-half text-right"&gt;
                                      &lt;h2&gt; we make  &lt;/h2&gt;
                                      &lt;h2&gt; it &lt;span class="h_black"&gt;better&lt;/span&gt;&lt;/h2&gt;
                                  &lt;/div&gt;
                                  &lt;div class="row one-half last"&gt;     
                                      &lt;h4&gt;Lorem ipsum dolor&lt;/h4&gt;
                                      &lt;div class="content_big"&gt;                       
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec.
  
  
  
                                      &lt;div&gt;                                   
                                          {{ 'html5_logo.png' | theme_image_tag }}
                                          {{ 'css3_logo.png' | theme_image_tag }}                             
                                          {{ 'jquery_logo.png' | theme_image_tag }}                                                                                                                                                                           
                                  &lt;/div&gt;
                                  &lt;span class="clear"&gt;&lt;/span&gt;
                              &lt;/li&gt;                                                   
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- end slider --&gt;
                  &lt;!-- begin navigation --&gt;
  
                 &lt;nav id="top_menu"&gt;
                      &lt;div class="inside"&gt;
                          &lt;!-- logo --&gt;
                          &lt;a href="#" class="logo"&gt;
                              {{ 'logo.png' | theme_image_tag }}
                          &lt;/a&gt;
                          &lt;!-- begin menu --&gt;
  
  
  
  
  
  
                          &lt;ul class="menu"&gt;
                              &lt;li&gt;
                                  &lt;a href="index.html"&gt;
                                      Home
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="works.html"&gt;
                                      Works
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="blog.html"&gt;
                                      Blog
                                  &lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="blog_post.html" title="Single Post"&gt;Single Post&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="services.html"&gt;
                                      Services
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="about.html"&gt;About Us&lt;/a&gt;
                              &lt;/li&gt;               
                              &lt;li&gt;
                                  &lt;a href="#"&gt;
                                      Features
                                  &lt;/a&gt;
                                  &lt;!-- begin sub menu --&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="typography.html"&gt;
                                              Typography
                                          &lt;/a&gt;
                                      &lt;/li&gt;   
                                      &lt;li&gt;
                                          &lt;a href="columns.html"&gt;
                                              Columns
                                          &lt;/a&gt;
                                      &lt;/li&gt;   
                                      &lt;li&gt;
                                          &lt;a href="elements.html"&gt;
                                              Elements
                                          &lt;/a&gt;
  
                                      &lt;/li&gt;   
                                      &lt;li&gt;
                                          &lt;a href="team.html"&gt;
                                              Our Team
                                          &lt;/a&gt;
                                      &lt;/li&gt;   
  
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="contact.html"&gt;
                                      Contact
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;!-- end menu --&gt;
                      &lt;/div&gt;              
                  &lt;/nav&gt;
                  &lt;!-- end navigation --&gt;
              &lt;/header&gt;
              &lt;!-- end header --&gt;
              &lt;!-- begin main --&gt;
              &lt;article id="main"&gt;
  
                  &lt;!-- Begin ajax menu --&gt;
  
                  &lt;nav id="to-top-menu"&gt;
                      &lt;span&gt;&lt;/span&gt;
                  &lt;/nav&gt;
  
                  &lt;!-- end ajax menu --&gt;
  
                  &lt;ul class="fast_link"&gt;
                      &lt;li class=""&gt;
                          &lt;div class="link_wrap" data-link="works"&gt;
                              &lt;div class="link_title"&gt;
                                  &lt;h2&gt;OUR WORKS&lt;/h2&gt;
                                  &lt;p&gt;Recent Projects&lt;/p&gt;
                              &lt;/div&gt;
                              {{ 'a_works.png' | theme_image_tag }}
                              {{ 'a_works_hover.png' | theme_image_tag }}&gt;
                              &lt;span class="call_ajax"&gt;&lt;/span&gt;                                                                                             
                          &lt;/div&gt;      
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;div class="link_wrap" data-link="blog"&gt;
                              &lt;div class="link_title"&gt;
                                  &lt;h2&gt;BLOG&lt;/h2&gt;
                                  &lt;p&gt;From the Blog&lt;/p&gt;
                              &lt;/div&gt;  
                              {{ 'a_blog.png' | theme_image_tag }}
                              {{ 'a_blog_hover.png' | theme_image_tag }}
                              &lt;span class="call_ajax"&gt;&lt;/span&gt;                                                                             
                          &lt;/div&gt;                                              
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;div class="link_wrap" data-link="services"&gt;
                              &lt;div class="link_title"&gt;
                                  &lt;h2&gt;SERVICES&lt;/h2&gt;
                                  &lt;p&gt;What we do&lt;/p&gt;
                              &lt;/div&gt;
                              {{ 'a_service.png' | theme_image_tag }}
                              {{ 'a_service_hover.png' | theme_image_tag }}   
                              &lt;span class="call_ajax"&gt;&lt;/span&gt;                                                                 
                          &lt;/div&gt;              
                      &lt;/li&gt;
                      &lt;li class=""&gt;
                          &lt;div class="link_wrap" data-link="team"&gt;
                              &lt;div class="link_title"&gt;
                                  &lt;h2&gt;THE TEAM&lt;/h2&gt;
                                  &lt;p&gt;Meat the team &lt;/p&gt;
                              &lt;/div&gt;
                              {{ 'a_team.png' | theme_image_tag }}
                              {{ 'a_team_hover.png' | theme_image_tag }}
                              &lt;span class="call_ajax"&gt;&lt;/span&gt;                                                                                                             
                          &lt;/div&gt;                                          
                      &lt;/li&gt;
                      &lt;li class="last"&gt;
                          &lt;div class="link_wrap" data-link="contact"&gt;
                              &lt;div class="link_title"&gt;
                                  &lt;h2&gt;CONTACT&lt;/h2&gt;
                                  &lt;p&gt;Get in touch&lt;/p&gt; 
                              &lt;/div&gt;
                              {{ 'a_contact.png' | theme_image_tag }}
                              {{ 'a_contact_hover.png' | theme_image_tag }}
                              &lt;span class="call_ajax"&gt;&lt;/span&gt;                                                                                                                 
                          &lt;/div&gt;                                          
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
                  &lt;span class="clear"&gt;&lt;/span&gt;
  
                  &lt;!-- home page title --&gt;
                  &lt;nav class="page_title displaynone"&gt;
  
                      &lt;h2&gt;
                          &lt;span class="title"&gt;PLACE SELECT A PAGE&lt;/span&gt; 
                          &lt;span class="loading_link"&gt;&lt;/span&gt; 
                      &lt;/h2&gt;
  
                  &lt;/nav&gt;  
  
                  &lt;!-- callback ajax content --&gt;
                  &lt;section id="content"&gt;
  
                  &lt;/section&gt;
                  &lt;span class="clear"&gt;&lt;/span&gt;
  
              &lt;/article&gt;
              &lt;!-- end main --&gt;
          &lt;/div&gt;
          &lt;!-- end body inside --&gt;
  
          &lt;!-- begin footer --&gt;
          &lt;footer id="footer"&gt;
              &lt;div class="inside"&gt;            
                  &lt;div class="footer-widget"&gt;
                      &lt;div class="one-third"&gt;                     
                          &lt;h2&gt;Follow Us&lt;/h2&gt;
                          &lt;p&gt;
                              Omnes enim peccaverunt et egent gloriam Dei. In principio creavit Deus caelum et terram.
                          &lt;/p&gt;
  
                          &lt;ul class="footer-socials"&gt;
                              &lt;li class="rss"&gt;&lt;a href="#" title="Rss"&gt;&lt;/a&gt;&lt;/li&gt;                           
                              &lt;li class="twitter"&gt;&lt;a href="#" title="Twitter"&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="facebook"&gt;&lt;a href="#" title="Facebook"&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dribbble"&gt;&lt;a href="#" title="Dribbble"&gt;&lt;/a&gt;&lt;/li&gt;                                                     
                              &lt;li class="vimeo"&gt;&lt;a href="#" title="Vimeo"&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="skype"&gt;&lt;a href="#" title="Skype"&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;span class="clear"&gt;&lt;/span&gt;
  
                      &lt;/div&gt;
                      &lt;div class="one-third"&gt;
                          &lt;h2&gt;About Us&lt;/h2&gt;
                          &lt;p&gt;{{ 'logo.png' | theme_image_tag }}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis, a adipiscing diam ipsum in enim. Donec hendrerit dictum quam, a tincidunt neque vulputate nec. Proin nec sollicitudin augue. Donec hendrerit&lt;/p&gt;                                                                       
                      &lt;/div&gt;
                      &lt;div class="one-third last"&gt;
                          &lt;h2&gt;Join our newsletter&lt;/h2&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar, odio eu consectetur porta, libero orci tempor felis.&lt;/p&gt;                      
                          &lt;form id="form_newslatter"&gt;
                              &lt;input type="text" name="newslatter" id="newslatter" placeholder="Email Address..." /&gt;
                          &lt;/form&gt;                 
                      &lt;/div&gt;
                      &lt;span class="clear"&gt;&lt;/span&gt;
                  &lt;/div&gt;                                  
  
                  &lt;div class="footer-bottom"&gt;
                      &lt;span class="copyright"&gt;© 2012 · AGT NoName ( &lt;a href="http://validator.w3.org/check?uri=http://demo.agtheme.com/noname" title="Valid html5"&gt; Valid html5 &lt;/a&gt; ) All Rights Reserved&lt;/span&gt;
                      &lt;nav id="footer_menu"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Works&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/footer&gt;
          &lt;!-- end footer --&gt; 
          &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"&gt;&lt;/script&gt;       
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>