Next.js Portfolio & Blog

A modern, responsive portfolio and blog application built with Next.js, TypeScript, TailwindCSS, and ShadCN UI components.

Warning

The file /config/legal/imprint.ts is currently configured with CPTCR's legal information, including their address. Reusing this data without permission may result in legal action, as it contains personal or proprietary information not belonging to you.

Features

• Modern, responsive design with dark mode support
• Mobile-friendly interface for seamless user experience
• Fully featured blog with Markdown support
• Admin dashboard with authentication
• Analytics dashboard for blog post insights
• Editorial calendar for content scheduling
• User management system for account handling
• Customizable site settings for personalization
• Discord webhook integration for notifications
• GitHub activity integration for showcasing contributions
• Contact form with email functionality
• SEO optimized for better search engine visibility

Tech Stack

• Framework: Next.js 15
• Language: TypeScript
• Styling: TailwindCSS
• UI Components: ShadCN UI
• Database: Neon PostgreSQL
• Authentication: JWT with bcrypt
• CMS: Built-in admin dashboard
• Storage: Vercel Blob for blog posts
• Hosting: Vercel
• Analytics: Vercel Analytics

Getting Started

Prerequisites

Ensure the following are installed:

• Node.js 18+ (Latest LTS version recommended)
• PostgreSQL database (Neon recommended)
• SMTP server for email functionality (optional)

Installation

1. Clone the repository:

   git clone https://github.com/cptcr/next.js_portfolio.git
   cd next.js_portfolio

2. Install the dependencies:

   npm install

3. Copy the .env.example file to create your .env file:

   cp .env.example .env

4. Configure the environment variables in the .env file:

   • Database URL (from Neon)
   • JWT Secret
   • Admin credentials
   • Email settings
   • Discord integration (optional)
   • GitHub token (optional)
   • Vercel Blob credentials (for blog storage)

5. Start the development server:

   npm run dev

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

Initial Setup

Upon first run, you'll be prompted to create an admin account through the admin setup page:

1. Navigate to /admin in your browser.
2. Complete the setup form to create your admin account.
3. Once created, log in to access the dashboard.

Database Setup

This project uses Neon Postgres with Drizzle ORM. Follow these steps to set up the database:

1. Create a free account at Neon.
2. Create a new project and database.
3. Copy the connection string and add it to the .env file as DATABASE_URL.

Scripts

# Create a new user
npm run create_user

# Delete a user
npm run delete_user

# Test a API Key
npm run test_api # You will be prompted for an API Key. Create one in the Admin dashboard.

Blog Storage

Blog posts are stored using the https://neon.tech database.

Discord Integration

For integrating Discord status and webhooks:

1. Create a Discord bot at Discord Developer Portal.
2. Add the bot token and your user ID to .env as DISCORD_BOT_TOKEN and DISCORD_USER_ID.
3. Set up a webhook URL for notifications and add it to .env as DISCORD_WEBHOOK_URL.

Customization

Styling

Customize the design by adjusting the following:

1. Update tailwind.config.js to modify colors, fonts, and other design elements.
2. Modify global styles in app/globals.css.
3. Customize individual components within the components directory.

Content

Update your personal content in these locations:

• app/page.tsx - Landing page content
• app/about/page.tsx - About page information
• components/layout/footer.tsx - Footer links and details
• app/projects/page.tsx - Showcase projects

Deployment

To deploy this project, Vercel is the recommended platform. Follow these steps:

1. Push your repository to GitHub.
2. Import the project into Vercel.
3. Configure environment variables within Vercel project settings.
4. Deploy your project!

For other hosting platforms, ensure you:

• Set up environment variables.
• Configure the build command (npm run build).
• Specify the output directory (/.next).

Scripts

• npm run dev - Start the development server.
• npm run build - Build the application for production.
• npm run start - Start the production server.
• npm run lint - Run ESLint.
• npm run create_user - Create a new user.
• npm run delete_user - Delete a user.
• npm run test_api - Test a API Key

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a new feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add an amazing feature').
4. Push your branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

License

This project is licensed under the CPTCR Non-Commercial Use License (CPTCR-NC 2025) License. See the LICENSE file for more details.

Built with

---

Created by CPTCR