Rebuilt cards in projects to be in one component with changable variables
This commit is contained in:
Fabio
parent
c578106942
commit
9d376802fc
13
src/lib/components/ProjectBodyCard.svelte
Normal file
13
src/lib/components/ProjectBodyCard.svelte
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import { cn } from "$lib/utils";
|
||||||
|
|
||||||
|
export let title = "";
|
||||||
|
export let desc = "";
|
||||||
|
let className = "";
|
||||||
|
export { className as class };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
|
||||||
|
<h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">{title}</h3>
|
||||||
|
<p class="text-sm leading-5">{desc}</p>
|
||||||
|
</div>
|
||||||
41
src/lib/components/ProjectCard.svelte
Normal file
41
src/lib/components/ProjectCard.svelte
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<script>
|
||||||
|
import CardBody from "./ProjectBodyCard.svelte";
|
||||||
|
import { base } from '$app/paths';
|
||||||
|
import { cn } from "$lib/utils";
|
||||||
|
|
||||||
|
export let title = "";
|
||||||
|
export let desc = "";
|
||||||
|
export let image;
|
||||||
|
export let link = "#";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="{base}/{link}">
|
||||||
|
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
placeholder="blur"
|
||||||
|
alt={title + " mockup"}
|
||||||
|
class="w-[25rem] object-cover object-center m-0"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
||||||
|
></div>
|
||||||
|
<CardBody
|
||||||
|
{title}
|
||||||
|
{desc}
|
||||||
|
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
transition: all 0.3s;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
filter: grayscale(0%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { cn } from "$lib/utils";
|
|
||||||
|
|
||||||
let className = "";
|
|
||||||
export { className as class };
|
|
||||||
let card = {
|
|
||||||
title: "LifeMap",
|
|
||||||
desc: "LifeMap is a personal life tracker that visually organizes important events, goals, and memories in a timeline and map format. It helps users reflect on their past, document key milestones, and plan for the future in a structured and interactive way.",
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
|
|
||||||
<h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm leading-5">{card.desc}</p>
|
|
||||||
</div>
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<script>
|
|
||||||
import CardBodyImg from "./lifemap_body_card.svelte";
|
|
||||||
import lifemap_mockup from "$lib/img/lifemap_mockup.png";
|
|
||||||
import { base } from '$app/paths';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a href="{base}/nexo_project" >
|
|
||||||
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
|
||||||
<img
|
|
||||||
src={lifemap_mockup}
|
|
||||||
placeholder="blur"
|
|
||||||
alt="lifemap_mockup"
|
|
||||||
class="w-[25rem] object-cover object-center m-0"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
|
||||||
></div>
|
|
||||||
<slot>
|
|
||||||
<CardBodyImg
|
|
||||||
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.card {
|
|
||||||
transition: all 0.3s;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: grayscale(0%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { cn } from "$lib/utils";
|
|
||||||
|
|
||||||
let className = "";
|
|
||||||
export { className as class };
|
|
||||||
let card = {
|
|
||||||
title: "Nexo bot for Discord",
|
|
||||||
desc: "My own personal bot for Discord, written in Python using the discord.py library.",
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
|
|
||||||
<h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm leading-5">{card.desc}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
It's purpose is to use on my own server (linked on homepage), and it has or will have a lot of features, such as: moderation, fun, and more. It's still under development, but it's already usable.
|
|
||||||
-->
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
<script>
|
|
||||||
import CardBodyImg from "./nexo_body_card.svelte";
|
|
||||||
import nexo_mockup from "$lib/img/nexo_mockup.png";
|
|
||||||
import { base } from '$app/paths';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a href="{base}/nexo_project" >
|
|
||||||
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
|
||||||
<img
|
|
||||||
src={nexo_mockup}
|
|
||||||
placeholder="blur"
|
|
||||||
alt="nexo_mockup"
|
|
||||||
class="w-[25rem] object-cover object-center m-0"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
|
||||||
></div>
|
|
||||||
<slot>
|
|
||||||
<CardBodyImg
|
|
||||||
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.card {
|
|
||||||
transition: all 0.3s;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: grayscale(0%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,9 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import BlurFade from "./BlurFade.svelte";
|
import BlurFade from "./BlurFade.svelte";
|
||||||
import NexoCard from "./nexo_card.svelte";
|
import ProjectCard from "./ProjectCard.svelte";
|
||||||
import SbauCard from "./sbau_card.svelte";
|
|
||||||
import StrayvoidCard from "./strayvoid_card.svelte";
|
|
||||||
import LifeMapCard from "./lifemap_card.svelte";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen flex flex-col items-center justify-center py-8 pb-[80px] md:pb-8 w-full">
|
<div class="min-h-screen flex flex-col items-center justify-center py-8 pb-[80px] md:pb-8 w-full">
|
||||||
@ -14,10 +11,29 @@
|
|||||||
<BlurFade delay={0.20}>
|
<BlurFade delay={0.20}>
|
||||||
<div class="w-full flex justify-center items-center px-4">
|
<div class="w-full flex justify-center items-center px-4">
|
||||||
<div class="siatka grid gap-8 w-full max-w-[800px]">
|
<div class="siatka grid gap-8 w-full max-w-[800px]">
|
||||||
<NexoCard />
|
<!--<NexoCard />-->
|
||||||
<SbauCard />
|
<ProjectCard
|
||||||
<StrayvoidCard />
|
title="Nexo"
|
||||||
<LifeMapCard />
|
desc="A platform for students to find and share notes, summaries, and other study materials."
|
||||||
|
image="/src/lib/img/nexo_mockup.png"
|
||||||
|
link="nexo_project"
|
||||||
|
/>
|
||||||
|
<ProjectCard
|
||||||
|
title="Website for my uncle's business"
|
||||||
|
desc="A website for my uncle's business. It's purpose is to be like a business card, but on the internet."
|
||||||
|
image="/src/lib/img/sbau_mockup.png"
|
||||||
|
link="sbau_project"
|
||||||
|
/>
|
||||||
|
<ProjectCard
|
||||||
|
title="Strayvoid"
|
||||||
|
desc="This is my first ever game. 2d pixelart platformer. Learning godot and generally game-dev. Maybe when i finish it it will be on steam but only maybe."
|
||||||
|
image="/src/lib/img/strayvoid_mockup.png"
|
||||||
|
/>
|
||||||
|
<ProjectCard
|
||||||
|
title="LifeMap"
|
||||||
|
desc="LifeMap is a personal life tracker that visually organizes important events, goals, and memories in a timeline and map format. It helps users reflect on their past, document key milestones, and plan for the future in a structured and interactive way."
|
||||||
|
image="/src/lib/img/lifemap_mockup.png"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</BlurFade>
|
</BlurFade>
|
||||||
|
|||||||
@ -1,18 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { cn } from "$lib/utils";
|
|
||||||
|
|
||||||
let className = "";
|
|
||||||
export { className as class };
|
|
||||||
let card = {
|
|
||||||
title: "Website for my uncle's business",
|
|
||||||
desc: "A website for my uncle's business. It's purpose is to be like a business card, but on the internet.",
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
|
|
||||||
<h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm leading-5">{card.desc}</p>
|
|
||||||
</div>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<script>
|
|
||||||
import CardBodyImg from "./sbau_body_card.svelte";
|
|
||||||
import sbau_mockup from "$lib/img/sbau_mockup.png";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
|
||||||
<img
|
|
||||||
src={sbau_mockup}
|
|
||||||
placeholder="blur"
|
|
||||||
alt="sbau_mockup"
|
|
||||||
class="w-[25rem] object-cover object-center m-0"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
|
||||||
></div>
|
|
||||||
<slot>
|
|
||||||
<CardBodyImg
|
|
||||||
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.card {
|
|
||||||
transition: all 0.3s;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: grayscale(0%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { cn } from "$lib/utils";
|
|
||||||
|
|
||||||
let className = "";
|
|
||||||
export { className as class };
|
|
||||||
let card = {
|
|
||||||
title: "Strayvoid",
|
|
||||||
desc: "This is my first ever game. 2d pixelart platformer. Learning godot and generally game-dev. Maybe when i finish it it will be on steam but only maybe.",
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class={cn("px-2 text-gray-100 sm:px-4 py-0 sm:pb-3 text-left", className)}>
|
|
||||||
<h3 class="text-lg font-semibold tracking-tighter mt-3 mb-1">
|
|
||||||
{card.title}
|
|
||||||
</h3>
|
|
||||||
<p class="text-sm leading-5">{card.desc}</p>
|
|
||||||
</div>
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
<script>
|
|
||||||
import CardBodyImg from "./strayvoid_body_card.svelte";
|
|
||||||
import strayvoid_mockup from "$lib/img/strayvoid_mockup.png";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="rounded-3xl shadow-3xl relative overflow-hidden group card">
|
|
||||||
<img
|
|
||||||
src={strayvoid_mockup}
|
|
||||||
placeholder="blur"
|
|
||||||
alt="strayvoid_mockup"
|
|
||||||
class="w-[25rem] object-cover object-center m-0"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="absolute inset-0 from-stone-900/90 via-stone-900/60 to-stone-900/5 bg-gradient-to-t backdrop-blur-[2px] transition-all duration-300"
|
|
||||||
></div>
|
|
||||||
<slot>
|
|
||||||
<CardBodyImg
|
|
||||||
class="absolute pb-0.5 px-4 md:pb-10 inset-x-0 bottom-2 flex flex-col justify-end size-full"
|
|
||||||
/>
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.card {
|
|
||||||
transition: all 0.3s;
|
|
||||||
filter: grayscale(100%);
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: grayscale(0%);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user