React Templates & Themes Logo React Templates & Themes
Victoreke.com screenshot

Victoreke.com

Author Avatar Theme by Evavic44
Updated: 15 Mar 2025
351 Stars

My personal portfolio website built with Next.js, Sanity and Tailwind CSS.

Github Live Preview

Categories

Nextjs Styled components Tailwind Planetscale Sanity Blog Personal Portfolio Fullstack

Overview:

Tech StackNextJS is used as the UI framework, Vercel for hosting and deployment, Sanity.io as the Headless CMS, and Content Lake, TailwindCSS and CSS for styling and UI, Umami for analytics, Next Themes as the Color Theme, and React Refractor for Syntax Highlighting. The project consists of a site and a Sanity Studio.

Features:

  • NextJS: Provides a powerful UI framework for the project.
  • Vercel: Offers seamless hosting and deployment services.
  • Sanity.io: Acts as the Headless CMS and Content Lake for managing content.
  • TailwindCSS / CSS: Used for styling and UI design.
  • Umami: Provides analytics for the site.
  • Next Themes: Offers a color theme for the project.
  • React Refractor: Enables syntax highlighting within the project.

Installation:

  1. Clone the repository locally.
  2. Rename .env.example to .env.local.
  3. Retrieve the required environment variables from Sanity:
    • Project Id
    • Dataset
    • API Version
    • Access Token (optional)
  4. Set up your own Sanity instance by following the steps provided in the documentation.
  5. Update the environment variables in the repository:
    • Set NEXT_PUBLIC_SANITY_PROJECT_ID to the project id.
    • Set NEXT_PUBLIC_SANITY_DATASET to either ‘production’ or the dataset name.
    • Set NEXT_PUBLIC_SANITY_API_VERSION to the current date in YYYY-MM-DD format.
    • If using an access token, create one from Sanity and set NEXT_PUBLIC_SANITY_ACCESS_TOKEN to the generated token.
  6. Run npm run dev and visit http://localhost:3000 to view the live project.
  7. Access http://localhost:3000/studio to start adding data to the site through the Sanity Studio.

Summary:

The project utilizes NextJS as the UI framework, Vercel for hosting, Sanity.io for content management, and TailwindCSS/CSS for styling. It also integrates Umami for analytics, Next Themes for color themes, and React Refractor for syntax highlighting. By following the installation guide, users can set up the project locally, configure essential environment variables, and start running the project with live preview and content management capabilities through Sanity Studio.