Skip to content

Commit

Permalink
refactor: projects, team
Browse files Browse the repository at this point in the history
  • Loading branch information
rexdotsh committed Dec 19, 2024
1 parent d20c672 commit 2b08723
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 88 deletions.
57 changes: 0 additions & 57 deletions src/components/Art.tsx

This file was deleted.

73 changes: 48 additions & 25 deletions src/components/Projects.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,57 @@
interface Project {
title: string;
emoji: string;
description: string;
image: string;
link?: string;
linkText?: string;
}

const projects: Project[] = [
{
title: "aster",
emoji: "⭐",
description: "a much more easy to use and painless alternative to the default youtube studio.",
image: "/aster.png",
linkText: "wip",
},
{
title: "orchid",
emoji: "🌺",
description: "a meme and pfp editor packed with features, built to run on low end devices.",
image: "/orchid.png",
link: "https://orchid.rex.wf",
linkText: "visit beta!",
},
];

export default function Projects() {
return (
<div class="w-full flex-wrap flex justify-start gap-4">
<div class="div w-full md:w-[calc(50%-8px)]">
<div class="w-full flex flex-col group project-card bg-neutral-950">
<img src="/aster.png" alt="Aster project preview" class="w-full h-[15rem] object-cover opacity-60 group-hover:opacity-100 transition-all duration-300" />
<div class="p-5">
<div class="flex justify-between items-center mb-2">
<p class="text-neutral-200">⭐ aster</p>
<a href="" class="text-sm hover:text-rose-400 transition-colors duration-200">
wip
</a>
<div class="w-full flex-wrap flex justify-start gap-4">
{projects.map((project) => (
<div class="div w-full md:w-[calc(50%-8px)]">
<div class="w-full flex flex-col group project-card bg-neutral-950 overflow-hidden">
<div class="relative overflow-hidden">
<img src={project.image} alt={`${project.title} project preview`} class="w-full h-[15rem] object-cover opacity-60 transition-all duration-500 transform group-hover:opacity-100 group-hover:scale-105" />
</div>
<p class="text-sm text-neutral-400">a much more easy to use and painless alternative to the default youtube studio.</p>
</div>
</div>
</div>
<div class="div w-full md:w-[calc(50%-8px)]">
<div class="w-full group flex flex-col project-card bg-neutral-950">
<img src="/orchid.png" class="w-full opacity-60 group-hover:opacity-100 transition-all duration-300 h-[15rem] object-cover" alt="Orchid project preview" />
<div class="p-5">
<div class="flex justify-between items-center mb-2">
<p class="text-neutral-200">🌺 orchid</p>
<a href="https://orchid.rex.wf" class="text-sm hover:text-rose-400 transition-colors duration-200">
visit beta!
</a>
<div class="p-5">
<div class="flex justify-between items-center mb-2">
<p class="text-neutral-200">
{project.emoji} {project.title}
</p>
{project.link ? (
<a href={project.link} class="text-sm hover:text-rose-400 transition-colors duration-200">
{project.linkText}
</a>
) : (
<span class="text-sm text-neutral-500">{project.linkText}</span>
)}
</div>
<p class="text-sm text-neutral-400">{project.description}</p>
</div>
<p class="text-sm text-neutral-400">a meme and pfp editor packed with features, built to run on low end devices.</p>
</div>
</div>
</div>
))}
</div>
);
}
30 changes: 24 additions & 6 deletions src/components/Team.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,30 @@
interface TeamMember {
name: string;
url: string;
avatar: string;
}

const team: TeamMember[] = [
{
name: "namish",
url: "https://namishh.me",
avatar: "https://sakura.rex.wf/linear/namishh",
},
{
name: "rex",
url: "https://rex.wf",
avatar: "https://sakura.rex.wf/linear/rexdotsh",
},
];

export default function Team() {
return (
<div class="flex mt-6 flex-wrap gap-4">
<a href="https://namishh.me" class="group" aria-label="Namish's profile">
<img src="https://sakura.rex.wf/linear/namishh" class="h-12 w-12 rounded-full team-avatar group-hover:ring-2 ring-neutral-700" alt="namish" />
</a>
<a href="https://rex.wf" class="group" aria-label="Rex's profile">
<img src="https://sakura.rex.wf/linear/rexdotsh" class="h-12 w-12 rounded-full team-avatar group-hover:ring-2 ring-neutral-700" alt="rex" />
</a>
{team.map((member) => (
<a href={member.url} class="group relative" aria-label={`${member.name}'s profile`}>
<img src={member.avatar} class="h-12 w-12 rounded-full transition-all duration-200 group-hover:scale-105 group-hover:ring-2 ring-neutral-700" alt={member.name.toLowerCase()} />
</a>
))}
</div>
);
}

0 comments on commit 2b08723

Please sign in to comment.