bmorelli25 / Portfolio Template

Open Source, Fully customizable Web Developer Portfolio Template

Built with HTML, Flexbox (and soon to be a bit of JS)

To view a live demo, click here

This repo is an easily customizable personal portfolio template. Feel free to use it as-is or customize it as much as you want. I wanted to build a very simple template without any unnecessary bloat.

There are 8 customizable sections:

Jumbotron - Edit the h1 and p in the jumbotron-text div

<div class="jumbotron-text">
  <h1>Brandon Morelli</h1>
  <p>Full-Stack Web Developer in Boston, Ma.</p>
</div>

About - Edit the h2 and p, or add more, in the main-content div

<div class="main-content">
  <div class="content-header">
    <a class="anchor" name="about"></a>
    <h2>About</h2>
  </div>
  <div class="content-body">
    <p>text here</p>
    <p>text here</p>
  </div>
</div>

Experience - Experiences are organized in content-body div. There is an h4 and a p that you can edit.

          <div class="content-body">
            <div class="card">
              <div class="card-header">
                <h4>Company <span class="job-title">Job Title</span></h4>
              </div>
              <div class="card-content">
                <p>Paragraph text</p>
              </div>
            </div>

Education - Stored in a card div. Edit the h4 and p tags

            <div class="card">
              <div class="card-header">
                <h4>School <span class="job-title">Dates Attended</span></h4>
              </div>
              <div class="card-content">
                <p>Paragraph Text</p>
              </div>
            </div>

Project - Projects are stored in project-card divs. Edit the image, h4, and p

            <div class="project-card">
              <div class="project-image">
                <img src="http://placehold.it/250x350">
              </div>
              <div class="project-content">
                <h4>Project Name</h4>
                <p>Paragraph text</p>
                <a >Link Text</a>
              </div>
            </div>

Skills - Simply list items. Add or remove li to add/remove skills.

            <ul class="ul-skills">
              <li class="li-skills">Javascript</li>
            </ul>

Contact - Simply cahnge the address to include your email address

<form method="POST" action="https://formspree.io/[email protected]">

Footer - content-body div with an editable p

          <div class="content-body">
            <p>Copyright YOUR NAME 2017</p>
          </div>

To do

• [ ] Make responsive
• [ ] Smooth Scrolling
• [ ] Other effects?

Inspired by this template, I wanted to build a similiar template, but using Flexbox instead of bootstrap and jQuery.