Nathan Jessen's Portfolio

Personal portfolio of Nathan Jessen — AI-native engineer shipping production software with Next.js and agentic workflows.

🔗 View Live Site

✨ Features

• Modern, responsive single-page design using TailwindCSS
• Mobile-first approach with a clean, minimalist UI
• Fast page loads with Next.js 16 App Router
• Component-driven development with Storybook
• SEO optimized
• TypeScript for type safety
• Deployed on Vercel with automatic CI/CD

🛠️ Tech Stack

Core

• Next.js ^16 - React framework for production
• React ^19 - UI component library
• TypeScript - Static type checking

Styling

• TailwindCSS - Utility-first CSS
• PostCSS - CSS processing

Development

• ESLint - Linting
• Prettier - Code formatting
• Storybook - Component development
• @next/bundle-analyzer - Bundle analysis

APIs & Services

• Vercel - Hosting & CI/CD

🚀 Getting Started

Prerequisites

• Node.js 20.9.0 or later
• npm 10 or later

Development

1. Clone the repository:

git clone https://github.com/nathanjessen/portfolio.git
cd portfolio

2. Install dependencies:

npm install

3. Start the development server:

npm run dev        # Standard mode
npm run dev:turbo  # Turbo mode (faster builds)

4. Open http://localhost:3000

Available Scripts

Development

• npm run dev - Start development server
• npm run dev:turbo - Start with Turbo mode
• npm run storybook - Start Storybook

Building

• npm run build - Create production build
• npm run start - Start production server
• npm run clean - Remove build artifacts
• npm run build-storybook - Build Storybook

Quality

• npm run typecheck - TypeScript check
• npm run lint - ESLint check
• npm run lint:fix - ESLint autofix
• npm run format - Prettier format
• npm run format:check - Prettier check
• npm run check - All checks

Analysis

• npm run analyze - Bundle analysis

📁 Project Structure

portfolio/
├── app/                 # Next.js App Router pages and layouts
│   └── layout.tsx      # Root layout
├── components/         # React components (one directory per component)
├── constants/          # Data and configuration (projects, experience, techlist, etc.)
├── public/             # Static assets
├── stories/            # Full-page Storybook stories
└── styles/             # Global CSS

🔧 Configuration

Code Style

ESLint and Prettier configuration:

• eslint.config.mjs - ESLint rules
• .prettierrc - Prettier config
• .prettierignore - Formatting exclusions

🐛 Issues

Found a bug? Report it here or submit a PR with the fix.

📦 Deployment

Deployed on Vercel with:

• Production Branch: main
• Framework Preset: Next.js
• Build Command: npm run build
• Output Directory: .next

Deployment Documentation

📚 Resources

• Next.js Documentation
• React Documentation
• TailwindCSS Documentation
• TypeScript Documentation