CorbinLienau.dev

Overview

A modern personal portfolio and blog website built with Next.js 14, TypeScript, and TailwindCSS. Features a responsive design, dynamic project showcase, and markdown-based blog system.

Key Features

• Dynamic project portfolio with image carousels
• Markdown-based blog system with code syntax highlighting
• Responsive design with dark mode
• Project archive with filtering and sorting
• SEO optimization

Technical Implementation

Project Card Component

The project showcase uses a card-based system with image carousels and modal views:

typescript
interface ProjectCardProps {
  project: Project;
  isPreview?: boolean;
}

const ProjectCard: React.FC<ProjectCardProps> = ({ project, isPreview }) => {
  return (
    <article className="bg-gray-800 rounded-lg overflow-hidden">
      <ImageCarousel images={project.images} />
      <div className="p-6">
        <h2 className="text-2xl font-bold">
          <Link href={`/projects/${project.slug}`}>
            {project.title}
          </Link>
        </h2>
        <ProjectTags tags={project.tags} />
      </div>
    </article>
  );
};

Blog System

Implements a markdown-based blog system with code syntax highlighting and custom components:

typescript
const components = {
  code: ({ node, inline, className, children, ...props }) => {
    const match = /language-(\w+)/.exec(className || '');
    return !inline && match ? (
      <CodeBlock
        language={match[1]}
        code={String(children).replace(/\n$/, '')}
      />
    ) : (
      <code className="bg-gray-800 px-1 rounded" {...props}>
        {children}
      </code>
    );
  }
};

Development Process

• Mobile-first design approach using TailwindCSS
• Component-based architecture with TypeScript
• SEO optimization using Next.js 14 features
• Performance optimization with image optimization and code splitting