https://github.com/evavic44/sanity-nextjs-site
Modern portfolio site built with Next.js 13, Sanity, Tailwind CSS and TypeScript
https://github.com/evavic44/sanity-nextjs-site
app-dir freecodecamp nextjs nextjs13 portfolio sanity tailwindcss typescript
Last synced: 21 days ago
JSON representation
Modern portfolio site built with Next.js 13, Sanity, Tailwind CSS and TypeScript
- Host: GitHub
- URL: https://github.com/evavic44/sanity-nextjs-site
- Owner: Evavic44
- Created: 2023-07-19T03:12:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-10T22:25:02.000Z (12 months ago)
- Last Synced: 2025-04-11T18:07:32.344Z (21 days ago)
- Topics: app-dir, freecodecamp, nextjs, nextjs13, portfolio, sanity, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://sanity-nextjs-site.vercel.app
- Size: 426 KB
- Stars: 85
- Watchers: 3
- Forks: 16
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Sanity.io + NextJS Portfolio Site
A portfolio template built with Next.js, Tailwind CSS and Sanity.io for content
To use this template for your portfolio site, follow the guide: [How to build a Portfolio Site with Sanity and Next.js][freecodecamp-guide] to learn how to set-up your Sanity account and connect the schema data
## Features
- A performant, static personal personal website with editable projects
- Manage portfolio content through sanity content lake by visiting `yourwebsite.com/studio`
- Webhook-triggered continuous deployment; Content updates will automatically trigger a build command
- Built with cutting-edge technologies: Next.js 13, TypeScript, Tailwind CSS
## Project Overview
| [Personal Website][site] | [Studio][studio] |
| --------------------------------- | -------------------------------- |
| ![Personal Website][site-preview] | ![Sanity Studio][studio-preview] |
### Important files and folders
| File(s) | Description |
| --------------------------------------------------------- | ----------------------------------------------- |
| [`sanity.config.ts`](sanity.config.ts) | Config file for Sanity Studio |
| [`sanity.client.ts`](sanity/sanity.client.ts) | Config file for Sanity CLI |
| [`studio`](<./app/(studio)/studio/[[...index]]/page.tsx>) | Where Sanity Studio is mounted |
| [`schemas`](./schemas) | Where Sanity Studio gets its content types from |
| [`sanity.query.ts`](./sanity/sanity.query.ts) | Where Sanity data is described and retrieved |
## Run project locally
```bash
git clone https://github.com/Evavic44/sanity-nextjs-site.git
cd sanity-nextjs-site
npm install
npm run dev
```
Visit [http://localhost:3000][localhost-3000] to see your site
Visit [http://localhost:3000/studio][localhost-3000-studio] to edit content
## Next steps
- [How to query content?][sanity-groq]
- [Sanity + NextJS Blog Template][other-templates]
[site]: https://sanity-nextjs-site.vercel.app
[studio]: https://sanity-nextjs-site.vercel.app/studio
[site-preview]: https://github.com/Evavic44/sanity-nextjs-site/assets/62628408/46229dc5-e925-4608-909a-848163dd491a
[studio-preview]: https://github.com/Evavic44/sanity-nextjs-site/assets/62628408/53148f15-3b59-4e78-b072-bb0143f8fe81
[sanity-homepage]: https://www.sanity.io
[sanity-groq]: https://www.sanity.io/docs/how-queries-work?utm_source=github.com&utm_medium=referral&utm_campaign=nextjs-v3vercelstarter
[localhost-3000]: http://localhost:3000
[localhost-3000-studio]: http://localhost:3000/studio
[freecodecamp-guide]: https://www.freecodecamp.org/news/how-to-build-a-portfolio-site-with-sanity-and-nextjs/
[other-templates]: https://github.com/sanity-io/sanity-template-nextjs-appdir-personal-website