{{ end }}
4 |
20 |
21 |
--------------------------------------------------------------------------------
/layouts/partials/icons/icon-quote-mark.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ### 8th April 2017
4 |
5 | `.Now` has been deprecated. Hence the required minimum version of Hugo is v0.20.
6 |
7 | ## 24th October 2015 - Outsource work section from config file
8 |
9 | The configuration for the work section has been moved into it's own [file](https://github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/work.toml) to keep the config file itself smaller. The [setup](https://github.com/digitalcraftsman/hugo-artists-theme/tree/dev#create-your-portfolio) hasn't change much.
10 |
11 | [Show me the diff](https://github.com/digitalcraftsman/hugo-artists-theme/commit/40b1cc22bef2af55f165ad3954ce27f34808348c)
12 |
13 |
14 | Furthermore, the configuration for the client section has been moved into it's own [file](https://github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/work.toml) to keep the config file itself smaller. The [setup](https://github.com/digitalcraftsman/hugo-artists-theme/tree/dev#what-your-clients-think) hasn't change much.
15 |
16 | [Show me the diff](https://github.com/digitalcraftsman/hugo-artists-theme/commit/68abb5b95d91d61d09c5919956f3b46d09c87072)
17 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | This is free and unencumbered software released into the public domain.
2 |
3 | Anyone is free to copy, modify, publish, use, compile, sell, or
4 | distribute this software, either in source code form or as a compiled
5 | binary, for any purpose, commercial or non-commercial, and by any
6 | means.
7 |
8 | In jurisdictions that recognize copyright laws, the author or authors
9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 |
24 | For more information, please refer to
25 |
26 |
--------------------------------------------------------------------------------
/layouts/partials/about.html:
--------------------------------------------------------------------------------
1 | {{ "" | safeHTML }}
2 |
3 | {{ with .Site.Params.about.title }}
{{ . }}
{{ end }}
4 |
5 |
6 |
7 |
8 | {{ partial "icons/icon-pencil.html"}}
9 |
10 |
11 | {{ partial "icons/icon-mouse.html"}}
12 |
13 |
14 | {{ partial "icons/icon-browser.html"}}
15 |
16 |
17 | {{ partial "icons/icon-video.html"}}
18 |
19 |
20 |
21 | {{ with .Site.Params.about.bio }}
22 |
23 |
{{ . | markdownify }}
24 |
25 | {{ end }}
26 |
27 | {{ with .Site.Params.about.skills }}
28 |
29 | {{ range . }}
30 |
31 |
{{ .name }}
32 |
33 | {{ range (seq 10) }}
34 |
35 | {{ end }}
36 |
37 |
38 | {{ end }}
39 |
40 | {{ end }}
41 |
42 |
--------------------------------------------------------------------------------
/exampleSite/data/clients.toml:
--------------------------------------------------------------------------------
1 | # Section title
2 | title = "Clients"
3 |
4 | [[list]]
5 | avatar = "face-aaroni.jpg"
6 | name = "Scott Summers"
7 | title = "Director of Design, OnToText Ind."
8 | quote = "**While we all felt that Travis was a great** asset to our team — and really worked hard to understand our products from the point of view of the customer — we also all agree he should shower more often."
9 | logo = "logo1.png"
10 |
11 | [[list]]
12 | avatar = "face-atariboy.jpg"
13 | name = "Hank McCoy"
14 | title = "Eater of Salad, Antartica Int."
15 | quote = "**Working with Travis was the highlight of my career.** Other moments of note were collecting the largest number of paperclips in the office, and winning a trophy for saying \"uh huh, and then what?\" 30 times in a row to my girlfriend without her noticing."
16 | logo = "logo2.png"
17 |
18 | [[list]]
19 | avatar = "face-jackiesaik.jpg"
20 | name = "Stacy Lang"
21 | title = "Social Media Girl, Quebec Int."
22 | quote = "**Yea, I guess hes good at computers or something,** but let me ask you this: If a cat always lands on its feet, and buttered bread always lands butter side down, what would happen if you tied buttered bread on top of a cat?"
23 | logo = "logo3.png"
24 |
25 | [[list]]
26 | avatar = "face-teleject.jpg"
27 | name = "Cleatus Cassidy"
28 | title = "VP of Helmut, Lorem Sorem LLC."
29 | quote = "**Back in old country** only nerds who is playing on computers. Now all bros is wanting to make codes and junk. I lost foot in war. You dont see girls asking me about homework."
30 | logo = "logo4.png"
31 |
--------------------------------------------------------------------------------
/layouts/partials/work.html:
--------------------------------------------------------------------------------
1 |
2 | {{ with .Site.Data.work.title }}
{{ . }}
{{ end }}
3 |
4 | {{ range .Site.Data.work.projects }}
5 |
6 | {{ end }}
7 |
8 |
9 |
10 |
11 | {{ range .Site.Data.work.projects }}
12 |
20 | {{ end }}
21 |
39 | {{ range $i, $e := .Site.Data.clients.list }}
40 | {{ if eq $i 0 }}
41 |
42 | {{ else }}
43 |
44 | {{ end }}
45 | {{ end }}
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/exampleSite/config.toml:
--------------------------------------------------------------------------------
1 | # Site settings
2 | baseurl = "https://example.org/"
3 | languageCode = "en-us"
4 | title = "Hugo Artists Theme"
5 | theme = "hugo-artists-theme"
6 |
7 | [params]
8 |
9 | # You can use Markdown syntax for urls [text](//url.to/source) for
10 | # most longer texts.
11 |
12 | # To provide some metadata for search engines feel free to add a few
13 | # information about you and your website.
14 | name = "Your name"
15 | description = "Your description"
16 |
17 | # Since this template is static, the contact form uses www.formspree.io as a
18 | # proxy. The form makes a POST request to their servers to send the actual
19 | # email. Visitors can send up to a 1000 emails each month for free.
20 | #
21 | # What you need to do for the setup?
22 | #
23 | # - set your email address under 'email' below
24 | # - upload the generated site to your server
25 | # - send a dummy email yourself to confirm your account
26 | # - click the confirm link in the email from www.formspree.io
27 | # - you're done. Happy mailing!
28 | email = "your@email.com"
29 |
30 |
31 | # Header an navigation
32 | #
33 | # To change the header background the 'hero-bg-jpg' at 'static/img'.
34 | # Do the same with the logo ('logo.svg').
35 | # But keep the original filename!
36 | [params.header]
37 | title = "Artists Theme"
38 | shortBio = "Thinker // Designer // YouTuber"
39 |
40 |
41 | # About section
42 | #
43 | # Replace the 'avatar.jpg' under 'static/img' with your own image.
44 | [params.about]
45 | title = "About me"
46 | bio = "**Travis specializes in making things** for human people. Most of the things he makes are [digital interfaces](//travisneilson.com/), but he also puts effort into crafting [next-level beats](//soundcloud.com/travis-neilson) and [YouTube videos](//youtube.com/user/devtipsfordesigners) about making codes happen."
47 |
48 | [[params.about.skills]]
49 | name = "Communication"
50 | value = 9
51 |
52 | [[params.about.skills]]
53 | name = "Organization"
54 | value = 7
55 |
56 | [[params.about.skills]]
57 | name = "Learning"
58 | value = 10
59 |
60 | [[params.about.skills]]
61 | name = "Teaching"
62 | value = 6
63 |
64 | [[params.about.skills]]
65 | name = "Planning"
66 | value = 7
67 |
68 | [[params.about.skills]]
69 | name = "Visual Design"
70 | value = 5
71 |
72 | [[params.about.skills]]
73 | name = "UX Design"
74 | value = 8
75 |
76 | [[params.about.skills]]
77 | name = "Programming"
78 | value = 6
79 |
80 | # Contact secion
81 | [params.contact]
82 | title = "Contact"
83 |
84 | # The following social network icons are available:
85 | # 'twitter' / 'facebook' / 'github' / 'pinterest' 'google-plus' / 'linkedin'
86 | # 'youtube' / 'instagram' / 'dribbble' / 'behance' / 'soundcloud' / 'vine'
87 | [[params.contact.social]]
88 | icon = "twitter"
89 | link = "//twitter.com/devtipsshow"
90 |
91 | [[params.contact.social]]
92 | icon = "dribbble"
93 | link = "//dribbble.com/travisneilson"
94 |
95 | [[params.contact.social]]
96 | icon = "behance"
97 | link = "//www.behance.net/travisneilson"
98 |
99 | [[params.contact.social]]
100 | icon = "youtube"
101 | link = "//www.youtube.com/DevTipsForDesigners"
102 |
103 | [[params.contact.social]]
104 | icon = "linkedin"
105 | link = "//www.linkedin.com/in/travisneilson"
106 |
107 |
108 | [params.form]
109 | title = "Let's work together"
110 | # Form fields
111 | name = "Your Name"
112 | email = "Your Email"
113 | message = "Tell me about your project"
114 | buttonText = "Send"
115 |
116 |
117 | [params.footer]
118 | copyright = "Published under the Unlicense License."
119 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Artists Theme
2 |
3 | The Artists Theme is a one page portfolio for freelancers based on the original [Jekyll theme](//github.com/DevTips/Artists-Theme) by [Travis Neilson](//github.com/travisneilson) aka [DevTips](//www.youtube.com/user/DevTipsForDesigners) and his many contributors. It's the result of a longer [video series](//www.youtube.com/watch?v=T6jKLsxbFg4&list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI) made by him that is showing the whole developement process from the first designs to the final Jekyll theme. Consider to subscribe to his [YouTube channel](//www.youtube.com/user/DevTipsForDesigners).
4 |
5 | This Hugo theme features several content sections, like an about section showing the level of your skills, a responsive portfolio with hover effects, a gallery to present your client's opinions and a contact form.
6 |
7 | #### Please note that this theme is no longer maintained.
8 |
9 | 
10 |
11 |
12 | ## Installation
13 |
14 | Inside the folder of your Hugo site run:
15 |
16 | $ cd themes
17 | $ git clone https://github.com/digitalcraftsman/hugo-artists-theme
18 |
19 | For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
20 |
21 |
22 | ## Getting started
23 |
24 | After installing the Artists Theme successfully it requires a just a few more steps to get your site finally running.
25 |
26 |
27 | ### The config file
28 |
29 | Take a look inside the [`exampleSite`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/exampleSite) folder of this theme. You'll find a file called [`config.toml`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/exampleSite/config.toml). To use it, copy the [`config.toml`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/exampleSite/config.toml) in the root folder of your Hugo site. Feel free to customize this theme as you like.
30 |
31 |
32 | ### Change the hero background
33 |
34 | The hero acts as an eye-catcher for your site. So consider to give him a nice background. You just need to replace the [`hero-bg.jpg`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/img/hero-bg.jpg) at [`static/img`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/static/img) with your own background image. But it's important that you keep the original filename.
35 |
36 |
37 | ### Add your own logo
38 |
39 | Go to [`static/img`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/static/img) and replace the [`logo.svg`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/img/logo.svg) with your own file. If you don't want to use an svg you also need to change the source name inside the [`all.css`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/css/all.css) stylesheet [`here`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/css/all.css#L614) and [`here`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/css/all.css#L662).
40 |
41 |
42 | ### Introduce yourself
43 |
44 | In the next step, replace the image of Travis in the about section with one of yours. Therefore search the [`avatar.jpg`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/static/img/avatar.jpg) under [`static/img`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/static/img). But keep the original filename here too.
45 |
46 | Furthermore, you can show your visitors your skills and capabilities. Add as many skills as you like by copying the snippet below:
47 |
48 | ```toml
49 | [[params.about.skills]]
50 | name = "Communication"
51 | value = 9
52 | ```
53 |
54 | To rate your skill level, use a value between 0 and 10.
55 |
56 |
57 | ### Create your portfolio
58 |
59 | Adding a new project is very simple. Firstly, you need to define a new project in your [`data/work.toml`](https://github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/work.toml) with the following code snippet:
60 |
61 | ```toml
62 | # Section title
63 | title = "Work"
64 |
65 | [[projects]]
66 | name = "TYPO International Design Talks"
67 | folder = "proj-1"
68 | ```
69 |
70 | The `folder` attribute defines a project-specific subfolder for your images. You will use it at the end of this section.
71 |
72 | Beside the [`data/work.toml`](https://github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/work.toml), there is under `content` another subfolder called [`work`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/exampleSite/content/work) which hosts the files that will appear as your projects in the work section. Copy the whole folder into the `content` directory at the **root** of your Hugo site.
73 |
74 | Such a project file might look like [this one](//raw.githubusercontent.com/digitalcraftsman/hugo-artists-theme/master/exampleSite/content/work/proj-1.md) written in Markdown:
75 |
76 | ```markdown
77 | 
78 |
79 | TYPO: International Design Talks is an annual event held in Berlin, London, and San Francisco. This promotional project is developed to market the event for the designindustry. The use of patterns, sophisticated color scheme and typography are applied for the print and mobile application.
80 |
81 | 
82 | 
83 | 
84 | 
85 | ```
86 |
87 | The paths to your images are relative to the base url. Store those under [`static/img/work//`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/static/img/work). `` is a the attribute from the [`data/work.toml`](https://github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/work.toml) that you defined for the images above. Create at least a `thumb.jpg` for the preview in the portfolio grid.
88 |
89 |
90 | ### What your clients think
91 |
92 | For a new quote, copy the code below into your [`data/clients.toml`](//github.com/digitalcraftsman/hugo-artists-theme/blob/dev/exampleSite/data/clients.toml):
93 |
94 | ```toml
95 | # Section title
96 | title = "Clients"
97 |
98 | [[list]]
99 | avatar = "face-aaroni.jpg"
100 | name = "Scott Summers"
101 | title = "Director of Design, OnToText Ind."
102 | quote = "**While we all felt that Travis was a great** asset to our team — and really worked hard to understand our products from the point of view of the customer — we also all agree he should shower more often."
103 | logo = "logo1.png"
104 | ```
105 |
106 | Store both the client's avatar and logo at [`static/img/clients`](//github.com/digitalcraftsman/hugo-artists-theme/tree/master/static/img/clients)
107 |
108 |
109 | ### Add social networks
110 |
111 | You can link some of your social networks in this theme too. Therefore copy the this snippet:
112 |
113 | ```toml
114 | [[params.contact.social]]
115 | icon = "twitter"
116 | link = "//twitter.com/devtipsshow"
117 | ```
118 |
119 | The following social network icons are available:
120 |
121 | `twitter`, `facebook`, `github`, `pinterest` `google-plus`, `linkedin`
122 | `youtube`, `instagram`, `dribbble`, `behance`, `soundcloud` and `vine`.
123 |
124 |
125 | ### Make the contact form working
126 |
127 | Since this page will be static, you can use [formspree.io](//formspree.io/) as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:
128 |
129 | 1. Enter your email address under 'email' in the [`config.toml`](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/exampleSite/config.toml)
130 | 2. Upload the generated site to your server
131 | 3. Send a dummy email yourself to confirm your account
132 | 4. Click the confirm link in the email from [formspree.io](//formspree.io/)
133 | 5. You're done. Happy mailing!
134 |
135 |
136 | ### Nearly finished
137 |
138 | In order to see your site in action, run Hugo's built-in local server.
139 |
140 | $ hugo server
141 |
142 | Now enter [`localhost:1313`](http://localhost:1313) in the address bar of your browser.
143 |
144 |
145 | ## Contributing
146 |
147 | Did you found a bug or got an idea for a new feature? Feel free to use the [issue tracker](//github.com/digitalcraftsman/hugo-artists-theme/issues) to let me know. Or make directly a [pull request](//github.com/digitalcraftsman/hugo-artists-theme/pulls).
148 |
149 |
150 | ## License
151 |
152 | This theme is released under the Unlincense License. For more information read the [License](//github.com/digitalcraftsman/hugo-artists-theme/blob/master/LICENSE).
153 |
154 |
155 | ## Annotations
156 |
157 | A big thank you to these creators for contributing sample projects for the "work" section:
158 |
159 | - [Micael Butial](//www.behance.net/gallery/14751131/-TYPO-International-Design-Talks)
160 | - [Petras Nargėla](//www.behance.net/gallery/16750837/Free-80-Crispy-Icons-in-PSD-AI-SVG-Webfont)
161 | - [Sergey Valiukh](//www.behance.net/gallery/13745729/Timeline-Page)
162 | - [Ayoub Elred](//www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Concept-download)
163 | - [Anton Skvortsov](//www.behance.net/gallery/16483395/City-IN-website-concept)
164 | - [Nick Zoutendijk](//www.behance.net/gallery/13870569/Stripes-Co-Free-icon-Set)
165 | - [Jonathan Quintin](//www.behance.net/gallery/12748107/Weather-Dashboard-Global-Outlook-UIUX)
166 | - [Jieyu Xiong](//www.behance.net/gallery/15063575/Fresh-It-Up-App-Design)
167 |
168 | Also thanks to [Steve Francia](//github.com/spf13) for creating [Hugo](//gohugo.io) and the awesome community around the project.
169 |
--------------------------------------------------------------------------------
/static/js/functions.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | smoothScroll(300);
3 | workBelt();
4 | workLoad();
5 | clientStuff();
6 |
7 | $("header h1").fitText(1, { minFontSize: '20px', maxFontSize: '72px' });
8 | $(".biglink").fitText(1.5);
9 |
10 | $('textarea').autosize();
11 | });
12 |
13 | // smoothScroll function is applied from the document ready function
14 | function smoothScroll (duration) {
15 | $('a[href^="#"]').on('click', function(event) {
16 |
17 | var target = $( $(this).attr('href') );
18 |
19 | if( target.length ) {
20 | event.preventDefault();
21 | $('html, body').animate({
22 | scrollTop: target.offset().top
23 | }, duration);
24 | }
25 | });
26 | }
27 |
28 |
29 | function workBelt() {
30 |
31 | $(".trigger").remove();
32 | $(".return").remove();
33 |
34 | $('.thumb-container label').click(function() {
35 | $('.work-belt').addClass("slided");
36 | $('.work-container').show();
37 | });
38 |
39 | $('.work-return').click(function() {
40 | $('.work-belt').removeClass("slided");
41 | $('.work-container').hide(800);
42 | });
43 |
44 | }
45 |
46 |
47 | function workLoad() {
48 |
49 | $.ajaxSetup({ cache: true });
50 |
51 | $('.thumb-container label').click(function() {
52 | var $this = $(this),
53 | newTitle = $this.find('strong').text(),
54 | newfolder = $this.find('.thumb-unit').data('folder'),
55 | spinner = '
20 | 
42 | {{ else }}
43 |