dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-04 23:30:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: move circles into seperate component

Browse source
This commit is contained in:
EETagent 2022-11-22 20:06:47 +01:00
parent 6a98da7158
commit 3cb2e8dbef
2 changed files with 21 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/lib/components/icon/Circles.svelte Normal file
View file

@ -0,0 +1,14 @@
<div>
<span class="left-20 top-10 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" />
<span class="left-14 -top-6 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50" />
<span class="w-28 h-28 bg-black bg-[#55b1bd] opacity-60" />
</div>
<style>
div {
@apply relative;
}
span {
@apply shadow-md absolute rounded-full p-1;
}
</style>

29
frontend/src/routes/dashboard/+page.svelte
View file

@ -3,22 +3,15 @@
import { Swiper, SwiperSlide } from 'swiper/svelte'; import { Swiper, SwiperSlide } from 'swiper/svelte';
import 'swiper/css'; import 'swiper/css';
import Circles from '$lib/components/icon/Circles.svelte';
</script> </script>
<FullLayout> <FullLayout>
<div class="dashboard dashboardDesktop"> <div class="dashboard dashboardDesktop">
<div class="card name col-span-2 relative"> <div class="card name col-span-2 relative">
<div class="circles relative -left-16 -top-20"> <span class="absolute -left-8 -top-8">
<span <Circles />
class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" </span>
/>
<span
class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
/>
<span
class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
/>
</div>
<div class="mt-[50%] flex flex-col"> <div class="mt-[50%] flex flex-col">
<h3>Damián</h3> <h3>Damián</h3>
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span> <span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>
@ -70,17 +63,9 @@
</div> </div>
<div class="dashboard dashboardMobile"> <div class="dashboard dashboardMobile">
<div class="mt-10 card name relative mb-10"> <div class="mt-10 card name relative mb-10">
<div class="circles relative -left-10 -top-13"> <span class="absolute -left-6 -top-6">
<span <Circles />
class="shadow-md left-20 top-10 absolute p-1 w-20 h-20 rounded-full bg-black bg-[#f8fbfc] opacity-100" </span>
/>
<span
class="shadow-md left-14 -top-6 absolute p-1 w-24 h-24 rounded-full bg-black bg-[#558cbd] opacity-50"
/>
<span
class="shadow-md absolute p-1 w-28 h-28 rounded-full bg-black bg-[#55b1bd] opacity-60"
/>
</div>
<div class="mt-24 flex flex-col"> <div class="mt-24 flex flex-col">
<h3 class="!text-3xl">Damián</h3> <h3 class="!text-3xl">Damián</h3>
<span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span> <span class="mt-3 text-sspsBlue truncate">damina.vysin@example.com</span>