diff --git a/content/portfolio.md b/content/portfolio.md deleted file mode 100644 index b31718e..0000000 --- a/content/portfolio.md +++ /dev/null @@ -1,18 +0,0 @@ -+++ -author = "Maik de Kruif" -title = "Portfolio" -date = 2020-07-06T16:37:43+02:00 -description = "Coming soon!" -images = [] -tags = [ - "portfolio", - "aboutme", -] -categories = [ - "me", -] -+++ - -## Coming soon - -Please come back later. diff --git a/content/portfolio/watch_together.md b/content/portfolio/watch_together.md new file mode 100644 index 0000000..3192849 --- /dev/null +++ b/content/portfolio/watch_together.md @@ -0,0 +1,15 @@ ++++ +author = "Maik de Kruif" +title = "WatchTogether" +start_date = 2018-08-17 +end_date = "Present" +company_name = "Maik Inc." +company_url = "Maik Inc." +cover = "img/portfolio/watch_together/screenshot.png" +description = "A website to watch a youtube video together with someone who is not directly next to you!" +responsibilities = [ + "Sync", +] ++++ + +WatchTogether is an online service that lets you watch a video together with your friends without being in the same room! diff --git a/static/img/portfolio/watch_together/screenshot.png b/static/img/portfolio/watch_together/screenshot.png new file mode 100644 index 0000000..295c0ec Binary files /dev/null and b/static/img/portfolio/watch_together/screenshot.png differ diff --git a/themes/maik-blog/assets/scss/_portfolio.scss b/themes/maik-blog/assets/scss/_portfolio.scss new file mode 100644 index 0000000..88881fd --- /dev/null +++ b/themes/maik-blog/assets/scss/_portfolio.scss @@ -0,0 +1,192 @@ +.portfolio { + width: 100%; + max-width: 800px; + text-align: left; + padding: 20px; + margin: 20px auto; + + @media #{$media-size-tablet} { + max-width: 600px; + } + + &-start-date { + &:after { + content: "—"; + } + } + + &-title { + font-size: 2.625rem; + margin: 0 0 20px; + + @media #{$media-size-phone} { + font-size: 2rem; + } + + a { + text-decoration: none; + } + } + + &-tags { + display: block; + margin-bottom: 20px; + font-size: 1rem; + opacity: 0.5; + + a { + text-decoration: none; + } + } + + &-content { + margin-top: 30px; + } + + &-cover { + border-radius: 8px; + margin: 40px -50px; + width: 860px; + max-width: 860px; + + @media #{$media-size-tablet} { + margin: 20px 0; + width: 100%; + } + } + + &-info { + margin-top: 30px; + font-size: 0.8rem; + line-height: normal; + @include dimmed; + + p { + margin: 0.8em 0; + } + + a:hover { + border-bottom: 1px solid white; + } + + svg { + margin-right: 0.8em; + } + + .tag { + margin-right: 0.5em; + display: inline-block; + + &::before { + content: "#"; + } + } + + .feather { + display: inline-block; + vertical-align: -0.125em; + width: 1em; + height: 1em; + } + } + + .flag { + border-radius: 50%; + margin: 0 5px; + } +} + +.pagination { + margin-top: 20px; + + &__title { + display: flex; + text-align: center; + position: relative; + margin: 20px 0; + + &-h { + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: $light-background; + color: $light-color-secondary; + font-size: 0.8rem; + text-transform: uppercase; + text-decoration: none; + letter-spacing: 0.1em; + z-index: 1; + + .dark-theme & { + background: $dark-background; + color: $dark-color-secondary; + } + } + + hr { + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; + } + } + + &__buttons { + display: flex; + align-items: center; + justify-content: center; + + a { + text-decoration: none; + font-weight: bold; + } + } +} + +.button { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + background: $light-background-secondary; + font-size: 1rem; + font-weight: 600; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; + + .dark-theme & { + background: $dark-background-secondary; + } + + + .button { + margin-left: 10px; + } + + a { + display: flex; + padding: 8px 16px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &__text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &.next .button__icon { + margin-left: 8px; + } + + &.previous .button__icon { + margin-right: 8px; + } +} diff --git a/themes/maik-blog/assets/scss/_portfolios.scss b/themes/maik-blog/assets/scss/_portfolios.scss new file mode 100644 index 0000000..f9b1c6a --- /dev/null +++ b/themes/maik-blog/assets/scss/_portfolios.scss @@ -0,0 +1,169 @@ +.portfolios { + width: 100%; + max-width: 800px; + text-align: left; + padding: 20px; + margin: 20px auto; + counter-reset: portfolio; + + @media #{$media-size-tablet} { + max-width: 660px; + } + + &:not(:last-of-type) { + border-bottom: 1px solid $light-border-color; + + .dark-theme & { + border-color: $dark-border-color; + } + } + + &-group { + display: flex; + margin-bottom: 1.9em; + line-height: normal; + + @media #{$media-size-tablet} { + display: block; + } + } + + &-list { + flex-grow: 1; + margin: 0; + padding: 0; + list-style: none; + } + + .portfolio { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + padding: 30px; + margin: 80px; + position: relative; + counter-increment: portfolio; + + .read-more { + white-space: nowrap; + } + + &-cover { + margin: 0; + } + + &-title { + font-size: 1rem; + margin: 5px 0 5px 0; + } + + &-company { + font-size: 1rem; + margin: 5px 0 5px 0; + } + + &-year { + padding-top: 6px; + margin-right: 1.8em; + font-size: 1.6em; + @include dimmed; + + @media #{$media-size-tablet} { + margin: -6px 0 4px; + } + } + + &-item { + border-bottom: 1px grey dashed; + + a { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 12px 0; + text-decoration: none; + } + } + + &-day { + flex-shrink: 0; + margin-left: 1em; + @include dimmed; + } + + &::before { + display: block; + content: counter(portfolio); + position: absolute; + + transform: translate(-50%, -50%); + background-color: #222; + color: #fff; + border-radius: 50%; + font-weight: bold; + min-width: 50px; + min-height: 50px; + line-height: 50px; + text-align: center; + top: 70px; + z-index: 10; + } + + &::after { + display: block; + content: ""; + position: absolute; + top: -50px; + width: calc(50% + 50px); + height: calc(100% + 83px); + background: rbga(0, 0, 255, 0.3); + + border-bottom: 3px solid #222; + border-top: 3px solid #222; + } + + &:nth-child(odd) { + margin-left: 40px; + // background: #cfc; + + &::before { + left: -48.5px; + } + + &::after { + left: -50px; + border-left: 3px solid #222; + border-radius: 15px 0 0 15px; + } + } + &:nth-child(even) { + margin-left: -40px; + // background: #fcc; + + &::before { + right: -98.5px; + } + + &::after { + right: -50px; + border-right: 3px solid #222; + border-radius: 0 15px 15px 0; + } + } + &:first-child { + &::after { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + &:last-child { + &::after { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + } + } +} diff --git a/themes/maik-blog/assets/scss/_single.scss b/themes/maik-blog/assets/scss/_post.scss similarity index 100% rename from themes/maik-blog/assets/scss/_single.scss rename to themes/maik-blog/assets/scss/_post.scss diff --git a/themes/maik-blog/assets/scss/_list.scss b/themes/maik-blog/assets/scss/_posts.scss similarity index 100% rename from themes/maik-blog/assets/scss/_list.scss rename to themes/maik-blog/assets/scss/_posts.scss diff --git a/themes/maik-blog/assets/scss/main.scss b/themes/maik-blog/assets/scss/main.scss index 7d3ef04..5f7b86c 100644 --- a/themes/maik-blog/assets/scss/main.scss +++ b/themes/maik-blog/assets/scss/main.scss @@ -10,8 +10,10 @@ @import "logo"; @import "menu"; @import "main"; -@import "list"; -@import "single"; +@import "post"; +@import "posts"; +@import "portfolio"; +@import "portfolios"; @import "footer"; @import "sharing-buttons"; -@import "code"; \ No newline at end of file +@import "code"; diff --git a/themes/maik-blog/layouts/portfolio/list.html b/themes/maik-blog/layouts/portfolio/list.html new file mode 100644 index 0000000..668f2f9 --- /dev/null +++ b/themes/maik-blog/layouts/portfolio/list.html @@ -0,0 +1,92 @@ +{{ define "main" }} +{{ $paginator := .Paginate .Data.Pages }} + +
+

