3 |
29 |
4 | {{ range .Site.Data.projects }}
5 |
26 | {{ end }}
27 |
28 | {{ . | markdownify }}
13 | {{ end }} 14 | {{ with .Site.Params.hero.buttonText }} 15 | {{ . }} 16 | {{ end }} 17 |{{ . | markdownify }}
14 | {{ end }} 15 | {{ with .Site.Params.about.buttonText }} 16 | {{ . }} 17 | {{ end }} 18 |{{ . }}
22 | {{ end }} 23 |{{ . | markdownify }}
14 | {{ end }} 15 |{{ .Site.Params.contact.phone }}
26 |HTML Content
' 61 | } */ 62 | }) 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /layouts/partials/nav.html: -------------------------------------------------------------------------------- 1 | {{ "" | safeHTML }} 2 | 50 | -------------------------------------------------------------------------------- /layouts/partials/modals.html: -------------------------------------------------------------------------------- 1 | {{ "" | safeHTML }} 2 | {{ range .Site.Data.projects }} 3 | 53 | {{ end }} 54 | -------------------------------------------------------------------------------- /exampleSite/config.toml: -------------------------------------------------------------------------------- 1 | baseurl = "https://example.org/" 2 | languageCode = "en-us" 3 | title = "Hugo Creative Theme" 4 | theme = "hugo-creative-theme" 5 | googleAnalytics = "" 6 | 7 | [params] 8 | 9 | # You can use Markdown syntax for urls [text](//url.to/source) for 10 | # most longer texts. 11 | 12 | # All icons using Fontawesome's icon font. Look at http://fontawesome.io/icons/ 13 | # for more icons. The icons are represented by their corresponding 14 | # CSS class. 15 | 16 | # All projects of the portfolio are defined in their own files. 17 | # You can find example projects at 'exampleSite/data/projects'. Copy the 'projects' 18 | # folder into the 'data' directory at the root of this Hugo site. 19 | # For more information take a look at the README. 20 | 21 | # To provide some metadata for search engines feel free to add some 22 | # information about you and your website. 23 | name = "Your name" 24 | description = "Your description" 25 | 26 | # The path must be relative to the static folder 27 | favicon = "favicon.ico" 28 | 29 | 30 | # Navigation 31 | [params.navigation] 32 | brand = "Hugo Creative Theme" 33 | 34 | [params.navigation.links] 35 | about = "About" 36 | services = "Services" 37 | portfolio = "Portfolio" 38 | contact = "Contact" 39 | 40 | 41 | # Hero section 42 | [params.hero] 43 | # To change the background of the hero section, replace the 'header.jpg' at './static/img' with your own. 44 | slogan = "Your awesome slogan" 45 | subtitle = "[Lorem](//google.com) ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nesciunt consequatur ut nihil voluptatem fugiat eos eveniet alias in veniam?" 46 | buttonText = "Find out more" 47 | 48 | 49 | # About section 50 | [params.about] 51 | headline = "We've got what you need!" 52 | description = "[Lorem](//google.com) ipsum dolor sit amet, consectetur adipisicing elit. Praesentium similique eos eligendi error veritatis harum, sed aliquid totam, quam minus neque enim est architecto, ad. Maiores, aliquid, vitae!" 53 | buttonText = "Get started!" 54 | 55 | 56 | # Service section 57 | [params.services] 58 | headline = "At your service" 59 | 60 | [[params.services.list]] 61 | icon = "fa-diamond" 62 | title = "Sturdy Templates" 63 | description = "Our templates are updated regularly so they don't break." 64 | 65 | [[params.services.list]] 66 | icon = "fa-paper-plane" 67 | title = "Ready to Ship" 68 | description = "You can use this theme as is, or you can make changes!" 69 | 70 | [[params.services.list]] 71 | icon = "fa-newspaper-o" 72 | title = "Up to Date" 73 | description = "We update dependencies to keep things fresh." 74 | 75 | [[params.services.list]] 76 | icon = "fa-heart" 77 | title = "Made with Love" 78 | description = "You have to make your websites with love these days!" 79 | 80 | 81 | # Portfolio modals 82 | [params.portfolio.modal] 83 | client = "Client" 84 | date = "Date" 85 | category = "Category" 86 | buttonText = "Close" 87 | 88 | # Aside section 89 | [params.aside] 90 | headline = "Get the Creative Theme for Hugo" 91 | 92 | [params.aside.button] 93 | text = "Download now" 94 | link = "//github.com/digitalcraftsman/hugo-creative-theme" 95 | 96 | # Contact section 97 | [params.contact] 98 | headline = "Let's Get In Touch!" 99 | description = "Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!" 100 | phone = "123-456-6789" 101 | email = "feedback@startbootstrap.com" 102 | 103 | # Google Maps section 104 | # [params.location] 105 | # latitude = "34.007850" 106 | # longitude = "-118.499305" 107 | # maps_api_key = "" 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Creative Theme 2 | 3 | ## Please note that this theme is no longer maintained. 4 | 5 | Creative Theme is a one page portfolio for creatives based on the [original Bootstrap theme](//github.com/IronSummitMedia/startbootstrap-creative) by [David Miller](//github.com/davidtmiller). Noteworthy features of this Hugo theme are several content sections and a responsive portfolio grid with hover effects and full page portfolio item modals. 6 | 7 |  8 | 9 | ## Installation 10 | 11 | Inside the folder of your Hugo site run: 12 | 13 | $ cd themes 14 | $ git clone https://github.com/digitalcraftsman/hugo-creative-theme 15 | 16 | For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo. 17 | 18 | 19 | ## Getting started 20 | 21 | After installing the Creative Theme successfully it requires a just a few more steps to get your site running. 22 | 23 | 24 | ### The config file 25 | 26 | Take a look inside the [`exampleSite`](//github.com/digitalcraftsman/hugo-creative-theme/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/digitalcraftsman/hugo-creative-theme/blob/master/exampleSite/config.toml). 27 | 28 | To use it, copy the [`config.toml`](//github.com/digitalcraftsman/hugo-creative-theme/blob/dev/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to change strings as you like to customize your website. 29 | 30 | 31 | ### Change the hero background 32 | 33 | 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`](//github.com/digitalcraftsman/hugo-creative-theme/blob/master/static/img/header.jpg) at [`static/img`](//github.com/digitalcraftsman/hugo-creative-theme/tree/master/static/img) with your own. But it's important that you use the same filename. 34 | 35 | 36 | ### Add your services 37 | 38 | This section should show your capabilities and skills. You can change the services under at `[params.services.list]` in the [`config.toml`](//github.com/digitalcraftsman/hugo-creative-theme/blob/dev/exampleSite/config.toml). 39 | 40 | All icons using Fontawesome's icon font. Look at the website of [Fontawesome](//fortawesome.github.io/Font-Awesome/icons/) for more icons. The icons are represented by their corresponding CSS class. A skill is defined like this example: 41 | 42 | ```toml 43 | [[params.services.list]] 44 | icon = "fa-diamond" 45 | title = "Sturdy Templates" 46 | description = "Our templates are updated regularly so they don't break." 47 | ``` 48 | 49 | ### Create your portfolio 50 | 51 | Beside the config file, there is in `data` another subfolder called [`projects`](//github.com/digitalcraftsman/hugo-creative-theme/tree/master/exampleSite/data/projects) which hosts the files that will appear as your projects in the portfolio section. Such a project file might look like [this one](//github.com/digitalcraftsman/hugo-creative-theme/blob/dev/exampleSite/data/projects/2014-07-05-project-1.yaml) written in YAML: 52 | 53 | ```yaml 54 | modalID: 1 55 | title: Project 1 56 | date: 2014-07-05 57 | img: 1.jpg 58 | client: Start Bootstrap 59 | clientLink: "#" 60 | category: Web Development 61 | 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. 62 | ``` 63 | 64 | Copy the folder [`projects`](//github.com/digitalcraftsman/hugo-creative-theme/tree/master/exampleSite/data/projects) inside the `data` folder in the **root** directory of your site. Let's make some changes to show your work. 65 | 66 | 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. 67 | 68 | Furthermore, you can use Markdown syntax for URLs like here `[text](//url.to/source)` in the description. 69 | 70 | To give your projects an image, save those under [`static/img/portfolio`](//github.com/digitalcraftsman/hugo-creative-theme/tree/master/static/img/portfolio). The dimensions should be 650 x 350 pixels. Don't forget to set the **filename** under 'img' in your project. 71 | 72 | 73 | ### Nearly finished 74 | 75 | In order to see your site in action, run Hugo's built-in local server. 76 | 77 | $ hugo server 78 | 79 | Now enter [`localhost:1313`](https://localhost:1313) in the address bar of your browser. 80 | 81 | 82 | ## Contributing 83 | 84 | Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](//github.com/digitalcraftsman/hugo-creative-theme/issues) to let me know. Or make directly a [pull request](//github.com/digitalcraftsman/hugo-creative-theme/pulls). 85 | 86 | Please create a separate branch for your pull request. 87 | 88 | 89 | ## License 90 | 91 | This theme is released under the Apache License 2.0 For more information read the [license](//github.com/digitalcraftsman/hugo-creative-theme/blob/master/LICENSE). 92 | 93 | 94 | ## Acknowledgements 95 | 96 | Thanks to 97 | 98 | - [Steve Francia](//github.com/spf13) for creating Hugo and the awesome community around the project 99 | - [David Miller](//github.com/davidtmiller) for creating the original theme 100 | -------------------------------------------------------------------------------- /static/js/jquery.easing.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 3 | * 4 | * Uses the built in easing capabilities added In jQuery 1.1 5 | * to offer multiple easing options 6 | * 7 | * TERMS OF USE - EASING EQUATIONS 8 | * 9 | * Open source under the BSD License. 10 | * 11 | * Copyright © 2001 Robert Penner 12 | * All rights reserved. 13 | * 14 | * TERMS OF USE - jQuery Easing 15 | * 16 | * Open source under the BSD License. 17 | * 18 | * Copyright © 2008 George McGinley Smith 19 | * All rights reserved. 20 | * 21 | * Redistribution and use in source and binary forms, with or without modification, 22 | * are permitted provided that the following conditions are met: 23 | * 24 | * Redistributions of source code must retain the above copyright notice, this list of 25 | * conditions and the following disclaimer. 26 | * Redistributions in binary form must reproduce the above copyright notice, this list 27 | * of conditions and the following disclaimer in the documentation and/or other materials 28 | * provided with the distribution. 29 | * 30 | * Neither the name of the author nor the names of contributors may be used to endorse 31 | * or promote products derived from this software without specific prior written permission. 32 | * 33 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 34 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 35 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 36 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 37 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 38 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 39 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 40 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 41 | * OF THE POSSIBILITY OF SUCH DAMAGE. 42 | * 43 | */ 44 | jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g