daniel/webstack-author
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve responsive project detail layout

Browse source
This commit is contained in:
Daniel Heße 2026-08-14 23:05:11 +02:00
parent 69392c850a
commit 91953bf162
5 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/ClaraPortfolio.tsx
View file

@ -405,7 +405,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
/> />
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6"> <div className="relative transform overflow-hidden rounded-2xl bg-stone-950 border border-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
<button <button
onClick={() => setSelectedProject(null)} onClick={() => setSelectedProject(null)}
@ -443,9 +443,10 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
</div> </div>
</div> </div>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} /> <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
<div className="bg-[#4A5D50]/5 p-5 rounded-xl border border-[#4A5D50]/20 relative overflow-hidden"> <div className="bg-[#4A5D50]/5 p-5 rounded-xl border border-[#4A5D50]/20 relative overflow-hidden">
{data.projectExcerptBadge && ( {data.projectExcerptBadge && (
<div className="absolute top-0 right-0 p-2 text-stone-700 text-[10px] font-mono select-none"> <div className="absolute top-0 right-0 p-2 text-stone-700 text-[10px] font-mono select-none">
{data.projectExcerptBadge} {data.projectExcerptBadge}
@ -457,6 +458,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
<div className="text-stone-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0"> <div className="text-stone-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
<Markdown>{selectedProject.description || "Für dieses Buchprojekt wurden noch keine lyrischen Gedanken freigegeben."}</Markdown> <Markdown>{selectedProject.description || "Für dieses Buchprojekt wurden noch keine lyrischen Gedanken freigegeben."}</Markdown>
</div> </div>
</div>
</div> </div>
</div> </div>

8
src/components/EroticaPortfolio.tsx
View file

@ -405,7 +405,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
/> />
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6"> <div className="relative transform overflow-hidden rounded-2xl bg-neutral-950 border border-neutral-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
<button <button
onClick={() => setSelectedProject(null)} onClick={() => setSelectedProject(null)}
@ -443,9 +443,10 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
</div> </div>
</div> </div>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} /> <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
<div className="bg-orange-950/10 p-5 rounded-xl border border-orange-950/20 relative overflow-hidden"> <div className="bg-orange-950/10 p-5 rounded-xl border border-orange-950/20 relative overflow-hidden">
{data.projectExcerptBadge && ( {data.projectExcerptBadge && (
<div className="absolute top-0 right-0 p-2 text-neutral-700 text-[10px] font-mono select-none"> <div className="absolute top-0 right-0 p-2 text-neutral-700 text-[10px] font-mono select-none">
{data.projectExcerptBadge} {data.projectExcerptBadge}
@ -457,6 +458,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
<div className="text-neutral-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0"> <div className="text-neutral-200 text-sm leading-relaxed italic markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
<Markdown>{selectedProject.description || "Für dieses diskrete Werk wurde noch kein detaillierter Auszug freigegeben."}</Markdown> <Markdown>{selectedProject.description || "Für dieses diskrete Werk wurde noch kein detaillierter Auszug freigegeben."}</Markdown>
</div> </div>
</div>
</div> </div>
</div> </div>

2
src/components/ProjectDetailMedia.tsx
View file

@ -26,7 +26,7 @@ export default function ProjectDetailMedia({ project, accentColor }: ProjectDeta
<img <img
src={project.imageUrl} src={project.imageUrl}
alt={`Motiv zum Projekt ${project.title}`} alt={`Motiv zum Projekt ${project.title}`}
className="w-full max-h-[28rem] object-cover" className="block w-full h-auto"
loading="lazy" loading="lazy"
referrerPolicy="no-referrer" referrerPolicy="no-referrer"
/> />

12
src/components/ReneePortfolio.tsx
View file

@ -395,9 +395,10 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
{/* Project Details Modal */} {/* Project Details Modal */}
{selectedProject && ( {selectedProject && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-fade-in"> <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/80 backdrop-blur-md animate-fade-in">
<div className="flex min-h-full items-center justify-center p-4">
<div <div
className="relative w-full max-w-lg border rounded-2xl p-6 md:p-8 space-y-6 shadow-2xl" className="relative w-full max-w-5xl border rounded-2xl p-6 md:p-8 my-8 space-y-6 shadow-2xl"
style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}40` }} style={{ backgroundColor: cardBgColor, borderColor: `${accentColor}40` }}
> >
<button <button
@ -426,9 +427,10 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
/> />
</div> </div>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} /> <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
<div className="bg-slate-900/60 p-5 rounded-xl border border-slate-800 relative overflow-hidden"> <div className="bg-slate-900/60 p-5 rounded-xl border border-slate-800 relative overflow-hidden">
{data.projectExcerptBadge && ( {data.projectExcerptBadge && (
<div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none"> <div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none">
{data.projectExcerptBadge} {data.projectExcerptBadge}
@ -455,9 +457,11 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
{selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."} {selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}
</Markdown> </Markdown>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
)} )}

8
src/components/SciFiPortfolio.tsx
View file

@ -429,7 +429,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
/> />
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="relative transform overflow-hidden rounded-2xl bg-slate-900 border border-slate-800 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl p-6 md:p-8 space-y-6"> <div className="relative transform overflow-hidden rounded-2xl bg-slate-900 border border-slate-800 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl p-6 md:p-8 space-y-6">
{/* Close Button */} {/* Close Button */}
<button <button
@ -468,9 +468,10 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
</div> </div>
</div> </div>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} /> <div className={`grid gap-6 ${(selectedProject.imageUrl || selectedProject.spotifyPlaylistId) ? "lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start" : ""}`}>
<ProjectDetailMedia project={selectedProject} accentColor={accentColor} />
<div className="bg-slate-950/60 p-5 rounded-xl border border-slate-800/60 relative overflow-hidden"> <div className="bg-slate-950/60 p-5 rounded-xl border border-slate-800/60 relative overflow-hidden">
{data.projectExcerptBadge && ( {data.projectExcerptBadge && (
<div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none"> <div className="absolute top-0 right-0 p-2 text-slate-700 text-[10px] font-mono select-none">
{data.projectExcerptBadge} {data.projectExcerptBadge}
@ -482,6 +483,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
<div className="text-slate-300 text-sm leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0"> <div className="text-slate-300 text-sm leading-relaxed markdown-body [&_p]:mb-4 [&_p:last-child]:mb-0">
<Markdown>{selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}</Markdown> <Markdown>{selectedProject.description || "Für dieses Schreibprojekt wurden noch keine weiteren Details abgelegt."}</Markdown>
</div> </div>
</div>
</div> </div>
</div> </div>