Convert website to use Jekyll

23 files changed, 317 insertions, 90 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f40fbd8
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+_site
+.sass-cache
+.jekyll-cache
+.jekyll-metadata
+vendor
diff --git a/.nojekyll b/.nojekyll
deleted file mode 100644
index e69de29..0000000
--- a/.nojekyll
+++ /dev/null
diff --git a/404.html b/404.html
new file mode 100644
index 0000000..8bbafab
--- /dev/null
+++ b/404.html
@@ -0,0 +1,23 @@
+---
+permalink: /404.html
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<h1>404</h1>
+
+<p><strong>Page not found :(</strong></p>
+<p>The requested page could not be found.</p>
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..ff2c342
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,33 @@
+source "https://rubygems.org"
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 4.3.2"
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+gem "minima", "~> 2.5"
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+# If you have any plugins, put them here!
+group :jekyll_plugins do
+  gem "jekyll-feed", "~> 0.12"
+end
+
+# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
+# and associated library.
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
+  gem "tzinfo-data"
+end
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..805b164
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,89 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.2.2)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.15.5)
+    forwardable-extended (2.6.0)
+    google-protobuf (3.23.3-x64-mingw-ucrt)
+    http_parser.rb (0.8.0)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-feed (0.17.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-seo-tag (2.8.0)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.8.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    minima (2.5.1)
+      jekyll (>= 3.5, < 5.0)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.0.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (4.1.2)
+    safe_yaml (1.0.5)
+    sass-embedded (1.63.6-x64-mingw-ucrt)
+      google-protobuf (~> 3.23)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2023.3)
+      tzinfo (>= 1.0.0)
+    unicode-display_width (2.4.2)
+    wdm (0.1.1)
+    webrick (1.8.1)
+
+PLATFORMS
+  x64-mingw-ucrt
+
+DEPENDENCIES
+  http_parser.rb (~> 0.6.0)
+  jekyll (~> 4.3.2)
+  jekyll-feed (~> 0.12)
+  minima (~> 2.5)
+  tzinfo (>= 1, < 3)
+  tzinfo-data
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   2.4.14
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..7fad49d
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,51 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+#
+# If you need help with YAML syntax, here are some quick references for you:
+# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
+# https://learnxinyminutes.com/docs/yaml/
+#
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+
+title: mounderfod
+email: mounderfod@gmail.com
+description: >- # this means to ignore newlines until "baseurl:"
+  Hello! :D My name is Noah, but I go by mounderfod. I am interested in music,
+  programming and video games.
+baseurl: "/" # the subpath of your site, e.g. /blog
+url: "https://mounderfod.online" # the base hostname & protocol for your site, e.g. http://example.com
+github_username: mounderfod
+
+# Build settings
+plugins:
+  - jekyll-feed
+# Exclude from processing.
+# The following items will not be processed, by default.
+# Any item listed under the `exclude:` key here will be automatically added to
+# the internal "default list".
+#
+# Excluded items can be processed by explicitly listing the directories or
+# their entries' file path in the `include:` list.
+#
+# exclude:
+#   - .sass-cache/
+#   - .jekyll-cache/
+#   - gemfiles/
+#   - Gemfile
+#   - Gemfile.lock
+#   - node_modules/
+#   - vendor/bundle/
+#   - vendor/cache/
+#   - vendor/gems/
+#   - vendor/ruby/
diff --git a/projects.html b/_layouts/default.html
index e0d9499..b1ca51b 100644
--- a/projects.html
+++ b/_layouts/default.html
@@ -6,9 +6,9 @@
     <title>mounderfod</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="/assets/index.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
-    <script src="timedate.js"></script>
+    <script src="/timedate.js"></script>
   </head>
   <body>
     <marquee
@@ -16,11 +16,11 @@
         The time is {} and the date is {}
       </p></marquee
     >
