6 files changed, 78 insertions, 51 deletions
diff --git a/zola-static/content/about-me.md b/zola-static/content/about-me.md
index 5f0eecc..d654d56 100644
--- a/zola-static/content/about-me.md
+++ b/zola-static/content/about-me.md
@@ -5,7 +5,7 @@ template = "main-page.html"
 
 My name is Jack Jamison. I'm an American software engineer studying at the [Rensselaer Polytechnic Institute](https://www.rpi.edu) in New York. I've been programming since I was a little kid.
 
-I enjoy GPU programming, cross-platform desktop application design, build systems, game development, and system administration. I'm also interested in operating systems and computer networking.
+I enjoy GPU programming, operating system, cross-platform desktop application design, game development, and system administration.
 
 I use Emacs as my text editor. I've spent a lot of time configuring it. If you want, you can check out my [dotfiles](https://github.com/JackJ30/dotfiles).
 
diff --git a/zola-static/content/about-this-site.md b/zola-static/content/about-this-site.md
index fabd3fb..0ae6045 100644
--- a/zola-static/content/about-this-site.md
+++ b/zola-static/content/about-this-site.md
@@ -4,9 +4,8 @@ template = "main-page.html"
 +++
 
 # About this website
-- The pages are generated from markdown files with [Zola](https://getzola.org).
-- I use [Nginx](https://nginx.org/) as my web server.
-- It is hosted on [Vultr](https://www.vultr.com/).
-- [Epik](https://epik.com) is my domain registrar.
+- The pages are generated from markdown files by [Zola](https://getzola.org).
+- Content is served by [Nginx](https://nginx.org/).
+- The domain is registered with [Njalla](https://njal.la/).
 
 There are no ads or trackers on this site. The source code is available on [github](https://github.com/JackJ30/jackjamison.net).
diff --git a/zola-static/sass/base.scss b/zola-static/sass/base.scss
index bb23005..e93fab4 100644
--- a/zola-static/sass/base.scss
+++ b/zola-static/sass/base.scss
@@ -1,4 +1,11 @@
-// Main styles and centering
+// colors
+$background: #252422;
+$background_light: #2e2d2c;
+$foreground: #DCE1DE;
+$accent1: #8B95C9;
+$code-background: #171615;
+
+// main styles and centering
 html {
 	color-scheme: dark;
 }
@@ -10,12 +17,12 @@ body {
 	font-size: 1.2rem;
 	padding: 0 2rem;
 	
-	background-color: #252422;
-	color: #DCE1DE;
+	background-color: $background;
+	color: $foreground;
 	font-family: "Courier New", Courier, monospace;
 }
 
-// more compact margins
+// general customizations
 h1, h2, h3, h4 {
 	margin-bottom: 0.3rem;
 }
@@ -24,7 +31,7 @@ ul {
 }
 
 a {
-	color: #8B95C9;
+	color: $accent1;
 }
 
 h1 a {
@@ -35,21 +42,53 @@ hr {
 	height: 0.25rem;
 	border-radius: 0.2rem;
 	border: none;
-	background-color: #2e2d2c;
+	background-color: $background-light;
 }
 
-.header-separator {
-	margin-top: -0.2rem;
+img {
+	width: 40rem;
+	display: block;
+	margin: 0 auto;
+}
+
+.youtube {
+	width: 40rem;
+	aspect-ratio: 16/9;
+	display: block;
+	margin: 0 auto;
 }
 
-// Blog titles
+// header
 .header-title {
 	margin: 0;
 	font-size: 2.5rem;
 }
+
+.header-separator {
+	margin-top: -0.2rem;
+}
+
+// sections
+.index-section {
+	background-color: $background-light;
+	padding: 0.7rem;
+	margin-top: 0.6rem;
+	border-radius: 0.4rem;
+}
+
+.index-section h2 {
+	margin-top: -0.3rem;
+}
+
+.index-section ul {
+	margin-bottom: 0.3rem;
+}
+
+// blog header
 .subtitle {
 	margin: 0.5rem auto;
 }
+
 .blog-header {
 	display: flex;
 	justify-content: space-between;
@@ -65,7 +104,13 @@ hr {
 	text-align: right;
 }
 
-// Blog element styling
+// project list styling
+.project-section h2 {
+	text-align: center;
+	text-decoration: none;
+}
+
+// blog element styling
 pre {
 	padding : 0.5rem;
 	border-radius: 0.3rem;
@@ -75,7 +120,7 @@ pre {
 }
 
 blockquote {
-	background: #171615;
+	background: $code-background;
 	border-left: 0.7rem solid #F3E9DC;
 	margin: 1.5em 10px;
 	padding: 0.5em 10px;
@@ -87,39 +132,19 @@ blockquote p {
 }
 
 p code {
-	background: #171615;
+	background: $code-background;
 	padding-left: 0.25rem;
 	padding-right: 0.25rem;
 	font-family: monospace;
 }
 
-img {
-	width: 40rem;
-	display: block;
-	margin: 0 auto;
-}
-
+// index
 .footer-text {
 	text-align: center;
-	color: #2e2d2c;
+	color: $background-light;
 }
 
 .footer-text a {
 	text-decoration: none;
 	padding: 0rem 0.5rem;
 }
-
-.index-section {
-	background-color: #2e2d2c;
-	padding: 0.7rem;
-	margin-top: 0.6rem;
-	border-radius: 0.4rem;
-}
-
-.index-section h2 {
-	margin-top: -0.3rem;
-}
-
-.index-section ul {
-	margin-bottom: 0.3rem;
-}
diff --git a/zola-static/templates/index.html b/zola-static/templates/index.html
index fd4d508..3c83240 100644
--- a/zola-static/templates/index.html
+++ b/zola-static/templates/index.html
@@ -9,21 +9,13 @@
   </ul>
 </div>
 <div class="index-section">
-  <h2>Articles</h2>
-  <ul>
-	<li><a href="{{ get_url(path='@/blog/sdl-native-wayland.md') }}">Forcing SDL to use Wayland on Wayland</a></li>
-	<li><a href="{{ get_url(path='@/blog/my-emacs-tips-and-tricks.md') }}">My Emacs Tips and Tricks</a></li>
-	<li><a href="{{ get_url(path='@/blog/emacs-garbage-collection.md') }}">Solving Emacs Garbage Collection Stutters</a></li>
-  </ul>
-</div>
-<div class="index-section">
   <h2>Projects</h2>
   <ul>
 	<li><a href="{{ get_url(path='@/projects/connection-machine.md') }}">Connection Machine Logic Simulator</a></li>
 	<li><a href="{{ get_url(path='@/projects/swenu.md') }}">Swenu Wayland Menu</a></li>
 	<li><a href="{{ get_url(path='@/projects/string-sniper.md') }}">Ghidra String Sniper</a></li>
-	<li><a href="{{ get_url(path='@/projects/_index.md') }}">View More</a></li>
   </ul>
+  <b><a href="{{ get_url(path='@/projects/_index.md') }}">View More</a></b>
 </div>
 <div class="index-section">
   <h2>Links</h2>
@@ -32,5 +24,13 @@
 	<li><a href="https://portfolio.jackjamison.net">Old portfolio (haven't migrated here yet)</a></li>
   </ul>
 </div>
+<div class="index-section">
+  <h2>Articles</h2>
+  <ul>
+	<li><a href="{{ get_url(path='@/blog/sdl-native-wayland.md') }}">Forcing SDL to use Wayland on Wayland</a></li>
+	<li><a href="{{ get_url(path='@/blog/my-emacs-tips-and-tricks.md') }}">My Emacs Tips and Tricks</a></li>
+	<li><a href="{{ get_url(path='@/blog/emacs-garbage-collection.md') }}">Solving Emacs Garbage Collection Stutters</a></li>
+  </ul>
+</div>
 <p class="footer-text"><b><a href="{{ get_url(path='@/blog/_index.md') }}">All articles sorted by date</a>&#8226<a href="{{ get_url(path='@/the-archive.md') }}">Archive</a></b></p>
 {% endblock content %}
diff --git a/zola-static/templates/project-list.html b/zola-static/templates/project-list.html
index eb66dad..50a9677 100644
--- a/zola-static/templates/project-list.html
+++ b/zola-static/templates/project-list.html
@@ -5,11 +5,11 @@
 <h1 class="title">
   {{ section.title }}
 </h1>
-<ul>
   <!-- If you are using pagination, section.pages will be empty.
        You need to use the paginator object -->  
   {% for page in section.pages %}
-  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+  <div class="index-section project-section">
+  <a href="{{ page.permalink | safe }}"><h2>{{ page.title }}</h2><img src="/images/projects/{{ page.extra.cover }}" alt="{{ page.title }}"></a>
+  </div>
   {% endfor %}
-</ul>
 {% endblock content %}
diff --git a/zola-static/templates/project-page.html b/zola-static/templates/project-page.html
index ac332ef..f152c2b 100644
--- a/zola-static/templates/project-page.html
+++ b/zola-static/templates/project-page.html
@@ -19,4 +19,7 @@
 {% block content %}
 <img src="/images/projects/{{ page.extra.cover }}" alt="{{ page.title }}">
 {{ page.content | safe }}
+{% if page.extra.youtube_id %}
+<iframe class="youtube" src="https://www.youtube.com/embed/{{ page.extra.youtube_id }}" title="YouTube video player" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+{% endif %}
 {% endblock content %}