Sawyer is a creative and professional template that allows you to show off your resume & portfolio to impress your future clients. Introduce yourself to clients, future employers and the world the way you want to.

Live Preview Buy at the CreativeMarket

Layout Options

Sawyer is crafted using Bootstraps, therefore it comes with all of it’s glory in addition to it’s unique appeal. Here are a few to help you get started with the customization process. Unlike other themes in the marketplace, Sawyer is designed to be easy to edit and to the point. Just open the style.scss file to get started (note that a compiler is necessary to convert the file to style).

The structure:

+ fonts
+ images
   - hero
   - icons
   - journal
   - portfolio
+ scripts
   - animsition.min.js
   - bootstrap.min.js
   - jquery.min.js
   - main.js
+ style
   - _variables.scss
   - animate.css
   - animsition.min.css
   - bootstrap.min.css
   - font-awesome.min.css
   - ionicons.min.css
   - style.min.css
   - style.scss
- about.html
- contact.html
- index.html
- journal.html
- journalsingle.html
- portfolio.html

The Power of SASS

Sawyer was built using the power of SASS, the world’s most mature, stable, and powerful professional grade CSS extension language. There are two major SASS files (ext .scss) in Sawyer. First is the variables file (_variables.scss). This contain all the size, color and formatting information that will allow you to quickly change the overall look and feel of the site. It also contains several mixins or definitions that help us easily define cross-browser compatibility. The variable files is never called direction, however, it is loaded directly into the main SASS stylesheet (style.scss). This stylesheet controls the layout and structure code that is later compiled into a web legible cascading stylesheet format (css). Since SASS is not legible by browsers yet, you will need to use a compiler to export your SASS file.

Split Column

Sawyer is a unique design that stands out from the rest. It is a split design layout that separates content into two columns each serving it’s own purpose. On a website you don’t want to overload the user with ‘too much content.’ The two columns help organize content that makes the design easy on the eyes.

It’s Responsive

Yes, that’s right, Sawyer is responsive! Everyone can view sawyer on all devices including mobile phones and tablets. Give it a try.

Portfolio

Sawyer has a custom portfolio section that takes advantage of Bootstrap Carousel and some custom Javascript. To fully take advantage of the split layout option, the thumbnails and the carousel are separated. Click on a thumbnail on the left and the carousel will move to the respective slide.

Thumbnails

<ul class="portfolio-thumb">
   <li class="photos website">
      <a class="thumbnail" id="carousel-selector-1">
         <img src="images/portfolio/thumb/port1.jpeg">
      </a>
   </li>
</ul>

Thumbnails have classes, id and src that help it function. As color coded above, these are the purpose each of these items serve

photos website – Category for filter
carousel-selector-1 – Links to slider in carousel
images/portfolio… – Links to thumbnail image

Thumbnail Filter

Thumbnail filters are simple to update. You can add as many filters as you like (keep note of the wrapping). You just need to update the respective id.

Carousel

The carousel used in the portfolio is powered by the default bootstrap carousel. It was slightly customized to fit the split layout and to allow for deep-linking. All the javascript work is already done for you. All you need to do is add your images and text.

<div class="item" data-slide-number="1">
   <div class="carousel-image" style="background-image: url(images/portfolio/full/port1.jpeg);background-position: center center"></div>
   <div class="carousel-caption">
      <h3>Caption 1</h3>
      <p>Some text here. Maybe even a paragraph.!</p>
    </div>
</div>

data-slide-number=”1″ – ID that corresponds to the corresponding thumbnail. Links from carousel-selector-1.
style=”…” – Update the style of the background image you see for the particult portfolio item.
<h3>Caption … – Add your own content for the portfolio item.

Google Map

Sawyer comes loaded with a customized Google Map. By default, the map is pointed to the Financial District in New York City, but you can easily update it to any destination you like. To customize the map, open main.js and navigate to the Google Map section. There you can customize the color of the map background and the location. Furthermore, you can also change the pin to your choosing and the message you see in the infobar when the pin in clicked.
Update colors:

var $main_color = '#2d313f',

Location and Marker:

var map = new GMaps({
   div: '#gmap',
   lat : 40.710310,
   lng : -74.008456,
   scrollwheel: false,
   draggable: draggableOp,
   zoom: 16,
   disableDefaultUI: true,
   styles : style
});
map.addMarker({
   lat : 40.710310,
   lng : -74.0084567,
   icon: 'images/icons/marker.png',
   infoWindow: {
      content: 'If you see me, say hello!'
   }
});

Contact Form

Don’t waste time coding your own contact form. Sawyer comes with one pre-coded, so you can focus more on the content. All you need to do is change the email address the mail is sent to. To edit, simply open sendEmail.php file in the php folder. There, update the recipient value and you’re good to go.

$recipient = "example@example.com";

Scripts, Font, Icons & Placeholder Images

Sawyer uses several font icons and placeholder images. All of these contents are free to use with some requiring credit to the author.

Scripts & Libraries