Portfolio

+ + {{- if .Content }} +
{{ .Content }}
+ {{- end }} + + {{- if .Paginator.HasPrev }} + {{ partial "pagination.html" . }} + {{- end }} + +
+ {{ range $paginator.Pages }} +
+
+

{{ .Title | markdownify }}

+ + {{ .Params.company_name | markdownify }} + +
+ {{- if .Params.start_date }} + + {{- if eq (printf "%T" .Params.start_date) "time.Time"}} + {{ .Params.start_date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }} + {{- else }} + {{ .Params.start_date }} + {{- end }} + + + {{- if eq (printf "%T" .Params.end_date) "time.Time"}} + {{ .Params.end_date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }} + {{- else }} + {{ .Params.end_date }} + {{- end }} + + {{- end }} + {{- if $.Site.Params.ShowReadingTimeInList }} + — {{ .ReadingTime }} + {{ $.Site.Params.MinuteReadingTime | default "min read" }} + {{- end }} +
+ + {{- if .Params.tags }} + + {{- range .Params.tags }} + #{{ . }}  + {{- end }} + + {{- end }} + +
+ {{- with .Description }} + {{ . | markdownify }} + {{- else }} + {{- if .Truncated }} + {{ .Summary | markdownify }} + {{- end }} + {{- end }} +
+ {{- if not .Params.hideReadMore }} +
{{ $.Site.Params.ReadMore | default "Read more" }} + →
+ {{- end }} +
+ {{- if .Params.Cover }} +
+ {{- $img := imageConfig (printf "static/%s" .Params.Cover) }} + + {{- if .Params.UseRelativeCover }} + {{ .Title | plainify | default + {{- else }} + {{ .Title | plainify | default + {{- end }} + + {{- if .Params.CoverCaption }} +
{{ .Params.CoverCaption | markdownify }}
+ {{- end }} +
+ {{- end }} +
+ {{- end }} +
+ + {{ partial "pagination.html" . }} +
+{{ end }} \ No newline at end of file diff --git a/themes/maik-blog/layouts/portfolio/single.html b/themes/maik-blog/layouts/portfolio/single.html new file mode 100644 index 0000000..8003147 --- /dev/null +++ b/themes/maik-blog/layouts/portfolio/single.html @@ -0,0 +1,163 @@ +{{ define "main" }} +
+ +
+

+ + + + + {{ i18n "readingTime" .Page.ReadingTime }} + + {{- if .IsTranslated }} | {{ i18n "postAvailable" }} + {{- range .Translations }} + + {{- end}} + {{- end }} +

+
+ +
+

+ {{ .Title | markdownify }} +

+ + {{- if .Params.toc }} +
+ +
+ {{- end }} + + {{- if .Params.Cover }} + {{ $img := imageConfig (printf "static/%s" .Params.Cover) }} + {{ .Title | plainify | default + {{- end }} + +
+ {{ .Content }} +
+
+ +
+ +
+ {{- with .Params.tags }} +

+ + + + + + {{- range . -}} + {{.}} + {{- end }} +

+ {{- end }} + +

+ + + + + + + + {{ i18n "wordCount" .Page.WordCount }} +

+ +

+ + + + + + + {{- if .Site.Params.dateformNumTime }} + {{ dateFormat .Site.Params.dateformNumTime .Date.Local }} + {{- else }} + {{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }} + {{- end }} +

+ + {{- if .GitInfo }} +

+ + + + + + + {{ .GitInfo.AbbreviatedHash }} + {{- " @ " -}} + {{- if .Site.Params.dateformNum -}} + {{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }} + {{- else -}} + {{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }} + {{- end }} +

+ {{- end }} +
+ + {{- if .Site.Params.EnableSharingButtons }} +
+
+ {{ partial "sharing-buttons.html" . }} +
+ {{- end }} + + {{- if and (not $.Site.Params.DisableReadOtherPosts) (or .NextInSection .PrevInSection) }} + + {{- end }} + + + {{- if .Site.DisqusShortname }} + {{- if not (eq .Params.Comments "false") }} +
+ {{ template "_internal/disqus.html" . }} +
+ {{- end }} + {{- end }} + +
+{{ end }} \ No newline at end of file