Eleventy Themes Logo Eleventy Themes
Kailoon.com screenshot

Kailoon.com

Author Avatar Theme by Kailoon
Updated: 28 Jan 2023
63 Stars

My simple portfolio blog built using 11th and tailwindcss.

Github Live Preview

Categories

Tailwind

Overview

This article discusses a simple portfolio blog built using 11ty and tailwindcss based on the 11ty base blog. The blog now includes a dark mode feature and several other key features. The article provides an installation guide and encourages users to customize the blog according to their preferences.

Features

  • Shortcodes: The blog supports shortcodes, allowing users to create responsive galleries or single images using srcset via cloudinary in webp format.
  • Convert external links: External links are automatically converted to open in a new tab with noreferrer for better SEO optimization.
  • Draft post enabled: The blog has a feature that allows users to create draft posts that are not visible to the public until they are published.
  • Responsive images: The blog uses srcset and is integrated with Cloudinary and Netlify to ensure that images are optimized for responsiveness and performance.
  • Google Lighthouse: The blog scores 4 out of 100 in Google Lighthouse, indicating good performance and optimization.
  • CSSnano: The blog is CSSnano-ready, which means that the CSS is minified for a smaller file size and improved loading speed.

Installation

To use this blog theme, follow these steps:

  1. Clone or download the repository.
  2. Run npm install to install the required dependencies.
  3. Remove any unwanted posts or works.
  4. Update the site information in the metadata.json file.
  5. Update the homepage information in the data.json file.
  6. Update the about.md file to customize the about page.
  7. Customize the blog to suit your preferences.

Summary

This article introduces a simple portfolio blog built using 11ty and tailwindcss. With features such as shortcodes for responsive galleries, automatic conversion of external links, draft post capability, and optimized responsive images, this blog theme offers a user-friendly experience. It also boasts a high Google Lighthouse score and CSSnano integration for performance optimization. The article provides clear installation instructions for users to easily set up and customize the blog according to their needs.