feat: new bio styling

src/components/Card.tsx

@@ -5,19 +5,15 @@ interface CardProps {
   image?: string
   title: string
   name: string
-  address?: string
-  phone?: string
-  email?: string
+  institution: string
 }
 
-const Card: React.FC<CardProps> = ({ position, image, title, name, address, phone, email }) => {
+const Card: React.FC<CardProps> = ({ position, image, title, name, institution }) => {
   // strip 'public/' from the avatar string since astro's public folder is available without this in the link
   const link = image?.replace("/public", "")
   return (
     <div
-      className={`flex flex-row items-center ${
-        position % 2 ? "md:flex-row-reverse md:text-right" : ""
-      }`}
+      className={`flex flex-row gap-8 ${position % 2 ? "md:flex-row-reverse md:text-right" : ""}`}
     >
       {image && (
         <div>
@@ -28,20 +24,12 @@ const Card: React.FC<CardProps> = ({ position, image, title, name, address, phon
           />
         </div>
       )}
-      <div className="px-8">
-        <div>
-          <p className="text-xl font-semibold">{name}</p>
-          <p className="italic">{title}</p>
-        </div>
-        <div>
-          {address && <p className="text-base">{address}</p>}
-          {phone && <p className="text-base">{phone}</p>}
-          {email && (
-            <a className="text-base hover:text-neutral-300" href={`mailto:${email}`}>
-              {email}
-            </a>
-          )}
-        </div>
+      <div>
+        <a className="text-xl font-semibold underline text-neutral-900" href="#">
+          {name}
+        </a>
+        <p className="text-neutral-700 italic">{title}</p>
+        <p className="small">{institution}</p>
       </div>
     </div>
   )

src/components/CardContainer.astro

@@ -7,9 +7,7 @@ interface PersonProps {
     title: string
     name: string
     avatar?: string
-    email?: string
-    address?: string
-    phone?: string
+    institution: string
   }
 }
 ---
@@ -22,13 +20,12 @@ interface PersonProps {
         return (
           <>
             <Card
+              client:load
               position={i}
               title={person.data.title}
               name={person.data.name}
               image={person.data.avatar}
-              email={person.data.email}
-              phone={person.data.phone}
-              address={person.data.address}
+              institution={person.data.institution}
             />
           </>
         )

src/components/DownloadModal.tsx

@@ -44,12 +44,18 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => {
           onClick={() => setIsOpen(false)}
         />
         <Dialog.Overlay className="fixed top-0 left-0 right-0 bottom-0 grid place-items-center z-10 w-screen overflow-y-auto">
-          <Dialog.Content className="rounded-lg text-left shadow-xl max-h-fit transition-all bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
-            <div className="flex justify-end">
-              <Dialog.Close className="text-gray-400 bg-transparent  rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
-                <Cross2Icon />
-                <span className="sr-only">Close</span>
-              </Dialog.Close>
+          <Dialog.Content className="flex flex-col gap-12 rounded-lg text-left shadow-xl max-h-fit transition-all bg-neutral-50 px-4 pb-4 pt-5 sm:p-6 sm:pb-4 sm:my-8 sm:w-full sm:max-w-lg">
+            <div>
+              <div className="flex justify-end">
+                <Dialog.Close className="text-gray-400 bg-transparent rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center hover:bg-gray-200 hover:text-gray-900">
+                  <Cross2Icon />
+                  <span className="sr-only">Close</span>
+                </Dialog.Close>
+              </div>
+              <Dialog.Title>Download Data</Dialog.Title>
+              <p>
+                By downloading these data, you agree to the <a href="#">usage guidelines</a>
+              </p>
             </div>
             <Dialog.Title>Download Data:</Dialog.Title>
             <p>{message}</p>

src/components/HeaderLink.astro

@@ -14,8 +14,9 @@ const isActive = href === pathname || href === "/" + subpath?.[0]
   href={href}
   class:list={[
     className,
+    "hover:underline underline-offset-8",
     {
-      "text-neutral-900 font-semibold hover:text-gray-600 underline underline-offset-8": isActive,
+      "text-neutral-900 font-semibold underline": isActive,
     },
   ]}
   {...props}

src/content/config.ts

@@ -30,9 +30,7 @@ const people = defineCollection({
     name: z.string(),
     title: z.string(),
     avatar: z.string().optional(),
-    email: z.string().optional(),
-    phone: z.string().optional(),
-    address: z.string().optional(),
+    institution: z.string(),
   }),
 })
 export const collections = { news: news, data: files, people: people }

src/content/people/advisor.md

@@ -3,12 +3,7 @@ type: Leadership
 name: David Lindstrom
 title: Advisor
 avatar: /public/images/david-lindstrom-1-.jpg
-org: Brown University
-address: |-
-  206 Maxcy Hall
-  Providence, Rhode Island 02912-1916
-phone: (401) 863-3765
-email: [email protected]
+institution: Brown University
 startDate: "2024"
 endDate: "2024"
 ---

src/content/people/co-director-1.md

@@ -3,10 +3,7 @@ type: Leadership
 name: Douglas S. Massey
 title: Co-Director
 avatar: /public/images/douglasmassey.jpeg
-org: Princeton University
-address: Princeton, NJ 08544
-phone: 609-258-4949
-email: [email protected]
+institution: Princeton University
 startDate: "2024"
 endDate: "2024"
 ---

src/content/people/co-director.md

@@ -3,13 +3,7 @@ type: Leadership
 name: Jorge Durand Arp-Nisen
 title: Co-Director
 avatar: /public/images/jorgedurand.jpg
-org: Universidad de Guadalajara
-address: |-
-  Av. Maestros y Alcalde, Puerta Num. 1
-  Guadalajara, CP 44269
-  Jalisco, México
-phone: 333-819-3327
-email: [email protected]
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---

src/content/people/data-entry-specialist.md

@@ -3,13 +3,7 @@ type: Supporting Staff
 name: Verónica Lozano
 title: Data Entry Specialist
 avatar: /public/images/vero.jpg
-org: Universidad de Guadalajara
-address: |-
-  Av. Maestros y Alcalde, Puerta Num. 1
-  Guadalajara, CP 44269
-  Jalisco, México
-phone: 011-52-333-819-3327
-email: ""
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---

src/content/people/professor-and-researcher-sni-nivel-iii.md

@@ -3,12 +3,7 @@ type: Advisors
 name: M. Patricia Arias
 title: Professor and Researcher (SNI nivel III)
 avatar: /public/images/patricia-arias.jpg
-org: Universidad de Guadalajara
-address: |-
-  Argentina 374. C.P. 44160,
-  Guadalajara, Jalisco, Mexico
-phone: 113-826-1499
-email: [email protected]
+institution: Universidad de Guadalajara
 startDate: "2024"
 endDate: "2024"
 ---

src/layouts/Layout.astro

@@ -15,7 +15,7 @@ const { title, description, lede } = Astro.props
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} />
-  </head>
+ </head>
 
   <body class="grid grid-cols-1 px-16 xl:px-64">
     <Header />

src/pages/people.astro

@@ -6,6 +6,7 @@ const people = await getCollection("people")
 const leadership = people.filter((person) => person.data.type === "Leadership")
 const advisors = people.filter((person) => person.data.type === "Advisors")
 const support = people.filter((person) => person.data.type === "Supporting Staff")
+console.log(people)
 ---
 
 <Layout title="Staff" description="Our Leadership, Advisors, and Staff">

src/styles/global.css

@@ -33,7 +33,7 @@
         @apply text-2xl;
     }
 
-    p {
+    p, a {
         @apply text-xl;
         @apply text-neutral-700;
     }
@@ -52,24 +52,24 @@
         @apply bg-white;
         @apply rounded-full;
         @apply shadow-inner;
-        @apply w-60;
-        @apply flex;
-        @apply items-center;
+        @apply min-w-60;
         @apply py-5;
         @apply px-8;
     }
-
-    input[placeholder] {
+    
+    input::placeholder {
         @apply text-neutral-300;
     }
 
+    input:focus {
+        @apply outline-none;
+        @apply shadow-inner-focus;
+    }
+
     input.disabled, select.disabled {
         @apply bg-gray;
     }
 
-    input:focus {
-        @apply shadow-inner-focus;
-    }
 
     nav {
         @apply flex;
@@ -78,13 +78,6 @@
         @apply uppercase;
     }
 
-    main {
-        @apply flex;
-        @apply flex-col;
-        @apply items-center;
-        @apply gap-6;
-    }
-
     header {
         @apply flex;
         @apply justify-between;

tailwind.config.js

@@ -118,6 +118,8 @@ module.exports = {
       lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
       xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
       "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+      "book-shadow":
+        "4px 4px 12px 4px rgba(167, 153, 139, 0.35), 12px 12px 4px 0px rgba(167, 153, 139, 0.35);",
       inner:
         "-1px -1px 4px 0px rgba(167, 153, 139, 0.35) inset, 1px 1px 4px 0px rgba(167, 153, 139, 0.35) inset",
       "inner-focus":