Included Themes
Below is the documentation for the configuration and usage of all included themes.
Acknowledgements & Licenses
A big thank you to the providers for themes that are used heavily throughout the project. Keep in mind any attributions made in the code are required to keep in the code.
If you want to use an attribution free version of HTML5UP themes checkout pixelarity
Aerial
Author: HTML5Up
Preview
Full page preview: https://html5up.net/aerial
Usage
To use this theme in your code either initialize the project with "aerial" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: aerial
... # Other configuration settings
Notes
Tips from the theme developer about the scrolling background:
You can still use pretty much any image you want, but for best results make sure yours is:
- Horizontally tileable
- Wide and short
- About 1500px wide
- Fades to a solid color either at the top of bottom (which is used to fill the empty space above or below your image).
- The example image is here
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️
avatar: ❌
email: ☑️
phone: ☑️
biography: ❌
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ❌
Work Experience: ❌
Volunteering Experience: ❌
Gallery: ❌
Blog: ❌
Blog
Author: W3C
Preview
Full page preview: https://www.w3schools.com/w3css/tryw3css_templates_blog.htm
Usage
To use this theme in your code either initialize the project with "blog" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: blog
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ❌
email: ☑️
phone: ☑️
biography: ❌
role: ❌
company: ❌
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ❌
Work Experience: ❌
Volunteering Experience: ❌
Gallery: ❌
Blog: ✔️
Creative
Author: Start Bootstrap
Theme page: https://startbootstrap.com/theme/creative
Preview
Full page preview: https://startbootstrap.com/previews/creative
Usage
To use this theme in your code either initialize the project with "creative" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: creative
... # Other configuration settings
Notes
For images in projects the dimensions are (530px x 450px)
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️ (recommended)
avatar: ❌
email: ☑️
phone: ☑️
biography: ☑️ (recommended)
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ❌
github: ❌
twitch: ❌
youtube: ❌
instagram: ❌
twitter: ❌
snapchat: ❌
linkedin: ❌
facebook: ❌
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ❌
Work Experience: ❌
Volunteering Experience: ❌
Gallery: ✔️
Blog: ❌
cv
Author: Start Bootstrap
Theme page: https://startbootstrap.com/theme/resume
Preview
Full page preview: https://startbootstrap.com/previews/resume
Usage
To use this theme in your code either initialize the project with "cv" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: cv
... # Other configuration settings
Notes For the avatar image use a 1:1 ratio (square image), and ideally around ~500x500
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ☑️ (HIGHLY recommended)
email: ☑️ (recommended)
phone: ☑️ (recommended)
biography: ☑️ (recommended)
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ❌
Dimension
Author: HTML5Up
Preview
Full page preview: https://html5up.net/dimension
Usage
To use this theme in your code either initialize the project with "dimension" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: dimension
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️ (recommended)
avatar: ☑️
email: ☑️
phone: ☑️
biography: ✅
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ✔️
Blog: ✔️
Ethereal
Author: HTML5Up
Preview
Full page preview: https://html5up.net/ethereal
Usage
To use this theme in your code either initialize the project with "ethereal" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: ethereal
... # Other configuration settings
Notes
For best usage the avatar should be (525px x 900px)
With the gallery the design will be different if you have a set of images that are divisible by either 2, 3, or 4
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ✅
email: ☑️
phone: ☑️
biography: ✅
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ✔️
Blog: ❌
Evie
Author(s): One Page love
Katerina Limpitsouni - https://twitter.com/ninalimpi
Aggelos Gesoulis - https://twitter.com/anges244
Preview
Full page preview: https://onepagelove.com/evie
Usage
To use this theme in your code either initialize the project with "evie" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: evie
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ✅
avatar: ☑️
email: ☑️
phone: ☑️
biography: ✅
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ✔️
Freelancer
Author: Start Bootstrap
Theme page: https://startbootstrap.com/theme/freelancer
Preview
Full page preview: https://startbootstrap.com/previews/freelancer
Usage
To use this theme in your code either initialize the project with "freelancer" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: freelancer
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ☑️ (recommended)
email: ☑️
phone: ☑️
biography: ☑️ (recommended)
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ❌
Grayscale
Author: Start Bootstrap
Theme page: https://startbootstrap.com/theme/grayscale
Preview
Full page preview: https://startbootstrap.com/previews/grayscale
Usage
To use this theme in your code either initialize the project with "grayscale" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: grayscale
... # Other configuration settings
Notes It is recommended to make images ~ 600px x 440px for projects
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️ (recommended)
avatar: ❌
email: ☑️
phone: ☑️
biography: ☑️ (recommended)
role: ☑️ (recommended)
company: ☑️ (recommended)
address: ☑️
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ✔️
Identity
Author: HTML5Up
Preview
Full page preview: https://html5up.net/identity
Usage
To use this theme in your code either initialize the project with "identity" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: identity
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️
avatar: ✅
email: ☑️
phone: ☑️
biography: ❌
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ❌
Work Experience: ❌
Volunteering Experience: ❌
Gallery: ❌
Blog: ❌
Lens
Author: HTML5Up
Preview
Full page preview: https://html5up.net/lens
Usage
To use this theme in your code either initialize the project with "strata" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: lens
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ☑️
email: ☑️
phone: ☑️
biography: ✅
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ❌
Work Experience: ❌
Volunteering Experience: ❌
Gallery: ✔️
Blog: ❌
Massively
Author: HTML5Up
Preview
Full page preview: https://html5up.net/massively
Usage
To use this theme in your code either initialize the project with "massively" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: massively
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ❌
email: ☑️
phone: ☑️
biography: ☑️
role: ☑️
company: ❌
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ✔️
Paradigm Shift
Author: HTML5Up
Preview
Full page preview: https://html5up.net/paradigm-shift
Usage
To use this theme in your code either initialize the project with "identity" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: paradigm_shift
... # Other configuration settings
Notes
This theme supports an extra config variable called fancy_gallery which can be set to true in order to force all gallery photos to be in landscape mode instead of switching between landscape and portrait. It would be used like this:
...# Other settings
disable_fancy_gallery: true
...# Other settings
The background and avatar settings will both be used in the same location for the same thing and are interchangeable. If both are provided then only the value from the avatar config variable is used. Dimensions should be as close to 1350x1110 pixels as possible.
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ✅ (Can use either avatar or background, but need to fill in one or the other. See notes for details)
avatar: ✅ (Can use either avatar or background, but need to fill in one or the other. See notes for details)
email: ☑️
phone: ☑️
biography: ☑️
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ✔️
Blog: ❌
Parallax
Author: W3C
Preview
Full page preview: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
Notes
Progress
There is a built-in system for giving progress-bar style indicators of your skills:
The code for the above example is:
<p class="w3-large w3-center w3-padding-16">Im really good at:</p>
<p class="w3-wide"><i class="fa fa-camera"></i>Photography</p>
<div class="w3-light-grey">
<div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:90%">90%</div>
</div>
<p class="w3-wide"><i class="fa fa-laptop"></i>Web Design</p>
<div class="w3-light-grey">
<div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:85%">85%</div>
</div>
<p class="w3-wide"><i class="fa fa-photo"></i>Photoshop</p>
<div class="w3-light-grey">
<div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:75%">75%</div>
</div>
Banner
There is a built-in system for creating a banner:
The code for the above example is:
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-quarter w3-section">
<span class="w3-xlarge">14+</span><br>
Partners
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">55+</span><br>
Projects Done
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">89+</span><br>
Happy Clients
</div>
<div class="w3-quarter w3-section">
<span class="w3-xlarge">150+</span><br>
Meetings
</div>
</div>
Usage
To use this theme in your code either initialize the project with "parallax" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: parallax
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ✅
avatar: ✅
email: ☑️
phone: ☑️
biography: ☑️
role: ☑️
company: ❌
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ❌
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ✔️
Blog: ❌
Read Only
Author: HTML5Up
Preview
Full page preview: https://html5up.net/read-only
Usage
To use this theme in your code either initialize the project with "read_only" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: read_only
... # Other configuration settings
Notes
For images in projects the dimensions are (400px x 235px)
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ✅
avatar: ✅
email: ☑️
phone: ☑️
biography: ✅
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ✔️
Solid State
Author: HTML5Up
Preview
Full page preview: https://html5up.net/solid-state
Usage
To use this theme in your code either initialize the project with "solid_state" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: solid_state
... # Other configuration settings
Notes
For images in projects the dimensions are square (i.e. 500px x 500px)
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ❌
avatar: ❌
email: ☑️
phone: ☑️
biography: ✅
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ❌
Blog: ✔️
Strata
Author: HTML5Up
Preview
Full page preview: https://html5up.net/strata
Usage
To use this theme in your code either initialize the project with "strata" as the theme, or set it in your config.yml file:
... # Other configuration settings
theme: strata
... # Other configuration settings
Supported config settings
The following settings are supported and not supported in the config.yml file:
✅: Required
☑️: Optional
❌: Not Supported
name: ✅
background: ☑️
avatar: ✅
email: ☑️
phone: ☑️
biography: ✅
role: ☑️
company: ☑️
address: ❌
social: ☑️
github: ☑️
twitch: ☑️
youtube: ☑️
instagram: ☑️
twitter: ☑️
snapchat: ☑️
linkedin: ☑️
facebook: ☑️
Supported Sections
Below are a list of the supported, and unsupported sections.
✔️: Supported
❌: Not Supported
Projects: ✔️
Education: ✔️
Work Experience: ✔️
Volunteering Experience: ✔️
Gallery: ✔️
Blog: ❌