Portfolio Website

1. Set up Sanity CMS:
   • Define a schema for your projects in Sanity Studio. For example, create a project document type with fields like title, description, image, link, etc.
2. Query Data in Astro.js:
   • Update your sanity.js file to fetch project details:

javascriptCopy codeimport sanityClient from '@sanity/client';

const client = sanityClient({
projectId: 'your-project-id',
dataset: 'your-dataset-name',
useCdn: true,
});

export async function getPortfolioData() {
const query = `*[_type == "project"] { title, description, image { asset { _id, url } }, link }`;

return await client.fetch(query);
}

1. Create Portfolio Component:
   • Update your portfolio.astro file to include project details:

javascriptCopy code---
import { getPortfolioData } from './sanity.js';
---

<h1>Your Portfolio</h1>

<ul> {getPortfolioData().map((project) => ( <li key={project.title}> <h2>{project.title}</h2> <p>{project.description}</p> <img src={project.image.asset.url} alt={project.title} /> <a href={project.link} target="_blank" rel="noopener noreferrer"> View Project </a> </li> ))} </ul>

1. Render Data:
   • Update your entry point (e.g., index.astro) to import and render your portfolio.astro component:

javascriptCopy code---
import './portfolio.astro';
---

1. Run Your Astro Project:
   • Run your Astro project:

bashCopy codenpm start

• Open your browser and navigate to the specified localhost address.

This enhanced example includes project details like images and links. Customize the schema in Sanity Studio and adjust the queries and components based on your specific project requirements and design preferences.