-    <div id="main" style="text-align: center">
-      <img class="logo" src="img/uc.png" /><br />
-      <a href="/"
-        ><h1><b>Back to homepage</b></h1></a
-      >
+    <div id="main">
+      <div class="logo-container">
+        <a href="/"><img class="logo" src="/assets/img/wordart.png" /></a><br />
+      </div>
+      <div class="box">{{content}}</div>
     </div>
   </body>
 </html>
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 0000000..0e075da
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<a href="/blog"><p>⟸ Back to blog</p></a>
+<h1>{{page.title}}</h1>
+<p><em>{{post.date | date: "%-d %B %Y"}}</em></p>
+{{content}}
diff --git a/_posts/2023-06-23-welcome-to-jekyll.markdown b/_posts/2023-06-23-welcome-to-jekyll.markdown
new file mode 100644
index 0000000..35fb5d7
--- /dev/null
+++ b/_posts/2023-06-23-welcome-to-jekyll.markdown
@@ -0,0 +1,29 @@
+---
+layout: post
+title:  "Welcome to Jekyll!"
+date:   2023-06-23 11:14:26 +0100
+categories: jekyll update
+---
+You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
+
+Jekyll requires blog post files to be named according to the following format:
+
+`YEAR-MONTH-DAY-title.MARKUP`
+
+Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.
+
+Jekyll also offers powerful support for code snippets:
+
+{% highlight ruby %}
+def print_hi(name)
+  puts "Hi, #{name}"
+end
+print_hi('Tom')
+#=> prints 'Hi, Tom' to STDOUT.
+{% endhighlight %}
+
+Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].
+
+[jekyll-docs]: https://jekyllrb.com/docs/home
+[jekyll-gh]:   https://github.com/jekyll/jekyll
+[jekyll-talk]: https://talk.jekyllrb.com/
diff --git a/about.html b/about.html
deleted file mode 100644
index a34cd05..0000000
--- a/about.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>mounderfod</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
-    <script src="timedate.js"></script>
-  </head>
-  <body>
-    <marquee
-      ><p id="timedate" style="font-size: x-large">
-        The time is {} and the date is {}
-      </p></marquee
-    >
-    <div id="main">
-      <a href="/"><img class="logo" src="img/wordart.png" /></a><br />
-      <div class="box">
-        <h1>ABOUT</h1>
-        <p>
-          Hello! :D My name is Noah, but I go by <b>mounderfod</b>. I am
-          interested in music, programming and video games.
-        </p>
-        <p><b>Languages I speak:</b> French, English</p>
-        <p>
-          <b>Languages I code in:</b> Python, JS, Java (and C# by extension),
-          Rust
-        </p>
-        <h3>SOCIALS</h3>
-        <a href="https://mastodon.sdf.org/@mounderfod">
-          <p>Mastodon</p>
-        </a>
-        <a href="https://metapixl.com/i/web/profile/577395471914797016">
-          <p>Pixelfed</p>
-        </a>
-        <a href="https://lemmy.sdf.org/u/mounderfod">
-          <p>Lemmy</p>
-        </a>
-        <p><b>Discord:</b> @mounderfod</p>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/about.markdown b/about.markdown
new file mode 100644
index 0000000..db51417
--- /dev/null
+++ b/about.markdown
@@ -0,0 +1,26 @@
+---
+layout: default
+title: About
+permalink: /about/
+---
+
+# ABOUT
+
+Hello! :D My name is Noah, but I go by **mounderfod**. I am interested in music,
+programming and video games.
+
+**Languages I speak:** French, English
+
+**Languages I code in:** Python, JS, Java (and C# by extension), Rust
+
+## SOCIALS
+
+I primarily use the Fediverse:
+
+- [Lemmy](https://lemmy.sdf.org/u/mounderfod)
+- [Mastodon](https://mastodon.sdf.org/@mounderfod)
+- [Pixelfed](https://metapixl.com/i/web/profile/577395471914797016)
+
+If you have any questions/messages:
+
+- **Discord**: @mounderfod
diff --git a/Windows Regular.ttf b/assets/Windows Regular.ttf
index 26abb3d..26abb3d 100644
--- a/Windows Regular.ttf
+++ b/assets/Windows Regular.ttf
Binary files differdiff --git a/img/background.png b/assets/img/background.png
index a6b2247..a6b2247 100644
--- a/img/background.png
+++ b/assets/img/background.png
Binary files differdiff --git a/img/planets/Planet-1.png b/assets/img/planets/Planet-1.png
index daf403f..daf403f 100644
--- a/img/planets/Planet-1.png
+++ b/assets/img/planets/Planet-1.png
Binary files differdiff --git a/img/planets/Planet-2.png b/assets/img/planets/Planet-2.png
index 711144b..711144b 100644
--- a/img/planets/Planet-2.png
+++ b/assets/img/planets/Planet-2.png
Binary files differdiff --git a/img/planets/Planet-3.png b/assets/img/planets/Planet-3.png
index fd9bd87..fd9bd87 100644
--- a/img/planets/Planet-3.png
+++ b/assets/img/planets/Planet-3.png
Binary files differdiff --git a/img/planets/Planet-4.png b/assets/img/planets/Planet-4.png
index 704f109..704f109 100644
--- a/img/planets/Planet-4.png
+++ b/assets/img/planets/Planet-4.png
Binary files differdiff --git a/img/planets/Planet-5.png b/assets/img/planets/Planet-5.png
index 097dc71..097dc71 100644
--- a/img/planets/Planet-5.png
+++ b/assets/img/planets/Planet-5.png
Binary files differdiff --git a/img/uc.png b/assets/img/uc.png
index d51765b..d51765b 100644
--- a/img/uc.png
+++ b/assets/img/uc.png
Binary files differdiff --git a/img/wordart.png b/assets/img/wordart.png
index a0c6b1d..a0c6b1d 100644
--- a/img/wordart.png
+++ b/assets/img/wordart.png
Binary files differdiff --git a/index.css b/assets/index.css
index f659a89..1fa9b34 100644
--- a/index.css
+++ b/assets/index.css
@@ -15,7 +15,8 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6,
+li {
   font-family: windows;
 }
 .field {
@@ -47,11 +48,15 @@ marquee {
   margin: auto;
 }
 
-.logo {
+.logo-container {
   display: block;
   margin-left: auto;
   margin-right: auto;
-  width: 40%;
+  width: 30%;
+}
+
+.logo {
+  width: 100%;
 }
 
 .box {
@@ -60,10 +65,13 @@ marquee {
   width: 60%;
   text-align: center;
   margin: auto;
+  padding: 10px;
 }
 
 .box > ul {
   color: black;
+  list-style-position: inside;
+  padding: 0;
 }
 
 .box > :is(p, h1, h2, h3, h4, h5, h6) {
@@ -73,3 +81,17 @@ marquee {
 .box > ul > li > :is(p, h1, h2, h3, h4, h5, h6) {
   color: black;
 }
+
+pre,
+code {
+  color: green;
+  background-color: black;
+}
+
+pre {
+  padding: 5px;
+}
+
+:not(pre) > code {
+  padding: 5px;
+}
diff --git a/blog.html b/blog.html
index e0d9499..8930e4c 100644
--- a/blog.html
+++ b/blog.html
@@ -1,26 +1,11 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>mounderfod</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
-    <script src="timedate.js"></script>
-  </head>
-  <body>
-    <marquee
-      ><p id="timedate" style="font-size: x-large">
-        The time is {} and the date is {}
-      </p></marquee
-    >
-    <div id="main" style="text-align: center">
-      <img class="logo" src="img/uc.png" /><br />
-      <a href="/"
-        ><h1><b>Back to homepage</b></h1></a
-      >
-    </div>
-  </body>
-</html>
+---
+layout: default
+title: Blog
+permalink: /blog/
+---
+
+{% for post in site.posts %}
+<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+<p><em>{{post.date | date: "%-d %B %Y"}}</em></p>
+<p>{{ post.excerpt }}</p>
+{% endfor %}
diff --git a/index.html b/index.html
index 7d3234b..18adff3 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <title>mounderfod</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="assets/index.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
     <script src="timedate.js"></script>
   </head>
@@ -17,23 +17,25 @@
       </h2></marquee
     >
     <div id="main">
-      <img class="logo" src="img/wordart.png" /><br />
+      <div class="logo-container">
+      <img class="logo" src="assets/img/wordart.png" /><br />
+      </div>
       <div id="container">
         <div class="field">
-          <img src="img/planets/Planet-1.png" />
-          <a href="/about.html">
+          <img src="assets/img/planets/Planet-1.png" />
+          <a href="/about">
             <h2><b>ABOUT</b></h2>
           </a>
         </div>
         <div class="field">
-          <img src="img/planets/Planet-2.png" />
-          <a href="/blog.html">
+          <img src="assets/img/planets/Planet-2.png" />
+          <a href="/blog">
             <h2><b>BLOG</b></h2>
           </a>
         </div>
         <div class="field">
-          <img src="img/planets/Planet-3.png" />
-          <a href="/projects.html">
+          <img src="assets/img/planets/Planet-3.png" />
+          <a href="/projects">
             <h2><b>PROJECTS</b></h2>
           </a>
         </div>