diff --git a/index.js b/index.js index 81dab1d..a9463b9 100644 --- a/index.js +++ b/index.js @@ -8,7 +8,7 @@ app.set('views', './views'); app.set('view engine', 'pug'); // serve static files -app.use('/static', express.static(path.join(__dirname, 'public'))); +app.use('/assets', express.static(path.join(__dirname, 'public'))); // Index GET route app.get('/', (req, res) => { diff --git a/public/images/ascendings-thumbnails/asc-19-thumbnail.jpg b/public/images/ascendings-thumbnails/asc-19-thumbnail.jpg new file mode 100755 index 0000000..c5f5e90 Binary files /dev/null and b/public/images/ascendings-thumbnails/asc-19-thumbnail.jpg differ diff --git a/public/images/ascendings-thumbnails/asc-30-thumbnail.jpg b/public/images/ascendings-thumbnails/asc-30-thumbnail.jpg new file mode 100755 index 0000000..fc409a5 Binary files /dev/null and b/public/images/ascendings-thumbnails/asc-30-thumbnail.jpg differ diff --git a/public/images/ascendings-thumbnails/asc-37-thumbnail.png b/public/images/ascendings-thumbnails/asc-37-thumbnail.png new file mode 100755 index 0000000..0feb507 Binary files /dev/null and b/public/images/ascendings-thumbnails/asc-37-thumbnail.png differ diff --git a/public/images/bg-banner.jpg b/public/images/bg-banner.jpg new file mode 100755 index 0000000..77c55f5 Binary files /dev/null and b/public/images/bg-banner.jpg differ diff --git a/public/images/bg-icon.png b/public/images/bg-icon.png new file mode 100755 index 0000000..17b24f0 Binary files /dev/null and b/public/images/bg-icon.png differ diff --git a/public/images/bitgoblin-thumbnails/bg-20-thumbnail.png b/public/images/bitgoblin-thumbnails/bg-20-thumbnail.png new file mode 100755 index 0000000..c77c293 Binary files /dev/null and b/public/images/bitgoblin-thumbnails/bg-20-thumbnail.png differ diff --git a/public/images/bitgoblin-thumbnails/bg-36-thumbnail.png b/public/images/bitgoblin-thumbnails/bg-36-thumbnail.png new file mode 100755 index 0000000..6c0ec66 Binary files /dev/null and b/public/images/bitgoblin-thumbnails/bg-36-thumbnail.png differ diff --git a/public/images/bitgoblin-thumbnails/bg-46-thumbnail.png b/public/images/bitgoblin-thumbnails/bg-46-thumbnail.png new file mode 100755 index 0000000..1fc7aba Binary files /dev/null and b/public/images/bitgoblin-thumbnails/bg-46-thumbnail.png differ diff --git a/public/scripts/vorkath.coffee b/public/scripts/vorkath.coffee index 769b7c1..862e1df 100644 --- a/public/scripts/vorkath.coffee +++ b/public/scripts/vorkath.coffee @@ -1,2 +1,17 @@ -$ -> - console.log('This is a test.') +$(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)') diff --git a/public/stylesheets/_variables.sass b/public/stylesheets/_variables.sass new file mode 100644 index 0000000..21352fa --- /dev/null +++ b/public/stylesheets/_variables.sass @@ -0,0 +1,4 @@ +$footer-height: 165px + +$color-primary: #1e76d1 +$color-primary-hover: darken(#1e76d1, 10%) diff --git a/public/stylesheets/zulrah.sass b/public/stylesheets/zulrah.sass index 93021c9..fd68460 100644 --- a/public/stylesheets/zulrah.sass +++ b/public/stylesheets/zulrah.sass @@ -1,2 +1,155 @@ +@import "_variables" + body - background: grey + 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 diff --git a/views/index.pug b/views/index.pug index d7c4b12..32d5a98 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,10 +1,78 @@ -doctype=html -html - head - title Bit Goblin - link(rel='stylesheet', href='/static/stylesheets/zulrah.css') - script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js') - script(src='/static/scripts/vorkath.js') - body - h1 Bit Goblin - p This is a test! +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! diff --git a/views/layout.pug b/views/layout.pug new file mode 100644 index 0000000..80b751f --- /dev/null +++ b/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.