PersonalFeatured

johnpeterquigley.com

Personal portfolio website showcasing work, projects, and professional expertise

Technologies

Next.jsTypeScriptFramer MotionTailwind CSSMDX
View Live Site

Project Overview

A professional portfolio website designed to showcase expertise in business strategy, marketing, and web development with unique features including Claude AI usage tracking and activity dashboards.

Technical Stack

Frontend

  • Next.js 15.3.1: Latest App Router for optimal performance
  • React 19: Cutting-edge React features
  • TypeScript: Type-safe development
  • Tailwind CSS 4: Utility-first styling with custom design system

Content Management

  • MDX: Markdown with JSX for rich blog content
  • Gray Matter: Frontmatter parsing
  • Remark GFM: GitHub Flavored Markdown support

Features

  • Activity Dashboard: GitHub-style heatmap charts for Claude AI usage, GitHub contributions, and Twitter activity
  • Blog System: Full-featured blog with categories, tags, and search
  • Portfolio Showcase: Project case studies with rich media
  • Library: Books showcase with filtering and search
  • Contact Form: Email integration with Resend

Architecture Decisions

App Router Structure

src/app/
├── layout.tsx          # Root layout with navigation
├── page.tsx            # Home page
├── blog/
│   ├── page.tsx        # Blog listing
│   └── [slug]/
│       └── page.tsx    # Dynamic blog posts
├── portfolio/
│   ├── page.tsx        # Portfolio listing
│   └── [slug]/
│       └── page.tsx    # Dynamic project pages
├── library/page.tsx    # Books library
├── contact/page.tsx    # Contact form
└── api/                # API routes

Design System

Custom color palette defined in CSS using Tailwind CSS 4's @theme directive:

  • Primary: Blues (#0284c7 - #0369a1) for professionalism
  • Secondary: Grays (#334155 - #0f172a) for sophistication
  • Accent: Amber (#f59e0b - #b45309) for energy

Custom components for consistency:

.btn-primary {
  @apply bg-primary-600 hover:bg-primary-700 text-white
         font-semibold py-3 px-6 rounded-lg
         transition-colors shadow-soft hover:shadow-glow;
}

Performance Optimizations

Image Optimization

  • Next.js Image component for automatic optimization
  • Responsive images with proper sizing
  • Lazy loading for below-the-fold images

Static Generation

  • Pre-rendered pages for optimal performance
  • Incremental Static Regeneration for dynamic content
  • Optimized bundle sizes

Core Web Vitals

  • LCP: < 1.5s
  • FID: < 50ms
  • CLS: < 0.05

Unique Features

Activity Dashboard

GitHub-style contribution charts displaying:

  1. Claude AI Usage: Daily interaction tracking
  2. GitHub Activity: Commits, PRs, and contributions
  3. Twitter Activity: Tweet frequency and engagement

Using @uiw/react-heat-map for visualizations with custom theming.

MDX Content System

Rich blog posts and project case studies with:

  • Syntax highlighting for code blocks
  • Custom components within markdown
  • Frontmatter for metadata
  • Category and tag filtering

Library Showcase

Dynamic book library featuring:

  • Reading Material folder integration (95+ books)
  • Filtering by category, format, and status
  • Search functionality
  • Reading statistics

Development Workflow

Type Safety

Strong TypeScript usage throughout:

interface BlogPost {
  slug: string;
  title: string;
  description: string;
  date: string;
  category: string;
  content: string;
}

Component Architecture

  • Reusable, single-responsibility components
  • Server components by default for performance
  • Client components only when interactivity needed
  • Consistent prop interfaces

Deployment

  • Platform: Railway
  • Custom Domain: johnpeterquigley.com
  • SSL: Automatic certificate management
  • CI/CD: Automatic deployments from main branch

Results

  • Perfect Lighthouse Score: 100/100 across all metrics
  • Fast Load Times: < 1s time to interactive
  • Accessible: WCAG AA compliance
  • SEO Optimized: Proper meta tags and structured data

Key Learnings

Tailwind CSS 4 Migration

The biggest challenge was migrating to Tailwind CSS 4's new configuration system. Custom theme values must be defined in CSS using the @theme directive rather than in tailwind.config.ts.

MDX Integration

Next.js 15 + MDX required careful configuration with next-mdx-remote/rsc for proper server component support.

Performance vs. Features

Balancing rich features (heatmap charts, MDX content) with performance required careful code splitting and lazy loading strategies.

Future Enhancements

  • Dark mode toggle
  • Newsletter integration
  • Advanced analytics dashboard
  • Comment system for blog posts
  • Search functionality across all content

Open Source

The codebase demonstrates modern web development best practices and is available for learning purposes. Feel free to explore the code and use it as a reference for your own projects.