Added styles from production site

.gitignore

@@ -0,0 +1,6 @@
+# Don't copy NPM modules around!
+node_modules/
+
+# Don't commit compiled CSS and CoffeeScript files
+public/stylesheets/*.css
+public/scripts/*.js

bin/docker-start.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+docker run --rm -w /usr/src/app -v "$PWD":/usr/src/app -p 3000:3000 -d --name bitgoblin node:lts node index.js

bin/docker-watch.sh

@@ -1,8 +1,3 @@
 #!/bin/sh
 
-docker run -d --rm \
-  --volume="$PWD/src:/srv/jekyll" \
-  --publish 4000:4000 \
-  --name="jekyll" \
-  jekyll/jekyll:4 \
-  jekyll serve
+docker run --rm -w /usr/src/app -v "$PWD":/usr/src/app -p 3000:3000 -d --name bitgoblin node:lts npm run dev

gulpfile.js

@@ -0,0 +1,30 @@
+const gulp = require('gulp');
+const sass = require('gulp-sass')(require('node-sass'));
+const coffee = require('gulp-coffee');
+const nodemon = require('gulp-nodemon');
+
+gulp.task('styles', function() {
+  return gulp.src('public/stylesheets/*.sass')
+    .pipe(sass({indentedSyntax: true}).on('error', sass.logError))
+    .pipe(gulp.dest('public/stylesheets/'));
+});
+
+gulp.task('coffee', function() {
+  return gulp.src('public/scripts/*.coffee')
+    .pipe(coffee({bare: true}))
+    .pipe(gulp.dest('public/scripts/'));
+});
+
+exports.watch = function() {
+  // rerun asset compilation as needed
+  gulp.watch(['public/stylesheets/*.sass'], { ignoreInitial: false }, gulp.series('styles'));
+  gulp.watch(['public/scripts/*.coffee'], { ignoreInitial: false }, gulp.series('coffee'));
+
+  // start the node server through nodemon
+  nodemon({
+    script: 'index.js',
+    config: 'nodemon.json'
+  });
+};
+
+exports.default = exports.watch;

index.js

@@ -0,0 +1,26 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+const port = 3000;
+
+// configure the Pug templating engine
+app.set('views', './views');
+app.set('view engine', 'pug');
+
+// serve static files
+app.use('/assets', express.static(path.join(__dirname, 'public')));
+
+// Index GET route
+app.get('/', (req, res) => {
+	res.render('index');
+});
+
+// Test GET route
+app.get('/test', (req, res) => {
+	res.send('This is a test.');
+});
+
+// start Express app
+app.listen(port, () => {
+	console.log(`The Bit Goblin website is listening on port ${port}`);
+});

nodemon.json

@@ -0,0 +1,5 @@
+{
+  "ext": "js",
+  "verbose": true,
+  "ignore": ["*.test.js", "public"]
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bitgoblin-website",
+  "version": "0.1.0",
+  "description": "The Bit Goblin official website",
+  "main": "index.js",
+  "scripts": {
+    "dev": "gulp",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "gitea@git.metaunix.net:bitgoblin/website.git"
+  },
+  "author": "Gregory Ballantine <gballantine@bitgoblin.tech>",
+  "license": "BSD-2-Clause",
+  "dependencies": {
+    "express": "^4.17.3",
+    "pug": "^3.0.2"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-coffee": "^3.0.3",
+    "gulp-nodemon": "^2.5.0",
+    "gulp-sass": "^5.1.0",
+    "node-sass": "^7.0.1",
+    "nodemon": "^2.0.15"
+  }
+}

public/scripts/vorkath.coffee

@@ -0,0 +1,17 @@
+$(window).scroll ->
+  wScroll = $(this).scrollTop()
+
+  console.log(wScroll + ' | ' + window.innerHeight)
+
+  # Header parallax
+  $('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')
+  $('#header-logo h1').css('transform', 'translateY(-' + (wScroll / 2) + 'px)')
+
+  # YouTube section parallax
+  if not (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+    $('.youtube-section').each (i, e) ->
+      if wScroll >= ($(e).offset().top - window.innerHeight)
+        offset = (Math.min(0, wScroll - $(e).offset().top + window.innerHeight - 500)).toFixed()
+
+        $(e).find('.video-card:first-child').css('transform': 'translate(' + offset + 'px, ' + Math.abs(offset * 0.2) + 'px)')
+        $(e).find('.video-card:last-child').css('transform': 'translate(' + Math.abs(offset) + 'px, ' + Math.abs(offset * 0.2) + 'px)')

public/stylesheets/_variables.sass

@@ -0,0 +1,4 @@
+$footer-height: 165px
+
+$color-primary: #1e76d1
+$color-primary-hover: darken(#1e76d1, 10%)

public/stylesheets/zulrah.sass

@@ -0,0 +1,155 @@
+@import "_variables"
+
+body
+  height: auto
+  font-family: "Gill Sans", sans-serif
+  font-size: 2rem
+  margin: 0
+  padding-bottom: $footer-height
+
+a
+  color: $color-primary
+  font-weight: 500
+  text-decoration: none
+  transition: color 300ms ease-in-out
+  &:hover
+    color: $color-primary-hover
+
+hr
+  margin-top: 35px
+  margin-bottom: 35px
+
+.u-text-center
+  text-align: center
+
+// this wrapper is only used to hide the footer
+#wrapper
+  position: relative
+  z-index: 10
+  width: 100%
+  margin: 0
+  padding: 0
+  background: white
+
+// header
+
+#header-box
+  position: relative
+  z-index: 2
+  height: 500px
+  background:
+    image: url(/assets/images/bg-banner.jpg)
+    size: auto 600px
+    position: top center
+    attachment: fixed
+  overflow: hidden
+
+#header-logo
+  height: 350px
+  width: 350px
+  background:
+    image: url(/assets/images/bg-icon.png)
+    position: center
+    repeat: no-repeat
+    size: contain
+  position: absolute
+  top: 40px
+  left: 50%
+  transform: translateX(-50%)
+
+  h1
+    margin-top: calc(100% + 25px)
+    color: white
+    font:
+      weight: bold
+    text-align: center
+
+#navigation
+  width: 100%
+  margin-top: 40px
+  margin-bottom: 40px
+  text-align: center
+
+  ul
+    list-style: none
+
+    li
+      display: inline-block
+      margin: 0
+      padding: 0
+      border-radius: 10px
+      font-size: 3rem
+      transition: all 300ms ease-in-out
+      &:hover
+        background: rgba(#000000, 0.1)
+        margin-left: 25px
+        margin-right: 25px
+        transform: scale(1.1)
+      a
+        padding: 20px 30px
+        text-decoration: underline
+
+#main-content
+  padding-bottom: 40px
+
+// home page styles
+
+.youtube-section
+  @media only screen and (min-device-width: 960px)
+    .row
+      position: relative
+      .video-card:nth-child(1)
+        transform: translate(100px, 20px)
+      .video-card:nth-child(2)
+        position: relative
+        z-index: 20
+      .video-card:nth-child(3)
+        transform: translate(-100px, 20px)
+
+  .video-card a
+    display: block
+    margin-bottom: 25px
+    padding: 15px 20px 0
+    background: white
+    border: 2px solid #bbb
+
+    img, p
+      transition: all 300ms ease-in-out
+
+    &:hover
+      img
+        transform: scale(1.1)
+
+      p
+        transform: translate(20px, 10px) scale(1.1)
+
+// Blog posts page
+
+#post-list
+  list-style: none
+
+  li
+    padding: 15px 20px 0
+    border: 2px solid #bbb
+
+  .post-title
+    margin-bottom: 3px
+
+  .post-info
+    color: #999
+
+  .post-body
+    margin-bottom: 0
+
+// footer section
+
+#footer
+  box-sizing: border-box
+  position: fixed
+  z-index: -1
+  bottom: 0
+  width: 100%
+  height: $footer-height
+  padding-top: 35px
+  background: #212121
+  color: white

src/.gitignore

@@ -1,5 +0,0 @@
-_site
-.sass-cache
-.jekyll-cache
-.jekyll-metadata
-vendor

src/404.html

@@ -1,25 +0,0 @@
----
-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>
-
-<div class="container">
-  <h1>404</h1>
-
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
-</div>

src/Gemfile

@@ -1,31 +0,0 @@
-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.2.0"
-# 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"
-  gem "jekyll-coffeescript"
-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.2"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
-

src/Gemfile.lock

@@ -1,89 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.12.2)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.9)
-    em-websocket (0.5.2)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.7)
-    execjs (2.8.1)
-    ffi (1.15.3)
-    forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.10)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.2.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.4.0)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 2.0)
-    jekyll-coffeescript (2.0.0)
-      coffee-script (~> 2.2)
-      coffee-script-source (~> 1.12)
-    jekyll-feed (0.15.1)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-sass-converter (2.1.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-seo-tag (2.7.1)
-      jekyll (>= 3.8, < 5.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.3.1)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.6.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 (4.0.6)
-    rb-fsevent (0.11.0)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (3.26.0)
-    safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (2.0.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll (~> 4.2.0)
-  jekyll-coffeescript
-  jekyll-feed (~> 0.12)
-  minima (~> 2.5)
-  tzinfo (~> 1.2)
-  tzinfo-data
-  wdm (~> 0.1.1)
-
-BUNDLED WITH
-   2.2.24

src/_config.yml

@@ -1,14 +0,0 @@
-# Welcome to Jekyll!
-
-title: 'Bit Goblin'
-email: 'gballantine@bitgoblin.tech'
-description: >-
-  The Bit Goblin main website, a place for cool tech things.
-baseurl: '/'
-url: 'https://www.bitgoblin.tech'
-bitgoblin_discord_link: ''
-bitgoblin_minecraft_server: 'https://mc.bitgoblin.tech'
-
-# Build settings
-plugins:
-  - jekyll-feed

src/_layouts/default.html

@@ -1,46 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>{{ page.title }}</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
-  <link rel="stylesheet" href="/assets/stylesheets/lumbridge.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-  <script src="/assets/scripts/varrock.js"></script>
-</head>
-<body>
-  <header id="header-box">
-    <div id="header-logo">
-      <h1>Bit Goblin</h1>
-    </div>
-  </header>
-
-  <nav id="navigation">
-    <ul>
-      <li><a href="/">Home</a></li>
-      <li><a href="/blog">Blog Posts</a></li>
-      <li><a href="/">Forum</a></li>
-      <li><a href="/">Minecraft</a></li>
-      <li><a href="/contact">Contact</a></li>
-    </ul>
-  </nav>
-
-  <div id="main-content" class="container">
-    <div class="row">
-      <div class="columns twelve">
-        {{ content }}
-      </div>
-    </div>
-  </div>
-
-  <footer id="footer">
-    <div class="row">
-      <div class="columns twleve">
-        <p class="u-text-center">{{ site.description }}</p>
-        <p class="u-text-center">&copy; Bit Goblin | all rights reserved.</p>
-      </div>
-    </div>
-  </footer>
-</body>
-</html>

src/_layouts/home.html

@@ -1,83 +0,0 @@
----
-layout: default
----
-
-{{ content }}
-
-<hr>
-
-<!-- Bit Goblin YouTube channel section -->
-<div id="bitgoblin-section" class="youtube-section">
-  <h3>Find Bit Goblin on <a href="https://youtube.com/BitGoblin">YouTube</a>.</h3>
-
-  <div class="row">
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=kMaFYUNwE5U">
-      <img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png" alt="Let's Take a Look at Debian 10 Buster">
-      <p>Let's Take a Look at Debian 10 "Buster"</p>
-    </a></div>
-
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=Gm71SHuqhHI">
-      <img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-6-thumbnail.png" alt="Add a Bunch of Hard Drives to Your PC! (kinda...)">
-      <p>Add a Bunch of Hard Drives to Your PC! (kinda...)</p>
-    </a></div>
-
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=4oCuX4xFieo">
-      <img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png" alt="How About a Cheap, Used AMD Graphics Card? (R9 270X)">
-      <p>How About a Cheap, Used AMD Graphics Card? (R9 270X)</p>
-    </a></div>
-  </div>
-</div>
-
-<hr>
-
-<!-- Ascendings YouTube channel section -->
-<div id="Ascendings-section" class="youtube-section">
-
-  <h3>Like watching Old School RuneScape videos? Go watch <a href="https://www.youtube.com/channel/UCCWlMg8oP9pz4Zlu4iZjPFw">Ascendings</a>.</h3>
-
-  <div class="row">
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=LtOpQv6ZBq0&list=PLIg6BQwweIwGdQNrbDMwGPxifgJ7iIXnE">
-      <img class="u-max-full-width" src="/assets/images/ascendings-thumbnails/asc-37-thumbnail.png" alt="F2P Hardcore Ironman Playlist">
-      <p>F2P Hardcore Ironman Playlist</p>
-    </a></div>
-
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=AhcCiqDegr0">
-      <img class="u-max-full-width" src="/assets/images/ascendings-thumbnails/asc-30-thumbnail.jpg" alt="Is Daeyalt Essence Worth Using?">
-      <p>Is Daeyalt Essence Worth Using?</p>
-    </a></div>
-
-    <div class="video-card columns four"><a href="https://www.youtube.com/watch?v=W3pFR_e3OuM">
-      <img class="u-max-full-width" src="/assets/images/ascendings-thumbnails/asc-19-thumbnail.jpg" alt="Karambwan Cooking alt">
-      <p>Karambwan Cooking alt</p>
-    </a></div>
-  </div>
-
-</div>
-
-<hr>
-
-<!-- Minecraft server callout section -->
-<section id="minecraft-section">
-
-  <h3>Play Minecraft? Go check out the <a href="https://mc.bitgoblin.tech">community Minecraft server</a>!</h3>
-
-  <img class="u-max-full-width" src="https://static.wikia.nocookie.net/minecraft_gamepedia/images/f/ff/Java_Edition_logo_12.png" alt="Minecraft Java Edition logo">
-
-  <p>This world is open to everyone who would like to play on it. There are no mods installed, and currently only world is available. I am open to adding mods in the future and even adding more worlds, just let me know!</p>
-
-  <p><strong>Note:</strong> The website is currently a work in progress, but it will be up soon!</p>
-
-</section>
-
-<hr>
-
-<!-- Bit Goblin forum callout section -->
-<section id="forum-section">
-
-  <h3>You can also participate in the <a href="https://forum.bitgoblin.tech">community forum</a>!</h3>
-
-  <p>Some of us love the old-style internet forums to converse and help others out. Anything you would like to discuss may happen here under the proper forum sections.</p>
-
-  <p><strong>Note:</strong> Currently the Bit Goblin forum is under construction, but check back soon if you'd like to participate!</p>
-
-</section>

src/_layouts/page.html

@@ -1,5 +0,0 @@
----
-layout: default
----
-
-{{ content }}

src/_layouts/post.html

@@ -1,7 +0,0 @@
----
-
----
-
-<p>This is a post page.</p>
-
-{{ content }}

src/_posts/2021-08-17-welcome-to-jekyll.markdown

@@ -1,29 +0,0 @@
----
-layout: post
-title:  "Welcome to Jekyll!"
-date:   2021-08-17 13:11:02 -0400
-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/

src/assets/scripts/varrock.coffee

@@ -1,7 +0,0 @@
----
----
-
-$(window).scroll ->
-  wScroll = $(this).scrollTop()
-
-  $('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')

src/assets/stylesheets/lumbridge.sass

@@ -1,96 +0,0 @@
----
----
-
-body
-  font-family: "Gill Sans", sans-serif
-  font-size: 2rem
-  margin: 0
-
-a
-  color: #1e76d1
-  font-weight: 500
-  text-decoration: none
-  transition: color 200ms ease-in-out
-  &:hover
-    color: darken(#1e76d1, 10%)
-
-hr
-  margin-top: 50px
-  margin-bottom: 50px
-
-.u-text-center
-  text-align: center
-
-#header-box
-  position: relative
-  height: 500px
-  background:
-    image: url(/assets/images/bg-banner.jpg)
-    size: auto 600px
-    position: top center
-    attachment: fixed
-  overflow: hidden
-
-#header-logo
-  height: 350px
-  width: 350px
-  background:
-    image: url(/assets/images/bg-icon.png)
-    position: center
-    repeat: no-repeat
-    size: contain
-  position: absolute
-  top: 40px
-  left: 50%
-  transform: translateX(-50%)
-
-  h1
-    margin-top: calc(100% + 25px)
-    color: white
-    font:
-      weight: bold
-    text-align: center
-
-#navigation
-  width: 100%
-  margin-top: 40px
-  margin-bottom: 40px
-  text-align: center
-
-  ul
-    list-style: none
-
-    li
-      display: inline-block
-      margin: 0
-      padding: 0
-      border-radius: 10px
-      font-size: 3rem
-      transition: background 200ms ease-in-out
-      &:hover
-        background: rgba(#000000, 0.1)
-      a
-        padding: 15px 25px
-        text-decoration: underline
-
-#main-content
-  margin-bottom: 40px
-
-.youtube-section
-  .video-card a
-    display: block
-    padding: 15px 20px 0
-    border: 2px solid #bbb
-
-    img
-      transition: all 300ms ease-in-out
-
-    &:hover
-      img
-        transform: scale(1.1)
-
-#footer
-  width: 100%
-  margin-top: 100px
-  padding-top: 15px
-  border-top: 2px solid #999

src/contact.markdown

@@ -1,5 +0,0 @@
----
-layout: page
----
-
-If you're looking to contact me for business inqueries, feel free to email me at [gballantine@bitgoblin.tech](mailto:gballantine@bitgoblin.tech).

src/index.markdown

@@ -1,6 +0,0 @@
----
-
-layout: home
----
-
-Welcome to the Bit Goblin website! This is a place for lots of cool tech things, ranging from YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, and we even have a Discord server! Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough.

views/index.pug

@@ -0,0 +1,78 @@
+extends layout.pug
+
+block content
+  p Welcome! My name is Greg Ballantine and Bit Goblin is my passion project for creating YouTube videos on tech. I love tinkering with all things related to computers, and I enjoy documenting the things that I do so that others can use my struggles to ease their own. Whether it's buildings PCs, playing with networking gear, or exploring the beauty of Linux, there are lots of things to play with and try to help others with.
+
+  p Not only do I create tech videos for Bit Goblin, but I'm also trying to build a community around it for great people to just chill, have fun, and help each other out when need arises. Ranging from the aforementioned YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, a Discord server for everyone to relax and chat with each other, a future community forum and other services. Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough, right?
+
+  p I do work with sponsors to help fund my projects. If you're curious about who I've worked with before, check out the [Sponsors page](/sponsor).
+
+  hr
+
+  // Bit Goblin YouTube channel section
+  section#bitgoblin-section.youtube-section
+
+    h3 Find Bit Goblin on #[a(href='https://youtube.com/BitGoblin') YouTube].
+
+    .row
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=cYSLW1qIzKE')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-46-thumbnail.png',alt='Add a Bunch of Hard Drives to Your PC! (kinda...)')
+          p How to Install the NVIDIA Driver on Linux
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=4oCuX4xFieo')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png',alt='How About a Cheap, Used AMD Graphics Card? (R9 270X)')
+          p How About a Cheap, Used AMD Graphics Card? (R9 270X)
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=kMaFYUNwE5U')
+          img.u-max-full-width(src='/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png',alt='Let\'s Take a Look at Debian 10 Buster')
+          p Let's Take a Look at Debian 10 "Buster"
+
+  hr
+
+  // Ascendings YouTube channel section
+  section#Ascendings-section.youtube-section
+
+    h3 Like watching Old School RuneScape videos? Go watch #[a(href='https://youtube.com/AscendingsRS') Ascendings].
+
+    .row
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=LtOpQv6ZBq0&list=PLIg6BQwweIwGdQNrbDMwGPxifgJ7iIXnE')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-37-thumbnail.png',alt='F2P Hardcore Ironman Playlist')
+          p F2P Hardcore Ironman Playlist
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=AhcCiqDegr0')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-30-thumbnail.jpg',alt='Is Daeyalt Essence Worth Using?')
+          p Is Daeyalt Essence Worth Using?
+
+      .video-card.columns.four
+        a(href='https://www.youtube.com/watch?v=W3pFR_e3OuM')
+          img.u-max-full-width(src='/assets/images/ascendings-thumbnails/asc-19-thumbnail.jpg',alt='Karambwan Cooking alt')
+          p Karambwan Cooking alt
+
+  hr
+
+  // Minecraft server callout section
+  section.minecraft-section
+
+    h3 Play Minecraft? Go check out the #[a(href='https://mc.bitgoblin.tech') community Minecraft server]!
+
+    img.u-max-full-width(src='https://static.wikia.nocookie.net/minecraft_gamepedia/images/f/ff/Java_Edition_logo_12.png',alt='Minecraft Java Edition logo')
+
+    p This world is open to everyone who would like to play on it. There are no mods installed, and currently only world is available. I am open to adding mods in the future and even adding more worlds, just let me know!
+
+    p #[strong Note:] The website is currently a work in progress, but it will be up soon!
+
+  hr
+
+  // Bit Goblin forum callout section
+  section#forum-section
+
+    h3 You can also participate in the #[a(href='https://forum.bitgoblin.tech') community forum]!
+
+    p Some of us love the old-style internet forums to converse and help others out. Anything you would like to discuss may happen here under the proper forum sections.
+
+    p #[strong Note:] Currently the Bit Goblin forum is under construction, but check back soon if you'd like to participate!

views/layout.pug

@@ -0,0 +1,38 @@
+doctype=html
+html
+  head
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    title Bit Goblin
+    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css')
+    link(rel='stylesheet', href='/assets/stylesheets/zulrah.css')
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js')
+    script(src='/assets/scripts/vorkath.js')
+
+  body
+    #wrapper
+      header#header-box
+        div#header-logo
+          h1 Bit Goblin
+
+      nav#navigation
+        ul
+          li
+            a(href="/") Home
+          li
+            a(href="/blog") Blog Posts
+          li
+            a(href="/support") Support
+          li
+            a(href="/contact") Contact
+
+      #main-content.container
+        .row
+          .columns.twelve
+            block content
+
+    footer#footer
+      .row
+        div.columns.twelve
+          p.u-text-center The Bit Goblin website.
+          p.u-text-center © Bit Goblin | all rights reserved.