dionyphany

A portfolio and blog theme, inspired by the design of the astro-portfolio-template, by Maxence Wolff, but quite a departure from the original.

See Demo at https://arkadianriver.github.io/dionyphany/

Use

This is a theme for the Hugo static-site generator (SSG).

1. If you haven't already, install Hugo, Git, and, if you're on Windows, PowerShell or WSL from which to run the commands in the next step.

2. To create a new site with this theme:

   hugo new site quickstart
   cd quickstart
   git init
   git submodule add https://github.com/arkadianriver/dionyphany.git themes/dionyphany
   rm hugo.toml
   cp themes/dionyphany/exampleSite/* .
   

3. Test the site:

   hugo server
   

4. Edit the hugo.yml file with your information.

5. Start adding posts to the content/en/posts folder and portfolio items to the content/en/works folder.

6. Refer to the Hugo documentation for further customization and ways to publish your site.

Notes

What I wanted:

• Clean and elegant design. I was inspired by Maxence's theme, with its thin Open Sans font, plenty of spacing, and few graphics.

• The background graphic. I grew fond of having a scenic splash page on my original site and didn't want to give that up, even if only in the background.

• Translucent canvas. I've always liked the smooth glass feel of a slightly raised, sharp, translucent canvas with round edges.

• Header navigation that's always accessible. I'm often frustrated having to scroll all the way to the top to access the site navigation, which is why I chose the HTML5Up Spectral theme for my previous web site. At the same time, the real estate that the nav takes up is valuable, particularly on smaller devices. I was happy to discover react-headroom and how it hides and shows the header based on scroll actions. I mimicked that behavior here.

• Hugo. I originally wanted to try out Astro for the scoped styles and JavaScript language. This is when I discovered Max's theme, which I was going to build from. However, I had second thoughts about using Tailwind and an npm eco-system, in general, having to keep the dependencies up-to-date. Also, I found that as static-site generators go, Astro's not yet mature. Too many of the features I wanted, I would have had to write myself with JavaScript. I get it, Astro is more than an SSG. But, since all I wanted was an SSG, I went with the fastest, easiest to install/deploy, fairly feature-rich, and all-around best one that I knew of—Hugo.

• Miscellaneous.

  • I want to try translation with Crowdin, so I made the theme with multi-lingual in mind.. another reason to choose Hugo with its great G11n support.
  • Light, dark, and custom color themes.
  • My portfolio was getting kinda long. So to aid in finding items of interest, I made the roles and skills filterable.

Dev notes:

I thought it useful to keep track of why a few things are the way they are should I need to make changes down the road. Some are captured in comments, others here.

• When clicking links, the background image (.bgimage) would reload and flash in Firefox. Now using htmx (hx-boost) in all links to replace only #main and keep the rest on the client (including the background) rather than reload the whole page.

• Chroma adds a focusable tabindex to pre elements, but I added a tabindex to the pre > code elements as well because it looks better for it to be scrollable on overflow than the pre block with that tiny bit of padding.

• Code block CSS rules got a little messy to accomodate Goldmark's various code block styles and also the custom scrollbars. There are three ways to code the code blocks (with a shortcode, backticks, or indented four spaces). For line numbers in code blocks, the table option is used to remove line numbers from copied content. Finally, the scrollbar customizations are different across browsers.

• I was going to be lazy and allow for only one author byline, but while creating the exampleSite with the Hugo Authors having created some existing content, I carried over the data/authors.yml feature to allow for multiple authors (such as on a site with syndicated contributors).

To Do:

• When testing on an actual mobile device, the side padding and margins needed to be cut dramatically for optimum content real estate. This was when it was clear that my choice of --variables could be better optimized for easier global changes. For example, instead of five gap and margin sizes, I could stick with fewer sizes and calc() as necessary so that refactoring the sizes is proportional (similar to ems and rems). Or, I could assign variables to specific purposes rather than generalizing them, such as assigning one variable to control all text that should be left-aligned along the same line.

• As much as I've tried to keep things nicely spaced, I feel the works listings might be a bit too rich with text, with not enough variation in the font sizes. I might want to have an option for a graphic, card-based portfolio instead. Any bugs, suggestions, or features you want? Don't hesitate to open a GitHub issue.

• Translate content and ensure all strings (including 'Copy'/'Copied' in Javascript) are enabled for xl8n. Also need a drop-down lang selector, and to also detect the locale's default.

• Fix shifting background on scroll of retracting address-bar on mobile.