Skip to content

Minimalistic Art showcase built with Astro and connected with Notion API

Notifications You must be signed in to change notification settings

EmaSuriano/astro-art-portfolio

Repository files navigation

astro-art-portfolio

Main Dependabot Status Netlify Status This project is using Percy.io for visual regression testing.

Art portfolio built with Astro and using Notion API.

Screenshots 📸

Description Light Dark
Home Home - Light Home - Dark
Gallery Gallery - Light Gallery - Dark
About About - Light About - Dark

Features 🚀

Lighthouse report 💯

Mobile Desktop
Lighthouse mobile report Lighthouse desktop report

Setup 📦

  • Duplicate the following notion page
  • Replace the default values with your pictures and labels. The images are created based on: [label] [link].
  • Clone repository,
  • Install dependencies by running: yarn install
  • Rename the file called .env.example to .env file and fill all the values.
  • You can find how to get these values for your page inside the official documentation of Notion.

Force theme colors

I added a mechanism to force the theme of the website, in case you don't like the default behavior of Dark Mode in Tailwind. Simply modify your deployment script in order to use:

To force light theme
build:light
To force dark theme
build:dark

Automate deploy of website 🚀 (Optional)

Given that this project is a static website, you are force to trigger a deploy in order to reflect the latest changes inside our Notion database. This process can be easily automatized using many of the existing providers out there.

In my case, I'm currently using Zapier due to it provides compability with many services, and in this case with the ones that I need: Notion and Netlify. I created a shared zap that anyone can start using now!

Zapier template

Commands 🧞

All commands are run from the root of the project, from a terminal:

Command Action
yarn Installs dependencies
yarn dev Starts local dev server at localhost:3000
yarn build Build your production site to ./dist/
yarn preview Preview your build locally, before deploying
yarn astro ... Run CLI commands like astro add, astro preview

License 🗒

MIT.