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

4
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="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
onClick={() => setSelectedProject(null)}
@ -443,6 +443,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
</div>
</div>
<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">
@ -459,6 +460,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
</div>
</div>
</div>
</div>
</div>
</div>

4
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="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
onClick={() => setSelectedProject(null)}
@ -443,6 +443,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
</div>
</div>
<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">
@ -459,6 +460,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
</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
src={project.imageUrl}
alt={`Motiv zum Projekt ${project.title}`}
className="w-full max-h-[28rem] object-cover"
className="block w-full h-auto"
loading="lazy"
referrerPolicy="no-referrer"
/>

8
src/components/ReneePortfolio.tsx
View file

@ -395,9 +395,10 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
{/* Project Details Modal */}
{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
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` }}
>
<button
@ -426,6 +427,7 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
/>
</div>
<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">
@ -459,6 +461,8 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
</div>
</div>
</div>
</div>
</div>
)}
{/* Footer */}

4
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="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 */}
<button
@ -468,6 +468,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
</div>
</div>
<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">
@ -484,6 +485,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
</div>
</div>
</div>
</div>
</div>
</div>