Improve overall styling and add items to portfolio

content/portfolio/learn-to-program.md

@@ -0,0 +1,17 @@
++++
+author = "Maik de Kruif"
+title = "Learn-to-Program"
+start_date = 2019-09-03
+end_date = 2019-10-21
+company_name = "Personal"
+company_url = "https://maik.dev"
+cover = "img/portfolio/learn-to-program/screenshot.png"
+description = "This website was created for a school assignment. It was created with HTML and CSS only and no frameworks were used."
+skills = [
+    "Pure HTML and CSS",
+]
++++
+
+This website was created for a school assignment. It was created with HTML and CSS only and no frameworks were used.
+
+[Github](https://github.com/maikka39/Learn-to-Program)

content/portfolio/superbot.md

@@ -0,0 +1,22 @@
++++
+author = "Maik de Kruif"
+title = "SuperBot"
+start_date = 2018-08-17
+end_date = 2021-04-24
+company_name = "Personal"
+company_url = "https://maik.dev"
+description = "A Discord bot I wrote for my own server so that I could manage the server better and listen to music in voice channels."
+skills = [
+    "Python",
+    "Asynchronous programming",
+    "Input validation",
+]
++++
+
+An amazing Discord bot with lots of functionalities!
+
+A Discord bot I wrote for my own server so that I could manage the server better and listen to music in voice channels.
+
+SuperBot is the solution to your crowded and chaotic Discord server!
+
+[Github](https://github.com/maikka39/SuperBot)

content/portfolio/toy-neural-network-py.md

@@ -0,0 +1,18 @@
++++
+author = "Maik de Kruif"
+title = "Toy-Neural-Network-Py"
+start_date = 2019-03-02
+end_date = 2019-04-16
+company_name = "Personal"
+company_url = "https://maik.dev"
+description = "Neural Network Python library for experimenting with Machine Learning"
+skills = [
+    "Machine Learning",
+    "Neural Networks",
+    "Matrix calculations",
+]
++++
+
+Neural Network Python library for experimenting with Machine Learning
+
+[Github](https://github.com/maikka39/Toy-Neural-Network-Py)

content/portfolio/watch-together.md

@@ -2,14 +2,23 @@
 author = "Maik de Kruif"
 title = "WatchTogether"
 start_date = 2018-08-17
-end_date = "Present"
+end_date = 9999-01-01
 company_name = "Personal"
 company_url = "https://maik.dev"
 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 = [
+skills = [
-    "Sync",
+    "Websockets",
+    "Socket-IO",
+    "NodeJS",
+    "React",
+    "Real time synchronization",
+    "REST API",
 ]
 +++
 
 WatchTogether is an online service that lets you watch a video together with your friends without being in the same room!
+
+[Github](https://github.com/maikka39/WatchTogether)
+
+[Github (backend)](https://github.com/maikka39/WatchTogether-Server)

content/portfolio/youtube-music-desktop-player.md

@@ -0,0 +1,22 @@
++++
+author = "Maik de Kruif"
+title = "Youtube-Music-Desktop-Player"
+start_date = 2019-10-17
+end_date = 2019-12-07
+company_name = "Personal"
+company_url = "https://maik.dev"
+cover = "img/portfolio/youtube-music-desktop-player/screenshot.png"
+description = "YouTube Music Desktop Player converts YouTube Music to a standalone desktop app. Because of this, you will never have to go through all your tabs to control your music."
+skills = [
+    "Desktop Application Development",
+    "Electron",
+    "Object Oriented JavaScipt",
+    "Script injection",
+]
++++
+
+YouTube Music Desktop Player converts YouTube Music to a standalone desktop app. Because of this, you will never have to go through all your tabs to control your music.
+
+This software has no affiliation this Google, YouTube Music is a trademark of Google LCC.
+
+[Github](https://github.com/maikka39/Youtube-Music-Desktop-Player)

themes/maik-blog/assets/scss/_portfolio.scss

@@ -1,10 +1,14 @@
 .portfolio {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
 
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
+
   @media #{$media-size-tablet} {
     max-width: 600px;
   }
@@ -46,8 +50,12 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
+    width: 1060px;
-    max-width: 860px;
+    max-width: 1060px;
+
+    @media #{$media-size-medium} {
+      max-width: 860px;
+    }
 
     @media #{$media-size-tablet} {
       margin: 20px 0;

themes/maik-blog/assets/scss/_portfolios.scss

@@ -1,11 +1,15 @@
 .portfolios {
   width: 100%;
-  max-width: calc(800px + 50px + 80px);
+  max-width: calc(1000px + 50px + 80px);
   text-align: left;
   padding: 20px calc(20px + 50px + 15px);
   margin: 20px auto;
   counter-reset: portfolio;
 
+  @media #{$media-size-medium} {
+    max-width: calc(800px + 50px + 80px);
+  }
+
   @media #{$media-size-tablet} {
     max-width: 660px;
   }
@@ -40,10 +44,15 @@
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
-    margin: 80px 0;
+    margin: 80px auto;
     position: relative;
     counter-increment: portfolio;
 
+    > * {
+      flex: 1;
+      padding: 5px;
+    }
+
     @media #{$media-size-tablet} {
       flex-direction: column-reverse;
     }
@@ -96,6 +105,13 @@
       @include dimmed;
     }
 
+    &-skills {
+      &-title {
+        font-size: 0.9rem;
+        margin: 15px 0 0 0;
+      }
+    }
+
     &::before {
       display: block;
       content: counter(portfolio);

themes/maik-blog/assets/scss/_post.scss

@@ -1,6 +1,6 @@
 .post {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
@@ -8,10 +8,13 @@
   @media #{$media-size-tablet} {
     max-width: 600px;
   }
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
 
   &-date {
     &:after {
-      content: '—';
+      content: "—";
     }
   }
 
@@ -46,8 +49,12 @@
   &-cover {
     border-radius: 8px;
     margin: 40px -50px;
-    width: 860px;
+    width: 1060px;
-    max-width: 860px;
+    max-width: 1060px;
+
+    @media #{$media-size-medium} {
+      max-width: 860px;
+    }
 
     @media #{$media-size-tablet} {
       margin: 20px 0;
@@ -84,7 +91,7 @@
 
     .feather {
       display: inline-block;
-      vertical-align: -.125em;
+      vertical-align: -0.125em;
       width: 1em;
       height: 1em;
     }
@@ -163,7 +170,7 @@
     background: $dark-background-secondary;
   }
 
-  +.button {
+  + .button {
     margin-left: 10px;
   }
 
@@ -189,4 +196,4 @@
   &.previous .button__icon {
     margin-right: 8px;
   }
-}
+}

themes/maik-blog/assets/scss/_posts.scss

@@ -1,10 +1,14 @@
 .posts {
   width: 100%;
-  max-width: 800px;
+  max-width: 1000px;
   text-align: left;
   padding: 20px;
   margin: 20px auto;
 
+  @media #{$media-size-medium} {
+    max-width: 800px;
+  }
+
   @media #{$media-size-tablet} {
     max-width: 660px;
   }
@@ -69,4 +73,4 @@
       @include dimmed;
     }
   }
