NeuVision is a free and open-source Gatsby JS starter template that produces a static website with a neumorphic UI and built-in AMP readiness, created by designer Kayla Gordon.
What is NeuVision Gatsby Template?
NeuVision is a Gatsby starter for building static sites in the neumorphism design style, where elements use soft shadows and extruded surfaces instead of flat color. It takes a standard Gatsby project and your specified website domain as inputs, and outputs an AMP-ready static website that is ready to deploy. The template is designed and created by Kayla Gordon, with a live demo hosted on Netlify, and the repository is distributed on GitHub with open-source accessibility.
Key Features
- Neumorphic UI — The whole template is styled with a neumorphic design language, using soft shadows and tonal contrast to create raised and recessed elements.
- AMP ready out of the box — The project is configured for AMP; after you add your domain to the config files, the generated pages are AMP-valid.
- Gatsby JS framework — Built on Gatsby, a React-based static site generator, so the output is a fast, pre-rendered static site with access to the Gatsby plugin ecosystem.
- Canonical URL integration — Uses
gatsby-plugin-react-helmet-canonical-urls; you set your domain in thegatsby-config.jsfile and theseo.jscomponent. - AWS Amplify auth starter guidance — The README links to a Gatsby Auth starter with AWS Amplify, a tutorial for adding user login and registration to your NeuVision site.
- Community contribution flow — The author invites improvements and pull requests, and the repository carries starter-related topics like gatsby-starter, gatsbyjs, and neumorphic-ui.
Who is NeuVision for?
- Gatsby developers who want a ready-made neumorphic starter can clone the repository and replace the placeholder domain and content with their own to publish a site quickly.
- Portfolio and personal website owners can use the soft neumorphic styling to give a distinctive look without hiring a designer.
- Developers needing AMP compliance benefit from the pre-configured AMP setup that only requires a domain swap in two files.
- Open-source contributors can fork the repo, implement neumorphic component improvements, and send a pull request to the author.
What can you do with NeuVision?
- Build a portfolio site: use the template's neumorphic components and AMP config as the foundation for a designer's or developer's personal portfolio.
- Prototype an auth-enabled app: follow the linked AWS Amplify auth starter to add user registration and login to the Gatsby site.
- Learn Gatsby and AMP: study the project structure to see how a template wires up React Helmet canonical URLs and AMP support inside Gatsby.
How does NeuVision work?
Set-up is minimal: search the project for "your-website" (the README recommends using VS Code), then replace that placeholder with your actual website domain in both the gatsby-config.js file under the canonical URLs plugin settings and the seo.js component. After that, the site builds as an AMP-ready static website.
FAQ
Is NeuVision free to use?
Yes. The repository description says "Feel free to use and improve!", and the author welcomes improvements via pull requests. No license or pricing is mentioned in the source.
Is NeuVision AMP ready?
Yes, it is AMP ready out of the package. The configuration requires adding your website domain to the gatsby-config.js file and the seo.js component before the generated pages carry the correct AMP canonical URLs.
How do I configure my own domain?
Open the project in an editor such as VS Code, search for the string "your-website", and replace every occurrence with your actual website domain. The README specifically points to the gatsby-plugin-react-helmet-canonical-urls settings in gatsby-config.js and the seo.js component.
Can I add user login and registration to NeuVision?
Yes. The README links to "Gatsby Auth starter with AWS Amplify", a tutorial repository for adding authentication to a Gatsby site. This gives you a starting point for integrating AWS Amplify into NeuVision.
