Chanatpakorn/web 14 home members

package.json

@@ -22,6 +22,7 @@
  "@astrojs/tailwind": "5.1.0",
  "@fontsource-variable/space-grotesk": "5.0.16",
  "@fontsource/noto-sans-thai-looped": "5.0.8",
+ "@octokit/types": "12.4.0",
  "astro": "4.2.1",
  "sharp": "0.33.2",
  "tailwindcss": "3.4.1",

src/components/member/Members.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+ import ProfileCard from "./ProfileCard.svelte";
+ import RightTick from "./RightTick.svelte";
+ import type { OrgMember } from "./types.ts";
+ export let members: OrgMember[];
+</script>
+
+<section>
+ <div
+ class="mb-20 flex flex-col items-center justify-center gap-4 px-8 text-center"
+ >
+ <div class="w-3/4">
+ <p class="text-4xl font-medium text-white">Members</p>
+ <div class="mt-6 flex w-full flex-col justify-center lg:my-20">
+ <div class="inline-flex flex-wrap justify-center">
+ {#if !members || members.length === 0}
+ <p>No Public Members found...</p>
+ {:else}
+ {#each members as member}
+ <ProfileCard
+ username={member.login}
+ avatarURL={member.avatar_url}
+ profileURL={member.html_url}
+ />
+ {/each}
+ {/if}
+ </div>
+ </div>
+ </div>
+ <a href="https://github.com/orgs/isd-sgcu/people">
+ <button
+ class="item-center rounded-lg border border-[#807F7E] bg-transparent px-4 py-2 font-normal text-[#807F7E] duration-100 hover:bg-[#807F7E] hover:text-primary"
+ >
+ All members
+ <RightTick classProps="inline-block" />
+ </button>
+ </a>
+ </div>
+</section>

src/components/member/ProfileCard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+ export let username: string;
+ export let avatarURL: string;
+ export let profileURL: string;
+</script>
+
+<div>
+ <div class="mx-2 my-4 inline-block">
+ <a class="no-underline" title={username} href={profileURL}>
+ <div
+ id="profile"
+ class="rounded bg-[#232428] p-2 text-white duration-200 hover:scale-110"
+ >
+ <div class="flex flex-row items-center">
+ <img
+ id="image-profile"
+ alt={username}
+ class="mr-2 h-8 w-8 rounded-full"
+ src={avatarURL}
+ />
+ <p class="text-sm">
+ @ {username}
+ </p>
+ </div>
+ </div>
+ </a>
+ </div>
+</div>
+
+<style lang="post-css">
+ #image-profile {
+ width: 30px;
+ height: 30px;
+ }
+</style>

src/components/member/RightTick.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+ export let classProps: string;
+</script>
+
+<svg
+ class={classProps}
+ width="16"
+ height="17"
+ viewBox="0 0 16 17"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+>
+ <g id="Keyboard arrow right" clip-path="url(#clip0_1401_1011)">
+ <path
+ id="Vector"
+ d="M5.72656 11.394L8.7799 8.33398L5.72656 5.27398L6.66656 4.33398L10.6666 8.33398L6.66656 12.334L5.72656 11.394Z"
+ fill="#807F7E"
+ />
+ </g>
+ <defs>
+ <clipPath id="clip0_1401_1011">
+ <rect
+ width="16"
+ height="16"
+ fill="white"
+ transform="translate(0 0.333984)"
+ />
+ </clipPath>
+ </defs>
+</svg>

src/components/member/types.ts

@@ -0,0 +1,6 @@
+import type { Endpoints } from "@octokit/types";
+
+export type OrgMember =
+ Endpoints["GET /orgs/{org}/public_members"]["response"]["data"][number];
+
+export type GitHubUser = Pick<OrgMember, "avatar_url" | "login" | "html_url">;

src/pages/index.astro

@@ -3,39 +3,58 @@ import Layout from "@/layouts/Layout.astro";
 
 import ISDLogo from "@/assets/isd_logo.svg";
 import { Image } from "astro:assets";
+import Members from "@/components/member/Members.svelte";
+
+const fetchOrgMembers = async () => {
+ try {
+ const res = await fetch(
+ "https://api.github.com/orgs/isd-sgcu/public_members",
+ );
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error(err);
+ }
+};
+const orgMembers = await fetchOrgMembers();
 ---
 
 <Layout title="Home" description="Main page">
  <section
- class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
+ class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-black to-indigo-950 text-4xl font-bold text-white md:text-6xl lg:-translate-y-32"
  >
+ <!-- pink -->
  <div
- class="invisible absolute left-64 top-44 h-24 w-24 rounded-full bg-pink-600 sm:visible lg:h-36 lg:w-36"
+ class="absolute left-16 top-16 aspect-square w-24 animate-sliding-left rounded-full bg-pink-600 duration-100 lg:left-32 lg:top-44"
  >
  </div>
  <div
- class="invisible absolute right-0 top-32 h-[600px] w-[300px] rounded-bl-full border-l-[45px] border-blue-700 sm:visible lg:h-[221px] lg:w-[260px]"
+ class="duration-50 absolute -right-16 bottom-16 aspect-square w-32 animate-sliding-right rounded-full bg-pink-600 lg:-right-32 lg:bottom-0 lg:w-64"
  >
  </div>
- <span class="grid place-content-center"> </span>
- <p class="leading-[120px] tracking-wide">Information System</p><p>
- Development
- </p>
+ <!-- blue -->
  <div
- class="invisible absolute bottom-0 right-0 h-72 w-36 rounded-l-full bg-pink-600 sm:visible"
+ class="absolute -right-32 -top-24 aspect-square h-[240px] animate-sliding-right rounded-full ring-[32px] ring-indigo-800 lg:-right-80 lg:-top-1/4 lg:h-[600px] lg:ring-[64px]"
  >
  </div>
  <div
- class="invisible absolute bottom-0 left-0 h-80 w-48 rounded-tr-full border-r-[35px] border-indigo-800 sm:visible md:w-60 lg:w-80"
+ class="absolute -bottom-12 -left-16 aspect-square w-48 animate-sliding-left rounded-full ring-[32px] ring-indigo-800 sm:visible lg:-bottom-16 lg:-left-24 lg:w-64"
  >
  </div>
  <div
- class="invisible absolute bottom-0 right-1/4 h-36 w-72 rounded-t-full border-t-[22px] border-blue-700 sm:visible"
+ class="absolute -bottom-8 right-[10%] aspect-square w-24 animate-sliding-up rounded-full ring-[12px] ring-blue-700 lg:-bottom-32 lg:right-1/4 lg:w-48 lg:ring-[28px]"
  >
  </div>
+ <!-- text -->
+ <span class="grid place-content-center"> </span>
+ <p class="z-10 leading-[120px] tracking-wide">Information System</p><p
+ class="z-10"
+ >
+ Development
+ </p>
  </section>
  <section
- class="absolute flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-black lg:-translate-y-32"
+ class="flex h-screen w-screen -translate-y-12 flex-col items-center justify-center bg-black lg:-translate-y-32"
  >
  <Image src={ISDLogo} class="w-60 lg:w-80" alt="logo" />
  <div
@@ -50,4 +69,5 @@ import { Image } from "astro:assets";
  </p>
  </div>
  </section>
+ <Members members={orgMembers} />
 </Layout>

tailwind.config.mjs

@@ -17,10 +17,16 @@ export default {
  "70%": { transform: "translateX(-2%)" },
  "100%": { transform: "translateX(0)" },
  },
+ slideUp: {
+ "0%": { transform: "translateY(100%)" },
+ "70%": { transform: "translateY(-2%)" },
+ "100%": { transform: "translateY(0)" },
+ },
  },
  animation: {
  "sliding-left": "slideLeft 1.5s",
  "sliding-right": "slideRight 1.5s",
+ "sliding-up": "slideUp 1.5s",
  },
  },
  },