release1 good to go

src/components/Background.astro

@@ -0,0 +1,11 @@
+<div class="has-background-danger"></div>
+
+<style>
+    div {
+        height: 100%;
+        width: 100vw;
+        position: fixed;
+        top: 0;
+        z-index: -3;
+    }
+</style>

src/components/Globe.astro

@@ -14,6 +14,7 @@ const { lng, lat, zoom, mapstyle, bearing, accesstoken, interactive = false, sec
 
 ---
 
+<div transition:persist id="map"/>
 <mapbox-map
     data-lat={lat}
     data-lng={lng}
@@ -53,4 +54,15 @@ const { lng, lat, zoom, mapstyle, bearing, accesstoken, interactive = false, sec
         }
     } 
     customElements.define("mapbox-map", MapboxMap);
-</script>
+</script>
+
+<style>
+    #map {
+        mix-blend-mode: screen;
+        height: 100%;
+        width: 100vw;
+        position: fixed;
+        top: 0;
+        z-index: -1;
+    }
+</style>

src/components/Hero.astro

@@ -7,10 +7,7 @@ interface Props {
 const { title, subtitle } = Astro.props;
 ---
 
-<section class="hero is-fullheight" id="map" style="mix-blend-mode: screen;">
-    <div>
-        <slot/>
-    </div>
+<section class="hero is-fullheight">
     <div class="hero-body" style="z-index:1000">
         <div class="" >
             <h1 class="title has-text-white is-size-1"> {title}</h1>

src/components/Organization.astro

@@ -9,6 +9,7 @@ interface Props {
     subtitle?: string;
     email?: string;
     phone?: string;
+    bookingurl?: string;
     description?: string;
     office?: {
       address?: string;
@@ -41,6 +42,11 @@ const { org } = Astro.props;
       <li class="has-text-white">{org.office.city}, {org.office.state} {org.office.postal}</li>
     </ul>
   </div>
+  {"bookingurl" in org && 
+  <div class="block">
+    <a href={org.bookingurl} class="button is-success">Book a Consultation</a>
+  </div>
+  }
   <div class="block">
       {
         org.socials.map((platform) => (

src/components/People.astro

@@ -4,6 +4,7 @@ import Person from '@components/Person.astro';
 interface Props {
   people: {
     name: string;
+    photo?: string;
     creds?: string[];
     pronouns?: string;
     roles?: string[];

src/components/Person.astro

@@ -1,10 +1,14 @@
 ---
-import { Icon } from 'astro-icon/components'
-import markdownit from 'markdown-it'
-const md = markdownit()
+import { Icon } from 'astro-icon/components';
+
+import markdownit from 'markdown-it';
+
+const md = markdownit();
+
 interface Props {
   person: {
     name: string;
+    photo?: string;
     creds?: string[];
     pronouns?: string;
     roles?: string[];
@@ -24,22 +28,34 @@ const { person, columns = false} = Astro.props;
 <div class={columns ? "column is-half" : ""}>
   <div class="box has-background-danger">
     <div class="block">
-      <p class="title is-4 has-text-white">{person.name}{person.creds && ", ".concat(person.creds.join(", "))} {person.pronouns  && <span class="has-text-weight-light">({person.pronouns})</span>}</p>
-      <p class="subtitle is-4 has-text-white">{person.roles && person.roles.join(", ")}</p>
-      <p>{person.email && <a href={"mailto:".concat(person.email)} class="has-text-white">{person.email}</a>}</p>
+      <div class="tile is-ancestor">
+        <div class="tile is-parent">
+          {"photo" in person && 
+            <div class="tile is-child is-3">
+              <figure class="image is-128x128">
+                <img src={"src/assets/".concat(person.photo)} alt={"Photo of ".concat(person.name)}/>
+              </figure>
+            </div>}
+          <div class="tile is-child">
+            <p class="title is-4 has-text-white">{person.name}{person.creds && ", ".concat(person.creds.join(", "))} {person.pronouns  && <span class="has-text-weight-light">({person.pronouns})</span>}</p>
+            <p class="subtitle is-4 has-text-white">{person.roles && person.roles.join(", ")}</p>
+            <p>{person.email && <a href={"mailto:".concat(person.email)} class="has-text-white">{person.email}</a>}</p>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="block">
       <p class="has-text-white" set:html={md.renderInline(person.bio)}></p>
     </div>
-    <div class="block">
+    <!-- <div class="block">
       <div class="tags">
         {
           person.skills.map((skill) => (
             <span class="tag is-success">{skill}</span>
           ))
         }
       </div>
-    </div>
+    </div> -->
     <div class="block">
         {
           person.socials.map((platform) => (
@@ -48,4 +64,12 @@ const { person, columns = false} = Astro.props;
         }
     </div>
   </div>
-</div>
+</div>
+
+<style>
+img {
+  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+  filter: grayscale(100%);
+  mix-blend-mode: screen;
+}
+</style>

src/config.json

@@ -2,6 +2,8 @@
     "name": "OGRAPHIES Research & Design",
     "corp_form": "LLC",
     "subtitle": "When mapping matters.",
+    "description": "OGRAPHIES Research & Design is a mission-driven GIS, mapping, and spatial data science consultancy that designs tools and analyzes problems for clients who are working towards a more just world. OGRAPHIES is not a traditional GIS consultancy. OGRAPHIES builds custom web applications, automates complex spatial workflows, and works to scale the complexity of our solutions to align with the capacity of our clients.",
+    "bookingurl": "https://calendar.app.google/zLn7fQT7czQ5cbya9",
     "email": "[email protected]",
     "phone": "(508) 205-9583",
     "office": {
@@ -23,6 +25,7 @@
     "people": [
         {
             "name": "Eric Robsky Huntley",
+            "photo": "eric.jpg",
             "leadership": true,
             "creds": ["PhD"],
             "pronouns": "they/them",
@@ -39,7 +42,7 @@
                 }
             ],
             "skills": ["spatial analysis", "GIS"],
-            "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus enim ut risus bibendum rhoncus. Nunc vitae leo congue, porta nunc ultricies, imperdiet turpis. Proin convallis eu felis non bibendum. Nunc enim tortor, ullamcorper consequat facilisis sit amet, imperdiet a nulla. Donec lobortis lobortis imperdiet. Phasellus malesuada mollis ullamcorper. Proin non ante eu ex volutpat suscipit. In faucibus dictum ligula aliquet pretium. Mauris at turpis bibendum, placerat ex eget, vehicula nisl. Suspendisse in ex aliquet, elementum elit a, iaculis erat. Fusce ornare ac ante id interdum. Curabitur tincidunt elit a congue vulputate."
+            "bio": "Eric Robsky Huntley, PhD is the founder and principal of OGRAPHIES Research & Design. They are a broadly trained geographer and GIScientist with expertise in the application of spatial data science, GIS, and cartography to problems of urban planning and policy. They currently serve on the faculty of [MIT's Department of Urban Studies and Planning](https://dusp.mit.edu/people/eric-robsky-huntley) where they direct the Spatial Analysis and Action Research Group, and have also held academic appointments at the Harvard Graduate School of Design and the Columbia School of Architecture, Planning, and Preservation."
         }
     ]
 }

src/layouts/BaseLayout.astro

@@ -1,6 +1,10 @@
 ---
 import Header from '@components/Header.astro';
+import Globe from '@components/Globe.astro';
 import Footer from '@components/Footer.astro';
+import Background from '@components/Background.astro';
+
+import { ViewTransitions } from 'astro:transitions';
 
 import '../sass/styles.scss';
 
@@ -32,9 +36,23 @@ const navItems = [
 		<meta name="generator" content={Astro.generator} />
 		<title>{name}</title>
 	</head>
-	<body class="has-background-danger">
+	<body>
+		<div>
 		<Header {navItems}/>
 		<slot/>
 		<Footer {navItems}/>
+		</div>
+		<Globe 
+		sec={50000},
+		lat={42.389118}, 
+		lng={-71.097153}, 
+		zoom={11}, 
+		mapstyle={"mapbox://styles/ericrobskyhuntley/clt21v30001va01p44n0jd47d"}, 
+		bearing={90}, 
+		interactive={true},
+		accesstoken={import.meta.env.PUBLIC_MAPBOX_KEY}/>
+		<Background/>
 	</body>
-</html>
+</html>
+
+<ViewTransitions />

src/layouts/ContentLayout.astro

@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro';
+import { ViewTransitions } from 'astro:transitions';
 
 interface Props {
   name: string;
@@ -14,4 +15,6 @@ const { name } = Astro.props;
             <slot/>
         </div>
     </section>
-</BaseLayout>
+</BaseLayout>
+
+<ViewTransitions />

src/pages/about.astro

@@ -2,16 +2,18 @@
 import ContentLayout from '@layouts/ContentLayout.astro'
 import People from '@components/People.astro'
 import Organization from '@components/Organization.astro'
+import { fade } from 'astro:transitions';
 
 import data from "@src/config.json";
 
 let leadership = data.people.filter(function(person) {
       return person.leadership;
  });
 
- let others = data.people.filter(function(person) {
+ let people = data.people.filter(function(person) {
       return !person.leadership;
  });
+ console.log(people.length);
 ---
 <ContentLayout name={data.name}>
   <section class="section">
@@ -24,9 +26,11 @@ let leadership = data.people.filter(function(person) {
     </div>
   </div>
   </section>
-  <section class="section">
-    <h1 class="title has-text-white">Who We Are</h1>
-      <People people={others} columns={true} />
-  </section>
+  {(people.length >0 ) &&
+    <section class="section">
+      <h1 class="title has-text-white">Who We Are</h1>
+        <People people={people} columns={true} />
+    </section>
+  }
 
 </ContentLayout>

src/pages/index.astro

@@ -1,18 +1,8 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro';
 import Hero from '@components/Hero.astro';
-import Globe from '@components/Globe.astro';
 import data from "@src/config.json";
 ---
 <BaseLayout name={data.name}>
 	<Hero title={data.name}, subtitle={data.subtitle}/>
-	<Globe 
-	sec={50000},
-	lat={42.389118}, 
-	lng={-71.097153}, 
-	zoom={11}, 
-	mapstyle={"mapbox://styles/ericrobskyhuntley/clt21v30001va01p44n0jd47d"}, 
-	bearing={90}, 
-	interactive={true},
-	accesstoken={import.meta.env.PUBLIC_MAPBOX_KEY}/>
 </BaseLayout>

src/sass/styles.scss

@@ -2,5 +2,6 @@
 
 $danger: rgb(178, 31, 36);
 $success: rgb(102, 14, 17);
+$link: rgb(255, 255, 255);
 
 @import "node_modules/bulma/bulma.sass";

tsconfig.json

@@ -5,7 +5,8 @@
     "paths": {
       "@components/*": ["src/components/*"],
       "@layouts/*": ["src/layouts/*"],
-      "@src/*": ["src/*"]
+      "@src/*": ["src/*"],
+      "@headshots/*": ["src/images/headshots*"]
     }
   }
 }