WIZARD OF OZ Portfolio

A beautifully crafted, modern portfolio landing page built with Next.js, React 19, and Tailwind CSS 4. Featuring dynamic real-time integrations for Spotify, Discord, and GitHub to showcase exactly what you're up to right now.

🌐 Live Demo: https://wizardportfolio.vercel.app/

---

📸 Screenshots

Click to view screenshots

Desktop View	Mobile View

---

✨ Features

• 🎨 Modern Glassmorphism UI: Beautiful frosted-glass effects with a mesmerizing Aurora background.
• 📱 Fully Responsive: Scales flawlessly from mobile screens to ultrawide desktops.
• 🎵 Live Spotify Widget: Automatically displays your currently playing track on Spotify, complete with album art and a real-time progress bar.
• 🎮 Live Discord Status: Shows your real-time Discord presence (Online, Idle, DND) and current rich presence activity.
• 🐙 GitHub Stats Widget: Pulls your GitHub profile stats dynamically, including total stars, followers, and top repositories.
• ⚡ Super Fast & Lightweight: Built on top of the latest Next.js App Router for optimal performance.

---

🛠️ Architecture & Tech Stack

graph TD
    A[Client UI - React 19] --> B(Next.js App Router)
    B --> C{API Routes}
    C -->|Fetch| D[Spotify API]
    C -->|Fetch| E[Discord Lanyard/API]
    C -->|Fetch| F[GitHub API]
    A -.->|Styled with| G[Tailwind CSS 4]
    A -.->|Animations| H[Framer Motion]

Loading

Core Technologies

• Framework: Next.js (v16.2.7)
• UI Library: React (v19.2)
• Styling: Tailwind CSS (v4)
• Animations: Framer Motion
• Icons: React Icons & Lucide

---

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have Node.js (v18 or higher) and npm/yarn/pnpm installed.

1. Clone the repository

git clone https://github.com/WIZARDOF-OZ/portfolio.git
cd portfolio

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Get Your Spotify Refresh Token

The Spotify widget requires a Refresh Token to fetch your currently playing track. Follow these steps to generate one:

Click to expand the full walkthrough

Step 1 — Create a Spotify App

1. Go to the Spotify Developer Dashboard.
2. Log in with your Spotify account and click "Create App".
3. Fill in the details:
   • App name: Anything (e.g. My Portfolio)
   • App description: Anything
   • Redirect URI: http://localhost:3000/callback
4. Check the Web API checkbox and click Save.
5. Once created, go to Settings and note down your Client ID and Client Secret.

Step 2 — Authorize Your Account

Open the following URL in your browser, replacing YOUR_CLIENT_ID with the one from Step 1:

https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=http://localhost:3000/callback&scope=user-read-currently-playing%20user-read-playback-state

This will redirect you to a URL like:

http://localhost:3000/callback?code=AQD...very_long_code

Copy the code value from the URL (everything after ?code=).

Step 3 — Exchange the Code for a Refresh Token

Run this curl command in your terminal (replace the three placeholders):

curl -d client_id=YOUR_CLIENT_ID \
     -d client_secret=YOUR_CLIENT_SECRET \
     -d grant_type=authorization_code \
     -d code=YOUR_CODE_FROM_STEP_2 \
     -d redirect_uri=http://localhost:3000/callback \
     https://accounts.spotify.com/api/token

Or the PowerShell equivalent:

Invoke-RestMethod -Method Post -Uri "https://accounts.spotify.com/api/token" -Body @{
    client_id     = "YOUR_CLIENT_ID"
    client_secret = "YOUR_CLIENT_SECRET"
    grant_type    = "authorization_code"
    code          = "YOUR_CODE_FROM_STEP_2"
    redirect_uri  = "http://localhost:3000/callback"
}

Step 4 — Save the Refresh Token

The response will look like:

{
  "access_token": "BQ...",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "AQA...",   // <-- THIS is what you need
  "scope": "user-read-currently-playing user-read-playback-state"
}

Copy the refresh_token value. This token does not expire and will be used in your .env.local file.

4. Environment Variables

Create a .env.local file in the root directory. You will need API keys for Spotify, Discord, and GitHub integrations.

# Example .env.local
SPOTIFY_CLIENT_ID=your_client_id
SPOTIFY_CLIENT_SECRET=your_client_secret
SPOTIFY_REFRESH_TOKEN=your_refresh_token
GITHUB_TOKEN=your_github_personal_access_token
DISCORD_USER_ID=your_discord_id

5. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser to view the portfolio.

---

🧑‍💻 Customization Guide

Want to make this portfolio your own? Here's where to look:

1. Personal Info: Open src/app/page.tsx to update the name, bio, and social links.
2. Styling Tweaks:
   • Global styles and Tailwind configuration are mostly handled by utility classes.
   • The Aurora background blobs can be adjusted directly in the <main> tag of src/app/page.tsx.
3. API Logic: Check the Next.js API routes inside your project to customize how the Spotify, Discord, and GitHub data is fetched.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request if you want to contribute.

---

📜 License

This project is open-source and available under the MIT License.

---

Built with ❤️ by Rizuwanul