{"repo":"netlify-templates/auto-annotated-portfolio","free":true,"listed":false,"github":"https://github.com/netlify-templates/auto-annotated-portfolio","clone":"git clone https://github.com/netlify-templates/auto-annotated-portfolio.git","description":"This is a full-fledged portfolio website built with Next.js, Tailwind and Netlify Create with Git Content Source.","language":"TypeScript","stars":62,"topics":["nextjs","tailwindcss","template","visual-editor"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Netlify Developer Portfolio Starter (auto-annotated) This is a full-fledged portfolio website built with Next.js, Tailwind CSS, visual editor and 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: 1. Adding an annotation property to the content objects at they're loaded (see src/utils/content.ts ) 1. 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 . ⚡ Demo: auto-annotated-portfolio.netlify.app Deploying to Netlify If you click \"Deploy to Netlify\" button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify. Getting Started The typical development process is to begin by working locally. Clone this repository, then run npm install in its root directory. Run the Next.js development server: Install the Netlify visual editor CLI. Then open a new terminal window in the same project directory and run the Netlify visual editor dev server: This outputs your own Netlify visual editor URL. Open this, register or sign in, and you will be directed to Netlify's visual editor for your new project. Next Steps Here ar","default_branch":null,"files":null,"tree":[],"storefront":"/r/netlify-templates","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/netlify-templates/auto-annotated-portfolio/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}