advanced-astro/astro-art-portfolio

Minimalistic Art showcase built with Astro and connected with Notion API

astro-art-portfolio

Art portfolio built with Astro and using Notion API.

Demo ✨

Screenshots 📸

Description	Light	Dark
Home
Gallery
About

Features 🚀

• Astro
• Notion API
• Tailwind CSS with dark/light theme enabled
• Github workflow + Dependabot setup
• Typescript out of the box
• Gallery powered by photoswipe
• File compression with astro-compress
• 💯 Lighthouse score
• Icon supports with astro-icon

Lighthouse report 💯

Mobile	Desktop

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, and create an .env file at the root level and define the following variables:

NOTION_API_KEY=
DATABASE_ID=

• You can find how to get these values for your page inside the official documentation of Notion.

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!

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.