Implement redesign of portfolio example

[delucis]

Changes

• Replace our current portfolio example with a new design by @doodlemarks

This is a more fully featured example than some of our more basic starters, so closer to a real “theme”. I think that was the general idea with this, so hopefully that’s OK. The starter does not include any dependencies apart from astro but does add some custom components including an <Icon> that contains the icons Mark suggested from the Phosphor icon set.

Try it on StackBlitz →

Questions

• The original design used Public Sans for body text. I’ve stuck with this for now, but is there an argument for dropping Public in favour of a system font? Public is a fairly similar sans to the default sans-serif bundled on most devices and we’re already loading Rubik as a custom font for headings.

• Should this be our first full example that uses Content Collections? This example already includes a type for frontmatter and suffers from the style bleed issue when globbing projects for the homepage/work index, so could make sense to set those up a schema?

• There is some complexity getting all the background gradient images to work nicely, including multiple resolutions per background and some custom lazy loading for below the fold backgrounds. Is this too much complexity for a theme like this? Maybe there’s some alternative design approach that is lighter and we use background images just for the page headers.

To-do

• Some astro check errors in CI — will clean those up

Light mode

Dark mode

Testing

• Lots of manual testing during development across browsers & devices — more eyes always appreciated.
• All pages pass accessibility audits.

Docs

We don’t generally document much for these, so guess we stick to that pattern? The screenshot on astro.new will need updating.

[natemoo-re]

This is looking amazing! Had a few small copy comments, recognizing this is all placeholder content.

I also think using Content Collections would be ideal here since we're excited about it and people will be looking for examples of it 👍🏻

[tony-sull]

This is looking great! Followed up with Chris offline to dig into the background images and perf testing, notes below

• looked like the SVG used for background noise was still going to be a perf issue, moving to a tiled PNG
• sticking with Google Fonts to avoid extra NPM deps, lighthouse scores look good enough for the trade-off in simplicity for a starter
• content collections API should clean up style bleed issues