space/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Codex tried to make the site more responsive on mobile
Build Check / build (push) Successful in 48s
Details
Build Check / push-image (push) Successful in 2m43s
Details
Build Check / deploy-coolify (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Space-Banane
2026-06-03 15:58:29 +02:00
parent 40526e115e
commit aebeed3964
19 changed files with 130 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProjectCard.tsx
+9 -9
View File
@@ -4,36 +4,36 @@ import type { Project } from "../types";
export function ProjectCard({ project }: { project: Project }) {
return (
<div className="group relative flex flex-col p-6 rounded-2xl bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm border border-white/10 hover:border-purple-500/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-purple-500/10">
<div className="group relative mx-auto flex w-full max-w-[20rem] flex-col rounded-2xl border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-purple-500/30 hover:shadow-2xl hover:shadow-purple-500/10 sm:max-w-none sm:p-6">
{project.image && (
<div className="mb-6 overflow-hidden rounded-xl bg-black/20 aspect-video flex items-center justify-center relative">
<div className="relative mb-4 flex aspect-video items-center justify-center overflow-hidden rounded-xl bg-black/20 sm:mb-6">
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<img
src={project.image}
alt={project.name}
className={`object-contain ${project.rounded === false ? "w-full h-auto max-h-24 rounded-lg" : "h-24 w-24 rounded-full"} shadow-lg group-hover:scale-110 transition-transform duration-500`}
className={`object-contain shadow-lg transition-transform duration-500 group-hover:scale-110 ${project.rounded === false ? "h-auto w-full max-h-20 rounded-lg sm:max-h-24" : "h-20 w-20 rounded-full sm:h-24 sm:w-24"}`}
/>
</div>
)}
<h3 className="text-xl font-bold text-white mb-2 group-hover:text-purple-400 transition-colors">
<h3 className="mb-2 text-lg font-bold text-white transition-colors group-hover:text-purple-400 sm:text-xl">
{project.name}
</h3>
<p className="text-gray-400 text-sm flex-grow mb-6 leading-relaxed">
<p className="mb-5 flex-grow text-sm leading-relaxed text-gray-400 sm:mb-6">
{project.description}
</p>
{project.last_commit && (
<p className="text-gray-400 text-xs mb-2">
<p className="mb-2 text-xs text-gray-400">
Last commit: {new Date(project.last_commit).toLocaleDateString()}
</p>
)}
<div className="flex gap-3 mt-auto">
<div className="mt-auto flex flex-col gap-3 sm:flex-row">
<a
href={project.link + "?utm_source=portfolio&ref=space"}
target="_blank"
rel="noreferrer"
className="flex-1 py-2 px-4 rounded-lg bg-white/10 hover:bg-white/20 text-white text-sm font-medium text-center transition-colors flex items-center justify-center gap-2"
className="flex flex-1 items-center justify-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-center text-sm font-medium text-white transition-colors hover:bg-white/20"
>
Visit
<svg
@@ -55,7 +55,7 @@ export function ProjectCard({ project }: { project: Project }) {
href={project.open_source.link}
target="_blank"
rel="noreferrer"
className="p-2 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors border border-white/5"
className="self-center rounded-lg border border-white/5 bg-white/5 p-2 text-gray-400 transition-colors hover:bg-white/10 hover:text-white sm:self-auto"
title="View Source"
>
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">