Theme features

11ty origin presents is a visually captivating 11ty portfolio theme designed to showcase professional portfolios, projects, case studies and more. The flexible project content type offers 4 different layouts and an overview page. The theme incudes a fully featured blog.

Content Types

• Homepage (Markdown)
• Projects (Markdown)
• Blog (Markdown)
• Basic Pages (Markdown)
• Contact Page (Markdown)

Design & Code

• 11ty v3
• Clean code and 11ty best practices
• All content is editable and configurable via markdown and front-matter. No hardcoded content.
• Configure global logo, colors, fonts all from _data/site.yml
• Configure global header, footer, menu, dark mode, seo, og meta, cookie banner, analytics and more from _data/site.yml

CSS

• Bootstrap 5.3
• SCSS
• 100% responsive design
• Includes all SCSS files which are well structured and cleanly written
• The entire Bootstrap library is not imported by default. Mainly we use the Bootstrap grid, media queries and utilities. If you wish to use more of the Bootstrap library you just need to uncomment the @imports in the style.scss.

Speed

• 100/100 Google Lighthouse speed score
• Tiny CSS and JS filesize ⚡
• No jQuery
• Statically generated - you can’t get faster or more resiliant then that! 💪

SEO

• 100/100 Google Lighthouse SEO score
• Google Analytics can be configured in _data/site.yml, supports environment variables.
• Google Tag manager can be configured in _data/site.yml, supports environment variables.
• Plausible analytics can configured in _data/site.yml, supports environment variables.
• Umami analytics can configured in _data/site.yml, supports environment variables.
• Title and Meta tags generated for each page automatically
• OG meta data for Facebook, Twitter etc generated for each page automatically
• Ability to override title and meta tags in the frontmatter on a per page basis
• Ability to override OG Meta data in frontmatter on a per page basis
• Semantic HTML5 document structure
• Social media links can be configured in _data/social.json - Fontawesome is used for the icons.
• No Javascript links or onClick events to prevent crawling
• Statically generated pages are fast and easy to index

Privacy

• No analytics, tracking, or cookies are enabled by default
• Supports privacy focused analytics providers Plausible & Umami, both GDPR compliant alternatives to Google Analytics
• Self hosted Google fonts enabled by default. Option to switch between hosting and CDN Google fonts in _data/site.yml
• Does not use NPM or node_modules, no risk of dependencies leaking or extracting data

Menus

• Responsive menu using simple vanilla JS/CSS code
• Animated hamburger and mobile overlay menu
• Dropdown items in main menu
• Dropdown menu items can have optional icons and descriptions
• Configure menu items as buttons or external links
• 3 Footer menus
• Bootom menu
• Configure copyright, RSS, terms and privacy links in the footer

Header

• Fixed header and animation on scroll
• Logo configuration for desktop and mobile. Control the image (different logos for desktop and mobile for instance) size, text, color etc - Your logo will be perfect 👌

Darkmode

• First class darkmode support
• Configure manual dark mode and position of dark mode toggle
• Supports automatic darkmode based on users OS setting (css prefers-color-scheme)
• Dark mode switch can be displayed in header/footer and mobile menu overlay
• Configure the color palette for light and dark mode base colors in _data/site.yml

Fonts

• Supports self hosted fonts @font-face - GDPR compliant
• Supports Google fonts
• Fonts can be configured in _data/site.yml switch between self hosting and CDN Google fonts
• Font Awesome 5 icons

Social

• Social media links can be configured in _data/social.json - Fontawesome is used for the icons.
• Auto generated and overridable OG Meta data for Facebook and Twitter cards

Contact Form

• Contact page & contact form
• Contact details including phone, email, map etc can be displayed in the footer and contact page.
• Supports Netlify forms - comes with prebuilt Netlify form, will work automatically when hosting with Netlify
• Supports Formspree forms - comes with prebuilt Formspree form just add your Formspree ID in the _data/site.yml

Comments

• Includes Disqus comments

Newsletter

• Includes Mailchimp subscribe

Cookie Banner

• Cookieconsent open source Cookie banner - a lightweight, cutomizable, GDPR compliant cookie consent solution written in vanilla JS. Amazing 🍺

RSS

• Includes RSS feed
• RSS icon feed can be enabled/disabled in footer

Blog

• Full blog. Contains categories, tags and author profiles
• Blog posts can have full width hero images

Content

• Robust example content included out of the box
• All photos, illustrations and icons included with this theme are royalty free

Netlify

• Ready to deploy to Netlify
• includes netlify.toml file

Linting

• prettier
• stylelint
• vscode settings

Changelog

Version 1.1.0 (Released Nov 11, 2024)

• Upgrade to 11ty v3.0.0 🎉

Version 1.0.0 (Released Oct 12, 2024)

• Initial release. Ported from Jekyll Origin 2.2.0, includes all the same features.