Sleek Portfolio by nikhilesh

A modern, responsive portfolio website built with Next.js 15, TypeScript, Tailwind CSS, and Shadcn UI. Features a blog system, project showcase, work experience timeline, real-time GitHub integration, and contact form with Gmail/Nodemailer support.

Deploy

Click here to your portfolio template now:

Features

• Next.js 15 with App Router
• Tailwind CSS for styling
• Shadcn UI components
• Dark/Light mode
• Responsive design
• MDX for blog posts and project details
• Contact Form with Nodemailer (Gmail) integration
• GitHub Integration for real-time stats fetching
• SEO optimized
• TypeScript for type safety
• Umami Analytics for privacy-focused web analytics

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• Bun (preferred) or npm

Environment Variables

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

GITHUB_TOKEN="your-github-personal-access-token"
GMAIL_USER="your-email@gmail.com"
GMAIL_APP_PASSWORD="your-gmail-app-password"
NODE_ENV="development"
NEXT_PUBLIC_URL="http://localhost:3000"
NEXT_PUBLIC_UMAMI_SRC="your-umami-script-url"
NEXT_PUBLIC_UMAMI_ID="your-umami-website-id"

Setting up Gmail Contact Form Integration

1. Go to your Google Account Settings -> Security
2. Enable 2-Step Verification if you haven't already
3. Create an App Password for your account (search for "App passwords" in settings)
4. Add your email address to your .env file as GMAIL_USER
5. Add the generated 16-character App Password to .env as GMAIL_APP_PASSWORD

Setting up GitHub Stats Integration

1. Go to your GitHub Developer Settings -> Personal access tokens (classic)
2. Generate a new token (no specific scopes required for public profile fetching)
3. Copy the token and add it to your .env file as GITHUB_TOKEN

Setting up Umami Analytics

1. Visit Umami:

   • Self-host Umami or use Umami Cloud
   • Follow Umami's installation guide

2. Get your credentials:

   • Copy your Umami script URL (ends with /script.js)
   • Get your website ID from Umami dashboard

3. Configure environment variables:

   NEXT_PUBLIC_UMAMI_SRC="https://[your-umami-instance]/script.js"
   NEXT_PUBLIC_UMAMI_ID="your-website-id"

Getting Started

1. Clone the repository:

   git clone https://github.com/Nikhilesh-sarraf/Portfolio-website.git
   cd Portfolio-website

2. Install dependencies:

   # Using bun (recommended)
   bun install
   
   # Using npm
   npm install

3. Run the development server:

   # Using bun
   bun dev
   
   # Using npm
   npm run dev

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

Configuration

The project uses configuration files in the src/config directory for easy customization:

• About.tsx - About section content
• Contact.tsx - Contact form settings
• Experience.tsx - Work experience details
• Footer.tsx - Footer links and content
• Gears.tsx - Setup/gear section
• Hero.tsx - Hero section content
• Meta.tsx - SEO and metadata
• Navbar.tsx - Navigation links
• Projects.tsx - Project showcase settings
• Quote.ts - Random quotes configuration
• Resume.ts - Resume section details
• Setup.tsx - Development setup information
• cat.ts - Enable disable the cat

Adding New Technology Icons

1. Visit Devicon to find the icon you want to add
2. Create a new component in src/components/technologies/
3. Follow the existing component structure for consistency

Example:

export const NewTechIcon = () => {
  return <svg>// SVG content from devicon</svg>;
};

Adding Content

Blog Posts

1. Create a new MDX file in src/data/blog/
2. Add metadata and content following existing post structure
3. Add blog thumbnail in public/blog/

Projects

1. Create a new MDX file in src/data/projects/
2. Add metadata and content following existing project structure
3. Add project thumbnail in public/project/

License

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