ZenLu

Well, this is a Jekyll theme that I actually have created for my own page, courses and educational website working with ChatGPT and claude. I named it Zenlu as an scientific, and educational theme. If you like it feel free to use it.

This theme heavily built on Tailwind CSS styling.

Features, Tasks and Bugs

TODO:

🐝 Bugs

• Fix Navbar underline appearing when refreshing the page
• Fix reference styling
• Fix blog styling
• Fix dark mode issues
• Fix color transition issues switching from light mode to dark mode

✨ Features

• Add a holiday themes
• Improve the footer design
• Add city journey
• Improve the navigation bar design
• Add overwidth image handling

🛠 Tasks

• Refactor the image container
• Update seo schema
• Refactor the hiararchy of the page
• Dark mode color scheme

---

Codebase Transition (12/19/2024)

The old codebase and personal page will be deprecated in Dec 2024. The new codebase is now live and available on the main branch.

• old codebase (legacy): old-version-archived and tagged as v1.0-old-version.
• new codebase (current): the main branch now reflects the new version of the site.

---

Prerequisites

• Ruby: Download Ruby

• Bundler:

  gem install bundler

• Node.js and npm: Version 14.x.x or higher
  Download Node.js

  node -v
  npm -v

• Git: Download Git

Installation

1. Clone the Repository

git clone https://github.com/zhenyuanlu/zhenyuanlu.github.io.git
cd zhenyuanlu.github.io

2. Install Ruby Gems

bundle install

3. Install Node.js Dependencies

npm install

Building Tailwind CSS

• For Production Build:

  npm run build:css

• For Development (Watch Mode):

  npm run watch:css

Available Scripts in package.json

{
  "scripts": {
    "build:css": "npx tailwindcss -i ./assets/css/styles.css -o ./assets/css/styles.css --minify",
    "watch:css": "npx tailwindcss -i ./assets/css/styles.css -o ./assets/css/styles.css --watch"
  }
}

Serving the Site

1. Serve with Jekyll

bundle exec jekyll serve

2. Development Workflow (Optional)

To streamline the development process by running both Tailwind's, JS watch and Jekyll's serve concurrently, you can use concurrently.

a. Install concurrently

npm install concurrently --save-dev

c. Run the Development Server

npm run start

d. Build the Site

npm run build

Acknowledgements

Big ❤ to ChatGPT and Claude for refining all the code.