2 files changed, 26 insertions, 36 deletions
diff --git a/src/routes/team/PersonBio.svelte b/src/routes/team/PersonBio.svelte
deleted file mode 100644
index 437f57b..0000000
--- a/src/routes/team/PersonBio.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  export let bio;
-  let showMore = false;
-</script>
-
-<main>
-  {#if showMore}
-    <p>{bio}</p>
-    <button on:click={() => showMore = false}>Show Less</button>
-  {:else}
-    <p>{bio.substr(0, bio.lastIndexOf(' ', 150)) + '...'}</p>
-    <button on:click={() => showMore = true}>Show More</button>
-  {/if}
-</main>
-
-<style>
-  p {
-    white-space: pre-line;
-  }
-</style>
-\ No newline at end of file
diff --git a/src/routes/team/PersonCard.svelte b/src/routes/team/PersonCard.svelte
index 3859179..1b11193 100644
--- a/src/routes/team/PersonCard.svelte
+++ b/src/routes/team/PersonCard.svelte
@@ -1,26 +1,36 @@
 <script>
-  import PersonBio from './PersonBio.svelte';  
-
   export let person;
   export let direction;
 </script>
 
 <main>
-  <div class="row">
-    {#if direction == 'right'}
-      <div class="col-sm-3">
-        <img class="img-fluid" src={person.image} alt={person.name} />
+  {#if direction == 'right'}
+    <div class="row d-flex align-items-center my-2">
+      <div class="col-md-4 text-center">
+        <img class="img-fluid rounded shadow" src={person.image} alt={person.name} />
       </div>
-      <div class="col-sm-9">
-        <PersonBio bio={person.bio} />
+      <div class="col-md-8 border p-2 bg-light rounded shadow">
+        <h2>{person.name}, {person.position}</h2>
+        <p>{person.bio}</p>
+        <a href="mailto:{person.email}"><p>{person.email}</p></a>
       </div>
-    {:else}
-      <div class="col-sm-9">
-        <PersonBio bio={person.bio} />
+    </div>
+  {:else}
+    <div class="row d-flex align-items-center my-2">
+      <div class="col-md-8 border p-2 bg-light rounded shadow">
+        <h2>{person.name}, {person.position}</h2>
+        <p>{person.bio}</p>
+        <a href="mailto:{person.email}"><p>{person.email}</p></a>
       </div>
-      <div class="col-sm-3">
-        <img class="img-fluid" src={person.image} alt={person.name} />
+      <div class="col-md-4 text-center">
+        <img class="img-fluid rounded shadow" src={person.image} alt={person.name} />
       </div>
-    {/if}
-  </div>
-</main>
-\ No newline at end of file
+    </div>
+  {/if}
+</main>
+
+<style>
+  p {
+    white-space: pre-wrap;
+  }
+</style>