open-productive-stack/drupal/nextjs/components/home-projects.tsx
rnsrk f8b8f53d54 Add Drupal headless stack with Next.js frontend
- Add Next.js frontend service (nextjs) with Dockerfile and source
- Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service
- Add docker-compose.override.yml.disabled for dev hot-reload
- Add install-headless-modules.sh for OAuth/JSON:API module setup
- Add README.md with full setup and configuration guide
- Update nginx/Dockerfile and nginx.conf.template for cms. subdomain
- Update drupal/Dockerfile PHP-FPM build args
- Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
2026-03-30 11:14:17 +02:00

88 lines
3.7 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import Link from "next/link"
import Image from "next/image"
import { ArrowUpRight } from "lucide-react"
import { ScrollRevealCard } from "@/components/scroll-reveal-card"
const projects = [
{
title: "Böhler re:search",
description:
"Digital edition of the Munich art dealer Julius Böhler's object card system, photo folders and customer index (19031948). Research data on traded artworks, transactions and actors.",
href: "https://boehler.zikg.eu/",
icon: "/assets/icons/boehler-research.png",
},
{
title: "Objektsprache und Ästhetik",
description:
"Shell collections at Leopoldina, Goldfuß-Museum Bonn, and Central Institute for Natural Collections MLU. Historical object references and synonym networks for conchylia.",
href: "https://konchylien.leopoldina.org/sammlungen",
icon: "/assets/logos/lzfw_logo.png",
},
{
title: "SCS Manager",
description:
"Semantic Co-Working Space for academic university collections. Model, transform, analyse and publish data with JupyterLab, OpenRefine, WissKI and more.",
href: "https://manager.scs.sammlungen.io/",
icon: "/assets/icons/scs-manager.png",
},
{
title: "WissKI",
description:
"Semantic data management system for GLAM institutions. Virtual research environment extending Drupal with CIDOC CRM, Pathbuilder and linked open data.",
href: "https://wiss-ki.eu/",
icon: "/assets/icons/wisski.svg",
},
]
export function HomeProjects() {
return (
<section className="home-projects py-10" aria-labelledby="projects-heading">
<div className="home-projects-header mb-6 text-center">
<h2
id="projects-heading"
className="home-projects-title mb-3 font-bold tracking-tight text-slate-900"
style={{ fontSize: "var(--fluid-section-title)" }}
>
Projects
</h2>
<p
className="home-projects-description mx-auto max-w-3xl text-slate-600"
style={{ fontSize: "var(--fluid-hero-desc)" }}
>
Data- and information-focused websites and applications.
</p>
</div>
<div className="home-projects-grid grid gap-8 sm:grid-cols-2">
{projects.map((project) => (
<ScrollRevealCard key={project.href}>
<Link
href={project.href}
target="_blank"
rel="noopener noreferrer"
className="home-projects-card group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-emerald-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
>
<h3 className="home-projects-card-title mb-2 flex items-center gap-3 text-xl font-semibold text-slate-900">
<Image
src={project.icon}
alt=""
width={24}
height={24}
className="size-6 shrink-0 object-contain"
unoptimized
/>
{project.title}
</h3>
<p className="home-projects-card-description mb-4 text-slate-600">
{project.description}
</p>
<span className="home-projects-card-link inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
Visit project
<ArrowUpRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden />
</span>
</Link>
</ScrollRevealCard>
))}
</div>
</section>
)
}