Jake Abendroth - Portfolio & Blog

A modern, statically-generated portfolio and technical blog built with Next.js 16, TypeScript, and Tailwind CSS. Deployed on GitHub Pages.

🚀 Live Site

Production: jakea.net GitHub Pages: abendrothj.github.io/portfolio

✨ Features

• 📝 Technical Blog: Markdown-based blog with syntax highlighting for code snippets
• 🎨 Modern UI: Clean, minimalist design with dark mode support
• ⚡ Static Export: Fully static site generated with Next.js SSG
• 🔍 SEO Optimized: Proper meta tags, OpenGraph, and semantic HTML
• 📱 Responsive: Mobile-first design that works on all devices
• 🚀 Fast: Optimized for performance with static HTML
• 🎯 Type-Safe: Full TypeScript support

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI + shadcn/ui
• Icons: Lucide React
• Markdown: react-markdown + remark-gfm
• Deployment: GitHub Pages
• CI/CD: GitHub Actions

🏃 Getting Started

Prerequisites

• Node.js 20+
• npm or yarn

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install --legacy-peer-deps

3. Run development server:

   npm run dev

4. Open http://localhost:3000

Building for Production

# Build static site
npm run build

# Output will be in ./out directory

# Test locally
npx serve out

📁 Project Structure

portfolio/
├── app/                      # Next.js app directory
│   ├── about/               # About page
│   ├── blog/                # Blog listing & posts
│   │   └── [slug]/          # Dynamic blog post pages
│   ├── layout.tsx           # Root layout with navigation
│   ├── page.tsx             # Home page
│   └── globals.css          # Global styles
├── components/              # React components
│   ├── ui/                  # shadcn/ui components
│   ├── nav.tsx              # Navigation bar
│   └── footer.tsx           # Footer
├── lib/                     # Utilities
│   └── blog.ts              # Blog post parsing logic
├── posts/                   # Markdown blog posts
│   ├── welcome.md
│   ├── building-doppel.md
│   ├── building-argus-file-integrity.md
│   └── ...
├── public/                  # Static assets
│   ├── CNAME                # Custom domain config
│   ├── .nojekyll            # Disable Jekyll on GitHub Pages
│   └── ...
├── .github/
│   └── workflows/
│       └── deploy.yml       # GitHub Actions deployment
└── next.config.mjs          # Next.js configuration

✍️ Writing Blog Posts

Blog posts are written in Markdown with frontmatter metadata.

Create a New Post

1. Create a new .md file in /posts/:

   touch posts/my-new-post.md

2. Add frontmatter and content:

   ---
   title: "Your Post Title"
   date: "2025-12-27"
   excerpt: "A brief description of your post"
   tags: ["tag1", "tag2", "tag3"]
   ---
   
   # Your Post Title
   
   Your content here...
   
   ## Code Examples
   
   ```rust
   fn main() {
       println!("Hello, world!");
   }

3. Rebuild the site:

   npm run build

Frontmatter Schema

title: string       # Post title (required)
date: string        # Publication date in YYYY-MM-DD format (required)
excerpt: string     # Short description for preview (required)
tags: string[]      # Array of tags (required)

Supported Features

• Syntax highlighting for code blocks (Rust, Python, JavaScript, etc.)
• GitHub Flavored Markdown (tables, task lists, strikethrough)
• Automatic metadata (reading time, timestamps)
• SEO optimization per post

🚀 Deployment

This site deploys automatically to GitHub Pages via GitHub Actions.

Initial Setup

1. Enable GitHub Pages:

   • Go to repo Settings → Pages
   • Set Source to GitHub Actions

2. Push to main branch:

   git push origin main

3. GitHub Actions will:

   • Build the static site
   • Deploy to GitHub Pages
   • Available at https://abendrothj.github.io/portfolio

🎨 Customization

Updating Content

• Home page: Edit app/page.tsx
• About page: Edit app/about/page.tsx
• Navigation: Edit components/nav.tsx
• Footer: Edit components/footer.tsx

Styling

The project uses Tailwind CSS with a custom theme:

• Theme colors: tailwind.config.ts
• Global styles: app/globals.css
• Component styles: Inline Tailwind classes

Adding Features

The site uses shadcn/ui components. To add new components:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card

📊 Analytics

To add analytics:

1. Vercel Analytics (if re-deploying to Vercel):

   import { Analytics } from '@vercel/analytics/react'
   // Already in dependencies

2. Google Analytics:

   • Add tracking code to app/layout.tsx
   • Use next/script for optimal loading

3. Plausible or other privacy-friendly alternatives

🔧 Configuration

Environment Variables

This project doesn't require environment variables for basic functionality. Optional:

# .env.local (optional)
NEXT_PUBLIC_GA_ID=your-google-analytics-id

Next.js Config

Key settings in next.config.mjs:

{
  output: 'export',        // Static HTML export
  images: {
    unoptimized: true,    // Required for static export
  },
}

🐛 Troubleshooting

Build Errors

# Clear cache and rebuild
rm -rf .next out
npm run build

Code Blocks Not Rendering

• Check for escaped backticks (\```) instead of regular backticks
• Ensure language is specified: ```rust

404 on Blog Posts

• Verify slug matches filename (without .md)
• Check frontmatter is valid YAML
• Rebuild after adding new posts

🤝 Contributing

Contributions welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

📬 Contact

Jake Abendroth

• Website: jakea.net
• GitHub: @abendrothj
• Email: contact@jakea.net

🙏 Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Deployed on GitHub Pages
• Inspired by the developer community

---

Made with 💻 and ☕ by Jake Abendroth