Skip to content

Commit

Permalink
feat: improved ui of projects grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenbupe
rubenbupe committed Aug 14, 2024
1 parent 939d101 commit 5b79369
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 13 deletions.
2 changes: 1 addition & 1 deletion src/components/Globe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function Globe() {
markers: [ { location: [37.7595, -122.4367], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [40.7128, -74.006], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [52.520008, 13.404954], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [51.507351, -0.127758], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [35.689487, 139.691711], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [22.396427, 114.109497], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [30.047503, 31.233702], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [-33.86882, 151.20929], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, { location: [-9.746956, -44.261249], size: Math.random() * (maxMarkerSize - minMarkerSize) + minMarkerSize }, ],
onRender: (state) => {
state.phi = phi;
phi += 0.0015;
phi += 0.0005;
}
});

Expand Down
11 changes: 9 additions & 2 deletions src/sections/About.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,15 @@ import profileImage from "../assets/profile.webp";
"Backend development",
"Machine learning",
].map((item) => (
<li class="text-primary mt-2 ml-2 flex items-center">
<Icon name="tabler:chevron-right" class="inline" />
<li class="relative group text-primary mt-2 ml-2 flex items-center">
<Icon
name="tabler:chevron-right"
class="absolute left-0 transform -translate-x-4 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out"
/>
<Icon
name="tabler:chevron-right"
class="inline opacity-100 group-hover:opacity-0 group-hover:translate-x-8 transition-all duration-300"
/>
<span class="ml-2">{item}</span>
</li>
))
Expand Down
47 changes: 37 additions & 10 deletions src/sections/Projects.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,26 @@ const projects = [
url: "https://github.com",
feature: true,
},
{
title: "Project 4",
paragraphs: [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
],
badges: ["React", "TailwindCSS", "Vite"],
url: "https://github.com",
feature: false,
},
{
title: "Project 5",
paragraphs: [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec.",
],
badges: ["React", "TailwindCSS", "Vite"],
url: "https://github.com",
feature: false,
},
];
---

Expand Down Expand Up @@ -109,7 +129,7 @@ const projects = [
<div class="absolute w-full h-full overflow-hidden">
<div
id="cursor-glow"
class="absolute w-24 h-24 rounded-full bg-foreground/70 pointer-events-none [filter:blur(150px)] opacity-0 transition-opacity duration-300 ease-in-out"
class="absolute w-24 h-24 rounded-full bg-foreground pointer-events-none [filter:blur(150px)] opacity-0 transition-opacity duration-300 ease-in-out"
>
</div>
</div>
Expand Down Expand Up @@ -183,35 +203,42 @@ const projects = [
class={cn(
`relative group border-t border-r border-dashed w-full cursor-pointer hover:[box-shadow:inset_0_0_10px_0_rgba(255,255,255,0.2)] transition-all duration-500`,
project.feature
? "md:col-span-2 grid grid-cols-1 md:grid-cols-2"
? "md:col-span-2 grid grid-cols-1 md:grid-cols-2 items-center"
: "md:col-span-1 flex flex-col"
)}
>
<div class="p-8">
<h3 class="text-xl font-bold">{project.title}</h3>
<div class="p-8 group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all duration-500">
<h3 class="text-xl font-bold">
<code>{project.title}</code>
</h3>
<div class="w-full mt-4">
<div class="flex flex-col gap-2">
{project.paragraphs.map((paragraph) => (
<p class="text-sm text-foreground/50">
{paragraph}
<code>{paragraph}</code>
</p>
))}
</div>
</div>
<div class="flex gap-2 mt-4">
<div class="flex gap-2 mt-4 flex-wrap">
{project.badges.map((badge) => (
<span class="text-xs border-foreground text-foreground border border-dashed p-1 px-2 rounded-full group-hover:bg-foreground/20 transition-all duration-500">
{badge}
<code>{badge}</code>
</span>
))}
</div>
</div>
<div class="relative w-full h-48 p-6">
<div class="absolute inset-6 bg-foreground/20 group-hover:translate-x-2 group-hover:translate-y-2 transition-all duration-500 ease-in-out" />
<div
class={cn(
"relative w-full aspect-video p-8 overflow-hidden",
project.feature ? "" : ""
)}
>
<div class="absolute inset-8 bg-foreground/20 group-hover:translate-x-2 group-hover:translate-y-2 transition-all duration-500 ease-in-out group-hover:[box-shadow:inset_0_0_10px_0_rgba(255,255,255,0.2)]" />
<img
src="https://picsum.photos/200"
alt="Project 1"
class="w-full h-full filter grayscale group-hover:filter-none transition-all duration-500 group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow"
class="w-full h-full filter grayscale group-hover:filter-none transition-all duration-500 group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow object-cover"
/>
</div>
</a>
Expand Down

0 comments on commit 5b79369

Please sign in to comment.