Tony Pettigrew - Personal Website

A modern, performant personal website showcasing professional experience, technical writing, and portfolio projects. Built with Next.js 15, TypeScript, and Sanity CMS.

🚀 Live Demo • 📖 Documentation • 🛠 Tech Stack • 🚀 Getting Started

📋 Table of Contents

🎯 Overview
✨ Features
📚 Documentation
🛠 Tech Stack
🏗 Architecture
🚀 Getting Started
🛠 Development
🚀 Deployment
🤝 Contributing
⚡ Performance
♿ Accessibility
🔍 SEO
🐛 Troubleshooting
📄 License
📞 Contact

Overview

This is a modern personal website built with enterprise-grade technologies and best practices. The site features a blog system with advanced search and filtering, portfolio showcase, and professional presentation of skills and experience.

Key Highlights

⚡ Performance: Server-side rendering with Next.js 15 and optimized loading
🎨 Modern UI: Responsive design with Tailwind CSS v4 and dark/light themes
📝 Content Management: Headless CMS with Sanity for easy content updates
🔍 Advanced Search: Real-time search with debouncing and category filtering
♿ Accessibility: WCAG 2.1 AA compliant with semantic HTML
🔧 Developer Experience: TypeScript, ESLint, Prettier, and comprehensive documentation

Features

Core Functionality

Responsive Design: Mobile-first approach with breakpoint optimization
Theme System: Dark/light mode with system preference detection
Blog System: Dynamic blog with GROQ queries and real-time search
Portfolio Showcase: Professional project presentation
Contact Integration: Contact form with validation
Dashboard: Admin interface for content management

Advanced Features

Search & Filtering: Debounced search with category filtering
Compound Components: Reusable component architecture with shared context
Server-Side Rendering: Optimized for SEO and performance
Image Optimization: Next.js Image component with Sanity integration
Code Highlighting: Syntax highlighting for code snippets
Keyboard Navigation: Full keyboard accessibility support

Documentation

Document	Description	Status
PR Guidelines	Pull request best practices and templates	✅ Complete
Commit Guidelines	Conventional commit message standards	✅ Complete
Code Quality	Code quality standards and review process	✅ Complete
Team Guidelines	Team collaboration and role-specific guidelines	✅ Complete

Development Guidelines

Code Standards: TypeScript strict mode, ESLint, Prettier
Testing: Unit tests, integration tests, accessibility testing
Performance: Lighthouse optimization, bundle analysis
Security: Dependency scanning, input validation

Tech Stack

Frontend

Framework: Next.js 15 with App Router
Language: TypeScript 5.9.2 (strict mode)
Styling: Tailwind CSS v4 with custom design system
State Management: TanStack Query for server state
UI Components: Radix UI primitives
Icons: React Icons
Theming: Next Themes

Backend & CMS

Headless CMS: Sanity.io with GROQ queries
Image Management: Sanity Image URL builder with optimization
Content Types: Custom schemas for blog posts, categories, authors
Real-time Updates: Live preview and collaborative editing

Development Tools

Package Manager: npm with lockfile
Linting: ESLint with Next.js configuration
Formatting: Prettier with Tailwind CSS plugin
Type Checking: TypeScript strict mode
Build Tool: Next.js with Turbopack for development

Performance & Optimization

Bundling: Next.js with tree shaking and code splitting
Image Optimization: Next.js Image component with WebP/AVIF
Caching: React Query for data caching
CDN: Vercel Edge Network for global distribution

Architecture

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── blog/              # Blog functionality
│   │   ├── [slug]/        # Dynamic blog post routes
│   │   ├── Blog/          # Compound component pattern
│   │   ├── Categories/    # Category components
│   │   └── types.ts       # Blog type definitions
│   ├── components/        # Reusable UI components
│   ├── context/           # React context providers
│   ├── hooks/             # Custom React hooks
│   ├── RootAppShell/      # Application shell
│   ├── routes/            # Route definitions
│   ├── studio/            # Sanity Studio integration
│   ├── contact/           # Contact page
│   ├── portfolio/         # Portfolio showcase
│   ├── dashboard/         # Admin dashboard
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   ├── Providers.tsx      # App providers
│   └── globals.css        # Global styles
├── lib/                   # Utility functions
└── sanity/                # Sanity CMS configuration
    ├── schemaTypes/       # Content schemas
    ├── lib/               # Sanity utilities
    └── structure.ts       # Studio structure

Key Patterns

Compound Components: Shared context for complex UI patterns
Server Components: Default server-side rendering for performance
Client Components: Strategic use of "use client" for interactivity
Type Safety: Comprehensive TypeScript interfaces
Error Boundaries: Graceful error handling and fallbacks

Getting Started

Prerequisites

