index.html

---
layout: bootstrap
title: Home
---

<div class="jumbotron">
  <div class="container">
    <h2><strong>Welcome to Technical Portfolios (TechFolios)</strong></h2>

    <p><strong>Easily create technical portfolios using GitHub Pages, Jekyll, Semantic UI, and JSON Resume.</strong>
    </p>

  </div>
</div>

<div class="white-background">
  <div class="container">
    <div class="row">
      <div class="col-sm-7">
        <a href="http://techfolios.github.io/template"><img style="margin-top: 0px;" src="images/techfolio-molly-home-page.png" class="img-responsive"></a>
      </div>
      <div class="col-sm-5">
        <h3><strong>Create modern, responsive technical portfolio sites <em>fast!</em></strong></h3>
        <p>If you have ever tried to build a technical portfolio site using a blogging platform such as WordPress, you know it takes time and the results are not always satisfactory.</p>
        <p>The goal of TechFolios is to provide a quick and easy way to build a high quality technical portfolio site, while still enabling custom layout if desired.</p>
        <p>
          Sites built with TechFolio have the following components:
          <ul>
            <li>A <b>home</b> page with basic biographical information;</li>
            <li>A <b>projects</b> page with pointers to subpages or external sites.</li>
            <li>An <b>essays</b> page highlighting your technical writing.</li>
            <li>A <b>resume</b> page presenting your online resume. </li>
            <li><b>Links</b> to your professional network sites. </li>
          </ul>
        </p>

        <p>
          Click on the image to the left to browse a template site for a hypothetical computer science student named Molly Maluhia. Then come back to this page to learn more and get started.
        </p>

      </div>
    </div>
  </div>
</div>

<div class="gray-background">
  <div class="container">
    <div class="row">

      <div class="col-sm-5">
        <h3><strong>Provide details using JSON Resume</strong></h3>

        <p>You provide basic biographical information using <a href="http://jsonresume.org">JSON Resume</a> format. JSON Resume is a developer-driven, open source initiative to provide a JSON-based standard for resumes.</p>
        </p>
        <p>TechFolio uses your JSON Resume data to build both the home and resume pages.</p>

        <p>
          Using JSON Resume has advantages: if you prefer, you can format your resume using a <a href="https://jsonresume.org/themes/">JSON Resume Theme</a>.  In addition, an open standard might make it easier for you to reuse your biographical data in other contexts.
        </p>
      </div>
      <div class="col-sm-7">
        <img style="margin-top: 20px; " src="images/techfolio-site-resume-full.png" class="img-responsive">
      </div>
    </div>
  </div>
</div>

<div class="white-background">
  <div class="container">
    <div class="row">
      <div class="col-sm-7">
        <img style="margin-top: 20px" src="images/techfolio-site-projects.png" class="img-responsive">
      </div>
      <div class="col-sm-5">
        <h3><strong>Content first, style later</strong></h3>

        <p>
          With TechFolio, the prebuilt themes are purpose-built for technical portfolios. Unlike blog platforms like WordPress,
          this means that you can focus solely on content when creating the initial release of your site.
        </p>

        <p>Later, as you get more comfortable with the system, you might decide to tailor the look-and-feel to more closely align with your personal style.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="gray-background">
  <div class="container">
    <h2><strong>Ready to learn more?</strong></h2>
    <div class="row">
      <div class="col-sm-3">
        <div class="thumbnail">
          <p style="text-align: center; padding-top: 10px"><a href="quickstart.html" class="btn btn-primary btn-lg" role="button">Quick
            Start <span class="glyphicon glyphicon-chevron-right"></span> </a></p>

          <div class="caption">
            <p>Fork the TechFolio template repo, edit some files, and publish your initial release. </p>
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="thumbnail">
          <p style="text-align: center; padding-top: 10px"><a href="userguide.html" class="btn btn-primary btn-lg" role="button">User Guide
            <span class="glyphicon glyphicon-chevron-right"></span> </a></p>

          <div class="caption">
            <p>Go beyond the QuickStart: edit your portfolio locally, get updates, and more.</p>
          </div>
        </div>
      </div>



      <div class="col-sm-3">
        <div class="thumbnail">
          <p style="text-align: center; padding-top: 10px"><a href="gallery.html" class="btn btn-primary btn-lg" role="button">Gallery
            <span class="glyphicon glyphicon-chevron-right"></span> </a></p>

          <div class="caption">
            <p>Check out some sample portfolios built using TechFolio.</p>
          </div>
        </div>
      </div>

      <div class="col-sm-3">
        <div class="thumbnail">
          <p style="text-align: center; padding-top: 10px"><a href="news.html" class="btn btn-primary btn-lg" role="button">News <span class="glyphicon glyphicon-chevron-right"></span> </a></p>

          <div class="caption">
            <p>Find out about updates and improvements to TechFolios</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>