update team page

content/bio/andrey-beletsky.md

@@ -1,6 +1,6 @@
 ---
-name: Andrey
-role: LBRY.tv Engineer
-email: Andrey@lbry.com
+name: Andrey Beletsky
+role: Backend Engineer
+email: andrey@lbry.com
 ---
 Andrey got into web programming twenty years ago and has done it all, from Perl CGI programming to UI design. At a turning point decided to focus on server-side applications, making exciting technologies accessible to both fellow developers and users. Easily fascinated by distributed and decentralized things. Values understandable code and can agonize over naming a variable for days. Works mostly when everyone is asleep. When not working, travels around South-East Asia, doing scuba diving wherever there’s water around.

content/bio/drew-hancock.md

@@ -0,0 +1,12 @@
+---
+name: Drew Hancock
+role: Community Coordinator
+email: drew@lbry.com
+twitter: lockoutdays
+---
+
+Drew's role is to spread awareness of LBRY and get as many people using it as possible. 
+He's active in the LBRY community, which means he spends a lot of time on social media. 
+He also produces video content for the official LBRY and Odysee channels.
+
+Drew is from Missouri and is an avid Kansas City Chiefs fan.

content/bio/johnny-nelson.md

@@ -0,0 +1,17 @@
+---
+name: Johnny Nelson
+role: Senior Machine Learning Engineer
+email: jbn@lbry.com
+twitter: generativist
+github: jbn
+---
+
+Johnny thinks a lot about how attention works on the internet. Having started programming in elementary 
+school, he became infatuated with how we communicate with and through computers. Eventually, he did 
+a Ph.D. studying belief systems computationally. Immediately afterwards he left academia, intent on 
+putting what he learned into practice.
+
+Johnny cares about the systems we inhabit -- how they allow us to exchange ideas and find each other. 
+In short, he's motivated by the premise that we can "engineer the noosphere." The internet and 
+everything after is still in early development! Given that he believes censorship-resistance is a 
+long-term evolutionary pressure, it doesn't make sense to work on a platform that doesn't treat it as a given.

content/bio/josh-finer.md

@@ -1,6 +1,6 @@
 ---
 name: Josh Finer
-role: Founder, Director of Operations and Analytics
+role: Founder, Director of Operations & Analytics
 email: josh@lbry.com
 twitter: finer9
 github: finer9

content/bio/mark-beamer.md

@@ -1,6 +1,6 @@
 ---
 name: Mark Beamer
-role: Backend and Database Engineer
+role: Backend Engineer
 email: mark@lbry.com
 github: tiger5226
 ---

content/bio/niko-storni.md

@@ -1,6 +1,6 @@
 ---
 name: Niko Storni
-role: DevOps Engineer
+role: Infrastructure Engineer
 email: Niko@lbry.com
 twitter: Nikooo777
 github: Nikooo777

content/bio/roy-lee.md

@@ -0,0 +1,18 @@
+---
+name: Roy Lee
+role: Blockchain Engineering Manager
+email: roylee@lbry.com
+github: roylee17
+---
+
+Roy is an outdoor enthusiast, an avid hiker, who has day hiked a few 14ners, including Mt. Whitney, 
+Langley, Shasta. Recently, he enjoyed his inaugural season of snowboarding at Tahoe, and can’t wait 
+for more seasons to come.
+
+Professionally, he is passionate about building software as well as teams. The broad interest in 
+software architectures, system design, distributed systems, and product development has led him 
+to the latest endeavor in LBRY.
+
+Prior to LBRY, he has built and scaled out the Cloud Native Edge Platform at TikTok, which serves 
+huge traffics around the globe. Before that, he also prototyped and led EMV payment products 
+developments in PayPal.

content/bio/xander-luciano.md

@@ -0,0 +1,8 @@
+---
+name: Xander Luciano
+role: Application Engineer
+email: xander@lbry.com
+github: DispatchCommit
+---
+
+Xander works on the apps and livestreaming.

controller/Controller.class.php

@@ -131,6 +131,8 @@ class Controller
         $router->any('/dmca', 'ReportActions::executeDmca');
         $router->any('/dmca/{claimid}', 'ReportActions::executeDmcaWithClaimId');
 
+        $router->any('/team/{slug}', 'TeamActions::executeBio');
+
         $router->any('/youtube/status/{token}', 'AcquisitionActions::executeYoutubeStatus');
         $router->any('/youtube', 'AcquisitionActions::executeYouTube');
 

controller/action/ContentActions.class.php

@@ -231,12 +231,21 @@ class ContentActions extends Actions
     {
         $person = $vars['person'];
         $path   = 'bio/' . $person . '.md';
-        list($metadata, $bioHtml) = View::parseMarkdown($path);
-        $imgSrc         = 'https://spee.ch/@lbryteam:6/' . $person . '.jpg';
+        [$metadata, $bioHtml] = View::parseMarkdown($path);
         return $vars + $metadata + [
-      'imgSrc'      => $imgSrc,
+            'imgSrc'      => '/img/bio/' . $person . '.jpg',
             'bioHtml'     => $bioHtml,
-      'orientation' => 'vertical'
+        ];
+    }
+
+    public static function prepareBioCirclePartial(array $vars): array
+    {
+        $post = ContentActions::prepareBioPartial(['person' => $vars['slug']]);
+        return [
+            'bioSlug' => $vars['slug'],
+            'imgSrc' => $post['imgSrc'],
+            'name' => $post['name'],
+            'role' => $post['role'],
         ];
     }
 

controller/action/TeamActions.class.php

