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, and contact form with Telegram integration.
Click here to your portfolio template now:
- 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 Telegram integration
- SEO optimized
- TypeScript for type safety
- Umami Analytics for privacy-focused web analytics
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher)
- Bun (preferred) or npm
Create a .env file in the root directory with the following variables:
TELEGRAM_BOT_TOKEN="your-token"
TELEGRAM_CHAT_ID="your-chat-id"
GEMINI_API_KEY="your-api-key"
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"-
Create a new bot with @BotFather on Telegram
-
Copy the bot token and add it to your
.envfile asTELEGRAM_BOT_TOKEN -
Start a chat with your bot and send any message (e.g., "hello")
-
Get your chat ID:
# Run the test script to get your chat ID bun run test-telegram- The script will show your Chat ID from the message you sent
- Copy the Chat ID and add it to your
.envfile asTELEGRAM_CHAT_ID - Run the script again to verify everything works
-
Visit Umami:
- Self-host Umami or use Umami Cloud
- Follow Umami's installation guide
-
Get your credentials:
- Copy your Umami script URL (ends with
/script.js) - Get your website ID from Umami dashboard
- Copy your Umami script URL (ends with
-
Configure environment variables:
NEXT_PUBLIC_UMAMI_SRC="https://[your-umami-instance]/script.js" NEXT_PUBLIC_UMAMI_ID="your-website-id"
This project is licensed under the MIT License - see the LICENSE file for details.