mirror of
https://github.com/maikka39/Personal-Website.git
synced 2026-10-02 14:46:25 +00:00
Add portfolio page
This commit is contained in:
@@ -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!
|
||||
Binary file not shown.
|
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
@import "code";
|
||||
|
||||
@@ -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 }}
|
||||
Reference in New Issue
Block a user