@@ -0,0 +1,16 @@
+<?php
+
+class TeamActions extends Actions
+{
+    /**
+     * A team member's page
+     *
+     * @param string $slug
+     *
+     * @return array
+     */
+    public static function executeBio(string $slug)
+    {
+        return ['content/bio', ['slug' => $slug]];
+    }
+}

view/template/content/_bio.php

@@ -33,6 +33,10 @@
     </figure>
 
     <div class="bio">
+        <?php if ($showName ?? false) :?>
+          <h3><?php echo $name ?></h3>
+        <?php endif ?>
+
       <?php echo $bioHtml ?>
     </div>
   </div>

view/template/content/_bioCircle.php

@@ -0,0 +1,7 @@
+<div class="bio-circle">
+  <a href="/team/<?php echo $bioSlug ?>">
+    <img src="<?php echo $imgSrc ?>" />
+  </a>
+  <?php echo $name ?><br/>
+  <small><?php echo $role ?></small>
+</div>

view/template/content/bio.php

@@ -0,0 +1,16 @@
+<?php NavActions::setNavUri('/learn') ?>
+<?php Response::addMetaImage('https://spee.ch/@lbryteam/everyone-banner2.jpg') ?>
+<?php Response::setMetaDescription('description.team') ?>
+
+<main class="ancillary">
+    <section class="hero hero--half-height" style="background-image: url(https://spee.ch/3cb82a81e95c147686dbf90e9983640939461c53/everyone-banner3.jpg)">
+        <div class="inner-wrap inner-wrap--center-hero">
+            <h1>The Team</h1>
+            <h2>Teamwork makes the dream work</h2>
+        </div>
+    </section>
+
+    <?php echo View::render('content/_bio', ['person' => $slug, 'showName' => true]) ?>
+
+</main>
+

view/template/page/team.php

@@ -5,49 +5,31 @@
 <main class="ancillary">
   <section class="hero" style="background-image: url(https://spee.ch/3cb82a81e95c147686dbf90e9983640939461c53/everyone-banner3.jpg)">
     <div class="inner-wrap inner-wrap--center-hero">
-      <h1>{{page.team.header}}</h1>
-      <h2>Teamwork makes the dream work.</h2>
+      <h1>The Team</h1>
+      <h2>Teamwork makes the dream work</h2>
     </div>
   </section>
 
+  <?php $teams = [
+    "Leadership" => ['jeremy-kauffman', 'alex-grintsvayg'],
+    "Technical" => ['lex-berezhny', 'brannon-king', 'jack-robison', 'akinwale-ariwodola',
+                    'andrey-beletsky', 'niko-storni', 'mark-beamer', 'roy-lee', 'johnny-nelson'],
+    "Growth" => ['julian-chandra', 'drew-hancock'],
+    "Business" => ['josh-finer', 'tom-zarebczan'],
+    "Advisory Team" => ['alex-tabarrok', 'ray-carballada', 'stephan-kinsella', 'michael-huemer'],
+  ] ?>
+
+  <?php foreach ($teams as $team => $members): ?>
     <section>
       <div class="inner-wrap">
-      <h2>Leadership</h2>
+        <h2><?php echo $team ?></h2>
       </div>
-
-    <?php foreach (['jeremy-kauffman', 'alex-grintsvayg'] as $bioSlug): ?>
-      <?php echo View::render('content/_bio', ['person' => $bioSlug]) ?>
+      <div class="inner-wrap team-members">
+          <?php foreach ($members as $bioSlug): ?>
+            <?php echo View::render('content/_bioCircle', ['slug' => $bioSlug]) ?>
           <?php endforeach ?>
-  </section>
-
-  <section>
-    <div class="inner-wrap">
-      <h2>Technical</h2>
       </div>
-
-    <?php foreach (['lex-berezhny', 'brannon-king', 'jack-robison', 'akinwale-ariwodola', 'antoniyshumanov', 'andrey', 'sean-yesmunt', 'niko-storni', 'mark-beamer'] as $bioSlug): ?>
-      <?php echo View::render('content/_bio', ['person' => $bioSlug]) ?>
-    <?php endforeach ?>
     </section>
-
-  <section>
-    <div class="inner-wrap">
-      <h2>Business</h2>
-    </div>
-
-    <?php foreach (['josh-finer', 'julian-chandra', 'tom-zarebczan', 'julie-sigwart'] as $bioSlug): ?>
-      <?php echo View::render('content/_bio', ['person' => $bioSlug]) ?>
   <?php endforeach ?>
-  </section>
-
-  <section>
-    <div class="inner-wrap">
-      <h2>{{page.team.advisory}}</h2>
-    </div>
-
-    <?php foreach (['alex-tabarrok', 'ray-carballada', 'stephan-kinsella', 'michael-huemer'] as $bioSlug): ?>
-      <?php echo View::render('content/_bio', ['person' => $bioSlug]) ?>
-    <?php endforeach ?>
-  </section>
 
 </main>

web/scss/components/_author.scss

@@ -16,3 +16,42 @@
     background-color: rgba($lbry-teal-1, 0.3);
   }
 }
+
+//https://www.webfx.com/blog/web-design/circular-images-css/
+.team-members {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .bio-circle {
+    margin: 1.5rem 2rem;
+  }
+}
+
+.bio-circle {
+  text-align: center;
+
+  a {
+    margin-bottom: 0.5rem;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    position: relative;
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+    border-radius: 50%;
+    //filter: grayscale(100%);
+    //&:hover {
+    //  filter: none;
+    //}
+
+    img {
+      display: block;
+      max-width: 250px;
+      width: 100%;
+      height: auto;
+      max-height: none;
+    }
+  }
+}