Source code for the starlard.dev website.

StarLardWeb is a static website, built using Jekyll with the Minimal Mistakes theme and custom styling. The homepage features a single-page scrolling layout with hero, portfolio, posts, and about sections. The project is organized using standard Jekyll conventions with additional custom SCSS and layouts.

1. Install rbenv (or your prefered ruby version manager)
2. Install the required ruby version from .ruby-version: cat .ruby-version | rbenv install --skip-existing
3. Install Bundler: gem install bundler
4. Install gem dependencies: bundle install

1. Serve the site with bundle exec jekyll serve
2. Visit the site locally at http://127.0.0.1:4000/ (or whatever address is printed in the console)

If you have the Firebase CLI installed, you an also serve the site with firebase.

1. Build the site with bundle exec jekyll build
2. Serve the site with firebase emulators:start --only hosting:starlarddev
3. Visit the site locally at 127.0.0.1:5002 (or whatever address is printed in the console)

Deployment is managed automatically upon merging to main via GitHub actions.

When required, deployment can also be done locally by running firebase deploy --only hosting --project dev-starlard-lard-lad.

This site uses the Minimal Mistakes Jekyll theme with custom styling. See the theme documentation for base configuration options.

_layouts/
  landing.html          # Single-page scrolling homepage layout

_includes/
  sections/
    hero.html           # Hero section with avatar and CTAs
    portfolio-grid.html # Portfolio cards grid
    recent-posts.html   # Latest blog posts
    about.html          # About and contact section
  portfolio-card.html   # Reusable portfolio card component

_sass/
  _custom-variables.scss   # Dark theme colors and typography
  _custom-sections.scss    # Full-height scrolling sections
  _custom-cards.scss       # Portfolio and post card styles
  _custom-navigation.scss  # Sticky nav with blur effect
  _custom-animations.scss  # Scroll animations

assets/
  css/
    main.scss           # Light mode styles
    main_dark.scss      # Dark mode styles
  js/
    smooth-scroll.js    # Smooth scrolling and nav highlighting

Create pages in the _pages directory and add paths for any new pages in _data/navigation.yml.

The homepage (index.md) uses the custom landing layout which renders the single-page scrolling sections. Other pages use standard Minimal Mistakes layouts.

Pages should contain a Front Matter header:

---
layout: <layout>
title: About
permalink: /about/
---

Layout options are described here.

Create posts in the _posts directory.

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.

Posts shoudld contain the a Front Matter header like the following at the top of the file:

---
layout: <layout>
title:  "Welcome to Jekyll!"
date:   2025-02-03 16:05:45 -0800
categories: <space seperated list of categories>
tags: swift <space seperated list of tags>
---

Jekyll offers support for code snippets:

{% highlight swift %}
print("Hello World!")
{% endhighlight %}

Put images in assets/images

This site initially existed as a React app, which was initially chosen to serve as a learning mechanism for JS, but that proved burdensome to maintain and was overkill for the website's actual requirements given I had no dynamic content. Being an iOS developer, I investigated using Swift-based solutions, such as Publish and Vapor, but found that doing so recreated the issues I was having with React: I wanted something lightweight and easy to maintain so that I could spend more time working on projects that interest me; not maintaing a website. Hence, Jekyll was chosen due to its broad popularity, community support, and development velocity. Currently, it is hosted using using Firebase Hosting, since they offer free hosting and great performance for my use case.

Jekyll

All source code and content contained here-in are copyright of Caleb Friden, provided for demonstration purposes only, and not intended for distribution.