Merge branch 'EshaanAgg:main' into main

swetagit186 · Oct 31, 2023 · 4ce5b77 · 4ce5b77
2 parents 2c463d6 + c747ad4
commit 4ce5b77
Show file tree

Hide file tree

Showing 10 changed files with 572 additions and 449 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This is the frontend repository for the LFX Mentorship Metrics project. The whol
 
 ## Setting Up the Development Environment
 
-1. Setup the backend API locally and run the same on port 8080. The source code is available [here](https://github.com/EshaanAgg/LFXMM-Backend).
+1. You can either setup the backend yourself from [this repository](https://github.com/EshaanAgg/LFX-Backend) or you can use [Docker Compose](https://docs.docker.com/compose/install/) to setup the same with `docker compose up`. (It must be noted that using images from `DockerHub` may be a couple of days behind in the development cycle).
 2. Create a copy of the [sample .env file](./.env.sample) and rename the same to `.env`.
 3. Install the dependencies of the project with `npm i`.
 4. Run the development server with `npm run dev`.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,15 @@
+version: "3.8"
+
+services:
+  api:
+    image: eshaanagg/lfx-api
+    environment:
+      POSTGRE_CONN_URL: postgres://admin:admin@db:5432/lfx?sslmode=disable
+    ports:
+      - "8080:8080"
+    links:
+      - db
+  db:
+    image: eshaanagg/lfx-db
+    ports:
+      - "8079:5432"
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,5 +1,5 @@
 <div
-  class="flex flex-col lg:flex-row justify-between items-center px-10 py-5 mb-10 border-solid border-b-2 border-highlight-blue hover:shadow-highlight-blue hover:shadow-lg duration-200"
+  class="backdrop-blur-md sticky top-0 flex flex-col lg:flex-row justify-between items-center px-10 mb-10 border-solid border-b-2 border-highlight-blue hover:shadow-highlight-blue hover:shadow-lg duration-200 z-10"
 >
   <div class="px-10 py-5">
     <div>
@@ -18,7 +18,9 @@
     </div>
   </div>
 
-  <div class="text-2xl text-white mb-5 sm:mb-0 px-10 py-2 h-36 sm:h-20 sm:py-8">
+  <div
+    class="text-2xl text-white mb-5 sm:mb-0 px-10 py-2 h-36 sm:h-20 sm:py-8 flex"
+  >
     <ul
       class="linkUl flex flex-col sm:flex-row sm:justify-between items-center gap-2 sm:gap-20 lg:gap-8 xl:gap-16"
     >

diff --git a/src/components/home/OrganizationCard.astro b/src/components/home/OrganizationCard.astro
@@ -3,46 +3,42 @@ interface Props {
   name: string;
   logoUrl: string;
   id: string;
+  description: string;
   skills: string[];
 }
 
-const { id, name, logoUrl, skills } = Astro.props;
+const { id, name, logoUrl, skills, description } = Astro.props;
 
-//We will only display the non-empty and (at max) the most frequent 6 skills
+const MAX_DESCRIPTION_LENGTH = 180;
 
+// We will only display the non-empty and (at max) the most frequent 6 skills
 const filtertedSkills = skills.filter((skill) => skill != "").slice(0, 6);
-if (skills.length > filtertedSkills.length) filtertedSkills.push("...");
-
-const description =
-  "CNCF is the open source, vendor-neutral hub of cloud native computing, hosting projects....";
 ---
 
 <div
-  class="lg:w-[380px] sm:w-[380px] rounded-3xl bg-dark-blue mx-auto py-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-col justify-center"
+  class="box lg:w-[360px] sm:w-[360px] rounded-3xl bg-dark-blue mx-3 my-2 py-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-col justify-center align-center overflow-hidden text-white"
 >
   <div class="flex flex-col justify-center items-center p-4 gap-5 mx-auto">
     <!-- Logo -->
-    <div class="h-[85px]">
+    <div class="flex justify-center items-center">
       <img
-        class="w-24 h-24 mb-3 rounded-full"
+        class="w-24 h-24 mb-3 rounded-full border-solid border-2 border-white"
         src={logoUrl}
         alt={`Logo for the organization ${name}`}
       />
     </div>
 
     <!-- Name of the organization -->
-    <div class="h-[30px]">
-      <h5 class="m-1 text-xl font-semibold leading-6 text-center text-white">
-        {name}
-      </h5>
-    </div>
+    <h5 class="m-1 text-xl font-semibold leading-6 text-center text-white">
+      {name}
+    </h5>
 
     <!-- Description -->
     <div>
       <p class="text-fade-grey text-sm text-center pt-[10px]">
         {
-          description.length > 150
-            ? description.substring(0, 150) + "..."
+          description.length > MAX_DESCRIPTION_LENGTH
+            ? description.substring(0, MAX_DESCRIPTION_LENGTH) + "..."
             : description
         }
       </p>
@@ -53,9 +49,9 @@ const description =
       filtertedSkills.length !== 0 && (
         <div class="flex flex-col mx-auto p-2">
           <h2 class="text-white flex justify-center">Required Skills</h2>
-          <div class="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">
+          <div class="flex flex-wrap justify-center gap-[10px] pt-2">
             {filtertedSkills.map((skill) => (
-              <button class="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl">
+              <button class="inline-flex items-center px-3 pt-1 pb-2 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl">
                 {skill}
               </button>
             ))}
@@ -68,16 +64,53 @@ const description =
     <div class="flex space-x-3">
       <a
         href=`/org/${id}`
-        class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue"
+        class="viewDetail inline-flex items-center px-4 py-2 pb-6 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue hover:border-highlight-blue"
         >View in Detail</a
       >
     </div>
   </div>
 </div>
 
-<style>
+<style is:global>
+  .card {
+    transition-duration: 0.125s;
+    background: rgba(255, 255, 255, 0.04);
+    border-radius: 16px;
+    box-shadow: 0 4px 15px rgba(50, 113, 113);
+    border: 2px solid #07c e7;
+    z-index: 2;
+  }
+
   .card:hover {
     transform: scale(1.01);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 10px rgba(69, 193, 255, 0.589);
+    border: 3px solid #fff;
+  }
+
+  .viewDetail {
+    transition-duration: 0.3s;
+  }
+
+  .viewDetail:hover {
+    transform: scale(1.05);
+    color: rgb(3 105 161);
+  }
+
+  .viewDetail {
+    --clr: #fff;
+    --outline: 2px solid var(--clr);
+    color: var(--clr);
+    outline: var(--outline);
+    border: var(--outline);
+    outline-offset: -2px;
+    transition: outline-offset 200ms;
+    border-radius: 20px;
+    padding: 8px;
+  }
+
+  .viewDetail:hover,
+  .viewDetail:focus {
+    outline: var(--outline);
+    outline-offset: 2px;
   }
 </style>
diff --git a/src/components/organization/PastProjectCard.tsx b/src/components/organization/PastProjectCard.tsx
@@ -1,16 +1,18 @@
 import React from "react";
+import "./pastProjectCard.css";
 
 export const PastProjectCard = (props: ProjectThumbnail) => {
   const { id, name, skills, description, projectUrl } = props;
   return (
     <div className="lg:w-[380px] sm:w-[380px] rounded-3xl bg-dark-blue mx-auto border-[3px] border-highlight-blue card hover:border-[5px] flex flex-row justify-center">
       <div className="flex flex-col justify-center items-center p-6 gap-5 mx-auto">
         {/* Project Name */}
-        <div className="h-[50px]">
+        <div>
           <h5 className="mb-1 text-xl font-semibold leading-6 text-center text-white">
             {name}
           </h5>
         </div>
+
         {/* Project Description */}
         <div>
           <p className="text-fade-grey text-sm text-center p-[8px]">
@@ -22,9 +24,9 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
 
         {/* Skills listed for the project */}
         {skills.length !== 0 && (
-          <div className="flex flex-col mx-auto pl-5">
+          <div className="flex flex-col mx-auto">
             <h2 className="text-white flex justify-center">Required Skills</h2>
-            <div className="flex flex-wrap items-center justify-self-center gap-[10px] pt-2">
+            <div className="flex flex-wrap justify-center gap-[10px] pt-2">
               {skills.map((skill) => (
                 <button
                   className="inline-flex items-center px-3 py-1 text-sm font-medium text-center text-white bg-highlight-blue rounded-3xl"
@@ -42,7 +44,7 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
           <a href={`/project/${id}`} target="_blank">
             <button
               type="button"
-              className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue "
+              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue "
             >
               Project Details
             </button>
@@ -52,7 +54,7 @@ export const PastProjectCard = (props: ProjectThumbnail) => {
           <a href={projectUrl} target="_blank">
             <button
               type="button"
-              className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue border border-white rounded-3xl hover:bg-white hover:text-dark-blue hover:border-highlight-blue "
+              className="btnStyle inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-dark-blue hover:bg-white hover:text-dark-blue  "
             >
               View project on LFX
             </button>

diff --git a/src/components/organization/pastProjectCard.css b/src/components/organization/pastProjectCard.css
@@ -0,0 +1,41 @@
+.card {
+  transition-duration: 0.125s;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 16px;
+  box-shadow: 0 4px 15px rgba(50, 113, 113);
+  border: 2px solid #07c e7;
+  z-index: 2;
+}
+
+.card:hover {
+  transform: scale(1.01);
+  box-shadow: 0 0 10px rgba(69, 193, 255, 0.589);
+  border: 3px solid #fff;
+}
+
+.btnStyle {
+  transition-duration: 0.3s;
+}
+
+.btnStyle:hover {
+  transform: scale(1.05);
+  color: rgb(3 105 161);
+}
+
+.btnStyle {
+  --clr: #fff;
+  --outline: 2px solid var(--clr);
+  color: var(--clr);
+  outline: var(--outline);
+  border: var(--outline);
+  outline-offset: -2px;
+  transition: outline-offset 200ms;
+  border-radius: 20px;
+  padding: 8px;
+}
+
+.btnStyle:hover,
+.btnStyle:focus {
+  outline: var(--outline);
+  outline-offset: 2px;
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,15 +9,13 @@ const allOrganizations = await response.json();
 
 <Layout title="LFX Mentorship">
   <div class="bg-dark-blue">
+    <h1 class="Orgs">Participating Organizations</h1>
     <div class="relative">
-      <h1 class="text-white text-center text-4xl font-semibold pb-8">
-        Participating Organizations
-      </h1>
       <div class="codeBlock absolute"></div>
     </div>
     <ul
       role="list"
-      class="flex flex-wrap justify-center gap-[15px] ml-80px] mr-[80px] md-4"
+      class="flex flex-wrap justify-center gap-[5px] ml-80px] mr-[80px] md-4 w-full"
     >
       {
         allOrganizations.map((org: Organization) => (
@@ -29,6 +27,14 @@ const allOrganizations = await response.json();
 </Layout>
 
 <style>
+  .Orgs {
+    color: white;
+    text-align: center;
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+    font-weight: 600;
+    padding-bottom: 2rem;
+  }
   .codeBlock {
     position: absolute;
     width: 300px;

diff --git a/src/pages/org/[orgID].astro b/src/pages/org/[orgID].astro
@@ -1,4 +1,6 @@
 ---
+export const prerender = true;
+
 import Layout from "../../layouts/Layout.astro";
 import { ProjectNavbar } from "../../components/organization/ProjectNavbar";
 
@@ -38,10 +40,9 @@ const projectData = (await projectResponse.json()).projects;
       </div>
 
       <div class="orgInfo">
-        <div class="orgAbout">
-          <p>
-            Need to integrate organization descriptions into the backend and
-            then display it here.
+        <div>
+          <p class="text-white text-md max-w-xl">
+            {orgData.desc}
           </p>
         </div>
         <div class="graph">Display the Graph</div>
@@ -88,18 +89,6 @@ const projectData = (await projectResponse.json()).projects;
     margin: 0vh 0vw 10vh 0vw;
   }
 
-  .orgAbout {
-    display: flex;
-    gap: 20px;
-    flex-direction: column;
-    font-family: Lato;
-    font-size: 18px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0em;
-    text-align: justified;
-  }
-
   .graph {
     display: flex;
     width: 40%;

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -1,6 +1,7 @@
 type Organization = {
   id: string;
   name: string;
+  description: string;
   logoUrl: string;
   skills: string[];
 };