Dev Portfolio Template

This repo contains an easy-to-customize personal dev portfolio template that was created with Sass and JavaScript. It is lightweight and fully responsive, as well as comes with the Bootstrap grid system and loaded with Font Awesome. The site is static and comes production ready if you just want to add your information and go. Alternatively, you can edit styles, colours, and scripts fairly easily. The site was built as modular as possible to make it easy to shift around styles and content.

To view a live demo, click here.

Features

Gulp ready (compiles Sass and minifies JS)
Sass ready with lots of commenting
Fully responsive
Comes with Bootstrap grid system
Easy colour changes can be done through simply variable edits

Setup and Configuration
- Making Edits / Customizing the Template
- Using the Template As Is
Customization and Editing
Changelog
License

Setup and Configuration

The setup required can be broken into two types:

If you want to make edits or customize the template
If you just want to add your information as use as is

Making Edits / Customizing the Template

To setup, simply fork the repo and run npm install in order to get all the Gulp dev dependencies. Next, run Gulp watch to compile the Sass and minify the JavaScript. Any changes done to the JavaScript (js/scripts.js) or Sass (sass/styles.scss) will be autocompiled and ready to go.

All scripts are within js/scripts.js and get minified to js/scripts.min.js. All styles are in sass/styles.scss and get compiled to css/styles.css. Both the minified scripts file and compiled CSS file are what is loaded on the page by default.

At this point, the page is ready to go and you can begin to add your own information and make any needed changes. The sections below contains a quick breakdown of each of the default sections and how they work.

Using The Template As Is

If you wish to use the template as is (i.e. how it's seen in the demo), then all that's required is the css, images, js, libs folders and the index.html file. You would then add your content to index.html as needed and you're good to go!

Customization and Editing

General

In general, most styles on the page are based off the definitions of variables in the variable section of the style sheet:

// Define base and accent colors
$base-color: #3498db;
$base-color-hover: darken($base-color, 10%);

// Define background colors
$background: #fff;
$background-alt: #f2f2f5;

// Define border colors
$border: #dcd9d9;

// Define text colors
$heading: #374054;
$text: #74808a;

If you wish to change the general colour scheme of the page for example, simply change the value of $base-color.

There is also a number of default CSS classes that can be applied such as .shadow, .shadow-large, .btn-rounded-white, and various others. These can be found under the General Styles section in the style sheet.

Images

By default, the template comes with a number of images, some of which can be kept and others which act simply as placeholders and should be switched. The template contains the following:

Main background (images/lead-bg.jpg) - this is the main background image provided via Unsplash. This can be kept or changed easily by replacing images/lead-bg.jpg with your new background (recommended size of at least 1920x1080).
Favicon (/favicon.ico) - this is the favicon used for the page. Similar to the main bg, this can kept or changed easily by replacing the favicon.ico with your new one.
Project image - these are the images associated with the projects under the project section. These are simply placeholders and should either be replaced or removed.

Header Section

The header section can be found within the <header> tag and simply contains an unordered list of anchors to different sections of the page. If you add a new section and want to be able to quickly navigate to it from the top, simply add another list element with an anchor that has the href of the ID of the section. Conversely, if you remove a section, don't forget to remove the associated navigation element.

If you wish to add a header link to an external page, simply add the class no-scroll to the anchor. For example:

<li>
    <a href="https://google.com" class="no-scroll">Google</a>
</li>

If you wish to have a sticky (fixed) header, you simply need to add a class of sticky to the main header. For example, that would be accomplished as follows:

<header class="sticky">
    <!-- Header content -->
</header>

Lead Section

The Lead section is pretty straightforward, it contains an h1 for your name and an h2 for your title. It also contains a link that can be used to link to your resume should you wish to add it as well.

About Section

The about section contains a quick about blurb that can be edited by changing the text within the paragraph tags.

Experience Section

The experience section creates a vertical timeline with all your relevant experience. The code for the timeline creation can be found within js/scripts.js and is an adaptaion of RyanFitzgerald/vertical-timeline.

The default format is as follows:

<div id="experience-timeline">
    <div data-date="September 2015 – September 2016">
        <h3>Employer Name</h3>
        <h4>Job Title</h4>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
        </p>
    </div>
</div>

The data attribute data-date is what is used to add a date to the associated timeline point. All that is really required is a wrapping div (i.e. #experience-timeline) and nested divs to build the timeline. The h3, h4, and p tags are option and the contents of the div can be styled however you wish.

To add additional section, simply add additional nested divs under the main wrapping div.

Education Section

The Education is just a series of .education-block classes with some details associated with them. By default, it shows school name, date, degree, and some additional details. For example:

<div class="education-block">
    <h3>University of Ottawa</h3>
    <span class="education-date">Sept 2016 - Sept 2017</span>
    <h4>Bachelor of Science in Computer Science</h4>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
    </p>
</div>

To add additional section, simply add additional .education-block elements.

Projects Section

The Project section contains a number of .project elements that represent each of your projects. By default, it contains a 300x300 image under .project-image and relevant project information under .project-info. An example is as follows:

<div class="project">
    <div class="project-image">
        <img src="images/project.jpg" />
    </div>
    <!-- End .project-image -->

    <div class="project-info">
        <h3>Project Name Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
        </p>
        <a href="#">View Project</a>
    </div>
    <!-- End .project-info -->
</div>

Skills Section

The Skills section is simply an unordered list that spits out a "Skill Cloud" with all the skills listed. To add / remove skills, simply edit or add list elements, like so:

<ul>
    <li>JavaScript</li>
    <li>Python</li>
    <li>Ruby</li>
    <li>Go</li>
    <li>Node.js</li>
</ul>

Contact Section

Since the page is static, I opted to use the awesome Formspree to allow for a contact form without the need for anything else. To use it, you must have the page hosted on a server (loading a basic HTML page won't work) where a referrer header is generated. Also, simply add the email to the action. An example is as follows:

<form method="POST" action="https://formspree.io/email@email.com">
    <input type="hidden" name="_subject" value="Contact request from personal website" />
    <input type="email" name="_replyto" placeholder="Your email" required>
    <textarea name="message" placeholder="Your message" required></textarea>
    <button type="submit">Send</button>
</form>

For more information on configuration of the contact form or dealing with errors, check out Formspree.

For a quick tutorial about formspree, check out this tutsplus tutorial that covers different aspects and features of the form tool.

Footer Section

The Footer contains an optional copyright where you can place your name as well as an unordered list of all of your social or coding related profiles. By default it contains Github, Stack Overflow, Facebook, Twitter, and Google Plus. You can add or remove them easily and simply use the Font Awesome icon associated with the social profile you wish to use. For a list of all icons, click here.

Changelog

1.1.3

Added default favicon to be used or changed
Added sticky class to make header fixed
Updated docs to add image section

1.1.2

Added no-scroll class option to header navigation anchor if you want to link to external site
Changed contact form input / textarea colours to be based off $base-color
Changed main background to 100vh so it doesn't overflow if viewport height < 700px

1.1.1

Made input placeholder text more readable
Removed timeline line when no JS
Added some basic styling to timeline when no JS

1.1.0

Fixed menu toggle on mobile devices
Fixed z-index / scrolling issue with mobile menu
Mobile menu now closes once a nav element is hit

License

Completely free (MIT)! See LICENSE.md for more.

kfrz/keifer.io