Skip to content

Commit 2e812dc

Browse files
zackproserzackproser
committed
Add initial speaker page
1 parent ab8a9b7 commit 2e812dc

File tree

5 files changed

+334
-0
lines changed

5 files changed

+334
-0
lines changed

‎src/app/speaking/page.jsx‎

Lines changed: 333 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,333 @@
1+
import Head from 'next/head'
2+
import Image from 'next/image'
3+
import Link from 'next/link'
4+
import { SimpleLayout } from '@/components/SimpleLayout'
5+
import { createMetadata } from '@/utils/createMetadata'
6+
import { ExternalLink, Calendar, Users, Building2, Youtube, Link as LinkIcon } from 'lucide-react'
7+
8+
// Import speaking images from the a16z blog post
9+
import a16z1 from '@/images/a16z-1.webp'
10+
// Import WorkOS internal training images
11+
import aiFundamentals from '@/images/ai-fundamentals.webp'
12+
import neuralNetworksLearn from '@/images/neural-networks-learn.webp'
13+
14+
export const metadata = createMetadata({
15+
title: 'Speaking Engagements - Zachary Proser',
16+
description: 'AI engineer speaker, conference presenter, and technical trainer. Public talks on AI, infrastructure as code, vector databases, and developer tools. Available for speaking engagements and corporate training.',
17+
author: 'Zachary Proser',
18+
date: '2024-12-19',
19+
type: 'blog',
20+
slug: 'speaking',
21+
image: a16z1,
22+
keywords: [
23+
'Zachary Proser speaking',
24+
'AI engineer speaker',
25+
'conference speaker',
26+
'technical trainer',
27+
'AI talks',
28+
'infrastructure as code speaker',
29+
'vector database expert',
30+
'developer tools speaker',
31+
'corporate training',
32+
'engineering training',
33+
'AI fundamentals',
34+
'machine learning speaker',
35+
'DevOps speaker',
36+
'cloud infrastructure'
37+
],
38+
tags: [
39+
'speaking',
40+
'conferences',
41+
'AI',
42+
'machine learning',
43+
'infrastructure as code',
44+
'vector databases',
45+
'developer tools',
46+
'training',
47+
'workshops'
48+
]
49+
});
50+
51+
// Speaking engagements data
52+
const speakingEngagements = [
53+
{
54+
id: 'a16z-dec-2023',
55+
type: 'public',
56+
title: 'Navigating from Jupyter Notebooks to Production',
57+
event: 'Pinecone & Cohere Meetup at a16z',
58+
date: 'December 6, 2023',
59+
location: 'Andreesen Horowitz, San Francisco, CA',
60+
description: 'I introduced the new Pinecone AWS Reference Architecture with Pulumi and explained infrastructure as code, using a mountaineering metaphor to compare getting from prototype to production.',
61+
image: a16z1,
62+
audience: '~125 attendees',
63+
topics: ['Infrastructure as Code', 'Pinecone', 'AWS', 'Pulumi', 'Production Deployment'],
64+
links: [
65+
{
66+
type: 'blog',
67+
url: '/blog/a16z-sf-dec-2023-ai-apps-production',
68+
label: 'Read Full Blog Post'
69+
},
70+
{
71+
type: 'twitter',
72+
url: 'https://twitter.com/zackproser/status/1732228822626619637',
73+
label: 'Twitter Thread'
74+
}
75+
],
76+
featured: true
77+
},
78+
{
79+
id: 'ai-fundamentals-internal',
80+
type: 'internal',
81+
title: 'AI Fundamentals for Engineering Teams',
82+
event: 'WorkOS Internal Training',
83+
date: 'May 2025',
84+
location: 'In-person',
85+
description: 'Comprehensive introduction to AI concepts, machine learning fundamentals, and practical applications for software engineering teams. Covered LLMs, vector databases, RAG, and hands-on implementation strategies.',
86+
image: aiFundamentals,
87+
audience: 'Engineering Team (25 developers)',
88+
topics: ['Machine Learning', 'Large Language Models', 'Vector Databases', 'RAG', 'AI Engineering'],
89+
internal: true
90+
},
91+
{
92+
id: 'ai-content-creation-internal',
93+
type: 'internal',
94+
title: 'AI-Enabled Content Creation Workshop',
95+
event: 'WorkOS Internal Training',
96+
date: 'May 2025',
97+
location: 'In-person',
98+
description: 'Interactive workshop teaching content teams how to leverage AI tools for writing, editing, ideation, and content optimization. Practical hands-on session with real-world use cases and workflow optimization.',
99+
image: neuralNetworksLearn,
100+
audience: 'Marketing & Content Team (15 members)',
101+
topics: ['AI Writing Tools', 'Content Strategy', 'Workflow Optimization', 'Prompt Engineering', 'Content Marketing'],
102+
internal: true
103+
}
104+
];
105+
106+
// Component for rendering external links with icons
107+
function ExternalLinkButton({ link }) {
108+
const getIcon = () => {
109+
switch (link.type) {
110+
case 'youtube':
111+
return <Youtube className="h-4 w-4" />;
112+
case 'blog':
113+
return <LinkIcon className="h-4 w-4" />;
114+
case 'twitter':
115+
return <ExternalLink className="h-4 w-4" />;
116+
default:
117+
return <ExternalLink className="h-4 w-4" />;
118+
}
119+
};
120+
121+
const getButtonStyle = () => {
122+
switch (link.type) {
123+
case 'youtube':
124+
return 'bg-red-600 hover:bg-red-700 text-white';
125+
case 'blog':
126+
return 'bg-blue-600 hover:bg-blue-700 text-white';
127+
case 'twitter':
128+
return 'bg-sky-500 hover:bg-sky-600 text-white';
129+
default:
130+
return 'bg-gray-600 hover:bg-gray-700 text-white';
131+
}
132+
};
133+
134+
const isExternal = link.url.startsWith('http');
135+
const LinkComponent = isExternal ? 'a' : Link;
136+
137+
const linkProps = isExternal
138+
? { href: link.url, target: '_blank', rel: 'noopener noreferrer' }
139+
: { href: link.url };
140+
141+
return (
142+
<LinkComponent
143+
{...linkProps}
144+
className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${getButtonStyle()}`}
145+
>
146+
{getIcon()}
147+
{link.label}
148+
</LinkComponent>
149+
);
150+
}
151+
152+
// Component for a single speaking engagement card
153+
function SpeakingCard({ engagement }) {
154+
return (
155+
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
156+
{/* Image */}
157+
<div className="relative h-48 bg-gradient-to-br from-blue-600 to-purple-700">
158+
<Image
159+
src={engagement.image}
160+
alt={engagement.title}
161+
fill
162+
className="object-cover"
163+
/>
164+
{/* Badge for internal vs public */}
165+
<div className="absolute top-4 left-4">
166+
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
167+
engagement.type === 'internal'
168+
? 'bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-400'
169+
: 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
170+
}`}>
171+
{engagement.type === 'internal' ? <Building2 className="h-3 w-3" /> : <Users className="h-3 w-3" />}
172+
{engagement.type === 'internal' ? 'Internal' : 'Public'}
173+
</span>
174+
</div>
175+
{/* Featured badge */}
176+
{engagement.featured && (
177+
<div className="absolute top-4 right-4">
178+
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400">
179+
⭐ Featured
180+
</span>
181+
</div>
182+
)}
183+
</div>
184+
185+
{/* Content */}
186+
<div className="p-6">
187+
<div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-2">
188+
<Calendar className="h-4 w-4" />
189+
{engagement.date}
190+
</div>
191+
192+
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
193+
{engagement.title}
194+
</h3>
195+
196+
<p className="text-blue-600 dark:text-blue-400 font-medium mb-3">
197+
{engagement.event}
198+
</p>
199+
200+
<p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
201+
{engagement.description}
202+
</p>
203+
204+
{/* Details */}
205+
<div className="space-y-2 mb-4 text-sm">
206+
<div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
207+
<Users className="h-4 w-4" />
208+
<span>{engagement.audience}</span>
209+
</div>
210+
<div className="text-gray-500 dark:text-gray-400">
211+
📍 {engagement.location}
212+
</div>
213+
</div>
214+
215+
{/* Topics */}
216+
<div className="mb-4">
217+
<div className="flex flex-wrap gap-2">
218+
{engagement.topics.map((topic, index) => (
219+
<span
220+
key={index}
221+
className="inline-block px-2 py-1 bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400 text-xs rounded-md"
222+
>
223+
{topic}
224+
</span>
225+
))}
226+
</div>
227+
</div>
228+
229+
{/* Links */}
230+
{engagement.links && engagement.links.length > 0 && (
231+
<div className="flex flex-wrap gap-2">
232+
{engagement.links.map((link, index) => (
233+
<ExternalLinkButton key={index} link={link} />
234+
))}
235+
</div>
236+
)}
237+
</div>
238+
</div>
239+
);
240+
}
241+
242+
export default function Speaking() {
243+
const publicEngagements = speakingEngagements.filter(e => e.type === 'public');
244+
const internalEngagements = speakingEngagements.filter(e => e.type === 'internal');
245+
246+
return (
247+
<>
248+
<Head>
249+
<title>Speaking - Zachary Proser</title>
250+
<meta
251+
name="description"
252+
content="Public talks, internal training sessions, and conference presentations on AI, infrastructure, and developer tools."
253+
/>
254+
</Head>
255+
<SimpleLayout
256+
title="Speaking Engagements"
257+
intro="I speak at conferences, meetups, and corporate events about AI, infrastructure as code, vector databases, and developer tools. I also provide internal training for engineering and content teams."
258+
>
259+
{/* Stats Section */}
260+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
261+
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6 text-center">
262+
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">
263+
{publicEngagements.length}
264+
</div>
265+
<div className="text-blue-800 dark:text-blue-300 font-medium">Public Talks</div>
266+
</div>
267+
<div className="bg-amber-50 dark:bg-amber-900/20 rounded-lg p-6 text-center">
268+
<div className="text-3xl font-bold text-amber-600 dark:text-amber-400 mb-2">
269+
{internalEngagements.length}
270+
</div>
271+
<div className="text-amber-800 dark:text-amber-300 font-medium">Internal Training</div>
272+
</div>
273+
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 text-center">
274+
<div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">
275+
165+
276+
</div>
277+
<div className="text-green-800 dark:text-green-300 font-medium">Total Attendees</div>
278+
</div>
279+
</div>
280+
281+
{/* Public Engagements */}
282+
<section className="mb-12">
283+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
284+
<Users className="h-6 w-6 text-green-600" />
285+
Public Speaking
286+
</h2>
287+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
288+
{publicEngagements.map((engagement) => (
289+
<SpeakingCard key={engagement.id} engagement={engagement} />
290+
))}
291+
</div>
292+
</section>
293+
294+
{/* Internal Training */}
295+
<section className="mb-12">
296+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
297+
<Building2 className="h-6 w-6 text-amber-600" />
298+
Corporate Training & Workshops
299+
</h2>
300+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
301+
{internalEngagements.map((engagement) => (
302+
<SpeakingCard key={engagement.id} engagement={engagement} />
303+
))}
304+
</div>
305+
</section>
306+
307+
{/* CTA Section */}
308+
<section className="bg-gradient-to-r from-blue-600 to-purple-700 rounded-xl p-8 text-white text-center">
309+
<h2 className="text-2xl font-bold mb-4">Looking for a Speaker?</h2>
310+
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
311+
I&apos;m available for conference talks, meetups, corporate training, and workshops.
312+
I speak about AI engineering, infrastructure as code, vector databases, developer tools,
313+
and practical machine learning implementations.
314+
</p>
315+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
316+
<Link
317+
href="/contact"
318+
className="inline-flex items-center justify-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-md hover:bg-blue-50 transition-colors"
319+
>
320+
Book a Speaking Engagement
321+
</Link>
322+
<Link
323+
href="/ai-training"
324+
className="inline-flex items-center justify-center px-6 py-3 bg-blue-500 hover:bg-blue-400 text-white font-semibold rounded-md transition-colors"
325+
>
326+
View Training Services
327+
</Link>
328+
</div>
329+
</section>
330+
</SimpleLayout>
331+
</>
332+
);
333+
}

‎src/components/ConsultancyNav.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const navItems = [
3838
],
3939
},
4040
{ name: 'About', href: '/about' },
41+
{ name: 'Speaking', href: '/speaking' },
4142
{ name: 'Testimonials', href: '/testimonials' },
4243
{ name: 'Contact', href: '/contact' },
4344
];

‎src/images/ai-fundamentals.webp‎

187 KB
Loading

‎src/images/neural-networks-learn.webp‎

77 KB
Loading

‎src/neural-networks-learn.webp‎

77 KB
Loading

0 commit comments

Comments
 (0)