Developer Portfolio Site with Next.js

This is a full-fledged portfolio website built with Next.js, Tailwind CSS and Netlify Create with Git Content Source.

Author Netlify
Github Stars 27
Last Commit Dec 16, 2024
Developer Portfolio Site with Next.js screenshot

This is a full-fledged portfolio website built with Netlify Create, Next.js, Tailwind & the Git Content Source.

The codebase showcases how to apply annotations at scale, meaning: how to make much of your components highlightable in the visual editor through data attributes without manually adding code throughout the codebase.

This is achieved by:

  • Adding an annotation property to the content objects at they’re loaded (see src/utils/content.ts)
  • When rendering the page, each content sub-object is dynamically matched to the appropriate component. At this point, wrap each component with an annotation, based on the abovementioned content property. See src/components/components-registry.tsx.