About Me

About-Me.markdown

About Me

Wilson Mar

Based on fork of http://codepen.io/ainarela/pen/KwmNdW.

A Pen by Wilson Mar on CodePen.

License.

index.html

<!-- by WilsonMar@gmail.com 310.320-7878 -->
<header class="masthead">
    <h1 class="masthead-heading">Hi, I'm</h1>
    <h2 class="masthead-subheading">Wilson Mar</h2>
   <div class="masthead-photo"><img src="http://www.merc.tv/img/wilson/200x200.png" /></div>
</header>

<section class="intro-section">
  <div class="wrapper">
    <div class="row">
      <div class="columns-1">
        <h1 class="section-heading">Hello!</h1>
        <p class="intro-p">I'm a designer with a background in the audiovisual field, currently improving my skills as a front-end developer at Thinkful.</p> 
        <p class="intro-p">I love Internet because of his amazing potential to connect people, ideas, knowledge, resources and dreams. Because it makes possible that great things happen to real people in the real world, multiplying the possibilities that we would have without it.</p>
        <p class="intro-p">As a professional, I want to contribute to that, creating delightful web experiences that make sense to their users and that are functional.</p>
        <p class="intro-p">In the web design and development, I have finally found the things that I love all together in one job: working with messages, ideas and communication. Building things that are beautiful and useful. And keeping both sides of my brain, the creative one and the analytic one, busy and happy.</p>       
      </div>
    </div>
  </div>  
</section>
<section class="location-section">
  <div class="wrapper">
    <div class="row">
      <div class="columns-1">
        <h1 class="section-heading">Where I'm from</h1>
        <p>I telecommute from a farm in Montana where the buffalo still roam.</p>
      </div>
    </div>
  </div>
</section>

<section  class="more-info-section">
  <div class="wrapper">
    <div class="row">
      <div class="columns-1">
        <h1 class="section-heading">More about me</h1>
      </div>
    </div>
    <div class="row">
      <div class="columns-2">
        <div class="hobbies">
          <h2 class="section-subheading">Things that I love</h2>
          <p>I've traveled to all 50 states and provinces of Canada, 
          plus many countries.</p>

          <p>Computers are my hobby. I've worked in many of the Fortune 500 companies in America, as a consultant on back-end server performance and capacity.</p>

        </div>
      </div>
      <div class="columns-2 last">
        <div class="dream-job">
          <h2 class="section-subheading">My dream job</h2>
          <p>I now seek to build a capability that helps a lot of people. 
            Using leading edge tools.</p>
        </div>
        <div class="music">
          <h2 class="section-subheading">Listening now</h2>
          <p>The album <i>In Our Nature</i>, by <a href="http://www.jose-gonzalez.com/">José González</a>. Perfect for these winter days.</p>
        </div>
      </div>
    </div>
  </div>  
</section>
<footer>
  <p>Visit me:</p>
  <ul class="social-links">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Behance</a></li>
    <li><a href="#">Linkedin</a></li>
    <li><a href="#">Pinterest</a></li>      
  </ul>
  <p>Cover image via <a href="http://deathtothestockphoto.com/">Death to the Stock Photo</a> · Icons via <a href="http://www.alessioatzeni.com/metrize-icons/">Alessio Atzeni</a></p>
</footer>

style.scss

/* Sections: Imports, Main, Headers, Grid, Font Typography, Colors 
   by WilsonMar@gmail.com 310.320-7878
   Using SCSS variables.
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700italic,700);
@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700);

$primary1: #2A2C31;
$primary2: #666666; /* Body paragraph green */
$accent1: #97DF96;
$complement: #639962; /* darker during hover */

body {
  margin: 0;
}

section, footer {
  clear: both;
}

.wrapper {
  margin: 0 auto;
  max-width: 46.25em;
  width: 80%;
}

.intro-section, footer {
  margin-top: 8em;
}

.location-section, .more-info-section {
  margin-top: 6em;
}

/* Grid section: */

.row {
  clear: both;
  width: 100%;
}

.columns-1 {
  box-sizing: border-box;
  width: 100%;
  padding: 0 2.5em;
}

.columns-2 {
  box-sizing: border-box;
  width: 50%;
  padding: 0 2.5em;
  display: inline-block;
}

.last {
  float: right;
}


/* Font Typography */

body {
  font-family: 'Gentium Book Basic', Georgia, serif;
}

p {
  font-size: 1.085em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: ‘Open Sans’, Arial, serif; 
  font-weight: 700;
}

h1 {
  font-size: 4.5em;
}

h2 {
  font-size: 1.475em;
}

footer p, footer li {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.925em;
  font-weight: 400;
}

.section-heading {
  width: 100%;
  border-bottom: 1px solid;
  font-size: 2.75em;
  padding: 0.375em 0;
  text-align: center;
}

.section-subheading::before {
  background-size: cover;
  width: 30px;
  height: 30px;
  display: inline-block;
  margin: -0.125em 0.375em;
}

/* Links */

 a {
   text-decoration: none;
   transition: color 0.5s;
 }

/* Colors */

body {  
  color: $primary1;
}

p {
  color: $primary2;
}

a {
  color:  $accent1;
}

a:hover {
  color: $complement;
}

footer {
  background-color: $primary1;
}

footer p {
  color: #fff;
}

.section-heading {
  border-color: $accent1;
}

/* <header> */

.masthead {
  background: url("http://merc.tv/img/bkg/hay_rolls.jpg") no-repeat center center fixed;
  background-size: cover;
  padding: 10.6em 0;
  position: relative;
  text-align: center;
  width: 100%;
}

.masthead-heading {
  margin: 0.2em 0 0;
}

.masthead-subheading {
  font-weight: 400;
  margin: 0.75em 0;  
}

.masthead-photo {
  border: 0.2em solid $accent1;
  border-radius: 5em;
  bottom: 0;
  height: 9.375em;
  left: 50%;
  margin-bottom: -4.6975em;
  margin-left: -4.6975em;
  overflow: hidden;
  position: absolute;
  width: 9.375em;
}

.my-photo img {
  width: 150px;
}


/* More info section */

.hobbies .section-subheading::before {
  content: "";
  background-image: url("http://ainarequena.com/thinkful/about-me/images/heart.svg");
}

.dream-job .section-subheading::before {
  content: "";
  background-image: url("http://ainarequena.com/thinkful/about-me/images/star.svg");
}

.music .section-subheading::before {
  content: "";
  background-image: url("http://ainarequena.com/thinkful/about-me/images/music.svg");
}

/* Footer */

footer {
  padding: 1.25em 0;
  text-align: center;
}

.social-links li {
  display: inline-block;
  list-style-type: none;
  margin: 0 0.325em;
}