Personal Portfolio Website

A modern, AI-first personal portfolio website built with Next.js 15, TypeScript, and Tailwind CSS. This project demonstrates clean architecture, responsive design, and AI-enhanced development practices.

🚀 Features

• Modern Tech Stack: Next.js 15 with App Router, TypeScript, and Tailwind CSS
• Responsive Design: Mobile-first approach with beautiful UI on all devices
• AI-First Development: Built using AI-powered tools and methodologies
• Performance Optimized: Static generation for fast loading times
• SEO Ready: Configured with next-seo for optimal search engine visibility
• Accessible: WCAG compliant with semantic HTML and ARIA labels

📋 Pages

• Home: Hero section with professional introduction and CTAs
• About: Comprehensive bio, skills showcase, and development philosophy
• Projects: Featured portfolio pieces with live demos and source code links
• Resume: Professional experience with downloadable PDF option
• Contact: Multiple contact methods with social media integration

🛠️ Tech Stack

• Framework: Next.js 15.3.4 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS with custom phthalo green theme
• UI Components: Shadcn/ui (Radix UI + Tailwind)
• Icons: Lucide React
• SEO: next-seo
• Code Quality: ESLint, Prettier, Husky, lint-staged

🏃‍♂️ Getting Started

Prerequisites

• Node.js 18+ and npm
• Git

Installation

1. Clone the repository:

git clone https://github.com/calemcnulty/personal-website.git
cd personal-website

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

Building for Production

npm run build
npm run start

📁 Project Structure

personal-website/
├── app/                    # Next.js App Router pages
│   ├── about/             # About page
│   ├── contact/           # Contact page
│   ├── projects/          # Projects showcase
│   ├── resume/            # Resume/CV page
│   ├── layout.tsx         # Root layout with navigation
│   └── page.tsx           # Homepage
├── components/            # React components
│   ├── layout/           # Layout components (NavBar, Footer)
│   ├── sections/         # Page sections (ProjectCard)
│   └── ui/               # Shadcn/ui components
├── lib/                   # Utilities and configurations
├── public/               # Static assets
└── _docs/                # Project documentation

🎨 Customization

Colors

The site uses a custom phthalo green theme. To change colors, edit the CSS variables in app/globals.css and the Tailwind config in tailwind.config.ts.

Content

• Update personal information in each page component
• Replace project data in app/projects/page.tsx
• Add your actual resume PDF to public/resume.pdf
• Update social links in components/layout/footer.tsx

📝 Development Workflow

1. Code Quality: Pre-commit hooks run Prettier and ESLint automatically
2. Type Safety: TypeScript strict mode ensures type safety
3. Component Structure: Modular components under 500 lines for AI compatibility
4. Documentation: JSDoc comments for all functions and components

🚀 Deployment

The site is optimized for deployment on Vercel:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Deploy with default settings

📄 License

This project is open source and available under the MIT License.

👤 Author

Cale McNulty

• Website: calemcnulty.com
• GitHub: @calemcnulty
• LinkedIn: calemcnulty

---

Built with ❤️ using AI-first development principles