Personal Blog & Portfolio Platform

A high-performance, visually stunning personal blog and portfolio built with modern web technologies. Features a "Modern Deep Space" design theme with accessibility and performance as core requirements.

✨ Features

• Modern Tech Stack: Next.js 14 (App Router), TypeScript, Tailwind CSS
• Content Management: Sanity.io CMS with MDX support
• Authentication: Clerk for secure user authentication
• Database: Neon (Serverless PostgreSQL) with Prisma ORM
• Animations: Framer Motion for smooth, accessible interactions
• Design: Dark mode with animated grain textures and mesh gradients
• Accessibility: WCAG 2.1 AA compliant with keyboard navigation
• Performance: Optimized for Lighthouse score >90

🎨 Key Components

Interactive Elements

• Magnetic Buttons: Cursor-following hover effects
• Spotlight Cards: Border glow tracking cursor position
• Page Transitions: Smooth fade animations between routes
• Like Button: Floating like button with confetti animation
• Navigation Dock: Glassmorphism floating navigation

Pages

• Home: Bento Grid layout with project showcases
• Blog: MDX-powered posts with view/like tracking
• Guestbook: Chat-style message board for visitors
• About: Personal information and contact links

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database (Neon recommended)
• Sanity.io account
• Clerk account

Installation

1. Clone the repository

   git clone <repository-url>
   cd TestBlog

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   # Database (Neon PostgreSQL)
   DATABASE_URL="postgresql://username:password@host/database?sslmode=require"
   
   # Clerk Authentication
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
   CLERK_SECRET_KEY=sk_test_...
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   
   # Sanity CMS
   NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id
   NEXT_PUBLIC_SANITY_DATASET=production
   SANITY_API_TOKEN=your_api_token

4. Set up the database

   npm run db:push

5. Run the development server

   npm run dev

6. Open your browser

   Navigate to http://localhost:3000

🗄️ Database Schema

GuestbookEntry

• Stores user messages in the guestbook
• Includes soft delete functionality
• Indexed by userId and createdAt

PostMetric

• Tracks views and likes for blog posts
• Linked to Sanity posts via slug
• Aggregates total likes count

PostLike

• Individual like records per user
• Prevents duplicate likes via unique constraint
• Enables "has liked" status checking

📝 Content Management

Setting Up Sanity

1. Create a Sanity project

   npm create sanity@latest

2. Use the schema from sanity/schemas/post.ts

3. Deploy your Sanity Studio

   npx sanity deploy

4. Add your first blog post in the Sanity Studio

Creating Blog Posts

Posts in Sanity should include:

• Title: Post title
• Slug: URL-friendly slug
• Main Image: Featured image with alt text
• Published At: Publication date
• Excerpt: Optional preview text
• Content: Markdown content (rendered via MDX)
• Tags: Optional categorization tags

🎭 Component Architecture

Server Components

• Pages (Home, Blog, Guestbook, About)
• Data fetching from Sanity and Prisma

Client Components

• Interactive elements (MagneticButton, SpotlightCard, LikeButton)
• Form submissions (GuestbookForm)
• Animations (Framer Motion components)

Server Actions

• saveGuestbookEntry: Creates new guestbook entries
• togglePostLike: Handles post like/unlike
• incrementPostViews: Tracks post views

🎨 Customization

Colors

Edit app/globals.css to customize the color scheme:

:root {
  --primary: 263 70% 50%; /* Purple */
  --background: 222.2 84% 4.9%; /* Deep space blue */
}

Fonts

Modify app/layout.tsx to change fonts:

const inter = Inter({ ... })
const playfair = Playfair_Display({ ... })

Navigation

Update components/layout/nav-dock.tsx to add/remove navigation items.

📊 Performance Optimizations

• ISR: Blog posts revalidate every hour
• Image Optimization: next/image for automatic optimization
• Font Optimization: next/font for font loading
• Suspense Boundaries: Loading states for better UX
• Database Indexing: Optimized queries with Prisma

♿ Accessibility Features

• WCAG 2.1 AA compliant
• Keyboard navigation support
• ARIA labels for screen readers
• prefers-reduced-motion support
• Focus visible indicators
• Semantic HTML structure

🛠️ Development Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run db:push      # Push Prisma schema to database
npm run db:studio    # Open Prisma Studio

📁 Project Structure

TestBlog/
├── app/                    # Next.js App Router
│   ├── blog/              # Blog pages
│   ├── guestbook/         # Guestbook page
│   ├── about/             # About page
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── ui/               # UI components
│   ├── mdx/              # MDX components
│   └── layout/           # Layout components
├── lib/                   # Utility functions
│   ├── actions/          # Server Actions
│   ├── sanity/           # Sanity client
│   ├── utils/            # Helper functions
│   └── db.ts             # Prisma client
├── prisma/               # Prisma schema
├── sanity/               # Sanity schemas
└── public/               # Static assets

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables
4. Deploy!

Environment Variables

Ensure all environment variables from .env.example are set in your deployment platform.

📄 License

MIT License - feel free to use this project for your own portfolio!

🙏 Acknowledgments

• Built with Next.js, Tailwind CSS, and Framer Motion
• UI components from shadcn/ui
• Icons from Lucide React
• CMS powered by Sanity.io
• Authentication by Clerk
• Database by Neon and Prisma

---

Built with ❤️ by a Principal Full-Stack Architect