1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
|
# MyPortfolio Theme
"MyPortfolio Theme" is a portfolio for developers or creatives to showcase their projects.
It is based on the [HUGO "Creative" Theme](//github.com/digitalcraftsman/hugo-creative-theme) by [digitalcraftsman](//github.com/digitalcraftsman), itself based on the [original Bootstrap theme](//github.com/IronSummitMedia/startbootstrap-creative) by [David Miller](//github.com/davidtmiller).
Some modifications are based on other themes, which are described further.
Noteworthy features of this Hugo theme are:
- Responsive portfolio grid with hover effects.
- Possibility to have more than one content sections.
- Dynamic generation of pages based on data content.
- Customisable CSS to override default values (such as main theme colours, fonts, etc.).
- ...
## Theme structure and layout
As in the "Creative" Theme, the theme's homepage holds the different sections. Its layout is a typical vertical single page.
The structure and layout of the each section is described hereafter.
### HOME
The welcome section, at the top of the homepage.
### ABOUT
The introduction/presentation section.
It is based on the "Biography" section of the ["Academic" theme](//github.com/gcushen/hugo-academic).
### SERVICES
Section presenting the services that can be provided, listed in categories and sub-categories.
### SKILLS
Section typically providing a link to a downloadable resume, as well as listing the different tags and categories that are found in the different projects sections.
### PROJECTS
Section serving as a portfolio, displaying a set of project categories (can be companies, technologies, etc.), linking to individual pages containing projects listing.
It is based on the "Creative" theme "Portfolio" section, but with links to other pages instead of a pop-up window.
### CONTACT
Section providing the contact information.
## Installation
Inside the folder of your Hugo site run:
$ cd themes
$ git clone https://github.com/2-REC/hugo-myportfolio-theme
For more information read the official [setup guide](//gohugo.io/overview/installing/) of Hugo.
## Getting started
After installing the "MyPortfolio" Theme successfully it requires just a few more steps to get the site running.
### The config file
In the [`exampleSite`](//github.com/2-REC/hugo-myportfolio-theme/tree/master/exampleSite) folder of this theme there is a [`config.toml`](
//github.com/2-REC/hugo-myportfolio-theme/blob/master/exampleSite/config.toml) file.
Copy this file in the root folder of the Hugo site.
Strings and values can be changed in order to customize the website.
Settings about the different sections in the homepage as well as the navigation menu can be defined in this file.
Details about each parameter and their role can be found in the file itself.
Additionally to the configuration file, data files (located in the "data" folder) are required for the different sections of the homepage.
The following paragraphs detail the required data for each of the sections.
### HOME: Set the homepage header
The content of the top section of the homepage is fetch from the "home" data file.
The different parameters that can be used are:
- "title": The title for the website. Typically your name or company name.
- "subtitle": A subtitle. Typically the kind of services or specialty you provide.
- "background": The image used for the background.
- "text": A short phrase to draw attention and make the visitor to see more.
- "button_text": The text displayed on the scrolling button.
All the parameters are optional - if not defined, it will not be added to the page content.
### ABOUT: Introduce yourself
The content of the "about" section of the homepage is fetch from the "about" data file.
The different parameters that can be used are:
- "title": The title of the section. Typically "ABOUT" would be used.
- "avatar": The image used for the avatar.
- "short_text": A short text briefly describing the company or person.
- "long_text": A longer text providing more detailled information, and potentially links to the other sections.
All the parameters are optional - if not defined, it will not be added to the page content.
### SERVICES: Add your services
The content of the "services" section of the homepage is fetch from the "services" data file.
The different parameters that can be used are:
- "title": The title of the section. Typically "SERVICES" would be used.
- "background_image": The image used for the background.
- "services": List of services. At least one must be provided.
Each service has a set of subfields:
- "name": The name of the service.
- "icon": The icon used for the service.
- "icon_pack": The icon package/family (look at icons documentation).
- "text": A text describing the service.
- "list": A list of sub-services displayed as bullet points.
All the parameters except "services" are optional - if not defined, it will not be added to the page content.
The "services" list parameter must exist and contain at least one element.
### SKILLS: Show your skills
The content of the "skills" section of the homepage is fetch from the "skills" data file.
The different parameters that can be used are:
- "title": The title of the section. Typically "SKILLS" would be used.
- "tags_label": Label used for the tags found in the content sections.
- "categories_label": Label used for the categories found in the content sections.
- "text": Text describing the content of the page.
- "download":
- "button_text": Text used for the button.
- "filename": Name of the file to download. The file must be in "static/files".
- "icon": The icon used for the button.
- "icon_pack": The icon package/family (look at icons documentation).
All the parameters except "text" are optional - if not defined, it will not be added to the page content.
(TODO: "text" should be optional)
### CONTACT: Add contact information
The content of the "skills" section of the homepage is fetch from the "skills" data file.
The different parameters that can be used are:
- "title": The title of the section. Typically "CONTACT" would be used.
- "background_image": The image used for the background.
- "photo": The image used for the avatar.
- "description": A short text typically with a call to action.
- "email": Email information.
- "address: Email address.
- "link": Whereas the address can be used as a link.
- "icon": The icon used next to the address.
- "icon_pack": The icon package/family (look at icons documentation).
- "social": List of social network icons/links.
- "icon": The icon used for the button.
- "icon_pack": The icon package/family (look at icons documentation).
- "link": The link to the social network profile page.
All the parameters are optional - if not defined, it will not be added to the page content.
### PROJECTS: Create a portfolio (or more)
!!!! TODO !!!!
...
### Run the website
In order to see your site in action, run Hugo's built-in local server.
$ hugo server
In the browser, enter [`localhost:1313`](http://localhost:1313) in the address bar.
## Going further
!!!! TODO !!!!
(css override, ...?)
...
## Contributing
!!!! TODO !!!!
Did you found a bug or got an idea for a new feature?
Feel free to use the [issue tracker](//github.com/...theme.../issues) to let me know.
Or make directly a [pull request](//github.com/...theme.../pulls).
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](//github.com/2-REC/hugo-myportfolio-theme/blob/master/LICENSE).
## Acknowledgements
Thanks to
- [digitalcraftsman](//github.com/digitalcraftsman) for creating the Creative theme
- [Steve Francia](//github.com/spf13) for creating Hugo and the awesome community around the project
- [David Miller](//github.com/davidtmiller) for creating the original theme
|
