Merge pull request #51 from python-pillow/add-team-section

Add Team section

Author: aclark4life

assets/css/pillow.css

@@ -387,6 +387,69 @@ section {
     margin: 0;
 }
 
+/* ------------------------------------------------------------------ Team */
+
+.team {
+    background-color: var(--paper-dim);
+}
+
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1.5rem;
+}
+
+.team-card {
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    padding: 1.75rem 1.25rem;
+    text-align: center;
+    background-color: var(--paper);
+}
+
+.team-card .avatar {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 1rem;
+    border-radius: 50%;
+    background-color: var(--ink);
+    color: var(--paper);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+}
+
+.team-card h3 {
+    font-size: 1rem;
+    margin: 0 0 .25rem;
+}
+
+.team-card .role {
+    color: var(--ink-soft);
+    font-size: .85rem;
+    margin: 0 0 .75rem;
+}
+
+.team-card a {
+    font-size: .85rem;
+    color: var(--ink-soft);
+}
+
+.team-card a:hover {
+    color: var(--coral-dark);
+}
+
+.team-card a i {
+    margin-right: .3rem;
+}
+
+@media (max-width: 760px) {
+    .team-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 /* ------------------------------------------------------------- History */
 
 .timeline {
@@ -399,7 +462,6 @@ section {
 .timeline-item {
     padding: 1.75rem 1.5rem 2rem;
     border-right: 1px solid var(--line);
-    border-bottom: 1px solid var(--line);
 }
 
 .timeline-item:first-child {
@@ -485,7 +547,7 @@ section {
 /* ------------------------------------------------------------ In memory */
 
 .memory {
-    padding: .5rem 1.5rem 2rem;
+    padding: 2.5rem 1.5rem 3rem;
     text-align: center;
     border-bottom: 1px solid var(--line);
 }

index.html

@@ -36,6 +36,7 @@
                     <nav class="site-nav" aria-label="Page sections">
                         <a href="#docs">Project</a>
                         <a href="#showcase">Showcase</a>
+                        <a href="#team">Team</a>
                         <a href="#history">History</a>
                     </nav>
                     <a class="btn btn-sponsor btn-sm" href="#sponsor">
@@ -217,8 +218,7 @@ <h2>From PIL to <span class="highlight">Pillow</span></h2>
                         <div class="timeline-item">
                             <span class="index">2010</span>
                             <p>Jeffrey &lsquo;Alex&rsquo; Clark forks
-                               the project and renames it to Pillow to add setuptools support. A community of
-                               contributors soon joins in.</p>
+                               PIL to add setuptools support and publishes the fork to PyPI (Python Package Index) with the name "Pillow". Within a few years, a community of contributors joins in.</p>
                         </div>
                         <div class="timeline-item">
                             <span class="index">2013</span>
@@ -242,6 +242,49 @@ <h2>From PIL to <span class="highlight">Pillow</span></h2>
                 </div>
             </section>
 
+            <!-- Team -->
+            <section id="team" class="team">
+                <div class="wrap">
+                    <div class="section-head center">
+                        <h2>Team</h2>
+                        <p>
+                            Pillow is kept alive by a small team of core maintainers who review pull
+                            requests, triage issues, and ship every release &mdash; all as volunteers.
+                        </p>
+                    </div>
+                    <div class="team-grid">
+                        <div class="team-card">
+                            <div class="avatar"><i class="fas fa-user" aria-hidden="true"></i></div>
+                            <h3>Jeffrey &lsquo;Alex&rsquo; Clark</h3>
+                            <p class="role">Founder &amp; Maintainer</p>
+                            <a href="https://github.com/sponsors/aclark4life">
+                                <i class="fab fa-github" aria-hidden="true"></i> aclark4life</a>
+                        </div>
+                        <div class="team-card">
+                            <div class="avatar"><i class="fas fa-user" aria-hidden="true"></i></div>
+                            <h3>Andrew Murray</h3>
+                            <p class="role">Core Maintainer</p>
+                            <a href="https://github.com/sponsors/radarhere">
+                                <i class="fab fa-github" aria-hidden="true"></i> radarhere</a>
+                        </div>
+                        <div class="team-card">
+                            <div class="avatar"><i class="fas fa-user" aria-hidden="true"></i></div>
+                            <h3>wiredfool</h3>
+                            <p class="role">Core Maintainer</p>
+                            <a href="https://github.com/sponsors/wiredfool">
+                                <i class="fab fa-github" aria-hidden="true"></i> wiredfool</a>
+                        </div>
+                        <div class="team-card">
+                            <div class="avatar"><i class="fas fa-user" aria-hidden="true"></i></div>
+                            <h3>Hugo van Kemenade</h3>
+                            <p class="role">Core Maintainer</p>
+                            <a href="https://github.com/sponsors/hugovk">
+                                <i class="fab fa-github" aria-hidden="true"></i> hugovk</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
             <!-- In memory -->
             <div class="memory">
                 <a href="https://pillow.readthedocs.io/en/stable/releasenotes/9.0.0.html#fredrik-lundh">In memory of Fredrik Lundh</a>