-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
72 additions
and
88 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |