timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-15 03:23:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

migrate to vercel; bump version

Browse Source
This commit is contained in:
Timothy Pidashev
2026-03-31 12:11:30 -07:00
parent 11f05e0d6f
commit 99e4e65d92
106 changed files with 399 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/components/projects/project-list.tsx Normal file
View File

@@ -0,0 +1,99 @@
import type { CollectionEntry } from "astro:content";
import { AnimateIn } from "@/components/animate-in";
interface ProjectListProps {
projects: CollectionEntry<"projects">[];
}
export function ProjectList({ projects }: ProjectListProps) {
return (
<div className="w-full max-w-6xl mx-auto pt-24 sm:pt-32 px-4">
<AnimateIn>
<h1 className="text-2xl sm:text-3xl font-bold text-blue mb-12 text-center leading-relaxed">
Here's what I've been <br className="sm:hidden" />
building lately
</h1>
</AnimateIn>
<ul className="space-y-6 md:space-y-10">
{projects.map((project, i) => (
<AnimateIn key={project.id} delay={i * 80}>
<li className="group">
<a href={`/projects/${project.id}`} className="block">
<article className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 p-2 md:p-4 border-b border-foreground/20 last:border-b-0 rounded-lg group-hover:outline group-hover:outline-2 group-hover:outline-blue transition-all duration-200">
{/* Image */}
<div className="w-full md:w-1/3 aspect-[16/9] overflow-hidden rounded-lg bg-foreground/5 flex-shrink-0">
{project.data.image ? (
<img
src={project.data.image}
alt={`${project.data.title} preview`}
className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-300"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-foreground/30">
<span className="text-sm">No preview available</span>
</div>
)}
</div>
{/* Content */}
<div className="w-full md:w-2/3 flex flex-col gap-2 md:gap-3">
<h2 className="text-lg md:text-2xl font-semibold text-yellow group-hover:text-blue transition-colors duration-200 line-clamp-2">
{project.data.title}
</h2>
<p className="text-foreground/90 text-sm md:text-lg leading-relaxed line-clamp-2">
{project.data.description}
</p>
{/* Tech stack */}
<div className="flex flex-wrap gap-1.5 md:gap-2 mt-1">
{project.data.techStack.map((tech) => (
<span
key={tech}
className="text-xs md:text-sm px-2 py-0.5 rounded-full bg-purple-bright/10 text-purple-bright"
>
{tech}
</span>
))}
</div>
{/* Links */}
{(project.data.githubUrl || project.data.demoUrl) && (
<div className="flex gap-4 mt-1">
{project.data.githubUrl && (
<span
className="text-sm text-foreground/50 hover:text-blue-bright transition-colors"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
window.open(project.data.githubUrl, "_blank");
}}
>
Source
</span>
)}
{project.data.demoUrl && (
<span
className="text-sm text-foreground/50 hover:text-green-bright transition-colors"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
window.open(project.data.demoUrl, "_blank");
}}
>
Live
</span>
)}
</div>
)}
</div>
</article>
</a>
</li>
</AnimateIn>
))}
</ul>
</div>
);
}