Introduction

Gatsby Agency Portfolio is a sophisticated and modern portfolio client specifically designed for creative agencies. Built using Gatsby, a powerful static site generator, this portfolio template offers a sleek and professional way to showcase agency work. It integrates seamlessly with Cosmic JS, a headless CMS, allowing for easy content management and updates.

Main Features

1. Gatsby-powered static site for optimal performance
2. Integration with Cosmic JS for content management
3. Responsive design suitable for various devices
4. Custom portfolio layout for showcasing agency projects
5. Easy customization and configuration
6. SEO-friendly structure
7. Fast loading times due to static site architecture
8. Seamless deployment options

Installation Steps

1. Clone the repository:

   git clone https://github.com/cosmicjs/gatsby-agency-portfolio
   

2. Navigate to the project directory:

   cd gatsby-agency-portfolio
   

3. Install dependencies:

   npm install
   

   or

   yarn install
   

4. Create a .env file in the project root and add your Cosmic JS credentials:

   COSMIC_READ_KEY=your-cosmic-js-read-key
   COSMIC_BUCKET_SLUG=your-cosmic-bucket-slug
   

5. Start the development server:

   gatsby develop
   

6. Open your browser and visit http://localhost:8000 to see your site.

Usage Instructions

1. Customizing Content:

   • Log in to your Cosmic JS account and navigate to your bucket
   • Add or edit content types and objects to reflect your agency's portfolio
   • Changes will automatically reflect in your Gatsby site

2. Modifying Styles:

   • Edit CSS files in the src/styles directory to customize the look and feel

3. Adding New Pages:

   • Create new React components in the src/pages directory
   • Use Gatsby's routing system to link to new pages

4. Querying Data:

   • Utilize GraphQL queries in your components to fetch data from Cosmic JS
   • Use the GraphiQL tool at http://localhost:8000/___graphql for query testing

5. Building for Production:

   • Run gatsby build to create a production-ready version of your site
   • The built files will be in the public directory

6. Deploying:

   • Choose a hosting platform (e.g., Netlify, Vercel)
   • Connect your GitHub repository to the chosen platform
   • Configure build settings and deploy

Important Notes

1. Ensure your Cosmic JS bucket is properly set up with the required content types before starting development.

2. Regularly update Gatsby and other dependencies to access new features and security updates.

3. Optimize images and assets for web to maintain fast loading times.

4. Utilize Gatsby's image optimization features for better performance.

5. Implement proper SEO practices, including meta tags and structured data.

6. Test your site thoroughly on various devices and browsers to ensure responsiveness.

7. Make use of Gatsby's plugin ecosystem to extend functionality as needed.

8. Implement analytics to track visitor engagement and portfolio performance.

9. Regularly backup your Cosmic JS bucket to prevent data loss.

10. Consider implementing a staging environment for testing changes before deploying to production.