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

feat: improve responsive project detail layout #12

Merged
Dada1981 merged 1 commit from codex/persistence-seo-hardening into main 2026-08-14 21:06:35 +00:00
Conversation 0 Commits 1 Files changed 5 +24 -14
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="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,6 +443,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
</div> </div>
</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} /> <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">
@ -459,6 +460,7 @@ export default function ClaraPortfolio({ data, legalDocuments = [] }: ClaraPortf
</div> </div>
</div> </div>
</div> </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="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,6 +443,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
</div> </div>
</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} /> <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">
@ -459,6 +460,7 @@ export default function EroticaPortfolio({ data, legalDocuments = [] }: EroticaP
</div> </div>
</div> </div>
</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"
/> />

8
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,6 +427,7 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
/> />
</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} /> <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">
@ -459,6 +461,8 @@ export default function ReneePortfolio({ data, legalDocuments = [] }: ReneePortf
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
)} )}
{/* Footer */} {/* 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="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,6 +468,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
</div> </div>
</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} /> <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">
@ -484,6 +485,7 @@ export default function SciFiPortfolio({ data, legalDocuments = [] }: SciFiPortf
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>