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>
|
||||
import BlurFade from "./BlurFade.svelte";
|
||||
import NexoCard from "./nexo_card.svelte";
|
||||
import SbauCard from "./sbau_card.svelte";
|
||||
import StrayvoidCard from "./strayvoid_card.svelte";
|
||||
import LifeMapCard from "./lifemap_card.svelte";
|
||||
import ProjectCard from "./ProjectCard.svelte";
|
||||
</script>
|
||||
|
||||
<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}>
|
||||
<div class="w-full flex justify-center items-center px-4">
|
||||
<div class="siatka grid gap-8 w-full max-w-[800px]">
|
||||
<NexoCard />
|
||||
<SbauCard />
|
||||
<StrayvoidCard />
|
||||
<LifeMapCard />
|
||||
<!--<NexoCard />-->
|
||||
<ProjectCard
|
||||
title="Nexo"
|
||||
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>
|
||||
</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