Portfolio

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Sanity Setup

This project uses Sanity as a CMS. To set up Sanity for local development:

1. Create a Sanity Project:

   • Go to Sanity.io and create a new project.
   • Note down the Project ID and Dataset name (usually production).

2. Add Environment Variables:

   • Add the following to your .env.local file:

     NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
     NEXT_PUBLIC_SANITY_DATASET=your_dataset_name
     NEXT_PUBLIC_SANITY_API_VERSION=2025-06-11

3. Run Sanity Studio:

   • The Sanity Studio is available at /studio route within your Next.js app.
   • You can also run it separately using sanity dev if you have the Sanity CLI installed globally.

Spotify Setup

To display your currently playing track from Spotify, you'll need to set up Spotify integration. Here's how:

1. Get a Spotify Refresh Token:

   • Visit https://spotify-refresh-token-generator.netlify.app
   • Follow the instructions on the website to authenticate with your Spotify account and generate a refresh token.
   • Copy the generated refresh token.

2. Add Environment Variables:

   • Add the following to your .env.local file:

     SPOTIFY_CLIENT_ID=your_spotify_client_id
     SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
     SPOTIFY_REFRESH_TOKEN=your_generated_refresh_token

   

Lanyard Setup

This project uses Lanyard to display your Discord status. To set it up:

1. Join the Lanyard Discord Server:

   • Go to https://lanyard.rest and join the Discord server.
   • Once you're in the server, your Discord ID will be automatically tracked by Lanyard.

2. Configure Your Discord ID:

   • In src/components/home/client-discord-card.tsx, replace the DISCORD_ID value with your actual Discord ID:

     const DISCORD_ID = "YOUR_DISCORD_ID_HERE"; // Replace with your actual Discord ID

   

Project Structure

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.