Personal Website

Faisal-Dev: Next.js Personal Website & Blog Starter Kit

Faisal-dev is an open-source starter kit for building a personal website or blog with a cutting-edge tech stack. Powered by Next.js 14, TypeScript, Tailwind CSS, and MDX for content management, it provides a robust foundation. Developers can effortlessly showcase their projects, share insights via a blog with interactive features like comments and search, and leverage built-in SEO optimization, responsive design, and elegant animations using Framer Motion. It also integrates Prisma for streamlined database interactions, offering a comprehensive solution.

Features:

• Next.js 14 & App Router: Leverages the latest Next.js version, including the performant App Router and Turbo capabilities for enhanced speed.
• MDX Content with Velite: Supports content creation using MDX (Markdown with JSX), processed efficiently by Velite.
• Tailwind CSS Styling: Utilizes the utility-first Tailwind CSS framework for rapid and highly customizable UI development.
• Shadcn UI Components: Integrates pre-built, accessible, and stylable UI components from Shadcn UI.
• Strict TypeScript & ESLint: Enforces strong typing with TypeScript and maintains code quality with ESLint rules.
• Responsive Design: Ensures the website layout adapts seamlessly to various screen sizes for an optimal user experience.
• SEO Optimization: Implements meta tags and JSON-LD structured data to improve search engine ranking and visibility.
• RSS Feed & Sitemap: Generates an RSS feed for content subscription and a sitemap to assist search engine crawlers.
• Vercel Analytics Integration: Supports Vercel Analytics for easy tracking of website traffic and user engagement.
• Interactive Blog System: Provides a full-featured blog with comments, likes, post view counters, and content search.
• Blog Table of Contents: Automatically creates a table of contents for blog posts, enhancing readability and navigation.
• Code Syntax Highlighting: Employs Shiki to render code blocks with accurate and aesthetically pleasing syntax highlighting.
• Framer Motion Animations: Incorporates Framer Motion to add smooth, declarative animations to the user interface.
• Prisma & Vercel Postgres: Uses Prisma ORM for database interactions, with support for Vercel Postgres.
• Environment Variable Validation: Features t3-env for validating environment variables before the build process to prevent errors.

Summary:

This project delivers a complete open-source starter kit for developers looking to establish a personal website or blog. Constructed with Next.js 14, it integrates Tailwind CSS for styling, MDX for dynamic content, Prisma for database management, and Framer Motion for engaging animations. Key advantages include strong SEO optimization, responsive design for all devices, and a feature-rich blog system, enabling a professional and polished online presence. It's an ideal resource for rapidly deploying a modern, fully-equipped digital portfolio.