Hi, 👋🏻  I made this neumorphic 😱 blog design using Gridsome.

I hope that you like it.
I had a lot of fun creating it.
Check out my personal site here.

Read Me 📚

I hope that this starter helps you create something wonderful! My personal site was needing an update and this is what I came up with. I hope that it helps you to more quickly make whatever it is that you're trying to make.

Development Notes

Bootstrap v5

I wanted to test out v5 of Bootstrap, so I used it on this site. This is using Bootstrap v5.0.0-beta1 so you should likely update it whenever there are new versions available. There are likely to be bugs I don't know about.

Search

I added search to the site using vue-fuse based on this wonderful tutorial. I added code into the gridsome.server.js file that on build creates a JSON file of the current blog posts. To update that JSON file with new posts you run gridsome build.

Skinny Responsive Containers

I made 2 custom containers for the site. The containers have an extra 32px gutter on the outside to match my custom grid spacing. They have media queries to make them responsive on all screen sizes.

• skinny-contain has a max width of 672px wide (640px of content space)
• slim-contain has a max width of 992px wide (960px of content space)

Dark Mode

I've added css classes that properly style the site for devices that use dark mode.