A modern, cyberpunk-themed portfolio website showcasing AI engineering, LLM development, and agentic systems projects. Built with Next.js, TypeScript, and Tailwind CSS.
🌐 Live Site: https://mhattingpete.github.io/
- 🎨 Cyberpunk Design: Dark mode with neon accents (cyan, purple, pink) and animated particles
- ⚡ Modern Stack: Built with Next.js 14, React 18, and TypeScript
- 🎭 Smooth Animations: Framer Motion for elegant transitions and interactions
- 📱 Fully Responsive: Optimized for all devices and screen sizes
- 🚀 Dynamic Projects: GitHub API integration for real-time project showcase
- 🎯 SEO Optimized: Meta tags and structured data for search engines
- 🔒 Security-First: Following best practices and secure coding standards
- 🌐 Zero Config Deployment: Automated GitHub Actions workflow
- ♿ Accessible: WCAG compliant design
This portfolio website serves as a comprehensive showcase of my work in:
- AI Engineering: Agentic systems, LLMOps, and multimodal AI
- Data Science: Machine learning, deep learning, and data analysis
- Research: Publications, talks, and academic contributions
- Open Source: Contributions to major projects like LangChain, Langfuse, and MLflow
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: React Icons
- Deployment: GitHub Pages
- Node.js 20.x or higher
- npm
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Export static site
npm run exportVisit http://localhost:3000 to see the site in development mode.
This site is configured to deploy automatically to GitHub Pages using GitHub Actions. Every push to the main branch triggers a new deployment.
# Build and export
npm run build
# The static files will be in the `out` directory.
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── components/ # React components
│ ├── Navigation.tsx # Navigation bar
│ └── sections/ # Page sections
│ ├── Hero.tsx
│ ├── Research.tsx
│ ├── Experience.tsx
│ ├── Skills.tsx
│ ├── Projects.tsx
│ ├── Education.tsx
│ ├── Blog.tsx
│ └── Contact.tsx
├── public/ # Static assets
├── .github/workflows/ # GitHub Actions
└── tailwind.config.ts # Tailwind configuration
The neon color scheme is defined in tailwind.config.ts:
colors: {
neon: {
cyan: "#00f5ff",
purple: "#bd00ff",
pink: "#ff006e",
},
dark: {
bg: "#0a0a0f",
card: "#141420",
border: "#1f1f2e",
},
}Update the GitHub username in components/sections/Projects.tsx:
const GITHUB_USERNAME = "mhattingpete";- Professional Portfolio: Showcasing expertise in AI engineering, machine learning, and data science
- Open Source Contributions: Active contributor to LangChain, Langfuse, MLflow, and other ML/AI projects
- Modern Web Technologies: Leveraging the latest React, Next.js, and TypeScript features
- Performance Optimized: Fast loading times with static site generation and optimized assets
- Mobile-First Design: Responsive layouts that work seamlessly across all devices
- ✅ Lighthouse Score: 100/100 for Performance, Accessibility, Best Practices, and SEO
- ✅ Structured Data (Schema.org JSON-LD) for rich search results
- ✅ Open Graph and Twitter Card meta tags for social media sharing
- ✅ Sitemap and robots.txt for search engine crawlers
- ✅ Semantic HTML and ARIA labels for accessibility
While this is a personal portfolio, suggestions and feedback are welcome! Feel free to:
- Open an issue for bug reports or feature suggestions
- Submit a pull request for improvements
- Star the repository if you find it useful
© 2025 Martin Hatting Petersen. All rights reserved.
- Email: petersen2630@gmail.com
- LinkedIn: martin-hatting-petersen
- GitHub: @mhattingpete
- Portfolio: https://mhattingpete.github.io/
Keywords: AI Engineer, Data Scientist, Machine Learning, Deep Learning, LLM, Large Language Models, Agentic AI, LLMOps, Multimodal AI, Next.js Portfolio, React Portfolio, TypeScript, Portfolio Website, GitHub Pages, Cyberpunk Theme, Open Source Contributor