Getting Started

Welcome to your new portfolio starter template! This guide will walk you through the initial setup and customization process, helping you create a stunning portfolio website that showcases your work and skills using Astro and Sanity. Let’s GO 🚀

Prerequisites

Before you begin, make sure you have the following installed:

Node.js (version 16 or later)
npm (usually comes with Node.js)
Git (for version control)
A code editor (we recommend Visual Studio Code)
A Sanity account (free tier available)
A Resend account for email notifications (free tier available)

Step 1: Project Setup

Extract the .zip file you received after purchase.
Open the extracted folder in your preferred code editor (e.g., VS Code).
Open your terminal ctrl + ~ and Install the project dependencies:
Terminal window
```
npm install
```
Create a new Sanity project:
- Go to sanity.io and sign in or create a new account.
- Click on “Create new project” and follow the prompts to set up your Sanity studio.
- Copy the Project ID, as you’ll need it for configuration.

Set up environment variables:

Rename .env.example to .env

Replace the placeholder values with your Sanity credentials:

SANITY_PROJECT_ID=your_sanity_id
SANITY_TOKEN=your_sanity_api_token (You can get it from the next step)
RESEND_API_KEY=your_resend_api_key
NOTIFICATION_EMAIL=your_email@example.com (The email should be the same as the one you used to sign up on Resend)

Note: leave SANITY_DATASET as it is.

Obtain a Sanity API token:
- Log in to your Sanity account and go to your project settings.
- Navigate to the “API” section.
- Click “Tokens,” and Click “Add API token.”
- Give your token a name (e.g., “Portfolio Token”) and select the appropriate permissions (usually “Read” and “write” access to all datasets, with access to project settings for developers).
- Click on save.
- Copy the generated token and paste it into your .env file as the SANITY_TOKEN value.
Note: The token permissions might change from “Read and Write” to “Read” after the free 30-day trial for extra features (like AI tools). However, Sanity itself remains free to use.
Set up Resend for contact form emails:
- Sign up for a free account at resend.com
- Once logged in, navigate to the API Keys section
- Create a new API key and copy it
- Add it to your .env file as RESEND_API_KEY
- Add your email address where you want to receive notifications to NOTIFICATION_EMAIL (which is always the email address you used to open your resend account)

Step 2: Configuration

Navigate to astro.config.mjs and replace the projectId with your projectId

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import sanity from "@sanity/astro";
import { imageService } from "@unpic/astro/service";
import netlify from "@astrojs/netlify";

export default defineConfig({
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
    react(),
    sanity({
      projectId: "your_project_id", // Replace with your actual project ID
      dataset: "production",
      useCdn: false,
      studioBasePath: "/admin",
      stega: {
        studioUrl: "/admin",
      },
    }),
  ],
  output: "server",
  devToolbar: {
    enabled: false,
  },
  server: {
    port: 3000,
  },
  adapter: netlify(),
  image: {
    service: imageService({
      placeholder: "blurhash",
    }),
    remotePatterns: [{ protocol: "http" }, { protocol: "https" }],
  },
});

Update sanity.config.ts with your Sanity projectId and you can change the title to the project name of your sanity studio:

import { defineConfig } from "sanity";
import { structureTool } from "sanity/structure";
import { visionTool } from "@sanity/vision";
import { schemaTypes } from "./schemaTypes";
import { presentationTool } from "sanity/presentation";
import { media } from "sanity-plugin-media";
import { getSiteSettings } from "@/lib/helper";

const siteSettings = await getSiteSettings();
const colorPreset = siteSettings?.colorScheme?.preset || "default";

// Map your color presets to their hex values
const colorMap = {
  default: "1406e0",
  orange: "f97316",
  blue: "3b82f6",
  red: "ef4444",
  rose: "f43f5e",
  green: "22c55e",
  yellow: "eab308",
  violet: "8b5cf6",
};

type ColorPreset = keyof typeof colorMap;

const selectedColor =
  colorMap[colorPreset as ColorPreset] || colorMap.default;

const { createTheme, hues } = await import(
  /* @vite-ignore */
  `https://themer.sanity.build/api/hues?primary=${selectedColor || ""}`
);

const SANITY_STUDIO_PREVIEW_URL =
  import.meta.env.SANITY_STUDIO_PREVIEW_URL || "http://localhost:3000/";

export default defineConfig({
  theme: createTheme({
    ...hues,
    primary: { ...hues.primary, mid: `#${selectedColor}` },
  }),

  name: "default",
  title: "developer-template-studio", // Change this to your project name

  projectId: "your_project_id", // Replace with your actual project ID
  dataset: "production",

  plugins: [
    structureTool(),
    visionTool(),
    presentationTool({
      previewUrl: `${SANITY_STUDIO_PREVIEW_URL}?preview=true`,
    }),
    media({
      creditLine: {
        enabled: true,
        excludeSources: ["unsplash"],
      },
      maximumUploadSize: 10000000,
    }),
  ],

  schema: {
    types: schemaTypes,
  },
});

Update sanity.cli.ts with your Sanity projectId:

import { defineCliConfig } from "sanity/cli";

export default defineCliConfig({
  api: {
    projectId: "your_project_id",
    dataset: "production",
  },
});

Step 3: Import Preconfigured Dataset

Run the following command in your terminal:
```
sanity dataset import data.zip production
```
This will load the placeholder content into your Sanity project.

Step 5: Preview Your Site

Run the development server:
Terminal window
```
npm run dev
```
Open your browser and go to http://localhost:3000 to see your site.

Step 5: Customize your site

Once you’ve started the development server, you can easily customize your portfolio directly from Sanity by 👇🏼

Opening a new tab on your browser and go to http://localhost:3000/admin to see your studio.

You’ll see a pop up to add your link to cors

Click on the link and add the link to the cors

Then you will be prompted to sign in with your Sanity credentials.

Step 6: Building for Production

When you’re ready to deploy:

Build your site:
Terminal window
```
npm run build
```
The output will be in the dist/ folder, ready for deployment.

Troubleshooting Contact Form

If you’re experiencing issues with the contact form:

Check your environment variables are correctly set
Verify your Resend API key is valid
Ensure your notification email is correctly formatted
Check the browser console and server logs for any error messages
Verify that your domain is properly configured in Resend (for production use)

Need Help?

If you encounter issues or need help, feel free to contact us:

Email: lawrencestixx@gmail.com
Community: Access to our private Discord is available for customers. Check your purchase confirmation email for details.

Happy portfolio building 😀!