Portfolio Website

A modern, responsive portfolio website built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion.

🌟 Features

Responsive Design: Looks great on all devices
Dark/Light Mode: Automatic theme switching based on system preferences
Blog Support: MDX-based blog with syntax highlighting
Video Gallery: YouTube video integration
Gadgets Shop: Curated list of recommended products
Animations: Smooth page transitions and micro-interactions
GitHub Integration: Live GitHub contribution graph
GitHub Sponsors: Display your GitHub sponsors with beautiful cards
Twitter/X Testimonials: Showcase tweets about your work in a marquee
Command Palette: Quick navigation with Ctrl+K / Cmd+K
Smooth Cursor: Custom animated cursor effect
SEO Optimized: Meta tags and OpenGraph support
Performance Focused: Optimized for Core Web Vitals
Visitor Counter: Real-time unique visitor tracking with Upstash Redis

🚀 Tech Stack

Framework: Next.js 14
Language: TypeScript
Styling: Tailwind CSS
UI Components: shadcn/ui
Animations: Framer Motion
Content: MDX
Deployment: Vercel

📦 Installation

Clone the repository:

git clone https://github.com/StarKnightt/prasendev

Install dependencies:

npm install

Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

🔧 Configuration

Update src/data/resume.tsx with your personal information.
Add your blog posts in the content directory as MDX files.
Update src/data/products.ts to add your recommended products.
Customize theme colors in tailwind.config.ts.

🔑 Environment Variables

Create a .env.local file in the root directory with the following variables:

# GitHub Token (Required for GitHub Sponsors)
GITHUB_TOKEN=your_github_personal_access_token

# Upstash Redis (Required for Visitor Counter)
UPSTASH_REDIS_REST_URL=your_upstash_redis_url
UPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token

Setting up GitHub Token

Go to GitHub Settings > Developer Settings > Personal Access Tokens
Click "Generate new token (classic)"
Give it a name (e.g., "Portfolio Sponsors")
Select the following scopes:
- read:user - Read user profile data
- read:org - Read org membership (if applicable)
Click "Generate token" and copy it
Add it to your .env.local file

Note: The token is used to fetch your GitHub sponsors. Without it, the sponsors section will show an error.

🐦 Twitter/X Testimonials

To add testimonials from Twitter/X:

Open src/components/twitter-testimonials.tsx
Add tweet IDs to the tweetIds array:

const tweetIds = [
  "1862049464807989608", // @username
  "1868648019119522142", // @another_user
  // Add more tweet IDs here
];

To get a tweet ID:

Open the tweet on Twitter/X
Copy the URL: https://x.com/username/status/1234567890
The ID is the number at the end: 1234567890

👁 Visitor Counter

The portfolio includes a unique visitor counter powered by Upstash Redis. It tracks real visitors without counting refreshes.

How It Works

User visits site → Component fetches API → API checks cookie → Increment or not → Return count

Component (visitor-counter.tsx): Fetches count from API on page load
API Route (/api/visitor-count): Checks for cookie, increments count in Redis if new visitor
Upstash Redis: Stores the visitor count persistently in the cloud

Key Features

| Feature | How | |---------|-----| | No duplicate counting | Cookie prevents re-counting for 24 hours | | Persists across deploys | Count stored in external Redis database | | Thread-safe | Redis incr() is atomic | | Fast | Upstash is edge-optimized |

Setting up Upstash Redis

Go to upstash.com and sign up
Click Create Database → Name it (e.g., portfolio-visitors)
Select a region close to your users
After creation, go to the REST API section
Copy UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN
Add them to your .env.local file:

UPSTASH_REDIS_REST_URL=https://your-db.upstash.io
UPSTASH_REDIS_REST_TOKEN=your-secret-token

For Vercel deployment, add these in Settings → Environment Variables

Note: Without these environment variables, the visitor counter will show 0.

💖 GitHub Sponsors

The portfolio automatically displays your GitHub sponsors. Features include:

Sponsor avatar, name, and username
Beautiful card design with hover effects
"Sponsor me" button linking to your GitHub Sponsors page

To customize, edit src/components/github-sponsors.tsx.

📁 Project Structure

├── content/          # Blog posts (MDX)
├── public/           # Static assets
├── src/
│   ├── app/         # Next.js app router pages
│   ├── components/  # React components
│   ├── data/        # Data files and types
│   └── lib/         # Utility functions

🎨 Customization

Theme

The theme can be customized in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      primary: {...},
      secondary: {...},
    }
  }
}

Content

Update the following files to customize content:

src/data/resume.tsx: Personal information and experience
src/data/products.ts: Recommended products
content/*.mdx: Blog posts

📝 Adding Blog Posts

Create a new MDX file in the content directory:

---
title: "Your Post Title"
publishedAt: "2024-01-01"
summary: "Brief description of your post"
---

Your content here...

🛠️ Development

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

📱 Progressive Web App

This website is PWA-ready with:

Service Worker support
Offline functionality
Install prompt
App manifest

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Star History

🙏 Acknowledgments

shadcn/ui for the beautiful UI components
Framer Motion for animations
Tailwind CSS for styling
Next.js for the framework

📧 Contact

Your Name - @Prasenjit

Project Link: Try it here

Prasendev

Install / Use

README