-}
+}

themes/maik-blog/assets/scss/_variables.scss

@@ -16,9 +16,11 @@ $dark-border-color: #4a4b50;
 
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
+$media-size-medium: "(max-width: 1200px)";
 
 /* variables for js, must be the same as these in @custom-media queries */
 :root {
   --phoneWidth: (max-width: 684px);
   --tabletWidth: (max-width: 900px);
-}
+  --mediumWidth: (max-width: 1200px);
+}

themes/maik-blog/layouts/portfolio/list.html

@@ -1,5 +1,4 @@
 {{ define "main" }}
-{{ $paginator := .Paginate .Data.Pages }}
 
 <main class="portfolios">
     <h1>Portfolio</h1>
@@ -8,15 +7,11 @@
     <div class="content">{{ .Content }}</div>
     {{- end }}
 
-    {{- if .Paginator.HasPrev }}
-    {{ partial "pagination.html" . }}
-    {{- end }}
-
     <div class="portfolios-list">
-        {{ range $paginator.Pages }}
+        {{ range sort .Data.Pages "Params.end_date" "desc" }}
         <div class="portfolio">
             <div class="portfolio-details">
-                <h1 class="portfolio-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
+                <h2 class="portfolio-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
                 <span class="portfolio-company">
                     <a href="{{ .Params.company_url }}" target="_blank">{{ .Params.company_name | markdownify }}</a>
                 </span>
@@ -31,8 +26,12 @@
                     </span>
                     <span class="portfolio-end-date">
                         {{- if eq (printf "%T" .Params.end_date) "time.Time"}}
+                        {{- if lt .Params.end_date now }}
                         {{ .Params.end_date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
                         {{- else }}
+                        Present
+                        {{- end }}
+                        {{- else }}
                         {{ .Params.end_date }}
                         {{- end }}
                     </span>
@@ -60,6 +59,14 @@
                     {{- end }}
                     {{- end }}
                 </div>
+                {{- with .Params.skills }}
+                <h3 class="portfolio-skills-title">Skills used:</h3>
+                <ul class="portfolio-skills">
+                    {{- range . }}
+                    <li class="portfolio-skill">{{ . }}</li>
+                    {{- end }}
+                </ul>
+                {{- end}}
                 {{- if not .Params.hideReadMore }}
                 <div><a class="read-more button"
                         href="{{.RelPermalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
@@ -87,6 +94,5 @@
         {{- end }}
     </div>
 
-    {{ partial "pagination.html" . }}
 </main>
 {{ end }}