Eleventy Bragdoc screenshot

Eleventy Bragdoc

Author Avatar Theme by Emilyyleung
Updated: 28 Jan 2022
12 Stars

Eleventy theme inspired by Julia Evan's Brag Document. Original Bragdocs design by Jonny Burch and the team at Progression.app

Overview:

The eleventy-bragdoc is a starter site designed for building personalized brag documents using 11ty. It takes inspiration from Julia Evans and the Bragdocs design by Jonny Burch and the team at Progression.app. The site is built using 11ty/eleventy, Vanilla JS, and CSS. It provides two themes (light and dark) which can be easily switched between by changing the data-theme variable in the code. The project’s styling was adapted from a timeline codepen by venkatesh, and the SEO structure was adapted from 11r by reeseschultz. The project is open source and available under the MIT License.

Features:

  • Eleventy for static site generation
  • Nunjucks for templating
  • Static tags
  • SEO base template available in the src/data/site.json file
  • Frontmatter property: Icon use Segoe UI Emoji inspired by Notion style
  • Frontmatter property: public can be set to True or False to control visibility on the user’s timeline
  • Timeline entries are sorted with the latest entry at the top

Installation:

To install the theme, follow these steps:

  1. Clone or download the eleventy-bragdoc repository.
  2. Open the project folder in your preferred code editor.
  3. Run the following command to install the required dependencies:
    npm install
    
  4. After the installation is complete, you can start the development server by running:
    npm run dev
    
    This will open the site in your browser at http://localhost:8080/.
  5. To build the site for production, run:
    npm run build
    
  6. The built files will be available in the _site directory.

Summary:

The eleventy-bragdoc is a customizable starter site for creating personalized brag documents. It offers two themes, light and dark, and provides features such as static site generation, templating with Nunjucks, and SEO optimization. The project is open source and can be easily installed and customized to suit individual needs.