Node.js: 18.0.0 or higher
npm: 9.0.0 or higher
Git: For version control

Quick Start

Clone the repository

git clone https://github.com/yourusername/tonypettigrew.dev-3.0.git
cd tonypettigrew.dev-3.0

Install dependencies
```
npm install
```

Set up environment variables

cp .env.example .env.local

Configure the following variables:

NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your_sanity_api_token

Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:3000

Sanity CMS Setup

Install Sanity CLI globally
```
npm install -g @sanity/cli
```
Initialize Sanity project
```
sanity init
```
Configure schemas Update src/sanity/schemaTypes/ with your content models
Deploy Sanity Studio
```
sanity deploy
```

Development

Available Scripts

# Development
npm run dev          # Start development server with Turbopack
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Sanity (if installed globally)
sanity dev           # Start Sanity Studio
sanity deploy        # Deploy Sanity Studio
sanity graphql-deploy # Deploy GraphQL API

Development Workflow

Create a feature branch

git checkout -b feature/your-feature-name

Make your changes
- Follow TypeScript strict mode
- Use conventional commit messages
- Write tests for new functionality
Run quality checks
```
npm run lint
npm run build
```
Submit a pull request
- Follow PR guidelines
- Include tests and documentation
- Request code review

Code Quality Standards

TypeScript: Strict mode with comprehensive type definitions
ESLint: Next.js recommended rules with custom configuration
Prettier: Consistent code formatting
Conventional Commits: Standardized commit messages
Component Testing: Unit tests for complex components

Deployment

Vercel (Recommended)

Connect your repository
- Push code to GitHub/GitLab
- Connect repository to Vercel

Configure environment variables

NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_TOKEN=your_sanity_api_token

Deploy
- Vercel automatically builds and deploys on push
- Preview deployments for pull requests

Other Platforms

The application can be deployed to any platform supporting Next.js:

Netlify: Configure build command and output directory
Railway: Connect GitHub repository
DigitalOcean App Platform: Container deployment
AWS Amplify: Full-stack deployment

Contributing

We welcome contributions! Please read our contributing guidelines before submitting pull requests.

Development Process

Fork the repository
Create a feature branch
Make your changes
Write tests
Submit a pull request

Code Review Process

All changes require code review
Automated checks must pass
Follow code quality standards
Use conventional commit messages

Performance

Optimization Strategies

Server-Side Rendering: All pages rendered on server
Image Optimization: WebP/AVIF with responsive sizes
Code Splitting: Automatic route-based splitting
Caching: React Query for data, Next.js for static assets
Bundle Analysis: Regular bundle size monitoring

Performance Metrics

Lighthouse Score: 95+ across all categories
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1
First Input Delay: < 100ms

Accessibility

WCAG 2.1 AA Compliance

Semantic HTML: Proper heading hierarchy and landmarks
Keyboard Navigation: Full keyboard accessibility
Screen Reader Support: ARIA labels and descriptions
Color Contrast: 4.5:1 minimum contrast ratio
Focus Management: Visible focus indicators

Testing

Automated: axe-core integration
Manual: Screen reader testing (NVDA, JAWS, VoiceOver)
Keyboard: Full keyboard navigation testing
Color: Contrast ratio verification

SEO

Optimization Features

Meta Tags: Dynamic meta tags for all pages
Structured Data: JSON-LD schema markup
Sitemap: Automatic sitemap generation
Robots.txt: Search engine crawling configuration
Open Graph: Social media sharing optimization

Performance SEO

Core Web Vitals: Optimized for all metrics
Mobile-First: Responsive design for mobile indexing
Fast Loading: Optimized for search ranking factors

Troubleshooting

Common Issues

Build Errors

# Clear Next.js cache
rm -rf .next
npm run build

Sanity Connection Issues

# Verify environment variables
echo $NEXT_PUBLIC_SANITY_PROJECT_ID
echo $SANITY_API_TOKEN

TypeScript Errors

# Check TypeScript configuration
npx tsc --noEmit

Getting Help

Documentation: Check the docs folder
Issues: Search existing issues or create new ones
Discussions: Use GitHub Discussions for questions

License

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

Contact

Website: tonypettigrew.dev
Email: get@tonypettigrew.dev
LinkedIn: https://linkedin.com/in/tpettigrew4
GitHub: https://github.com/TonyDotDev

Made with ❤️ by Tony Pettigrew

Name		Name	Last commit message	Last commit date
Latest commit History 9 Commits
.cursor/rules		.cursor/rules
docs		docs
public		public
src		src
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sanity.cli.ts		sanity.cli.ts
sanity.config.ts		sanity.config.ts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

TonyDotDev/tonypettigrew.dev-v3

Folders and files

Latest commit

History

Repository files navigation