From 720ccca103cdf406902d711a800b7b9639863eb4 Mon Sep 17 00:00:00 2001 From: MelissaAyllon Date: Tue, 3 Sep 2024 21:23:36 -0500 Subject: [PATCH 1/4] skeleton member component --- src/lib/components/Member.svelte | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/lib/components/Member.svelte diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte new file mode 100644 index 0000000..2dd812e --- /dev/null +++ b/src/lib/components/Member.svelte @@ -0,0 +1,20 @@ +
+ + +
+

Member Name

+

Member Role

+
+ +
+ + + + + + + + + +
+
\ No newline at end of file From b05dbf7fbece82e2b190928edd921f12dd1e8525 Mon Sep 17 00:00:00 2001 From: MelissaAyllon Date: Thu, 5 Sep 2024 21:37:52 -0500 Subject: [PATCH 2/4] member component --- src/lib/assets/icons/bx-link.svg | 3 ++ src/lib/assets/icons/linkedin.svg | 4 +++ src/lib/components/Member.svelte | 46 +++++++++++++++++++++++-------- 3 files changed, 41 insertions(+), 12 deletions(-) create mode 100644 src/lib/assets/icons/bx-link.svg create mode 100644 src/lib/assets/icons/linkedin.svg diff --git a/src/lib/assets/icons/bx-link.svg b/src/lib/assets/icons/bx-link.svg new file mode 100644 index 0000000..debd8db --- /dev/null +++ b/src/lib/assets/icons/bx-link.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/assets/icons/linkedin.svg b/src/lib/assets/icons/linkedin.svg new file mode 100644 index 0000000..5a67441 --- /dev/null +++ b/src/lib/assets/icons/linkedin.svg @@ -0,0 +1,4 @@ + +LinkedIn + + \ No newline at end of file diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte index 2dd812e..628b948 100644 --- a/src/lib/components/Member.svelte +++ b/src/lib/components/Member.svelte @@ -1,20 +1,42 @@ + +
- + Foto
-

Member Name

-

Member Role

+

{props.name}

+

{props.role}

- - - - - - - - - + + {#each props.socialMedia as media} + + + + {#if media.nombre === "linkedin"} + LinkedIn + {:else if media.nombre === "github"} + Github + {:else if media.nombre === "link"} + Link + {/if} + + + + {/each}
\ No newline at end of file From 1b3c46677cbe770d2ae1b443e5b461cdfa0f398b Mon Sep 17 00:00:00 2001 From: MelissaAyllon Date: Sun, 22 Sep 2024 00:38:27 -0500 Subject: [PATCH 3/4] members route & membershome --- src/lib/components/Member.svelte | 24 ++++---- src/lib/components/Members_home.svelte | 15 +++++ src/lib/data/members.json | 76 ++++++++++++++++++++++++++ src/routes/+page.svelte | 2 + src/routes/members/+page.svelte | 15 +++++ src/routes/members/+page.ts | 10 ++++ 6 files changed, 130 insertions(+), 12 deletions(-) create mode 100644 src/lib/components/Members_home.svelte create mode 100644 src/lib/data/members.json create mode 100644 src/routes/members/+page.svelte create mode 100644 src/routes/members/+page.ts diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte index 628b948..395dfbe 100644 --- a/src/lib/components/Member.svelte +++ b/src/lib/components/Member.svelte @@ -10,29 +10,29 @@ socialMedia: {nombre: string, link: string}[]; } - export let props: Props; + let { name, role, photo, socialMedia}:Props = $props(); -
- Foto +
+ Foto -
-

{props.name}

-

{props.role}

+
+

{name}

+

{role}

