76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
const techStack = [
|
|
{
|
|
category: 'Frontend',
|
|
technologies: [
|
|
{ name: 'Next.js 16', description: 'React framework with App Router' },
|
|
{ name: 'Expo 54', description: 'React Native framework' },
|
|
{ name: 'React 19', description: 'Latest React with Server Components' },
|
|
{
|
|
name: 'Tailwind CSS v4',
|
|
description: 'Utility-first CSS framework',
|
|
},
|
|
{ name: 'shadcn/ui', description: 'Beautiful component library' },
|
|
],
|
|
},
|
|
{
|
|
category: 'Backend',
|
|
technologies: [
|
|
{ name: 'Convex', description: 'Self-hosted reactive backend' },
|
|
{
|
|
name: '@convex-dev/auth',
|
|
description: 'Multi-provider authentication',
|
|
},
|
|
{ name: 'UseSend', description: 'Self-hosted email service' },
|
|
{ name: 'File Storage', description: 'Built-in file uploads' },
|
|
],
|
|
},
|
|
{
|
|
category: 'Developer Tools',
|
|
technologies: [
|
|
{ name: 'Turborepo', description: 'High-performance build system' },
|
|
{ name: 'TypeScript', description: 'Type-safe development' },
|
|
{ name: 'Bun', description: 'Fast package manager and runtime' },
|
|
{ name: 'ESLint + Prettier', description: 'Code quality tools' },
|
|
{ name: 'Docker', description: 'Containerized deployment' },
|
|
],
|
|
},
|
|
];
|
|
|
|
export const TechStack = () => (
|
|
<section id='tech-stack' className='border-border/40 bg-muted/30 border-t'>
|
|
<div className='container mx-auto px-4 py-24'>
|
|
<div className='mx-auto max-w-6xl'>
|
|
<div className='mb-16 text-center'>
|
|
<h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
|
|
Modern Tech Stack
|
|
</h2>
|
|
<p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
|
|
Built with the latest and greatest tools for maximum productivity
|
|
and performance.
|
|
</p>
|
|
</div>
|
|
|
|
<div className='grid gap-12 md:grid-cols-3'>
|
|
{techStack.map((stack) => (
|
|
<div key={stack.category}>
|
|
<h3 className='mb-6 text-xl font-semibold'>{stack.category}</h3>
|
|
<ul className='space-y-4'>
|
|
{stack.technologies.map((tech) => (
|
|
<li key={tech.name}>
|
|
<div className='text-foreground font-medium'>
|
|
{tech.name}
|
|
</div>
|
|
<div className='text-muted-foreground text-sm'>
|
|
{tech.description}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|