From d11ce6612f08ea3e661c204d629f57a4653e38d8 Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Sun, 18 Aug 2024 08:59:27 -0500
Subject: [PATCH] projects: Begin Projects section

I want to publish some details about my projects, but I don't like the
blog format for this.
---
 .gitignore                             |  3 +-
 content/projects/_index.md             |  8 +++++
 sass/style.scss                        | 45 ++++++++++++++++++++++++++
 templates/base.html                    |  1 +
 templates/index.html                   |  6 ++++
 templates/project-page.html            |  8 +++++
 templates/projects.html                | 38 ++++++++++++++++++++++
 templates/section.html                 |  7 ++++
 templates/shortcodes/resize_image.html |  9 ++++++
 9 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 content/projects/_index.md
 create mode 100644 templates/project-page.html
 create mode 100644 templates/projects.html
 create mode 100644 templates/section.html
 create mode 100644 templates/shortcodes/resize_image.html

diff --git a/.gitignore b/.gitignore
index d298be1..56b7287 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-public/
\ No newline at end of file
+public/
+static/processed_images
diff --git a/content/projects/_index.md b/content/projects/_index.md
new file mode 100644
index 0000000..2c65f6c
--- /dev/null
+++ b/content/projects/_index.md
@@ -0,0 +1,8 @@
++++
+title = "Projects"
+sort_by = "none"
+template = "projects.html"
+page_template = "project-page.html"
++++
+
+Tinkering is fun, especially when there are tangible results!
diff --git a/sass/style.scss b/sass/style.scss
index b88cf0b..31a952b 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,5 +1,6 @@
 $primary-color: #505050;
 $primary-color-dark: #282828;
+$primary-color-darker: #212121;
 $primary-color-light: #7c7c7c;
 
 $secondary-color: #333f58;
@@ -9,6 +10,7 @@ $secondary-color-dark: #09192f;
 $background-color: #121212;
 $text-color: #e2e2e2;
 $panel-color: $primary-color-dark;
+$panel-color-dark: $primary-color-darker;
 $toolbar-color: $primary-color;
 
 @font-face {
@@ -341,6 +343,49 @@ article.post .post-date {
   margin-bottom: 1em;
 }
 
+.project-cards {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.project-card {
+  width: 100%;
+  background-color: $panel-color-dark;
+  margin: 0.75em;
+  padding: 0 0.75em;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+@media only screen and (min-width: 600px) {
+  .project-card {
+    width: 45%;
+  }
+}
+
+@media only screen and (min-width: 800px) {
+  .project-card {
+    width: 30%;
+  }
+}
+
+.project-card:hover {
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+}
+
+.project-card a {
+  text-decoration: none;
+}
+
+.project-card h2 {
+  text-align: center;
+}
+
+.project-card img {
+  max-width: 100%;
+}
+
 /* CV */
 
 .cv.panel {
diff --git a/templates/base.html b/templates/base.html
index 6f00a0a..b697542 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -44,6 +44,7 @@
       <nav class="main-nav">
         <ul>
           <li><a href="{{ config.base_url }}">Home</a></li
+          ><li><a href="{{ get_url(path='/projects') }}">Projects</a></li
           ><li><a href="{{ get_url(path='/blog') }}">Blog</a></li
           ><li><a href="{{ get_url(path='/cv') }}">CV</a><li
           >
diff --git a/templates/index.html b/templates/index.html
index b0f100b..77fed72 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,6 +24,12 @@ Curriculum Vitae
 </a>
 </div>
 <div class="link">
+<a href="{{ get_url(path='/projects') }}">
+{{ load_data(path='static/bug.svg') | safe }}
+Projects
+</a>
+</div>
+<div class="link">
 <a href="{{ get_url(path='/blog') }}">
 {{ load_data(path='static/post.svg') | safe }}
 Blog
diff --git a/templates/project-page.html b/templates/project-page.html
new file mode 100644
index 0000000..8c95081
--- /dev/null
+++ b/templates/project-page.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ page.title }}</h1>
+{{ page.content | safe }}
+</article>
+{% endblock %}
diff --git a/templates/projects.html b/templates/projects.html
new file mode 100644
index 0000000..cf405cd
--- /dev/null
+++ b/templates/projects.html
@@ -0,0 +1,38 @@
+{% extends "base.html" %}
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ section.title }}</h1>
+{{ section.content | safe }}
+<div class="project-cards">
+{% for path in section.subsections %}
+<div class="project-card">
+{% set sect = get_section(path=path) %}
+<a href="{{ sect.permalink }}">
+<h2>{{ sect.title }}</h2>
+{% if sect.extra.image is defined %}
+{% set image = resize_image(path=sect.extra.image, width=640, height=480, op="fit") %}
+<img src="{{ image.url }}" />
+{% else %}
+<img src="//picsum.photos/seed/{{ path | slugify }}/320/240" />
+{% endif %}
+<p>{{ sect.description }}</p>
+</a>
+</div>
+{% endfor %}
+{% for page in section.pages %}
+<div class="project-card">
+<a href="{{ page.permalink }}">
+<h2>{{ page.title }}</h2>
+{% if page.extra.image is defined %}
+{% set image = resize_image(path=page.extra.image, width=640, height=480, op="fit") %}
+<img src="{{ image.url }}" />
+{% else %}
+<img src="//picsum.photos/seed/{{ page.path | slugify }}/320/240" />
+{% endif %}
+<p>{{ page.description }}</p>
+</a>
+</div>
+{% endfor %}
+</div>
+</article>
+{% endblock %}
diff --git a/templates/section.html b/templates/section.html
new file mode 100644
index 0000000..3208633
--- /dev/null
+++ b/templates/section.html
@@ -0,0 +1,7 @@
+{% extends "base.html" %}
+{% block content %}
+<article class="post panel">
+<h1 class="post-title">{{ section.title }}</h1>
+{{ section.content | safe }}
+</article>
+{% endblock %}
diff --git a/templates/shortcodes/resize_image.html b/templates/shortcodes/resize_image.html
new file mode 100644
index 0000000..9066d93
--- /dev/null
+++ b/templates/shortcodes/resize_image.html
@@ -0,0 +1,9 @@
+{% set image = resize_image(path=path, width=width, height=height, op=op) %}
+{% if link is defined %}<a href="{{ link }}">{% endif %}
+<img src="{{ image.url }}"
+  {% if title is defined %}title="{{ title }}"{% endif %}
+  {% if alt is defined %}alt="{{ alt }}"{% endif %}
+  {% if class is defined %}class="{{ class }}"{% endif %}
+  {% if style is defined %}style="{{ style }}"{% endif %}
+  />
+{% if link is defined %}</a>{% endif %}