-
+
- {#each props.socialMedia as media} + {#each socialMedia as media} - + {#if media.nombre === "linkedin"} - LinkedIn + LinkedIn {:else if media.nombre === "github"} - Github + Github {:else if media.nombre === "link"} - Link + Link {/if} diff --git a/src/lib/components/Members_home.svelte b/src/lib/components/Members_home.svelte new file mode 100644 index 0000000..eddeab2 --- /dev/null +++ b/src/lib/components/Members_home.svelte @@ -0,0 +1,15 @@ + + +
+ {#each members as member} + + {/each} +
\ No newline at end of file diff --git a/src/lib/data/members.json b/src/lib/data/members.json new file mode 100644 index 0000000..a917c44 --- /dev/null +++ b/src/lib/data/members.json @@ -0,0 +1,76 @@ +[ + { + "name": "Alina Carpio", + "role": "Presidente", + "photo": "https://avatars.githubusercontent.com/u/72272077?v=4", + "socialMedia": [ + { "nombre": "linkedin", "link": "https://linkedin.com/in/AlinaCarpio" }, + { "nombre": "github", "link": "https://github.com/alicarpio" } + ] + }, + { + "name": "Melissa Ayllon", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/116417470?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/MelissaAyllon" } + ] + }, + { + "name": "Michael Estrada", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/98861990?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/BryanEstrada003" } + ] + }, + { + "name": "Adrian Delgado", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/11708972?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/adriandelgado" } + ] + }, + { + "name": "Braulio Rivas", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/61257604?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/brauliorivas" } + ] + }, + { + "name": "Daniel Cortez", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/112514991?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/DanRCM" } + ] + }, + { + "name": "Adair Abrigo", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/93391519?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/adairaxe" } + ] + }, + { + "name": "Anthony Herrera", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/137233273?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/AnthonyyHL" } + ] + }, + { + "name": "John Cañarte", + "role": "Miembro", + "photo": "https://avatars.githubusercontent.com/u/70679514?v=4", + "socialMedia": [ + { "nombre": "github", "link": "https://github.com/Jecanart" } + ] + } + ] + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 6d41b99..c8001d7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,7 @@ + \ No newline at end of file diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte new file mode 100644 index 0000000..ef3c489 --- /dev/null +++ b/src/routes/members/+page.svelte @@ -0,0 +1,15 @@ + + +
+ {#each data.members as member} + + {/each} +
\ No newline at end of file diff --git a/src/routes/members/+page.ts b/src/routes/members/+page.ts new file mode 100644 index 0000000..2ff0abc --- /dev/null +++ b/src/routes/members/+page.ts @@ -0,0 +1,10 @@ +import type { PageLoad } from "./$types"; +import members from "$lib/data/members.json" +export const load = (async () => { + return { + title: "Chocomiembros", + // TODO: fetch from API + description: "Miembros del club Kokoa", + members, + }; +}) satisfies PageLoad; \ No newline at end of file From 59afa05f2012ce068f45262b807b074fcae026d0 Mon Sep 17 00:00:00 2001 From: MelissaAyllon Date: Sun, 22 Sep 2024 16:47:26 -0500 Subject: [PATCH 4/4] responsive layout & updated json members --- src/lib/components/Member.svelte | 2 +- src/lib/components/Members_home.svelte | 2 +- src/lib/data/members.json | 14 +++++++++++--- src/routes/members/+page.svelte | 19 ++++++++++++++++++- 4 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/lib/components/Member.svelte b/src/lib/components/Member.svelte index 395dfbe..4dea8dd 100644 --- a/src/lib/components/Member.svelte +++ b/src/lib/components/Member.svelte @@ -14,7 +14,7 @@
- Foto + Foto

{name}

diff --git a/src/lib/components/Members_home.svelte b/src/lib/components/Members_home.svelte index eddeab2..81ccd00 100644 --- a/src/lib/components/Members_home.svelte +++ b/src/lib/components/Members_home.svelte @@ -3,7 +3,7 @@ import members from "$lib/data/members.json" -
+
{#each members as member} -
+

Directiva

+
{#each data.members as member} + {#if member.directiva === "si"} + {/if} + {/each} +
+ +

Miembros

+
+ {#each data.members as member} + {#if member.directiva === "no"} + + {/if} {/each}
\ No newline at end of file