English
资源说明：Ben Jackman's GitHub Page
# 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](https://ryanfitzgerald.github.io/devportfolio-template/).
## 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
## Contents
- [Setup and Configuration](#setup-and-configuration)
- [Making Edits / Customizing the Template](#making-edits--customizing-the-template)
- [Using the Template As Is](#using-the-template-as-is)
- [Customization and Editing](#customization-and-editing)
- [General](#general)
- [Images](#images)
- [Header Section](#header-section)
- [Lead Section](#lead-section)
- [About Section](#about-section)
- [Experience Section](#experience-section)
- [Education Section](#education-section)
- [Projects Section](#projects-section)
- [Skills Section](#skills-section)
- [Contact Section](#contact-section)
- [Footer Section](#footer-section)
- [Changelog](#changelog)
- [License](#license)
## Setup and Configuration
The setup required can be broken into two types:
1. If you want to make edits or customize the template
2. 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. Alternatively, if you don't have Gulp installed globally, you can run the npm script `npm run watch`. 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:
```SCSS
// 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](https://unsplash.com/). 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 `` 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:
```HTML
Google
```
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:
```HTML
```
### 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](https://github.com/RyanFitzgerald/vertical-timeline).
The default format is as follows:
```HTML
Employer Name
Job Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
```
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:
```HTML
University of Ottawa
Sept 2016 - Sept 2017
Bachelor of Science in Computer Science
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
```
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:
```HTML
Project Name Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in iaculis ex.
View Project
```
### 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:
```HTML
- JavaScript
- Python
- Ruby
- Go
- Node.js
```
### 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:
```HTML
```
For more information on configuration of the contact form or dealing with errors, check out [Formspree](https://formspree.io/).
For a quick tutorial about formspree, check out this [tutsplus tutorial](https://webdesign.tutsplus.com/tutorials/quick-tip-add-a-formspree-form-to-your-static-sites--cms-23870) 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](http://fontawesome.io/icons/).
## 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](LICENSE.md) for more.
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
