Creative Theme

Creative Theme is a one page portfolio for creatives based on the original Bootstrap theme by David Miller. Noteworthy features of this Hugo theme are several content sections and a responsive portfolio grid with hover effects and full page portfolio item modals.

I've additionally added support for blog posts.

Installation

Inside the folder of your Hugo site run:

$ cd themes
$ git clone https://github.com/digitalcraftsman/hugo-creative-theme

For more information read the official setup guide of Hugo.

Getting started

After installing the Creative Theme successfully it requires a just a few more steps to get your site running.

.gitmodules

Inside of your hugo website create a file called .gitmodules

git submodule add git@github.com:klueless-io/hugo-creative-theme.git themes/hugo-creative-theme

Add the following to .gitmodules

[submodule "themes/hugo-creative-theme"]
    path = themes/hugo-creative-theme
    url = git@github.com:klueless-io/hugo-creative-theme.git

Update local repository with remote modules

git submodule update --remote

Fix (new commits) issue

git diff
git submodule update

The config file

Take a look inside the exampleSite folder of this theme. You'll find a file called config.toml.

To use it, copy the config.toml in the root folder of your Hugo site. Feel free to change strings as you like to customize your website.

Change the hero background

The hero acts as an eye-catcher for your site. So consider to give him a nice background. You just need to replace the header.jpg at static/img with your own. But it's important that you use the same filename.

Add your services

This section should show your capabilities and skills. You can change the services under at [params.services.list] in the config.toml.

All icons using Fontawesome's icon font. Look at the website of Fontawesome for more icons. The icons are represented by their corresponding CSS class. A skill is defined like this example:

[[params.services.list]]
    icon = "fa-diamond"
    title = "Sturdy Templates"
    description = "Our templates are updated regularly so they don't break."

Create your portfolio

Beside the config file, there is in data another subfolder called projects which hosts the files that will appear as your projects in the portfolio section. Such a project file might look like this one written in YAML:

modalID: 1
title: Project 1
date: 2014-07-05
img: 1.jpg
client: Start Bootstrap
clientLink: "#"
category: Web Development
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.

Copy the folder projects inside the data folder in the root directory of your site. Let's make some changes to show your work.

Pay attention to the modalID. It must be a unique integer and be incremented with each new project you want to add to the portfolio. Otherwise, the corresponding modal can't be rendered.

Furthermore, you can use Markdown syntax for URLs like here [text](//url.to/source) in the description.

To give your projects an image, save those under static/img/portfolio. The dimensions should be 650 x 350 pixels. Don't forget to set the filename under 'img' in your project.

Nearly finished

In order to see your site in action, run Hugo's built-in local server.

$ hugo server

Now enter localhost:1313 in the address bar of your browser.

Contributing

Did you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Or make directly a pull request.

Please create a separate branch for your pull request.

License

This theme is released under the Apache License 2.0 For more information read the license.

Acknowledgements

Thanks to

• Steve Francia for creating Hugo and the awesome community around the project
• David Miller for creating the original theme