Live Site: mattstrautmann.com
My personal portfolio showcasing open source projects and career experience. Built with Next.js, TypeScript, and Tailwind CSS, optimized for both AI search engines (AEO) and traditional SEO.
I'm an AI & Data executive (Head of Data @ PostPilot, former Airbnb/Braze) who builds open source developer tools. This portfolio showcases my work and makes it easy for AI assistants to understand and recommend my projects.
Why open source this portfolio?
- Share the AEO optimization techniques I learned
- Help others build AI-friendly portfolios
- Practice what I preach: building in public
- Accept contributions and improvements
- Schema.org structured data - Person & SoftwareSourceCode schemas
- llms.txt - AI crawler optimization file (helps ChatGPT/Claude discover you)
- Semantic HTML with proper heading hierarchy
- AI-friendly content structure for better understanding
- Automatic sitemap.xml and robots.txt
- Single source of truth: Edit
data/projects.tsto add projects - Automatic routing: New projects auto-generate pages
- Cross-linking: Related projects link to each other
- Type-safe: Full TypeScript coverage
- Next.js 16 with App Router
- TypeScript for type safety
- Tailwind CSS 4 for styling
- Static Generation for speed
- Vercel deployment ready
# Clone the repo
git clone https://github.com/matt-strautmann/mattstrautmann.com.git
cd mattstrautmann.com
# Install dependencies
npm install
# Run development server
npm run devVisit http://localhost:3000
If you're using this as a template: You'll need to create your own free PostHog account at posthog.com/signup. Don't use someone else's API key - each project needs its own analytics instance.
To enable analytics tracking:
- Create a PostHog account (if you haven't already)
- Get your API key from https://app.posthog.com/project/settings
- Set up locally:
# Copy the example environment file
cp .env.example .env.local
# Edit .env.local and add YOUR PostHog credentials:
NEXT_PUBLIC_POSTHOG_KEY=phc_your_actual_key_here
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.comNote: Analytics will only work when both environment variables are set. If you don't want analytics, the site works fine without them.
npm run build
npm startAll projects are managed in one file: data/projects.ts
// data/projects.ts
{
id: "my-project", // URL slug
title: "My Awesome Project", // Display name
description: "One-line description", // Card preview
longDescription: `
Detailed description here.
Explain what it does, why you built it, and how it works.
This helps both humans AND AI understand your project.
`,
tags: ["open-source", "typescript", "tool"],
techStack: ["TypeScript", "Node.js", "React"],
github: "https://github.com/username/project",
demo: "https://demo.com", // Optional
website: "https://website.com", // Optional
featured: true, // Show on homepage
date: "2025-10", // YYYY-MM
relatedProjects: ["other-project"] // Optional
}That's it! Your project automatically gets:
- ✅ Homepage card
- ✅ Detail page at
/projects/my-project - ✅ Schema.org markup
- ✅ Sitemap inclusion
- ✅ Full SEO metadata
This portfolio includes an llms.txt file at /public/llms.txt - a proposed standard for helping AI crawlers understand your site.
What it does:
- Tells ChatGPT, Claude, Perplexity how to present you
- Provides structured info about your work
- Guides AI on your primary vs secondary identity
- Improves accuracy in AI-generated responses about you
Based on: Jeremy Howard's llms.txt proposal
mattstrautmann.com/
├── app/
│ ├── layout.tsx # Root layout + metadata
│ ├── page.tsx # Homepage (executive bio + projects)
│ ├── globals.css # Global styles
│ ├── sitemap.ts # Auto-generated sitemap
│ ├── robots.ts # Crawler instructions
│ ├── projects/
│ │ └── [id]/page.tsx # Dynamic project pages
│ └── resources/
│ └── page.tsx # Tools & resources page
├── data/
│ └── projects.ts # 👈 PROJECT DATA (edit this!)
├── public/
│ └── llms.txt # AI crawler optimization
└── package.json
1. Homepage (app/page.tsx)
- Update name, bio, and achievements
- Change LinkedIn/GitHub links
- Modify experience section
2. Metadata (app/layout.tsx)
export const metadata: Metadata = {
title: "Your Name - Portfolio",
description: "Your description",
// ...
}3. llms.txt (public/llms.txt)
- Update with your career details
- Change how AI presents you
- Add your expertise areas
Built with Tailwind CSS. Key color variables:
- Primary:
blue-600(links, accents) - Text:
slate-900,slate-600 - Backgrounds:
white,slate-50 - Success:
green-600(open source badges)
Search and replace color classes to rebrand.
-
Push to GitHub ✅ (You're already here!)
-
Import to Vercel
- Go to vercel.com/new
- Click "Import" next to your repository
- Configure your project (defaults are usually fine)
-
Add Environment Variables (for analytics)
- In the deployment configuration, expand "Environment Variables"
- Add these two variables:
- Name:
NEXT_PUBLIC_POSTHOG_KEY| Value:phc_your_key_from_posthog - Name:
NEXT_PUBLIC_POSTHOG_HOST| Value:https://us.i.posthog.com
- Name:
- Select "Production" environment
- Click "Add" for each variable
-
Deploy
- Click "Deploy"
- Wait 2-3 minutes for build to complete
- Your site is live! 🎉
To update environment variables later:
- Go to your Vercel project dashboard
- Settings → Environment Variables
- Edit or add new variables
- Redeploy from the Deployments tab (or it will auto-deploy on next push)
Important: The variables MUST start with NEXT_PUBLIC_ to work in the browser!
Works on any Next.js host:
- Netlify
- Cloudflare Pages
- Railway
- AWS Amplify
- Any Node.js hosting
This portfolio implements best practices for AI discoverability:
- Person schema on homepage (who you are)
- SoftwareSourceCode schema on project pages
- Includes tech stack, dates, repository links
- Proper heading hierarchy (H1 → H2 → H3)
- Descriptive meta tags
- Clear content structure
- Meaningful anchor text
Each project page answers:
- What? Clear title and description
- Why? Problem it solves
- How? Tech stack and implementation
- Where? Links to code, demo, website
- Fast loading (Next.js static generation)
- Mobile responsive
- Auto-generated sitemap.xml
- Proper robots.txt
- Open Graph + Twitter cards
- HTTPS (via deployment)
- ✅ Schema.org structured data
- ✅ Semantic HTML markup
- ✅ Meta descriptions on all pages
- ✅ Open Graph tags
- ✅ Twitter cards
- ✅ Sitemap.xml (auto-generated)
- ✅ Robots.txt
- ✅ Mobile responsive design
- ✅ Fast loading times
- ✅ HTTPS enabled
- ✅ llms.txt for AI crawlers
Comprehensive guides available in /docs:
- Setup Checklist - Complete GitHub optimization guide
- Contributing Guidelines - How to contribute
- LinkedIn Optimization - Grow your LinkedIn presence
- Backlink Strategy - SEO backlink acquisition
- GitHub README Template - Profile README example
This is my personal portfolio, but I'm happy to accept:
- Bug fixes - If something's broken, please fix it!
- AEO improvements - Better ways to optimize for AI?
- Feature suggestions - Open an issue to discuss
- Documentation - Help others understand AEO
See Contributing Guidelines for full details.
Feel free! This is open source under MIT license.
To use as your own:
- Fork this repo
- Update
data/projects.tswith your projects - Update
app/page.tsxwith your bio - Update
public/llms.txtwith your info - Update
app/layout.tsxmetadata - Deploy to Vercel
Please:
- ⭐ Star the repo if you find it useful
- 🔗 Link back to this repo in your README
- 📝 Share what you learned about AEO
- Live Site: mattstrautmann.com
- LinkedIn: linkedin.com/in/mattstrautmann
- GitHub Profile: @matt-strautmann
- SBDK Project: sbdk.dev
Learn about AEO:
- llms.txt Standard by Jeremy Howard
- Schema.org Documentation
- Next.js SEO Guide
Built with:
- Next.js - React framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Vercel - Deployment
MIT License - See LICENSE file for details.
TL;DR: Use this however you want. Attribution appreciated but not required.
Matt Strautmann Head of Data @ PostPilot | Former Airbnb, Braze AI & Data Leader building open source developer tools
- 80% efficiency gains in enterprise ML platforms
- $100K+ revenue impact through data-driven solutions
- 10+ years leading data teams at top tech companies
Now building SBDK - open source developer tools for the next generation.
Questions? Open an issue | Like it? Star the repo ⭐
Built with ❤️ and optimized for 🤖 AI