parent
c4b8fb83d1
commit
f162356627
GPG Key ID:
44A55AD1F0673FA6
10 changed files with 636 additions and 21 deletions
@ -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. |
||||
@ -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! |
||||
|
After Width: | Height: | Size: 400 KiB |
@ -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; |
||||
} |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,92 @@ |
||||
{{ define "main" }} |
||||
{{ $paginator := .Paginate .Data.Pages }} |
||||
|
||||
<main class="portfolios"> |
||||
<h1>Portfolio</h1> |
||||
|
||||
{{- if .Content }} |
||||
<div class="content">{{ .Content }}</div> |
||||
{{- end }} |
||||
|
||||
{{- if .Paginator.HasPrev }} |
||||
{{ partial "pagination.html" . }} |
||||
{{- end }} |
||||
|
||||
<div class="portfolios-list"> |
||||
{{ range $paginator.Pages }} |
||||
<div class="portfolio"> |
||||
<div class="portfolio-details"> |
||||
<h1 class="portfolio-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1> |
||||
<span class="portfolio-company"> |
||||
<a href="{{ .Params.company_url }}">{{ .Params.company_name | markdownify }}</a> |
||||
</span> |
||||
<div class="portfolio-meta"> |
||||
{{- if .Params.start_date }} |
||||
<span class="portfolio-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 }} |
||||
</span> |
||||
<span class="portfolio-end-date"> |
||||
{{- 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 }} |
||||
</span> |
||||
{{- end }} |
||||
{{- if $.Site.Params.ShowReadingTimeInList }} |
||||
<span class="portfolio-read-time">— {{ .ReadingTime }} |
||||
{{ $.Site.Params.MinuteReadingTime | default "min read" }}</span> |
||||
{{- end }} |
||||
</div> |
||||
|
||||
{{- if .Params.tags }} |
||||
<span class="portfolio-tags"> |
||||
{{- range .Params.tags }} |
||||
#<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a> |
||||
{{- end }} |
||||
</span> |
||||
{{- end }} |
||||
|
||||
<div class="portfolio-content"> |
||||
{{- with .Description }} |
||||
{{ . | markdownify }} |
||||
{{- else }} |
||||
{{- if .Truncated }} |
||||
{{ .Summary | markdownify }} |
||||
{{- end }} |
||||
{{- end }} |
||||
</div> |
||||
{{- if not .Params.hideReadMore }} |
||||
<div><a class="read-more button" |
||||
href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }} |
||||
→</a></div> |
||||
{{- end }} |
||||
</div> |
||||
{{- if .Params.Cover }} |
||||
<figure class="portfolio-cover"> |
||||
{{- $img := imageConfig (printf "static/%s" .Params.Cover) }} |
||||
|
||||
{{- if .Params.UseRelativeCover }} |
||||
<img src="{{ (printf "%s%s" .Permalink .Params.Cover ) }}" alt="{{ .Title | plainify | default " " }}" |
||||
width="{{ $img.Width }}" height="{{ $img.Height }}" /> |
||||
{{- else }} |
||||
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title | plainify | default " " }}" |
||||
width="{{ $img.Width }}" height="{{ $img.Height }}" /> |
||||
{{- end }} |
||||
|
||||
{{- if .Params.CoverCaption }} |
||||
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption> |
||||
{{- end }} |
||||
</figure> |
||||
{{- end }} |
||||
</div> |
||||
{{- end }} |
||||
</div> |
||||
|
||||
{{ partial "pagination.html" . }} |
||||
</main> |
||||
{{ end }} |
||||
@ -0,0 +1,163 @@ |
||||
{{ define "main" }} |
||||
<main class="portfolio"> |
||||
|
||||
<div class="portfolio-info"> |
||||
<p> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
||||
class="feather feather-clock"> |
||||
<circle cx="12" cy="12" r="10"></circle> |
||||
<polyline points="12 6 12 12 16 14"></polyline> |
||||
</svg> |
||||
{{ i18n "readingTime" .Page.ReadingTime }} |
||||
|
||||
{{- if .IsTranslated }} | {{ i18n "postAvailable" }} |
||||
{{- range .Translations }} |
||||
<a href="{{ .Permalink }}"><span |
||||
class="flag flag-icon flag-icon-{{ index $.Site.Data.langFlags (.Lang) }} flag-icon-squared"></span></a> |
||||
{{- end}} |
||||
{{- end }} |
||||
</p> |
||||
</div> |
||||
|
||||
<article> |
||||
<h1 class="portfolio-title"> |
||||
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> |
||||
</h1> |
||||
|
||||
{{- if .Params.toc }} |
||||
<hr /> |
||||
<aside id="toc"> |
||||
<div class="toc-title">{{ i18n "tableOfContents" }}</div> |
||||
{{ .TableOfContents }} |
||||
</aside> |
||||
<hr /> |
||||
{{- end }} |
||||
|
||||
{{- if .Params.Cover }} |
||||
{{ $img := imageConfig (printf "static/%s" .Params.Cover) }} |
||||
<img src="/{{ .Params.Cover }}" class="portfolio-cover" alt="{{ .Title | plainify | default " " }}" |
||||
width="{{ $img.Width }}" height="{{ $img.Height }}" /> |
||||
{{- end }} |
||||
|
||||
<div class="portfolio-content"> |
||||
{{ .Content }} |
||||
</div> |
||||
</article> |
||||
|
||||
<hr /> |
||||
|
||||
<div class="portfolio-info"> |
||||
{{- with .Params.tags }} |
||||
<p> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
||||
class="feather feather-tag meta-icon"> |
||||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path> |
||||
<line x1="7" y1="7" x2="7" y2="7"></line> |
||||
</svg> |
||||
|
||||
{{- range . -}} |
||||
<span class="tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}/">{{.}}</a></span> |
||||
{{- end }} |
||||
</p> |
||||
{{- end }} |
||||
|
||||
<p> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
||||
class="feather feather-file-text"> |
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path> |
||||
<polyline points="14 2 14 8 20 8"></polyline> |
||||
<line x1="16" y1="13" x2="8" y2="13"></line> |
||||
<line x1="16" y1="17" x2="8" y2="17"></line> |
||||
<polyline points="10 9 9 9 8 9"></polyline> |
||||
</svg> |
||||
{{ i18n "wordCount" .Page.WordCount }} |
||||
</p> |
||||
|
||||
<p> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
||||
class="feather feather-calendar"> |
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> |
||||
<line x1="16" y1="2" x2="16" y2="6"></line> |
||||
<line x1="8" y1="2" x2="8" y2="6"></line> |
||||
<line x1="3" y1="10" x2="21" y2="10"></line> |
||||
</svg> |
||||
{{- if .Site.Params.dateformNumTime }} |
||||
{{ dateFormat .Site.Params.dateformNumTime .Date.Local }} |
||||
{{- else }} |
||||
{{ dateFormat "2006-01-02 15:04 -0700" .Date.Local }} |
||||
{{- end }} |
||||
</p> |
||||
|
||||
{{- if .GitInfo }} |
||||
<p> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" |
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" |
||||
class="feather feather-git-commit"> |
||||
<circle cx="12" cy="12" r="4"></circle> |
||||
<line x1="1.05" y1="12" x2="7" y2="12"></line> |
||||
<line x1="17.01" y1="12" x2="22.96" y2="12"></line> |
||||
</svg> |
||||
|
||||
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" |
||||
rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a> |
||||
{{- " @ " -}} |
||||
{{- if .Site.Params.dateformNum -}} |
||||
{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }} |
||||
{{- else -}} |
||||
{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }} |
||||
{{- end }} |
||||
</p> |
||||
{{- end }} |
||||
</div> |
||||
|
||||
{{- if .Site.Params.EnableSharingButtons }} |
||||
<hr /> |
||||
<div class="sharing-buttons"> |
||||
{{ partial "sharing-buttons.html" . }} |
||||
</div> |
||||
{{- end }} |
||||
|
||||
{{- if and (not $.Site.Params.DisableReadOtherPosts) (or .NextInSection .PrevInSection) }} |
||||
<div class="pagination"> |
||||
<div class="pagination__title"> |
||||
<span class="pagination__title-h">{{ .Site.Params.ReadOtherPosts }}</span> |
||||
<hr /> |
||||
</div> |
||||
|
||||
<div class="pagination__buttons"> |
||||
{{- if .NextInSection }} |
||||
<span class="button previous"> |
||||
<a href="{{ .NextInSection.Permalink }}"> |
||||
<span class="button__icon">←</span> |
||||
<span class="button__text">{{ .NextInSection.Title }}</span> |
||||
</a> |
||||
</span> |
||||
{{- end }} |
||||
|
||||
{{- if .PrevInSection }} |
||||
<span class="button next"> |
||||
<a href="{{ .PrevInSection.Permalink }}"> |
||||
<span class="button__text">{{ .PrevInSection.Title }}</span> |
||||
<span class="button__icon">→</span> |
||||
</a> |
||||
</span> |
||||
{{- end }} |
||||
</div> |
||||
</div> |
||||
{{- end }} |
||||
|
||||
|
||||
{{- if .Site.DisqusShortname }} |
||||
{{- if not (eq .Params.Comments "false") }} |
||||
<div id="comments"> |
||||
{{ template "_internal/disqus.html" . }} |
||||
</div> |
||||
{{- end }} |
||||
{{- end }} |
||||
|
||||
</main> |
||||
{{ end }} |
||||
Loading…
Reference in new issue