---
layout: project
title: This website
description: The self-built site using Jekyll, Bootstrap, TypeScript, and more!
thumbnail_url: /assets/images/website.webp
project_url: https://owenryan.us/
source_url: https://code.owenryan.us/owenryan/owenryan.us
SEO_tags: [web, html, css, jekyll]
---

After squatting on this domain for 7 years, I finally stopped procrastinating and decided to create a website.
Here is everything I used to turn my visions into reality.

## Structure

This website was created using the [Jekyll](https://jekyllrb.com/) static site generator, which runs on the
[Liquid](https://shopify.github.io/liquid/) template engine. Jekyll supports writing posts in [Markdown](https://en.wikipedia.org/wiki/Markdown), which makes writing simple pages
like this one much easier. On the other hand, using plain markdown makes embedding videos and icons much more difficult.

## Theme

Every page is running a custom theme built with the [Bootstrap](https://getbootstrap.com/) CSS library, and styled wit
[SASS](https://sass-lang.com/). Jekyll automatically renders markdown files to fit the site theme.

## Typescript

When it comes to creating websites, I try to keep scripting down to a minimum to improve client performance. On this
site, there are currently only three times Javascript is used on this site.

- Lazy loading Stylesheets (Used for loading FontAwesome icons in the background)
- Gradient rotator (Only on index.html)
- "Get Email Address" button in contact.html (Decodes an obfuscated version of my email address to prevent scraping)

I chose to work with TypeScript over JavaScript since I prefer to use static-typing whenever possible to avoid confusion
and to allow better static analysis and linting. On the other hand, Jekyll only has built-in support for CoffeeScript,
so compiling to JavaScript has to be done manually.

## Hosting

Jekyll produces static HTML and CSS files, meaning that they can be hosted anywhere. I chose to host this website using
the [Apache webserver](https://httpd.apache.org/) because it's reliable and has better documentation than NGINX.