maik
/
Personal-Website
mirror of https://github.com/maikka39/Personal-Website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add portfolio page

Browse Source
alternate-navbar
Maik de Kruif 3 years ago
parent c4b8fb83d1
commit f162356627
Signed by: maik
GPG Key ID: 44A55AD1F0673FA6
10 changed files with 636 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      content/portfolio.md
  2. 15
      content/portfolio/watch_together.md
  3. BIN
      static/img/portfolio/watch_together/screenshot.png
  4. 192
      themes/maik-blog/assets/scss/_portfolio.scss
  5. 169
      themes/maik-blog/assets/scss/_portfolios.scss
  6. 0
      themes/maik-blog/assets/scss/_post.scss
  7. 0
      themes/maik-blog/assets/scss/_posts.scss
  8. 6
      themes/maik-blog/assets/scss/main.scss
  9. 92
      themes/maik-blog/layouts/portfolio/list.html
  10. 163
      themes/maik-blog/layouts/portfolio/single.html

18
content/portfolio.md
Unescape View File

@ -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.

15
content/portfolio/watch_together.md
Unescape View File

@ -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!

BIN
static/img/portfolio/watch_together/screenshot.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

192
themes/maik-blog/assets/scss/_portfolio.scss
Unescape View File

@ -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;
}
}

169
themes/maik-blog/assets/scss/_portfolios.scss
Unescape View File

@ -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
themes/maik-blog/assets/scss/_single.scss → themes/maik-blog/assets/scss/_post.scss
Unescape View File

0
themes/maik-blog/assets/scss/_list.scss → themes/maik-blog/assets/scss/_posts.scss
Unescape View File

6
themes/maik-blog/assets/scss/main.scss
Unescape View File

@ -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";

92
themes/maik-blog/layouts/portfolio/list.html
Unescape View File

@ -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>&nbsp;
{{- 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 }}

163
themes/maik-blog/layouts/portfolio/single.html
Unescape View File

@ -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 }}
Write Preview
Loading…
Cancel
Save