Art Portfolio Site

Used for ctmartinart.com.

This public version has the artist's branding and artwork removed and features images of Columbo so you can see the project in action. Live exmaple of this repo is found at: artportfolio.helenmckay.dev

Tech Stack

• Astro (content collections schema in /src/content.config.mjs)
• React
• Motion
• Tailwind
  • Tailwind Typography
• TypeScript
• Pages CMS
• Cloudflare

Pages CMS

Pages CMS is a Git-based CMS that manages files directly in the repository.

👤 Log in via GitHub at app.pagescms.org.

💡The schema is in .pages.yml. Editing the schema edits what is available at the app.pagescms.org view.

📃 Pages CMS Docs are at: pagescms.org/docs

👇 Use Pages CMS to manage 👇

About Page (on site: /about)

• title *
• page meta description
• body (rich-text) **

Contact Page (on site: /contact)

• title
• page meta description
• body (rich-text) *

About Blurb (on site: /)

• body (rich-text) *

Events Collection (on site: /events, /)

Each Events Collection entry:

• title
• date
• image (stored in /public/events_media)
• alt text
• link
• location
• description (only shown on site at /)
• body (rich-text) *
• draft

Gallery Collection (on site: /gallery and /gallery/[title])

Each Gallery Collection entry:

• title (also sets the file name and page name (/gallery/[title])
• date
• main image (stored in /public/gallery_media)
• main image alt text
• detail images (stored in /public/gallery_media)
• category **
• dimensions
• sell status **
• prints avaialble
• tags (which are defined in the Tags Collection)
• store link --> link to specific store page for product listing
• instagram link --> link to specific instagram page for artwork
• body (rich-text) *
• draft

Tags Collection

Each Tags Collection entry:

• tag

Events Media

Stores images that were uploaded on an Events Collection entry or any you upload directly to this folder. You can rename or delete images here but collection entries using them will not automatically update their references.

Gallery Media

Stores images that were uploaded on an Gallery Collection entry or any you upload directly to this folder. You can rename or delete images here but collection entries using them will not automatically update their references.

👣 Footnotes 👣

*= Note, For Pages CMS's rich-text editing, highlight the text or right-click in the editor to get access to the advanced styles like headings, italics, bold, links, etc.

**= Note, Options set in data.json

Project Structure

• /public: not processed by Astro same way as /src/ items
  • /media: media uploaded via Pages CMS and accessed via Pages CMS collections and files
    • /events_media: for Event Collection entries
    • /gallery_media: for Gallery Collection entries
• /src
  • /assets/: site assets that get processed by Astro during build
    • /images/: various images used in the site
  • /components: Astro and React components
    • Carousel: for art posts that have detailImages
    • EventAccordion
    • GalleryCard
    • GalleryFilter
    • Hamburger
    • Hero
    • Footer
    • Header
    • Prose (there is an Astro version and a React version; both are used)
  • /content: Markdown files created by Pages CMS and rendered via Astro content collections (which is configured in content.config.ts)
    • /events: Events Collection entries (Markdown)
    • /gallery: Gallery Collection entries (Markdown)
    • /tags: Tags Collection entries (Markdown)
    • AboutBlurb.md: About Blurb (Markdown)
  • /layouts: Astro layouts
    • Base
    • Markdown (built on top of Base)
  • /pages: The site pages (the Astro marriage of layouts and content collections)
    • /gallery
      • /gallery/
      • /gallery/[title]
    • 404: all routes not otherwise defined get served this 404 error page
    • /about (about.md)
    • /contact (contact.md)
    • /events (events.md)
    • / (index.astro)
• /styles/
  • /global.css: for global styles

On Styles

This projects' styles are a mix of global, Astro Component scoped styles, separate stylesheets, and Tailwind classes (including Typorgraphy, used in the Prose elements). Scoped styles and separate stylesheets still adhere to the Tailwind styles' spacing, colors, and so on.

To ensure consistency in all browsers, (looking at you, Safari), decisions about layout such as flex adn grid, are all done in regular CSS in either scoped styles or separate stylesheets, instead of Tailwind classes.

Tailwind Typography

Docs for Tailwind Typography are here: github.com/tailwindlabs/tailwindcss-typography.

Apply prose-* Tailwind classes to the Prose components to exert finer control over how Markdown elements are rendered.

Road map for future features

• Implement props interfaces for React components
  • cannot use astro:content in React files
• Full-page version of art on click on solo pages
• Make the gallery filter event listeners consistent with hamburger menu's
• Get React Markdown rendering correctly in the event accordion bodies