10 | {{ else }}
11 |
12 | {{ end }}
13 |
{{ $data.BasicInfo.FirstName }} {{ $data.BasicInfo.LastName }}
14 | {{ partial "_profile.html" $data }}
15 | {{ partial "_experience.html" $data }}
16 | {{ partial "_education.html" $data }}
17 | {{ partial "_references.html" $data }}
18 |
19 | {{ if .Site.Params.swapColumns }}
20 |
21 | {{ else }}
22 |
23 | {{ end }}
24 | {{ partial "_avatar.html" $data }}
25 | {{ partial "_contacts.html" $data }}
26 | {{ partial "_skills.html" $data }}
27 | {{ partial "_languages.html" $data }}
28 | {{ partial "_diplomas.html" $data }}
29 | {{ partial "_interests.html" $data }}
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/assets/scss/components/_references.scss:
--------------------------------------------------------------------------------
1 | .references {
2 | &__item {
3 | display: inline-block;
4 | min-width: 49%;
5 | @include avoid-break;
6 | &:not(:first-child) {
7 | padding-top: 1.5rem;
8 | }
9 | }
10 |
11 | &__header,
12 | &__subheader {
13 | display: block;
14 | width: 100%;
15 | }
16 |
17 | &__subheader {
18 | margin-bottom: 0.5rem;
19 | }
20 |
21 | &__person {
22 | position: relative;
23 | transition: transform 0.2s cubic-bezier($cubic);
24 |
25 | &:hover {
26 | transform: translateX(0.5rem);
27 | }
28 | }
29 |
30 | &__name,
31 | &__relation {
32 | text-align: left;
33 | width: 100%;
34 | color: $color-dark;
35 | }
36 |
37 | &__contact {
38 | position: relative;
39 | font-size: 1rem;
40 |
41 | & > i {
42 | background-color: $color-icon-background;
43 | color: $color-icon-primary;
44 | font-size: 1rem;
45 | text-align: center;
46 | border-radius: 50%;
47 | padding-top: 0.5rem;
48 | width: 2rem;
49 | height: 2rem;
50 | margin-right: 0.5rem;
51 | margin-bottom: 0.5rem;
52 | }
53 | & > span {
54 | @include vt-center;
55 | min-height: 1.5rem;
56 | line-height: 1.2rem;
57 | }
58 | }
59 |
60 | & li {
61 | list-style: none;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/layouts/partials/head.html:
--------------------------------------------------------------------------------
1 | {{ $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }}
2 | {{ $data := .Scratch.Get "data" }}
3 |
4 |
5 |
6 |
{{ .Site.Title }}
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {{ if .Site.Params.enableMetaTags }}
16 |
17 |
18 |
19 | {{ with $data.BasicInfo.Photo }}
20 |
21 | {{ end }}
22 | {{ with $data.Profile | htmlUnescape | emojify | truncate 200 }}
23 |
24 |
25 | {{ end }}
26 | {{ end }}
27 |
28 | {{ if .Site.Config.Services.GoogleAnalytics.ID }}
29 | {{ template "_internal/google_analytics.html" . }}
30 | {{ end }}
31 |
32 |
--------------------------------------------------------------------------------
/assets/scss/main.scss:
--------------------------------------------------------------------------------
1 | $color-light: {{ .Site.Params.colorLight | default "#fff"}} !default;
2 | $color-dark: {{ .Site.Params.colorDark | default "#666"}} !default;
3 | $color-page-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default;
4 |
5 | $color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default;
6 |
7 | $color-secondary: {{ .Site.Params.colorSecondary | default "#aaa"}} !default;
8 |
9 | $color-icon-primary: {{ .Site.Params.colorIconPrimary | default "#fff"}} !default;
10 | $color-icon-background: {{ .Site.Params.colorIconBackground | default "#e3bfb8"}} !default;
11 |
12 | $color-right-col-background: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default;
13 | $color-right-col-heading-text: {{ .Site.Params.colorRightColumnHeadingText | default "#666" }} !default;
14 | $color-right-col-body-text: {{ .Site.Params.colorRightColumnBodyText | default "#666" }} !default;
15 | $color-right-col-icon-primary: {{ .Site.Params.colorRightColumnIconPrimary | default "#fff" }} !default;
16 | $color-right-col-icon-background: {{ .Site.Params.colorRightColumnIconBackground | default "#e3bfb8" }} !default;
17 | $footer-note: '{{ .Site.Params.footerNote| default "2020 © by Inês Almeida | ines-almeida.com " }}' !default;
18 |
19 | $pages: {{ .Site.Params.pages | default 1}} !default;
20 |
21 | @import "abstract";
22 | @import "functions";
23 | @import "mixins";
24 | @import "layout";
25 | @import "base";
26 | @import "typography";
27 |
28 | @import "components/section";
29 | @import "components/side_section";
30 | @import "components/experience";
31 | @import "components/education";
32 | @import "components/references";
33 | @import "components/contact";
34 | @import "components/avatar";
35 | @import "components/skills";
36 | @import "components/languages";
37 | @import "components/interests";
38 | @import "components/404";
39 |
40 | @import "custom";
41 |
--------------------------------------------------------------------------------
/layouts/partials/_experience.html:
--------------------------------------------------------------------------------
1 | {{ if .Experience }}
2 |
3 |
4 |
{{ i18n "experience" }}
5 |
6 |
7 |
8 | {{ range .Experience }}
9 | {{ if .Class }}
10 |
11 | {{ else }}
12 |
13 | {{ end }}
14 |
20 | {{ range .Positions }}
21 |
22 |
28 |
29 | {{ range .Details }}
30 | - {{ . | safeHTML }}
31 | {{ end }}
32 |
33 |
34 |
35 | {{ range .Badges }}
36 | - {{ . }}
37 | {{ end }}
38 |
39 |
40 |
41 | {{ end }}
42 |
43 | {{ end }}
44 |
45 |
46 |
47 | {{ end }}
48 |
--------------------------------------------------------------------------------
/assets/scss/components/_experience.scss:
--------------------------------------------------------------------------------
1 | .experience {
2 | &__extra_padding {
3 | padding-top: 4rem !important;
4 | }
5 |
6 | &__item {
7 | display: block;
8 | position: relative;
9 | @include avoid-break;
10 | &:not(:first-child) {
11 | padding-top: 1.5rem;
12 | }
13 | margin-bottom: 10px;
14 | margin-top: 10px;
15 |
16 | &::before {
17 | content: "";
18 | height: 90%;
19 | width: 1.5px;
20 | position: absolute;
21 | background: linear-gradient($color-page-background, rgba(255, 255, 255, 0));
22 | //background: linear-gradient(blue, red);
23 | margin-top: 25px;
24 | }
25 | }
26 |
27 | &__header,
28 | &__subheader {
29 | display: flex;
30 | width: 100%;
31 | height: 2.4rem;
32 | }
33 |
34 | &__job {
35 | position: relative;
36 | transition: transform 0.2s cubic-bezier($cubic);
37 | margin-bottom: 2rem;
38 |
39 | &:hover {
40 | transform: translateX(0.5rem);
41 | }
42 | }
43 |
44 | &__company,
45 | &__position {
46 | text-align: left;
47 | width: 70%;
48 | float: left;
49 | }
50 |
51 | &__company {
52 | color: $color-dark;
53 | }
54 |
55 | &__position {
56 | text-transform: uppercase;
57 | font-size: 1.3rem;
58 | color: $color-dark;
59 | margin-left: 1rem;
60 | }
61 |
62 | &__date,
63 | &__place {
64 | float: right;
65 | text-align: right;
66 | width: 30%;
67 | color: $color-secondary;
68 | }
69 |
70 | &__date {
71 | font-weight: 400;
72 | }
73 |
74 | &__place {
75 | &::before {
76 | font-family: 'Material Icons';
77 | color: $color-icon-background;
78 | font-size: 1.4rem;
79 | content: 'place';
80 | display: inline-block;
81 | padding-right: 3px;
82 | vertical-align: middle;
83 | font-weight: 900;
84 | }
85 | }
86 |
87 | &__bullet {
88 | list-style: square inside;
89 | margin-left: 1rem;
90 | }
91 |
92 | &__badges {
93 | display: block;
94 | text-align: right;
95 | margin-top: 0.5rem;
96 | margin-bottom: 0.5rem;
97 | }
98 |
99 | &__badge {
100 | font-size: 0.9rem;
101 | font-weight: 400;
102 | display: inline-block;
103 | background-color: $color-icon-background;
104 | color: $color-icon-primary;
105 | border-radius: 1rem;
106 | padding: 0.1rem 0.6rem;
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/exampleSite/data/de/content.yaml:
--------------------------------------------------------------------------------
1 | BasicInfo:
2 | FirstName: Inês
3 | LastName: Almeida
4 | Photo: img/avatar.jpg
5 | Contacts:
6 | - Icon: fas fa-phone
7 | Info: +44 123 456 789
8 | - Icon: fas fa-envelope
9 | Info: contact@ines-almeida.com
10 | - Icon: fas fa-globe
11 | Info: ines-almeida.com
12 | - Icon: fas fa-map-marker-alt
13 | Info: Portugal
14 |
15 | Profile: Deutscher Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
16 |
17 | Experience:
18 | - Employer: Super Coole Firma
19 | Place: Oxford, UK
20 | Positions:
21 | - Title: Software Entwicklerin
22 | Date: Jan 2020 - Jetzt
23 | Details:
24 | - Arcu vitae elementum curabitur vitae nunc sed velit
25 | - Viverra aliquet eget sit amet tellus cras adipiscing
26 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
27 | - Nisl tincidunt eget nullam non nisi est
28 | - Sed viverra tellus in hac.
29 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
30 | Badges: ['Python', 'Django', 'OOP', 'Javascript', 'HTML', 'CSS', 'Agile']
31 | - Title: Software Testerin
32 | Date: Mar 2019 - Jan 2020
33 | Details:
34 | - Nisl tincidunt eget nullam non nisi est
35 | - Sed viverra tellus in hac.
36 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
37 | Badges: ['Python', 'BDD', 'Selenium', 'OOP', 'Agile']
38 | - Employer: Eine andere Supertolle Firma
39 | Place: Lisbon, PT
40 | Positions:
41 | - Title: Flow Cytometry Resource Specialist
42 | Date: Jan 2018 - Mar 2019
43 | Details:
44 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
45 | - Nisl tincidunt eget nullam non nisi est
46 | - Sed viverra tellus in hac.
47 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
48 | Badges: ['Python', 'HTML', 'CSS', 'C#/Unity']
49 | - Employer: Institute of Neural Engineering
50 | Place: Graz, AT
51 | Positions:
52 | - Title: Master's Thesis Research Intern
53 | Date: Oct 2016 - Jun 2017
54 | Details:
55 | - Arcu vitae elementum curabitur vitae nunc sed velit
56 | - Viverra aliquet eget sit amet tellus cras adipiscing
57 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
58 | - Nisl tincidunt eget nullam non nisi est
59 | Badges: ['Python', 'MATLAB', 'Data Processing', 'Paradigm Design']
60 |
61 | Education:
62 | - Course: BSc & MSc in Biomedical Engineering and Biophysics
63 | Place: University of Lisbon
64 | Date: Sep 2012 - Nov 2017
65 | Details: Specialised in data analysis
66 |
67 | Skills:
68 | - Family: Programming
69 | Items:
70 | - Python
71 | - HTML (including Jinja)
72 | - Javascript
73 | - CSS
74 | - SASS
75 | - SQL
76 | - C#
77 | - Bash
78 | - MATLAB
79 | - Family: Frameworks
80 | Items:
81 | - Django
82 | - Flask
83 | - Hugo
84 | - React
85 | - Family: Developer Tools
86 | Items:
87 | - Git
88 | - Docker
89 | - Jenkins
90 | - AWS
91 | - Family: Misc
92 | Items:
93 | - Adobe Tools
94 | - LaTeX
95 |
96 | Languages:
97 | - Name: Portuguese
98 | Level: Native
99 | - Name: English
100 | Level: C2
101 | - Name: Spanish
102 | Level: B1
103 | - Name: German
104 | Level: B1
105 |
106 | Diplomas:
107 | - ISTQB Tester Certification (2019)
108 | - English Cambridge CAE (2009)
109 |
110 | Interests:
111 | - Bouldering
112 | - Cooking
113 | - Windsurfing
114 | - Bossa Nova
115 | - Design
116 | - Languages
117 |
--------------------------------------------------------------------------------
/exampleSite/data/content.yaml:
--------------------------------------------------------------------------------
1 | BasicInfo:
2 | FirstName: Inês
3 | LastName: Almeida
4 | Photo: img/avatar.jpg
5 | Contacts:
6 | - Icon: fas fa-phone
7 | Info: +44 123 456 789
8 | - Icon: fas fa-envelope
9 | Info: contact@ines-almeida.com
10 | - Icon: fas fa-globe
11 | Info:
ines-almeida.com
12 | - Icon: fas fa-map-marker-alt
13 | Info: Portugal
14 |
15 | Profile: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
16 |
17 | Experience:
18 | - Employer: Super Cool Company
19 | Place: Oxford, UK
20 | Positions:
21 | - Title: Software Engineer
22 | Date: Jan 2020 - Present
23 | Details:
24 | - Arcu vitae elementum curabitur vitae nunc sed velit
25 | - Viverra aliquet eget sit amet tellus cras adipiscing
26 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
27 | - Nisl tincidunt eget nullam non nisi est
28 | - Sed viverra tellus in hac.
29 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
30 | Badges: ['Python', 'Django', 'OOP', 'Javascript', 'HTML', 'CSS', 'Agile']
31 | - Title: Software Tester
32 | Date: Mar 2019 - Jan 2020
33 | Details:
34 | - Nisl tincidunt eget nullam non nisi est
35 | - Sed viverra tellus in hac.
36 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
37 | Badges: ['Python', 'BDD', 'Selenium', 'OOP', 'Agile']
38 | - Employer: Another super cool company
39 | Place: Lisbon, PT
40 | Positions:
41 | - Title: Flow Cytometry Resource Specialist
42 | Date: Jan 2018 - Mar 2019
43 | Details:
44 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
45 | - Nisl tincidunt eget nullam non nisi est
46 | - Sed viverra tellus in hac.
47 | - Lorem ipsum dolor sit amet, consectetur adipiscing elit
48 | Badges: ['Python', 'HTML', 'CSS', 'C#/Unity']
49 | - Employer: Institute of Neural Engineering
50 | Place: Graz, AT
51 | Class: "experience__extra_padding"
52 | Positions:
53 | - Title: Master's Thesis Research Intern
54 | Date: Oct 2016 - Jun 2017
55 | Details:
56 | - Arcu vitae elementum curabitur vitae nunc sed velit
57 | - Viverra aliquet eget sit amet tellus cras adipiscing
58 | - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
59 | - Nisl tincidunt eget nullam non nisi est
60 | Badges: ['Python', 'MATLAB', 'Data Processing', 'Paradigm Design']
61 |
62 | Education:
63 | - Course: BSc & MSc in Biomedical Engineering and Biophysics
64 | Place: University of Lisbon
65 | Date: Sep 2012 - Nov 2017
66 | Details: Specialised in data analysis
67 |
68 | References:
69 | - Name: Person One
70 | Relation: Co-worker at Super Cool Company
71 | Contacts:
72 | - Icon: fas fa-phone
73 | Info: +44 123 456 790
74 | - Icon: fas fa-envelope
75 | Info: contact@person-one.com
76 | - Icon: fas fa-map-marker-alt
77 | Info: Melbourne, Australia
78 | - Name: Person Two
79 | Relation: Boss at Super Cool Company
80 | Contacts:
81 | - Icon: fas fa-phone
82 | Info: +44 123 456 791
83 | - Icon: fas fa-envelope
84 | Info: contact@person-two.com
85 | - Icon: fas fa-map-marker-alt
86 | Info: Sydney, Australia
87 |
88 |
89 | Skills:
90 | - Family: Programming
91 | Items:
92 | - Python
93 | - HTML (including Jinja)
94 | - Javascript
95 | - CSS
96 | - SASS
97 | - SQL
98 | - C#
99 | - Bash
100 | - MATLAB
101 | - Family: Frameworks
102 | Items:
103 | - Django
104 | - Flask
105 | - Hugo
106 | - React
107 | - Family: Developer Tools
108 | Items:
109 | - Git
110 | - Docker
111 | - Jenkins
112 | - AWS
113 | - Family: Misc
114 | Items:
115 | - Adobe Tools
116 | - LaTeX
117 |
118 | Languages:
119 | - Name: Portuguese
120 | Level: Native
121 | - Name: English
122 | Level: C2
123 | - Name: Spanish
124 | Level: B1
125 | - Name: German
126 | Level: B1
127 |
128 | Diplomas:
129 | - ISTQB Tester Certification (2019)
130 | - English Cambridge CAE (2009)
131 |
132 | Interests:
133 | - Bouldering
134 | - Cooking
135 | - Windsurfing
136 | - Bossa Nova
137 | - Design
138 | - Languages
139 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Almeida CV Theme
2 |
3 | Theme to build a customizeable printable HTML/CSS CV.
4 |
5 | 
6 |
7 | # Features
8 |
9 | - Online CV with minor responsiveness
10 | - Printable as A4 PDF
11 | - HTML5 + CSS3
12 | - Customizeable colors
13 |
14 | ## Print your PDF CV
15 |
16 | When printing the page in the browser, you'll get a formatted A4 page that can be used as your PDF resume.
17 | If your page holds more than 1 A4 page, the content will be divided into the given amount of pages.
18 |
19 | For better formatting, you can set the number of pages in the `config.toml` file.
20 |
21 | If badges and other elements with background don't render correctly, remember to toggle the "Background Graphics" option in the print dialog.
22 |
23 | # Usage
24 |
25 | ## Install Hugo (extended)
26 |
27 | To use `almeida-cv` theme you need to install Hugo Extended by following https://gohugo.io/getting-started/installing/.
28 |
29 | ## Create your personal website
30 |
31 | ```
32 | hugo new site
33 | cd
34 | git init
35 | git submodule add https://github.com/ineesalmeida/almeida-cv.git themes/almeida-cv
36 | ```
37 |
38 | Replace the files in your site root's directory with the ones in `themes/almeida-cv/exampleSite`.
39 |
40 | ## Start Hugo in development mode
41 |
42 | ```
43 | hugo server -D
44 | ```
45 |
46 | Your site is now available at http://localhost:1313/.
47 |
48 | ## Customization
49 |
50 | Your professional data should be added in the `data/content.yaml` file. You can change the theme colors and number of
51 | pages in the `config.toml` file. For working example, see `exampleSite` directory.
52 |
53 | ### Configuration Parameters
54 |
55 | Below are the available parameters for `config.toml` and their descriptions:
56 |
57 | | Parameter | Description | Example/Default |
58 | | --------------------------------------- | --------------------------------------------------------- | ---------------------- |
59 | | `languageCode` | The language code for the site. | `en-us` |
60 | | `defaultContentLanguage` | The default content language. | `en` |
61 | | `enableRobotsTXT` | Enable generation of robots.txt. | `true` |
62 | | `enableEmoji` | Enable emoji support. | `true` |
63 | | `theme` | The theme to use. | `almeida-cv` |
64 | | `disableKinds` | List of page types to disable (e.g., RSS, sitemap, etc.). | See example |
65 | | `baseURL` | The base URL of the site. | `https://example.com/` |
66 | | `title` | The title of the site. | `Example - CV` |
67 | | `params.enableMetaTags` | Enable meta tags for SEO. | `true` |
68 | | `params.colorLight` | Light color for theme. | `#fff` |
69 | | `params.colorDark` | Dark color for theme. | `#666` |
70 | | `params.colorPageBackground` | Background color for the page. | `#ddd` |
71 | | `params.colorPrimary` | Primary color for highlights. | `#e3bfb8` |
72 | | `params.colorSecondary` | Secondary color for highlights. | `#aaa` |
73 | | `params.colorIconPrimary` | Primary color for icons. | `#fff` |
74 | | `params.colorIconBackground` | Background color for icons. | `#e3bfb8` |
75 | | `params.colorRightColumnBackground` | Background color for the right column. | `#f5f5f5` |
76 | | `params.colorRightColumnHeadingText` | Heading text color in the right column. | `#666` |
77 | | `params.colorRightColumnBodyText` | Body text color in the right column. | `#666` |
78 | | `params.colorRightColumnIconPrimary` | Primary color for icons in the right column. | `#fff` |
79 | | `params.colorRightColumnIconBackground` | Background color for icons in the right column. | `#e3bfb8` |
80 | | `params.pages` | Number of A4 pages to use for the CV. | `1` |
81 | | `params.swapColumns` | If `true`, swaps the left and right columns. | `false` |
82 | | `params.footerNote` | Text to display in the footer. | See example |
83 |
84 | Add or adjust these parameters in your `config.toml` to customize your CV's appearance and behavior.
85 |
86 | For more advanced customization, in your site root directory create `assets/scss/_custom.scss` file where you can
87 | overwrite theme SCSS as per your liking.
88 |
89 | ## Building
90 |
91 | To generate static files of your website, execute the following:
92 |
93 | ```
94 | hugo --minify
95 | ```
96 |
97 | within the root of your project.
98 |
99 | # Contributing
100 |
101 | Post bugs and contributions to the issue tracker. Or make a pull request.
102 |
--------------------------------------------------------------------------------
5 |