mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add static assets and content for the KLZ Cables showcase.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-01 15:09:30 +01:00
parent 60da9b9e1f
commit f597fc2d78
374 changed files with 43204 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/technologies/[slug]/content.tsx Normal file
View File

@@ -0,0 +1,99 @@
'use client';
import React from 'react';
import Link from 'next/link';
import { Container } from '../../../src/components/Layout';
import { Label } from '../../../src/components/Typography';
import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
import { technologies } from './data';
export default function TechnologyContent({ slug }: { slug: string }) {
const tech = technologies[slug];
if (!tech) {
return (
<div className="min-h-screen flex items-center justify-center">
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
<Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
</div>
</div>
);
}
const Icon = tech.icon;
return (
<div className="bg-white min-h-screen text-slate-900 pb-24">
<div className="bg-slate-50 border-b border-slate-200">
<Container className="py-24">
<Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
<ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
</Link>
<div className="flex flex-col md:flex-row items-start gap-8">
<div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
<Icon className="w-12 h-12" />
</div>
<div className="flex-1">
<Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
<p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
</div>
</div>
</Container>
</div>
<Container className="py-16">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
<div className="lg:col-span-8 space-y-12">
<section>
<h2 className="text-2xl font-bold mb-4">What is it?</h2>
<p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
<Zap className="w-6 h-6 text-amber-500" /> Why I use it
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{tech.benefits.map((benefit, i) => (
<div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
<Check className="w-5 h-5 text-green-600 shrink-0" />
<span className="font-medium text-slate-700">{benefit}</span>
</div>
))}
</div>
</section>
<section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
<Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
<h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
<p className="text-lg text-slate-700 leading-relaxed">
{tech.customerValue}
</p>
</section>
</div>
<div className="lg:col-span-4 space-y-8">
<div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
<h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
<div className="space-y-2">
{tech.related.map((item) => (
<Link
key={item.slug}
href={`/technologies/${item.slug}`}
className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
>
<span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
<ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
</Link>
))}
</div>
</div>
</div>
</div>
</Container>
</div>
);
}

105
app/technologies/[slug]/data.tsx Normal file
View File

@@ -0,0 +1,105 @@
import { Layers, Code, Database, Palette, Terminal } from 'lucide-react';
export interface TechInfo {
title: string;
subtitle: string;
description: string;
icon: any; // React.ElementType
benefits: string[];
customerValue: string;
color: string;
related: { name: string; slug: string }[];
}
export const technologies: Record<string, TechInfo> = {
'next-js-14': {
title: 'Next.js 14',
subtitle: 'The React Framework for the Web',
description: 'Next.js 14 is the latest version of the industry-leading framework for building high-performance web applications. It allows me to create fast, scalable, and search-engine-friendly websites by rendering content on the server before sending it to your users.',
icon: Layers,
benefits: [
'Lightning-fast page loads with Server Components',
'Automatic image optimization',
'Instant navigation between pages',
'Top-tier SEO (Search Engine Optimization) out of the box'
],
customerValue: 'For my clients, Next.js means a website that ranks higher on Google, keeps visitors engaged with instant interactions, and scales effortlessly as your traffic grows.',
color: 'bg-black text-white',
related: [
{ name: 'TypeScript', slug: 'typescript' },
{ name: 'React', slug: 'react' }
]
},
'typescript': {
title: 'TypeScript',
subtitle: 'JavaScript with Syntax for Types',
description: 'TypeScript adds a powerful type system to JavaScript, catching errors before they ever reach production. It acts as a safety net for your code, ensuring that data flows exactly as expected through your entire application.',
icon: Code,
benefits: [
'Eliminates whole categories of common bugs',
'Makes large codebases easier to maintain',
'Improves developer productivity and code confidence',
'Ensures critical data integrity'
],
customerValue: 'Using TypeScript means your application is robust and reliable from day one. It dramatically reduces the risk of "runtime errors" that could crash your site, saving time and money on bug fixes down the line.',
color: 'bg-blue-600 text-white',
related: [
{ name: 'Directus CMS', slug: 'directus-cms' },
{ name: 'Next.js 14', slug: 'next-js-14' }
]
},
'directus-cms': {
title: 'Directus CMS',
subtitle: 'The Open Data Platform',
description: 'Directus is a modern, headless Content Management System (CMS) that instantly turns any database into a beautiful, easy-to-use application for managing your content. Unlike traditional CMSs, it doesn\'t dictate how your website looks.',
icon: Database,
benefits: [
'Intuitive interface for non-technical editors',
'Complete freedom regarding front-end design',
'Real-time updates and live previews',
'Highly secure and role-based access control'
],
customerValue: 'Directus gives you full control over your content without needing a developer for every text change. It separates your data from the design, ensuring your website can evolve visually without rebuilding your entire content library.',
color: 'bg-purple-600 text-white',
related: [
{ name: 'Next.js 14', slug: 'next-js-14' },
{ name: 'Tailwind CSS', slug: 'tailwind-css' }
]
},
'tailwind-css': {
title: 'Tailwind CSS',
subtitle: 'Utility-First CSS Framework',
description: 'Tailwind CSS is a utility-first framework that allows me to build custom designs directly in markup. It eliminates the need for bulky, overriding stylesheets and ensures a consistent design system across every page.',
icon: Palette,
benefits: [
'Rapid UI development and prototyping',
'Consistent spacing, colors, and typography',
'Highly optimized final bundle size (only includes used styles)',
'Responsive design made simple'
],
customerValue: 'Tailwind ensures your brand looks pixel-perfect on every device. It also results in incredibly small CSS files, meaning your site loads faster for users on mobile networks.',
color: 'bg-cyan-500 text-white',
related: [
{ name: 'React', slug: 'react' },
{ name: 'Next.js 14', slug: 'next-js-14' }
]
},
'react': {
title: 'React',
subtitle: 'The Library for Web and Native User Interfaces',
description: 'React is the core library powering Next.js. It lets me build encapsulated components that manage their own state, then compose them to make complex UIs.',
icon: Terminal,
benefits: [
'Component-based architecture for reuse',
'Efficient updates and rendering',
'Rich ecosystem of libraries and tools',
'Strong community support'
],
customerValue: 'React enables rich, app-like interactions on your website. Whether it\'s a complex dashboard or a smooth animation, React makes it possible to build dynamic experiences that feel instantaneous.',
color: 'bg-blue-400 text-white',
related: [
{ name: 'Next.js 14', slug: 'next-js-14' },
{ name: 'Tailwind CSS', slug: 'tailwind-css' }
]
}
};

14
app/technologies/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { technologies } from './data';
import TechnologyContent from './content';
export default function TechnologyPage({ params }: { params: { slug: string } }) {
return <TechnologyContent slug={params.slug} />;
}
// Generate static params for these dynamic routes
export async function generateStaticParams() {
return Object.keys(technologies).map((slug) => ({
slug,
}));
}