Portfolio

TeamPilot AI Portfolio

Production-ready Next.js portfolio showcasing TeamPilot AI — a project management platform with grounded AI.

Overview

This is not a traditional developer portfolio. It’s designed like a SaaS product landing page, where visitors discover what I build before they discover who I am.

The experience flow:

  1. Product Hero (TeamPilot AI)
  2. Product Overview & Demo
  3. Engineering Deep Dive
  4. Other Work (TToô client project, GitHub)
  5. About the Builder
  6. Contact

Tech Stack

Project Structure

portfolio/
├── app/
│   ├── layout.tsx       # Root layout with fonts, metadata
│   ├── page.tsx         # Main page (all sections)
│   └── globals.css      # Global styles, custom CSS
├── components/
│   ├── Navigation.tsx           # Fixed navbar
│   ├── Hero.tsx                 # Product hero section
│   ├── ProductOverview.tsx      # What TeamPilot is
│   ├── DemoVideo.tsx            # YouTube embed
│   ├── EngineeringMindset.tsx   # How I build software (principles)
│   ├── Architecture.tsx         # System architecture diagrams
│   ├── TechnicalDecisions.tsx   # Trade-offs explained
│   ├── EngineeringChallenges.tsx # Problems solved
│   ├── TechStack.tsx            # Technologies & reasons
│   ├── OtherWork.tsx            # TToô, GitHub, IBM Challenge
│   ├── About.tsx                # About the builder (concise)
│   └── Contact.tsx              # Hire section
├── public/
│   └── cv/                      # Resume PDF
└── tailwind.config.ts           # Design system config

Design System

Colors

Typography

Spacing

Getting Started

Install Dependencies

npm install

Development Server

npm run dev

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

Build for Production

npm run build

This generates a static export in the out/ directory, ready for deployment to GitHub Pages, Vercel, or any static host.

Deployment

GitHub Pages (Current)

  1. Build: npm run build
  2. The out/ directory contains the static site
  3. Push to gh-pages branch or configure GitHub Actions
  1. Connect repository to Vercel
  2. Auto-deploys on every push to main
  3. No configuration needed

Key Features

✅ Product-first narrative — Visitors see the product before the developer
✅ Engineering depth — Architecture diagrams, trade-offs, challenges solved
✅ Real data only — No fabricated metrics, no fake testimonials
✅ Premium design — Inspired by Linear, Stripe, Vercel
✅ Fast & accessible — Static export, semantic HTML, keyboard navigation
✅ SEO optimized — Metadata, structured content, fast load times

Content Guidelines

Every section follows this rule:

“Would this increase the probability that a startup founder hires me?”

If no, it doesn’t ship.

Screenshots Needed

Replace placeholder in Hero.tsx with actual TeamPilot screenshots:

  1. Dashboard (hero visual)
  2. AI Chat (grounded answers with citations)
  3. Recommendations (Granite tag, confidence scores)
  4. Projects List (supporting visual)

Place screenshots in public/img/teampilot/ and update component imports.

Analytics

Add Vercel Analytics or Plausible for privacy-focused tracking:

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

License

MIT License — feel free to fork and adapt for your own portfolio.

Contact

Dieudo Tshibangu
Email: tshibangudieudo@gmail.com
GitHub: github.com/tshibangu-dieudo
LinkedIn: linkedin.com/in/dieudo-tshibangu-b3ab0336a

Built with Next.js, TypeScript, and Tailwind CSS.