Website Demo

Date: January 20, 2025 Category: personal Priority: 6

Technologies: HTML CSS Webdev

Introduction

I made this website to display a lot of the projects that I have worked on in more detail, but in many ways this site itself is a project! My goal was to design something that other students and engineers could edit to be their own. The original repository for this project can be found here and an example of someone else using this repository already here!

Vision

Using GitHub Pages means that the site is completely free to host, and using Jekyll means that the site can be customized by only editing Markdown documents. I currently still in the process of creating another repository with a tutorial that will show people the basics of using Git and Markdown to create their own website.

Creation

The whole website was created over the course of a long weekend. I am super happy with the result and would like to thank Shaan Yadav for the inspiration and motivation to get started with this project.

Technical Specs

The website is built using Jekyll, a static site generator, with Liquid templating for dynamic content. It utilizes HTML5, CSS3, and JavaScript for structure, styling, and interactivity. The CSS incorporates responsive design principles, while JavaScript enables dynamic features like a hamburger menu and project filtering. Additional tools include MathJax for rendering LaTeX math and GitHub Pages for hosting. The layout is optimized with media queries and grid-based galleries.

Content

This page tests various Markdown (and inline HTML) formatting features to ensure the site’s styling handles them well and to serve as a reference. Below are examples of two columns, images of different sizes and alignments, code blocks, tables, text-wrapped images, and an embedded YouTube video.

Two Columns

Markdown doesn’t have built-in column support, so you can use small HTML blocks:

**Left Column** - Some bullet - Another bullet

**Right Column** - Another list - More content

Examples of custom sized and justified images

Avatar Avatar

Another way of doing images

Small Image

Code snippets

def greet(name):
    print(f"Hello, {name}!")
    return f"Greeting for {name} created."

Table

Feature	Description	Example
Responsive	Adjusts to screen sizes	Mobile-friendly layout
Customizable	Easily modify styles and content	Edit Markdown and CSS
Open Source	Free to use and contribute	GitHub Repository Link
Fast Loading	Optimized for performance	Minimal external assets

Embedding videos

Remeber to add a clear style <div> or suffer the consequences.

Math

Inline math: $x^2 +y^2 = z^2$

Display math: $\frac{\partial}{\partial x} f(x,y) = 2x + y^2$