decryptedchaos / osprey-delight

Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio.

---

Overview

Osprey Delight is the free-minded artist's choice for a clutter-free and blazingly fast single-page portfolio.

It's perfectly suited to show off your awesome work!

It tastes a bit different than the original great Osprey theme and adds awesome new functionality to your delight.

Showcase

Check out how Osprey Delight performs in the real-world:

• Protonaut Music - Musician and top contributor whose highly individualized site got kickstarted by Osprey Delight.
• KDEVO - The maintainer's site. It wouldn't be me if I would not run this theme personally. It's basically in the vanilla version.

Features

• Single page made out of extensible section building blocks
  • About: Introduce yourself
  • Gallery: Show your work using a grid-based gallery with interactive modal boxes
  • Blog: Lightweight blog features
  • Contact: Contact form with Basin support and built-in spambot protection
• Images are asset-driven. Use your high-quality images without the hassle of manually resizing them!
  • Image lazy-loading via lazySizes
  • Blur-up technique using automatic low-quality image placeholders (LQIP)
• SEO-optimized
  • Score 100 at PageSpeed Insights. Every bit is fine-tuned for performance
  • Auto-generated structured ensures that everyone finds you
• Delightful UX
  • Smooth scrolling plus scroll-spy
  • Awesome social icons in footer
  • Automatically fetches GitHub repo data for you
  • Sane fallbacks for No-Script/No-JS users
  • Intelli-404: Automatically searches for suitable matches - never loose the link to your content
• Heavily customizable - no need to maintain a fork!

In general, many open issues of the original theme have been resolved.

Contribute

There are multiple ways to show your support if you like this project:

• Start contributing
• Become a sponsor or donate anything to my non-profit organization via various options
• Push the button - a small gesture with huge effect

Quickstart

The recommended way to setup this theme is to use a git submodule so that further upgrades can be received without any hassle. Invoke the following from your Hugo site directory:

git submodule add https://github.com/kdevo/osprey-delight.git themes/osprey-delight

Now, simply copy the exampleSite directory's content to your project's root, it's a great starting point.

Visit the Hugo docs for more info and general setup of a Hugo site.

Upgrade

Receive the latest features of the theme by pulling the latest changes from master:

cd themes/osprey-delight
git pull

It is good practice to check the release notes before upgrading (especially before using new major versions).

Configuration and Usage

It's best if you simply check out the fully commented config file. This theme follows a learning-by-doing approach.

Images

This theme is asset-driven! It "knows" how to handle your precious assets, and there usually is no need for manual resizing. Therefore, the recommended approach for images is to provide high-res images in the assets directory.

The following table shows some guidelines regarding the assets:

Image Type	Config Key	Minimum Width	Note
Logo	logoBig (config.yaml)	200px	Transparent, minimum margin top/bottom
Navbar-Logo	logoSmall (config.yaml)	96px	Transparent, small margin top/bottom, prefer square format
Gallery	image (content/gallery/*)	400px	Transparent, medium margin top/bottom/left/right, prefer square format
Background	background (config.yaml)	1200px	Optional, use a high-quality JPG

Content files

About section

To create an about section that renders on the home page, run:

$ hugo new about.md

Gallery item

To create a new gallery item, run:

$ hugo new gallery/item-name.md

This is very helpful for the first time since you will get a fully documented file.

⚠️ Please make sure that item-name is unique on the whole page because it will be used as an anchor/identifier!

Contact form

Basin is a free AJAX contact form service that is used by this theme. To use set it up, sign up for a free account and create a form. Copy and paste your form's URL endpoint to the ajaxBasin config.yaml parameter. Select the Submit this form via AJAX option on your Basin dashboard.

Spambot protection

Under Setup/"Set a Custom Honeypot Field", enter _anti_spam_honeypot. Basin will ignore all messages that contain this specific field. This should work since there is a hidden field that users normally do not use, but spambots will blindly input their data.

Next

Help wanted

This README probably needs some documentation improvements for the latest features. Any PR regarding this is welcome and please also check out how to contribute!

Customize it

Want to have full control over appearance? Check out how to customize the theme more granularly.