From 3a0c5292469e705284f553ea8259bcdedfca5397 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Fri, 11 Jun 2021 20:27:03 +0200 Subject: Upgrade font-awesome to 5.15.3 & use non-hostile CDN MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Official FA hosting now wants an email address... Signed-off-by: Piotr Bocheński --- layouts/partials/head.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index a1a4e90..01018b5 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -3,11 +3,11 @@ {{ .Site.Title }} - - - - + + + + - {{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} + {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} - \ No newline at end of file + -- cgit v1.2.3 From f2321f1627ee79880e8296082bbae7a81898cf36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sat, 26 Jun 2021 19:15:50 +0200 Subject: Move 'assets/sass' -> 'assets/scss' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We don't use SASS so this was misleading. Signed-off-by: Piotr Bocheński --- assets/sass/_abstract.scss | 7 --- assets/sass/_base.scss | 49 ----------------- assets/sass/_functions.scss | 3 -- assets/sass/_layout.scss | 34 ------------ assets/sass/_mixins.scss | 30 ----------- assets/sass/_typography.scss | 28 ---------- assets/sass/components/_404.scss | 8 --- assets/sass/components/_avatar.scss | 30 ----------- assets/sass/components/_contact.scss | 24 --------- assets/sass/components/_education.scss | 5 -- assets/sass/components/_experience.scss | 88 ------------------------------- assets/sass/components/_interests.scss | 12 ----- assets/sass/components/_languages.scss | 15 ------ assets/sass/components/_section.scss | 30 ----------- assets/sass/components/_side_section.scss | 39 -------------- assets/sass/components/_skills.scss | 35 ------------ assets/sass/main.scss | 29 ---------- assets/scss/_abstract.scss | 7 +++ assets/scss/_base.scss | 49 +++++++++++++++++ assets/scss/_functions.scss | 3 ++ assets/scss/_layout.scss | 34 ++++++++++++ assets/scss/_mixins.scss | 30 +++++++++++ assets/scss/_typography.scss | 28 ++++++++++ assets/scss/components/_404.scss | 8 +++ assets/scss/components/_avatar.scss | 30 +++++++++++ assets/scss/components/_contact.scss | 24 +++++++++ assets/scss/components/_education.scss | 5 ++ assets/scss/components/_experience.scss | 88 +++++++++++++++++++++++++++++++ assets/scss/components/_interests.scss | 12 +++++ assets/scss/components/_languages.scss | 15 ++++++ assets/scss/components/_section.scss | 30 +++++++++++ assets/scss/components/_side_section.scss | 39 ++++++++++++++ assets/scss/components/_skills.scss | 35 ++++++++++++ assets/scss/main.scss | 29 ++++++++++ layouts/partials/head.html | 2 +- 35 files changed, 467 insertions(+), 467 deletions(-) delete mode 100644 assets/sass/_abstract.scss delete mode 100644 assets/sass/_base.scss delete mode 100644 assets/sass/_functions.scss delete mode 100644 assets/sass/_layout.scss delete mode 100644 assets/sass/_mixins.scss delete mode 100644 assets/sass/_typography.scss delete mode 100644 assets/sass/components/_404.scss delete mode 100644 assets/sass/components/_avatar.scss delete mode 100644 assets/sass/components/_contact.scss delete mode 100644 assets/sass/components/_education.scss delete mode 100644 assets/sass/components/_experience.scss delete mode 100644 assets/sass/components/_interests.scss delete mode 100644 assets/sass/components/_languages.scss delete mode 100644 assets/sass/components/_section.scss delete mode 100644 assets/sass/components/_side_section.scss delete mode 100644 assets/sass/components/_skills.scss delete mode 100644 assets/sass/main.scss create mode 100644 assets/scss/_abstract.scss create mode 100644 assets/scss/_base.scss create mode 100644 assets/scss/_functions.scss create mode 100644 assets/scss/_layout.scss create mode 100644 assets/scss/_mixins.scss create mode 100644 assets/scss/_typography.scss create mode 100644 assets/scss/components/_404.scss create mode 100644 assets/scss/components/_avatar.scss create mode 100644 assets/scss/components/_contact.scss create mode 100644 assets/scss/components/_education.scss create mode 100644 assets/scss/components/_experience.scss create mode 100644 assets/scss/components/_interests.scss create mode 100644 assets/scss/components/_languages.scss create mode 100644 assets/scss/components/_section.scss create mode 100644 assets/scss/components/_side_section.scss create mode 100644 assets/scss/components/_skills.scss create mode 100644 assets/scss/main.scss diff --git a/assets/sass/_abstract.scss b/assets/sass/_abstract.scss deleted file mode 100644 index ffa098a..0000000 --- a/assets/sass/_abstract.scss +++ /dev/null @@ -1,7 +0,0 @@ -// WIDTHS -$width-left-col: 56rem; // 70% -$page-width: 80rem; -$width-right-col: $page-width - $width-left-col; - -// ANIMATIONS -$cubic: 0.63, 0.21, 0.76, 1.58; diff --git a/assets/sass/_base.scss b/assets/sass/_base.scss deleted file mode 100644 index 127b986..0000000 --- a/assets/sass/_base.scss +++ /dev/null @@ -1,49 +0,0 @@ -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: inherit; -} - -html { - font-size: 62.5%; - background-color: $color-background; - - @media print { - background-color: $color-white; - } -} - -.content { - // A4 paper - width: $page-width; - min-height: paper_height($page-width); - background-color: $color-white; - - @media screen and (min-width: 60rem) { - margin: 6rem 0; - @include shadow(1); - @include hz-center; - } - @media print { - margin: 0; - height: paper_height($page-width) * $pages; - } -} - -body { - box-sizing: border-box; -} - -@media print { - @page { - margin: 0; - size: A4; - } -} - -::selection { - color: $color-white; - background-color: darken(rgba($color-primary, 0.6), 10%); -} diff --git a/assets/sass/_functions.scss b/assets/sass/_functions.scss deleted file mode 100644 index 94fe1cb..0000000 --- a/assets/sass/_functions.scss +++ /dev/null @@ -1,3 +0,0 @@ -@function paper_height($width) { - @return $width / 0.70695553; -} \ No newline at end of file diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss deleted file mode 100644 index 6d95037..0000000 --- a/assets/sass/_layout.scss +++ /dev/null @@ -1,34 +0,0 @@ -.content { - position: absolute; - overflow: hidden; - - &__left { - float: left; - width: $width-left-col; - height: 100%; - padding: 3rem 4rem; - - @media screen { - &::after { - content: '2020 © by Inês Almeida | ines-almeida.com'; - height: 4rem; - width: 100%; - position: absolute; - bottom: 0.5rem; - color: darken($color-white, 10%); - } - } - } - - &__right { - position: absolute; - float: right; - width: $width-right-col; - background-color: $color-right-col; - height: 100%; - padding: 2rem 3rem; - right: 1rem; - - @include shadow(0.5); - } -} diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss deleted file mode 100644 index 1756e90..0000000 --- a/assets/sass/_mixins.scss +++ /dev/null @@ -1,30 +0,0 @@ -@mixin shadow($distance) { - -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); - -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); - box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); -} - -@mixin hz-center { - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -@mixin vt-center { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -@mixin all-center { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); -} - -@mixin avoid-break { - @media print { - page-break-inside: avoid; - } -} \ No newline at end of file diff --git a/assets/sass/_typography.scss b/assets/sass/_typography.scss deleted file mode 100644 index 20c6034..0000000 --- a/assets/sass/_typography.scss +++ /dev/null @@ -1,28 +0,0 @@ -body { - font-family: 'Roboto', sans-serif; - font-weight: 300; - line-height: 1.7; - font-size: 1.12rem; - color: $color-grey-dark; -} - -.mainHeading { - text-transform: uppercase; - font-size: 5rem; - color: $color-secondary; - - & span { - color: $color-primary; - } -} - -.section__title { - font-size: 2.1rem; - color: $color-grey-dark; -} - -h1, -h2 { - text-transform: uppercase; - font-family: 'Oswald', sans-serif; -} diff --git a/assets/sass/components/_404.scss b/assets/sass/components/_404.scss deleted file mode 100644 index d8174e8..0000000 --- a/assets/sass/components/_404.scss +++ /dev/null @@ -1,8 +0,0 @@ -.pageNotFound { - padding-top: 8rem; - @include hz-center; - - &__text { - padding-top: 3rem; - } -} \ No newline at end of file diff --git a/assets/sass/components/_avatar.scss b/assets/sass/components/_avatar.scss deleted file mode 100644 index 3ec7f29..0000000 --- a/assets/sass/components/_avatar.scss +++ /dev/null @@ -1,30 +0,0 @@ -.avatar { - width: 100%; - height: $width-right-col - 6rem; - position: relative; - overflow: hidden; - - &__container { - @include hz-center; - width: 100%; - clip-path: circle(50% at 50% 56%); - height: $width-right-col - 8rem; - text-align: center; - transition: all 0.3s cubic-bezier($cubic); - - &:hover { - width: 110%; - } - } - - &__img { - object-fit: cover; - width: 110%; - transition: all 0.3s cubic-bezier($cubic); - @include all-center; - - &:hover { - width: 105%; - } - } -} \ No newline at end of file diff --git a/assets/sass/components/_contact.scss b/assets/sass/components/_contact.scss deleted file mode 100644 index 18d1111..0000000 --- a/assets/sass/components/_contact.scss +++ /dev/null @@ -1,24 +0,0 @@ -.contact { - line-height: 2rem; - - &__item { - position: relative; - font-size: 1rem; - - & > i { - background-color: $color-primary; - color: $color-primary-text; - font-size: 1rem; - text-align: center; - border-radius: 50%; - padding-top: 0.5rem; - width: 2rem; - height: 2rem; - margin-right: 0.5rem; - margin-bottom: 0.5rem; - } - & > span { - @include vt-center; - } - } -} \ No newline at end of file diff --git a/assets/sass/components/_education.scss b/assets/sass/components/_education.scss deleted file mode 100644 index be1863f..0000000 --- a/assets/sass/components/_education.scss +++ /dev/null @@ -1,5 +0,0 @@ -.education { - &__item { - @include avoid-break; - } -} \ No newline at end of file diff --git a/assets/sass/components/_experience.scss b/assets/sass/components/_experience.scss deleted file mode 100644 index 8071cec..0000000 --- a/assets/sass/components/_experience.scss +++ /dev/null @@ -1,88 +0,0 @@ -.experience { - &__item { - display: block; - @include avoid-break; - &:not(:first-child) { - padding-top: 1.5rem; - } - } - - &__header, - &__subheader { - display: block; - width: 100%; - height: 2.4rem; - } - - &__job { - position: relative; - transition: transform 0.2s cubic-bezier($cubic); - - &:hover { - transform: translateX(0.5rem); - } - } - - &__company, - &__position { - text-align: left; - width: 70%; - float: left; - } - - &__company { - color: $color-grey-dark; - } - - &__position { - text-transform: uppercase; - font-size: 1.3rem; - color: $color-grey-dark; - } - - &__date, - &__place { - float: right; - text-align: right; - width: 30%; - color: $color-secondary; - } - - &__date { - font-weight: 400; - } - - &__place { - &::before { - font-family: 'Material Icons'; - color: $color-primary; - font-size: 1.4rem; - content: 'place'; - display: inline-block; - padding-right: 3px; - vertical-align: middle; - font-weight: 900; - } - } - - &__bullet { - list-style-position: inside; - } - - &__badges { - display: block; - text-align: right; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - } - - &__badge { - font-size: 0.9rem; - font-weight: 400; - display: inline-block; - background-color: $color-primary; - color: $color-primary-text; - border-radius: 1rem; - padding: 0.1rem 0.6rem; - } -} diff --git a/assets/sass/components/_interests.scss b/assets/sass/components/_interests.scss deleted file mode 100644 index 9759e20..0000000 --- a/assets/sass/components/_interests.scss +++ /dev/null @@ -1,12 +0,0 @@ -.interests { - display: block; - -moz-column-count: 2; - column-count: 2; - width: 100%; - text-align: right; - @include avoid-break; - - &__item:nth-child(n+4) { - text-align: left; - } -} \ No newline at end of file diff --git a/assets/sass/components/_languages.scss b/assets/sass/components/_languages.scss deleted file mode 100644 index fa5c94a..0000000 --- a/assets/sass/components/_languages.scss +++ /dev/null @@ -1,15 +0,0 @@ -.language { - &__item { - display: table; - width: 100%; - } - - &__name, - &__level { - display: table-cell; - width: 50%; - } - &__level { - text-align: right; - } -} \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss deleted file mode 100644 index e93846b..0000000 --- a/assets/sass/components/_section.scss +++ /dev/null @@ -1,30 +0,0 @@ -.section { - display: block; - margin-bottom: 2rem; - - &__heading { - width: 100%; - overflow: hidden; - } - - &__title { - position: relative; - - &::after { - content: ''; - position: absolute; - border-top: 1px solid; - border-bottom: 1px solid; - border-color: $color-secondary; - width: 50rem; - height: 4px; - margin-left: 1.5rem; - margin-top: 1.5rem; - transition: all 0.5s ease-in-out; - } - - &:hover::after { - border-color: $color-primary; - } - } -} diff --git a/assets/sass/components/_side_section.scss b/assets/sass/components/_side_section.scss deleted file mode 100644 index 3eae328..0000000 --- a/assets/sass/components/_side_section.scss +++ /dev/null @@ -1,39 +0,0 @@ -.sideSection { - display: block; - margin-bottom: 3rem; - @include avoid-break; - - &__heading { - width: 100%; - overflow: hidden; - text-align: center; - margin-bottom: 1rem; - } - - &__title { - position: relative; - - &::after, - &::before { - content: ''; - position: absolute; - border-top: 1px solid $color-secondary; - border-bottom: 1px solid $color-secondary; - width: 10rem; - height: 4px; - margin-top: 1.1rem; - } - - &::after { - margin-left: 1rem; - } - - &::before { - margin-left: -11rem; - } - } - - & li { - list-style: none; - } -} diff --git a/assets/sass/components/_skills.scss b/assets/sass/components/_skills.scss deleted file mode 100644 index 54b2162..0000000 --- a/assets/sass/components/_skills.scss +++ /dev/null @@ -1,35 +0,0 @@ -.skills { - &__group { - & span { - font-weight: 700; - display: inline-block; - - &::after{ - content: ":" - } - - &:hover ~ li { - background-color: $color-primary; - color: $color-white; - } - - } - - & li{ - display: inline-block; - font-weight: 400; - transition: all 0.2s ease-in-out; - padding: 0 1px; - border-radius: 2px; - - &:not(:last-child)::after{ - content: ", " - } - - &:hover { - background-color: $color-primary; - color: $color-white; - } - } - } -} \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss deleted file mode 100644 index 37b6fed..0000000 --- a/assets/sass/main.scss +++ /dev/null @@ -1,29 +0,0 @@ - -// HUGO variables -$color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default; -$color-primary-text: {{ .Site.Params.colorPrimaryText | default "#fff"}} !default; -$color-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default; -$color-right-col: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default; -$color-white: {{ .Site.Params.colorLight | default "#fff"}} !default; -$color-secondary: {{ .Site.Params.colorSecondary | default "#aaa"}} !default; -$color-grey-dark: {{ .Site.Params.colorDark | default "#666"}} !default; -$pages: {{ .Site.Params.pages | default 1}} !default; - -@import "abstract"; -@import "functions"; -@import "mixins"; -@import "layout"; -@import "base"; -@import "typography"; - -@import "components/section"; -@import "components/side_section"; -@import "components/experience"; -@import "components/education"; -@import "components/contact"; -@import "components/avatar"; -@import "components/skills"; -@import "components/languages"; -@import "components/interests"; - -@import "components/404"; \ No newline at end of file diff --git a/assets/scss/_abstract.scss b/assets/scss/_abstract.scss new file mode 100644 index 0000000..ffa098a --- /dev/null +++ b/assets/scss/_abstract.scss @@ -0,0 +1,7 @@ +// WIDTHS +$width-left-col: 56rem; // 70% +$page-width: 80rem; +$width-right-col: $page-width - $width-left-col; + +// ANIMATIONS +$cubic: 0.63, 0.21, 0.76, 1.58; diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss new file mode 100644 index 0000000..127b986 --- /dev/null +++ b/assets/scss/_base.scss @@ -0,0 +1,49 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + background-color: $color-background; + + @media print { + background-color: $color-white; + } +} + +.content { + // A4 paper + width: $page-width; + min-height: paper_height($page-width); + background-color: $color-white; + + @media screen and (min-width: 60rem) { + margin: 6rem 0; + @include shadow(1); + @include hz-center; + } + @media print { + margin: 0; + height: paper_height($page-width) * $pages; + } +} + +body { + box-sizing: border-box; +} + +@media print { + @page { + margin: 0; + size: A4; + } +} + +::selection { + color: $color-white; + background-color: darken(rgba($color-primary, 0.6), 10%); +} diff --git a/assets/scss/_functions.scss b/assets/scss/_functions.scss new file mode 100644 index 0000000..94fe1cb --- /dev/null +++ b/assets/scss/_functions.scss @@ -0,0 +1,3 @@ +@function paper_height($width) { + @return $width / 0.70695553; +} \ No newline at end of file diff --git a/assets/scss/_layout.scss b/assets/scss/_layout.scss new file mode 100644 index 0000000..6d95037 --- /dev/null +++ b/assets/scss/_layout.scss @@ -0,0 +1,34 @@ +.content { + position: absolute; + overflow: hidden; + + &__left { + float: left; + width: $width-left-col; + height: 100%; + padding: 3rem 4rem; + + @media screen { + &::after { + content: '2020 © by Inês Almeida | ines-almeida.com'; + height: 4rem; + width: 100%; + position: absolute; + bottom: 0.5rem; + color: darken($color-white, 10%); + } + } + } + + &__right { + position: absolute; + float: right; + width: $width-right-col; + background-color: $color-right-col; + height: 100%; + padding: 2rem 3rem; + right: 1rem; + + @include shadow(0.5); + } +} diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss new file mode 100644 index 0000000..1756e90 --- /dev/null +++ b/assets/scss/_mixins.scss @@ -0,0 +1,30 @@ +@mixin shadow($distance) { + -webkit-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); + -moz-box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); + box-shadow: $distance * 1rem $distance * 2rem $distance * 3rem rgba($color-grey-dark, $distance * 0.3); +} + +@mixin hz-center { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +@mixin vt-center { + position: absolute; + top: 50%; + transform: translateY(-50%); +} + +@mixin all-center { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + +@mixin avoid-break { + @media print { + page-break-inside: avoid; + } +} \ No newline at end of file diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss new file mode 100644 index 0000000..20c6034 --- /dev/null +++ b/assets/scss/_typography.scss @@ -0,0 +1,28 @@ +body { + font-family: 'Roboto', sans-serif; + font-weight: 300; + line-height: 1.7; + font-size: 1.12rem; + color: $color-grey-dark; +} + +.mainHeading { + text-transform: uppercase; + font-size: 5rem; + color: $color-secondary; + + & span { + color: $color-primary; + } +} + +.section__title { + font-size: 2.1rem; + color: $color-grey-dark; +} + +h1, +h2 { + text-transform: uppercase; + font-family: 'Oswald', sans-serif; +} diff --git a/assets/scss/components/_404.scss b/assets/scss/components/_404.scss new file mode 100644 index 0000000..d8174e8 --- /dev/null +++ b/assets/scss/components/_404.scss @@ -0,0 +1,8 @@ +.pageNotFound { + padding-top: 8rem; + @include hz-center; + + &__text { + padding-top: 3rem; + } +} \ No newline at end of file diff --git a/assets/scss/components/_avatar.scss b/assets/scss/components/_avatar.scss new file mode 100644 index 0000000..3ec7f29 --- /dev/null +++ b/assets/scss/components/_avatar.scss @@ -0,0 +1,30 @@ +.avatar { + width: 100%; + height: $width-right-col - 6rem; + position: relative; + overflow: hidden; + + &__container { + @include hz-center; + width: 100%; + clip-path: circle(50% at 50% 56%); + height: $width-right-col - 8rem; + text-align: center; + transition: all 0.3s cubic-bezier($cubic); + + &:hover { + width: 110%; + } + } + + &__img { + object-fit: cover; + width: 110%; + transition: all 0.3s cubic-bezier($cubic); + @include all-center; + + &:hover { + width: 105%; + } + } +} \ No newline at end of file diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss new file mode 100644 index 0000000..18d1111 --- /dev/null +++ b/assets/scss/components/_contact.scss @@ -0,0 +1,24 @@ +.contact { + line-height: 2rem; + + &__item { + position: relative; + font-size: 1rem; + + & > i { + background-color: $color-primary; + color: $color-primary-text; + font-size: 1rem; + text-align: center; + border-radius: 50%; + padding-top: 0.5rem; + width: 2rem; + height: 2rem; + margin-right: 0.5rem; + margin-bottom: 0.5rem; + } + & > span { + @include vt-center; + } + } +} \ No newline at end of file diff --git a/assets/scss/components/_education.scss b/assets/scss/components/_education.scss new file mode 100644 index 0000000..be1863f --- /dev/null +++ b/assets/scss/components/_education.scss @@ -0,0 +1,5 @@ +.education { + &__item { + @include avoid-break; + } +} \ No newline at end of file diff --git a/assets/scss/components/_experience.scss b/assets/scss/components/_experience.scss new file mode 100644 index 0000000..8071cec --- /dev/null +++ b/assets/scss/components/_experience.scss @@ -0,0 +1,88 @@ +.experience { + &__item { + display: block; + @include avoid-break; + &:not(:first-child) { + padding-top: 1.5rem; + } + } + + &__header, + &__subheader { + display: block; + width: 100%; + height: 2.4rem; + } + + &__job { + position: relative; + transition: transform 0.2s cubic-bezier($cubic); + + &:hover { + transform: translateX(0.5rem); + } + } + + &__company, + &__position { + text-align: left; + width: 70%; + float: left; + } + + &__company { + color: $color-grey-dark; + } + + &__position { + text-transform: uppercase; + font-size: 1.3rem; + color: $color-grey-dark; + } + + &__date, + &__place { + float: right; + text-align: right; + width: 30%; + color: $color-secondary; + } + + &__date { + font-weight: 400; + } + + &__place { + &::before { + font-family: 'Material Icons'; + color: $color-primary; + font-size: 1.4rem; + content: 'place'; + display: inline-block; + padding-right: 3px; + vertical-align: middle; + font-weight: 900; + } + } + + &__bullet { + list-style-position: inside; + } + + &__badges { + display: block; + text-align: right; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + &__badge { + font-size: 0.9rem; + font-weight: 400; + display: inline-block; + background-color: $color-primary; + color: $color-primary-text; + border-radius: 1rem; + padding: 0.1rem 0.6rem; + } +} diff --git a/assets/scss/components/_interests.scss b/assets/scss/components/_interests.scss new file mode 100644 index 0000000..9759e20 --- /dev/null +++ b/assets/scss/components/_interests.scss @@ -0,0 +1,12 @@ +.interests { + display: block; + -moz-column-count: 2; + column-count: 2; + width: 100%; + text-align: right; + @include avoid-break; + + &__item:nth-child(n+4) { + text-align: left; + } +} \ No newline at end of file diff --git a/assets/scss/components/_languages.scss b/assets/scss/components/_languages.scss new file mode 100644 index 0000000..fa5c94a --- /dev/null +++ b/assets/scss/components/_languages.scss @@ -0,0 +1,15 @@ +.language { + &__item { + display: table; + width: 100%; + } + + &__name, + &__level { + display: table-cell; + width: 50%; + } + &__level { + text-align: right; + } +} \ No newline at end of file diff --git a/assets/scss/components/_section.scss b/assets/scss/components/_section.scss new file mode 100644 index 0000000..e93846b --- /dev/null +++ b/assets/scss/components/_section.scss @@ -0,0 +1,30 @@ +.section { + display: block; + margin-bottom: 2rem; + + &__heading { + width: 100%; + overflow: hidden; + } + + &__title { + position: relative; + + &::after { + content: ''; + position: absolute; + border-top: 1px solid; + border-bottom: 1px solid; + border-color: $color-secondary; + width: 50rem; + height: 4px; + margin-left: 1.5rem; + margin-top: 1.5rem; + transition: all 0.5s ease-in-out; + } + + &:hover::after { + border-color: $color-primary; + } + } +} diff --git a/assets/scss/components/_side_section.scss b/assets/scss/components/_side_section.scss new file mode 100644 index 0000000..3eae328 --- /dev/null +++ b/assets/scss/components/_side_section.scss @@ -0,0 +1,39 @@ +.sideSection { + display: block; + margin-bottom: 3rem; + @include avoid-break; + + &__heading { + width: 100%; + overflow: hidden; + text-align: center; + margin-bottom: 1rem; + } + + &__title { + position: relative; + + &::after, + &::before { + content: ''; + position: absolute; + border-top: 1px solid $color-secondary; + border-bottom: 1px solid $color-secondary; + width: 10rem; + height: 4px; + margin-top: 1.1rem; + } + + &::after { + margin-left: 1rem; + } + + &::before { + margin-left: -11rem; + } + } + + & li { + list-style: none; + } +} diff --git a/assets/scss/components/_skills.scss b/assets/scss/components/_skills.scss new file mode 100644 index 0000000..54b2162 --- /dev/null +++ b/assets/scss/components/_skills.scss @@ -0,0 +1,35 @@ +.skills { + &__group { + & span { + font-weight: 700; + display: inline-block; + + &::after{ + content: ":" + } + + &:hover ~ li { + background-color: $color-primary; + color: $color-white; + } + + } + + & li{ + display: inline-block; + font-weight: 400; + transition: all 0.2s ease-in-out; + padding: 0 1px; + border-radius: 2px; + + &:not(:last-child)::after{ + content: ", " + } + + &:hover { + background-color: $color-primary; + color: $color-white; + } + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..37b6fed --- /dev/null +++ b/assets/scss/main.scss @@ -0,0 +1,29 @@ + +// HUGO variables +$color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default; +$color-primary-text: {{ .Site.Params.colorPrimaryText | default "#fff"}} !default; +$color-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default; +$color-right-col: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5" }} !default; +$color-white: {{ .Site.Params.colorLight | default "#fff"}} !default; +$color-secondary: {{ .Site.Params.colorSecondary | default "#aaa"}} !default; +$color-grey-dark: {{ .Site.Params.colorDark | default "#666"}} !default; +$pages: {{ .Site.Params.pages | default 1}} !default; + +@import "abstract"; +@import "functions"; +@import "mixins"; +@import "layout"; +@import "base"; +@import "typography"; + +@import "components/section"; +@import "components/side_section"; +@import "components/experience"; +@import "components/education"; +@import "components/contact"; +@import "components/avatar"; +@import "components/skills"; +@import "components/languages"; +@import "components/interests"; + +@import "components/404"; \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 01018b5..dabe8c1 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -8,6 +8,6 @@ - {{- $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} + {{- $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} -- cgit v1.2.3 From 439c532af817f80486265c45d407f8f42f90ccfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sat, 26 Jun 2021 19:18:00 +0200 Subject: Add ability to customize theme without modyfing it MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Users now can implement their own changes in 'assets/scss/_custom.scss' which will be automatically picked up by Hugo during SCSS processing. Signed-off-by: Piotr Bocheński --- README.md | 15 ++++++++------- assets/scss/_custom.scss | 1 + assets/scss/main.scss | 5 ++--- 3 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 assets/scss/_custom.scss diff --git a/README.md b/README.md index 538a18a..ff69075 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ Theme to build a customizeable printable HTML/CSS CV. - Customizeable colors ## Print your PDF CV -When printing the page in the browser, you'll get a formatted A4 page that can be used as your PDF resume. +When printing the page in the browser, you'll get a formatted A4 page that can be used as your PDF resume. If your page holds more than 1 A4 page, the content will be divided into the given amount of pages. For better formatting, you can set the number of pages in the `config.toml` file. If badges and other elements with background don't render correctly, remember to toggle the "Background Graphics" option in the print dialog. -# Download +# Download Clone the repo: `git clone https://github.com/ineesalmeida/almeida-cv` # Installation @@ -37,17 +37,18 @@ hugo server -D The theme is alive on http://localhost:1313/. ## Customization -You can change the theme colors and number of pages in the `config.toml` file. -Your professional data should be added in the `data/content.yaml`. +Your professional data should be added in the `data/content.yaml` file. You can change the theme colors and number of +pages in the `config.toml` file. For working example, see `exampleSite` directory. +For more advanced customization, in your site root directory create `assets/scss/_custom.scss` file where you can +overwrite theme SCSS as per your liking. -# Building +# Building To generate your site in the public folder, execute the following: ``` hugo ``` within the root of your project. - -# Contributing +# Contributing Post bugs and contributions to the issue tracker. Or make a pull request. diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss new file mode 100644 index 0000000..4215c68 --- /dev/null +++ b/assets/scss/_custom.scss @@ -0,0 +1 @@ +// override me diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 37b6fed..4897445 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,5 +1,3 @@ - -// HUGO variables $color-primary: {{ .Site.Params.colorPrimary | default "#e3bfb8"}} !default; $color-primary-text: {{ .Site.Params.colorPrimaryText | default "#fff"}} !default; $color-background: {{ .Site.Params.colorPageBackground | default "#ddd" }} !default; @@ -25,5 +23,6 @@ $pages: {{ .Site.Params.pages | default 1}} !default; @import "components/skills"; @import "components/languages"; @import "components/interests"; +@import "components/404"; -@import "components/404"; \ No newline at end of file +@import "custom"; -- cgit v1.2.3 From 5d9a7f3550a2bb14d6d9e3636051565b6666335b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sun, 27 Jun 2021 13:18:51 +0200 Subject: Remove 'exampleSite/resources' directory MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It's autogenerated by Hugo and may be misleading for newcomers. Signed-off-by: Piotr Bocheński --- .../assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.content | 1 - .../assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.json | 1 - 2 files changed, 2 deletions(-) delete mode 100644 exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.content delete mode 100644 exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.json diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.content b/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.content deleted file mode 100644 index cd3c2fa..0000000 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.content +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.content{position:absolute;overflow:hidden}.content__left{float:left;width:56rem;height:100%;padding:3rem 4rem}@media screen{.content__left::after{content:'2020 © by Inês Almeida | ines-almeida.com';height:4rem;width:100%;position:absolute;bottom:.5rem;color:#e6e6e6}}.content__right{position:absolute;float:right;width:24rem;background-color:#f5f5f5;height:100%;padding:2rem 3rem;right:1rem;-webkit-box-shadow:.5rem 1rem 1.5rem rgba(102,102,102,.15);-moz-box-shadow:.5rem 1rem 1.5rem rgba(102,102,102,.15);box-shadow:.5rem 1rem 1.5rem rgba(102,102,102,.15)}*,*::after,*::before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%;background-color:#ddd}@media print{html{background-color:#fff}}.content{width:80rem;min-height:113.16129036rem;background-color:#fff}@media screen and (min-width:60rem){.content{margin:6rem 0;-webkit-box-shadow:1rem 2rem 3rem rgba(102,102,102,.3);-moz-box-shadow:1rem 2rem 3rem rgba(102,102,102,.3);box-shadow:1rem 2rem 3rem rgba(102,102,102,.3);position:absolute;left:50%;transform:translateX(-50%)}}@media print{.content{margin:0;height:113.16129036rem}}body{box-sizing:border-box}@media print{@page{margin:0;size:A4}}::selection{color:#fff;background-color:rgba(197,137,125,.6)}body{font-family:roboto,sans-serif;font-weight:300;line-height:1.7;font-size:1.12rem;color:#666}.mainHeading{text-transform:uppercase;font-size:5rem;color:#b4aeae}.mainHeading span{color:#d5a9a0}.section__title{font-size:2.1rem;color:#666}h1,h2{text-transform:uppercase;font-family:oswald,sans-serif}.section{display:block;margin-bottom:2rem}.section__heading{width:100%;overflow:hidden}.section__title{position:relative}.section__title::after{content:'';position:absolute;border-top:1px solid;border-bottom:1px solid;border-color:#b4aeae;width:50rem;height:4px;margin-left:1.5rem;margin-top:1.5rem;transition:all .5s ease-in-out}.section__title:hover::after{border-color:#d5a9a0}.sideSection{display:block;margin-bottom:3rem}@media print{.sideSection{page-break-inside:avoid}}.sideSection__heading{width:100%;overflow:hidden;text-align:center;margin-bottom:1rem}.sideSection__title{position:relative}.sideSection__title::after,.sideSection__title::before{content:'';position:absolute;border-top:1px solid #b4aeae;border-bottom:1px solid #b4aeae;width:10rem;height:4px;margin-top:1.1rem}.sideSection__title::after{margin-left:1rem}.sideSection__title::before{margin-left:-11rem}.sideSection li{list-style:none}.experience__item{display:block}@media print{.experience__item{page-break-inside:avoid}}.experience__item:not(:first-child){padding-top:1.5rem}.experience__header,.experience__subheader{display:block;width:100%;height:2.4rem}.experience__job{position:relative;transition:transform .2s cubic-bezier(0.63,0.21,0.76,1.58)}.experience__job:hover{transform:translateX(0.5rem)}.experience__company,.experience__position{text-align:left;width:70%;float:left}.experience__company{color:#666}.experience__position{text-transform:uppercase;font-size:1.3rem;color:#666}.experience__date,.experience__place{float:right;text-align:right;width:30%;color:#b4aeae}.experience__date{font-weight:400}.experience__place::before{font-family:material icons;color:#d5a9a0;font-size:1.4rem;content:'place';display:inline-block;padding-right:3px;vertical-align:middle;font-weight:900}.experience__bullet{list-style-position:inside}.experience__badges{display:block;text-align:right;margin-top:.5rem;margin-bottom:.5rem}.experience__badge{font-size:.9rem;font-weight:400;display:inline-block;background-color:#d5a9a0;color:#fff;border-radius:1rem;padding:.1rem .6rem}@media print{.education__item{page-break-inside:avoid}}.contact{line-height:2rem}.contact__item{position:relative;font-size:1rem}.contact__item>i{background-color:#d5a9a0;color:#fff;font-size:1rem;text-align:center;border-radius:50%;padding-top:.5rem;width:2rem;height:2rem;margin-right:.5rem;margin-bottom:.5rem}.contact__item>span{position:absolute;top:50%;transform:translateY(-50%)}.avatar{width:100%;height:18rem;position:relative;overflow:hidden}.avatar__container{position:absolute;left:50%;transform:translateX(-50%);width:100%;clip-path:circle(50% at 50% 56%);height:16rem;text-align:center;transition:all .3s cubic-bezier(0.63,0.21,0.76,1.58)}.avatar__container:hover{width:110%}.avatar__img{object-fit:cover;width:110%;transition:all .3s cubic-bezier(0.63,0.21,0.76,1.58);position:absolute;top:50%;left:50%;transform:translateX(-50%)translateY(-50%)}.avatar__img:hover{width:105%}.skills__group span{font-weight:700;display:inline-block}.skills__group span::after{content:":"}.skills__group span:hover~li{background-color:#d5a9a0;color:#fff}.skills__group li{display:inline-block;font-weight:400;transition:all .2s ease-in-out;padding:0 1px;border-radius:2px}.skills__group li:not(:last-child)::after{content:", "}.skills__group li:hover{background-color:#d5a9a0;color:#fff}.language__item{display:table;width:100%}.language__name,.language__level{display:table-cell;width:50%}.language__level{text-align:right}.interests{display:block;-moz-column-count:2;column-count:2;width:100%;text-align:right}@media print{.interests{page-break-inside:avoid}}.interests__item:nth-child(n+4){text-align:left}.pageNotFound{padding-top:8rem;position:absolute;left:50%;transform:translateX(-50%)}.pageNotFound__text{padding-top:3rem} \ No newline at end of file diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.json b/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.json deleted file mode 100644 index e49f825..0000000 --- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_545d7c693f5b5f74d129019eb310e64e.json +++ /dev/null @@ -1 +0,0 @@ -{"Target":"style.main.min.33da6b12aa464369a4d67eff5abf33f911e1a5d1c1fb8b3959f6049be2321f60.css","MediaType":"text/css","Data":{"Integrity":"sha256-M9prEqpGQ2mk1n7/Wr8z+RHhpdHB+4s5WfYEm+IyH2A="}} \ No newline at end of file -- cgit v1.2.3 From 1305b59afab3ecca9f7b53f51071e2261114dcbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sun, 27 Jun 2021 14:10:29 +0200 Subject: Improve 'README.md' and 'exampleSite' MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Improve wording in README * Recommend to use template as a submodule (as per official Hugo guide) * Disable building unecessary Hugo elements in exampleSite Signed-off-by: Piotr Bocheński --- README.md | 28 ++++++++++++++-------------- exampleSite/config.toml | 7 ++++++- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index ff69075..2819ab5 100644 --- a/README.md +++ b/README.md @@ -17,24 +17,24 @@ For better formatting, you can set the number of pages in the `config.toml` file If badges and other elements with background don't render correctly, remember to toggle the "Background Graphics" option in the print dialog. -# Download -Clone the repo: `git clone https://github.com/ineesalmeida/almeida-cv` +# Usage +## Install Hugo (extended) +To use `almeida-cv` theme you need to install Hugo Extended by following https://gohugo.io/getting-started/installing/. -# Installation -## Install Hugo (Extended) -To use almeida-cv theme you need to install Hugo Extended by following https://gohugo.io/getting-started/installing/. - -## Create your personal website and run +## Create your personal website ``` hugo new site -cd /themes/ +cd +git init +git submodule add https://github.com/ineesalmeida/almeida-cv.git themes/almeida-cv ``` -Clone the theme (`git clone https://github.com/ineesalmeida/almeida-cv`) into your themes folder. -Replace the files in your root's directory with the ones on `themes/almeida-cv/exampleSite`. +Replace the files in your site root's directory with the ones in `themes/almeida-cv/exampleSite`. + +## Start Hugo in development mode ``` hugo server -D ``` -The theme is alive on http://localhost:1313/. +Your site is now available at http://localhost:1313/. ## Customization Your professional data should be added in the `data/content.yaml` file. You can change the theme colors and number of @@ -43,10 +43,10 @@ pages in the `config.toml` file. For working example, see `exampleSite` director For more advanced customization, in your site root directory create `assets/scss/_custom.scss` file where you can overwrite theme SCSS as per your liking. -# Building -To generate your site in the public folder, execute the following: +## Building +To generate static files of your website, execute the following: ``` -hugo +hugo --minify ``` within the root of your project. diff --git a/exampleSite/config.toml b/exampleSite/config.toml index c71d98e..b160eb9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -1,7 +1,12 @@ -baseURL = "https://example.com/" languageCode = "en-us" defaultContentLanguage = "en" +enableRobotsTXT = "true" +enableEmoji = "true" + theme = "almeida-cv" +disableKinds = ["page", "section", "taxonomy", "term", "RSS", "sitemap"] + +baseURL = "https://example.com/" title = "Example - CV" [params] -- cgit v1.2.3 From b647b4e784f918ace91ae1b48333aa9c64878b31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sun, 27 Jun 2021 14:47:52 +0200 Subject: Add Google Analytics support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Piotr Bocheński --- layouts/partials/head.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index dabe8c1..d10f60a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -10,4 +10,9 @@ {{- $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} + + {{- if .Site.GoogleAnalytics }} + {{ template "_internal/google_analytics.html" . }} + {{ template "_internal/google_analytics_async.html" . }} + {{- end -}} -- cgit v1.2.3 From d504780e270ce709e11a28dface3e8644f3e37e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sun, 27 Jun 2021 15:04:16 +0200 Subject: Add Polish translation for headings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Piotr Bocheński --- i18n/pl.toml | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 i18n/pl.toml diff --git a/i18n/pl.toml b/i18n/pl.toml new file mode 100644 index 0000000..98071a5 --- /dev/null +++ b/i18n/pl.toml @@ -0,0 +1,20 @@ +[profile] +other = "Profil" + +[experience] +other = "Doświadczenie" + +[education] +other = "Wykształcenie" + +[skills] +other = "Umiejętności" + +[languages] +other = "Języki" + +[diplomas] +other = "Dyplomy" + +[interests] +other = "Zainteresowania" -- cgit v1.2.3 From a9bdb46b9b0d92fd5c95cace8880b6f76ce44158 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Boche=C5=84ski?= Date: Sun, 27 Jun 2021 20:46:26 +0200 Subject: Fix styles missing when printing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Piotr Bocheński --- layouts/partials/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d10f60a..8bd5dd1 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -9,7 +9,7 @@ {{- $style := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }} - + {{- if .Site.GoogleAnalytics }} {{ template "_internal/google_analytics.html" . }} -- cgit v1.2.3