Add team page (#1473)

* Add team page

* Add biographies

Co-Authored-By: nitrohorse <1514352+nitrohorse@users.noreply.github.com>

* Add links to navbar

* Add trai_dep's bio

* Add info about us and our mission

* Update bios

Co-Authored-By: Mikaela Suomalainen <mikaela@users.noreply.github.com>
Co-Authored-By: Dan Arel <danarel@users.noreply.github.com>

* Replace contact page with about us page

* Fix footer link

* Make up bios for the lazy team members

Plus, they are all more aesthetically pleasing for @danarel.

* Update bio

Co-Authored-By: Dawid Potocki <dpot@disroot.org>

* Update bio

Co-Authored-By: Dawid Potocki <dpot@disroot.org>

* Apply suggestions from code review

Co-Authored-By: Dawid Potocki <dpot@disroot.org>
Co-Authored-By: Mikaela Suomalainen <mikaela+git@mikaela.info>

_includes/footer.html

@@ -56,8 +56,8 @@
     </div>
 
     <div class="col-sm-4 mb-3 d-flex justify-content-center">
-      <i class="far fa-envelope fa-2x"></i>
+      <i class="far fa-address-card fa-2x"></i>
-      <a href="/contact/">Contact</a>
+      <a href="/about/">About Us &amp; Contact</a>
     </div>
 
     <div class="col-sm-4 mb-3 d-flex justify-content-center">

_includes/head.html

@@ -26,7 +26,7 @@
   <meta property="og:locale" content="en_GB" />
   <meta property="og:site_name" content="{{ site.name }}" />
 
-  {% if page.url == "/" %}
+  {% if page.url == "/" or page.url == "/about/" %}
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -39,7 +39,7 @@
       "privacytoolsIO"
     ],
     "url": "{{ site.production_url }}",
-    "logo": "{{ site.production_url }}/assets/img/layout/logo.png",
+    "logo": "{{ site.production_url }}/assets/img/layout/shield.png",
     "sameAs": [
       "https://blog.privacytools.io",
       "https://twitter.com/privacytoolsIO",

_includes/nav.html

@@ -101,53 +101,45 @@
 
       <!-- Language -->
       <div id="nav-right">
-        <details class="nav-details">
-          <summary>
-            <span class="nav-summary">
-              <span class="fas fa-language text-danger fa-fw"></span>
-              Language
-              <span class="dropdown-toggle"></span>
-            </span>
-          </summary>
-          <span class="nav-dropdown">
-            <a href="https://privacytools.io/" class="dropdown-item">English</a>
-            <a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
-            <a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
-            <a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
-            <a href="https://www.privacidade.digital/" class="dropdown-item">Português</a>
-            <a href="https://privacytools.it-sec.rocks/" class="dropdown-item">Deutsch</a>
-            <a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
-            <a href="https://privacytools.ru" class="dropdown-item">Русский</a>
-            <a href="https://privacytools.dreads-unlock.fr" class="dropdown-item">Français</a>
-          </span>
-        </details>
 
-        <!-- Services -->
+        <a href="/services/" class="nav-anchor">
-        <details class="nav-details">
+          Services
-          <summary>
+        </a>
-            <span class="nav-summary">
+        <a href="https://blog.privacytools.io/" class="nav-anchor">
-              Services
+          Blog
-              <span class="dropdown-toggle"></span>
+        </a>
-            </span>
-          </summary>
-          <span class="nav-dropdown">
-            <a class="dropdown-item" href="https://forum.privacytools.io/"><span class="fab fa-discourse fa-fw"></span> Discourse - Forum</a>
-            <a class="dropdown-item" href="https://git.privacytools.io/"><span class="fab fa-git fa-fw"></span> Gitea - Git-Repository Manager</a>
-            <a class="dropdown-item" href="https://social.privacytools.io/"><span class="fas fa-retweet fa-fw"></span> Mastodon - Social Network</a>
-            <a class="dropdown-item" href="https://chat.privacytools.io/"><span class="fas fa-comment fa-fw"></span> Matrix - Federated Chat</a>
-            <a class="dropdown-item" href="https://bin.privacytools.io/"><span class="fas fa-clipboard fa-fw"></span> PrivateBin - Encrypted Pastebin</a>
-            <a class="dropdown-item" href="https://search.privacytools.io/"><span class="fas fa-search fa-fw"></span> Searx - Privacy Friendly Search</a>
-            <a class="dropdown-item" href="https://write.privacytools.io/"><span class="fas fa-pen-alt fa-fw"></span> Write Freely - Federated Blog</a>
-          </span>
-        </details>
-
-        <a href="https://blog.privacytools.io/" class="nav-anchor">Blog </a>
         <a href="/sponsors/" class="nav-anchor">
           Sponsors
         </a>
+        <a href="/about/" class="nav-anchor">
+          About Us
+        </a>
         <span id="nav-switch-theme" class="nav-anchor">
-          Theme <span class="nav-theme-icon fas fa-fw"></span>
+          <span class="nav-theme-icon fas fa-fw" aria-hidden="true" title="Theme"></span>
+          <span class="sr-only">Toggle Theme</span>
         </span>
+
+        <details class="nav-details">
+          <summary>
+            <span class="nav-summary">
+              <span class="fas fa-language text-danger fa-fw" aria-hidden="true" title="Language"></span>
+              <span class="sr-only">Language Selection</span>
+              <span class="dropdown-toggle"></span>
+            </span>
+          </summary>
+          <span class="nav-dropdown">
+            <a href="https://www.privacytools.io/" class="dropdown-item">English</a>
+            <a href="https://privacytools.twngo.xyz/" rel="nofollow noopener" class="dropdown-item">繁體中文</a>
+            <a href="https://victorhck.gitlab.io/privacytools-es/" rel="nofollow noopener" class="dropdown-item">Español</a>
+            <a href="https://pl.privacytools.io/" rel="nofollow noopener" class="dropdown-item">Polski</a>
+            <a href="https://www.privacidade.digital/" rel="nofollow noopener" class="dropdown-item">Português</a>
+            <a href="https://privacytools.it-sec.rocks/" rel="nofollow noopener" class="dropdown-item">Deutsch</a>
+            <a href="https://privacytools-it.github.io/" rel="nofollow noopener" class="dropdown-item">Italiano</a>
+            <a href="https://privacytools.ru" rel="nofollow noopener" class="dropdown-item">Русский</a>
+            <a href="https://privacytools.dreads-unlock.fr" rel="nofollow noopener" class="dropdown-item">Français</a>
+          </span>
+        </details>
+
       </div>
     </div>
   </nav>

_includes/team.html

@@ -0,0 +1,44 @@
+<div class="col-12 col-sm-6 col-lg-4 col-xl-3">
+  <div class="card mb-3 mx-4 mx-sm-0" itemscope itemtype="http://schema.org/Person">
+    <img src="{{ site.baseurl }}/assets/img/team/{{ include.avatar }}" class="card-img-top" itemprop="image" alt="{% if include.nick %}{{ include.nick }}{% else %}{{ include.name }}{% endif %}">
+    <div class="card-body">
+
+      <h5 class="card-title mt-0" itemprop="name">
+      {% if include.nick %}
+        {{ include.nick }}</h5>
+      <meta itemprop="alternateName" content="{{ include.name }}" />
+      {% else %}
+        {{ include.name }}</h5>
+      {% endif %}
+
+      <meta itemprop="affiliation" content="PrivacyTools" />
+      <h6 class="card-subtitle mb-2 text-muted" itemprop="jobTitle">{{ include.role | default: "Contributor" }}</h6>
+      <p class="card-text" {% if include.bio %}itemprop="description"{% endif %}>{{ include.bio | default: "<i>Hmm, this user hasn't written a bio quite yet :(</i>" }}</p>
+      {% if include.email %}
+      <a href="mailto:{{ include.email }}" aria-label="Email" class="card-link" itemprop="email">
+        <i class="fas fa-envelope" aria-hidden="true" title="{{ include.email }}"></i>
+      </a>
+      {% endif %}
+      {% if include.website %}
+      <a href="{{ include.website }}" aria-label="Website" class="card-link" itemprop="url">
+        <i class="fas fa-link" aria-hidden="true" title="Website"></i>
+      </a>
+      {% endif %}
+      {% if include.mastodon %}
+      <a href="{{ include.mastodon }}" aria-label="Mastodon" class="card-link" itemprop="sameAs">
+        <i class="fab fa-mastodon" aria-hidden="true" title="Mastodon Profile"></i>
+      </a>
+      {% endif %}
+      {% if include.twitter %}
+      <a href="https://twitter.com/{{ include.twitter }}" aria-label="Twitter" class="card-link" itemprop="sameAs">
+        <i class="fab fa-twitter" aria-hidden="true" title="Twitter Profile"></i>
+      </a>
+      {% endif %}
+      {% if include.blog %}
+      <a href="https://blog.privacytools.io/author/{{ include.blog }}" aria-label="Blog" class="card-link" itemprop="sameAs">
+        <i class="fas fa-pen-nib" aria-hidden="true" title="PrivacyTools Blog Author"></i>
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</div>

nginx/020-redirects.conf

@@ -4,6 +4,9 @@ location = /old/ {
 location = /privacy-policy/ {
 	return 301 /privacy/;
 }
+location = /contact/ {
+	return 301 /about/;
+}
 location = /webrtc.html {
 	return 301 /browsers/;
 }

pages/about.html

@@ -0,0 +1,140 @@
+---
+layout: page
+permalink: /about/
+title: "About PrivacyTools"
+description: "About the PrivacyTools organization, and contributors to the PrivacyTools website, communities, and services."
+hidedesc: true
+---
+
+<div class="row">
+  <div class="col">
+    <p><em>You are being watched. Private and state-sponsored organizations are monitoring and recording your online activities.</em></p>
+    <p>At <strong>PrivacyTools</strong>, we provide services, tools, and knowledge to protect your privacy against global mass surveillance, and moderate a thriving community of privacy-minded individuals like yourself to discuss and learn about new advances in protecting your online data. This website serves as the centerpiece of our organization, where we research and recommend various software solutions for our community.</p>
+    <p><strong>Transparency</strong> is our strongest value, and it's what sets us apart from the rest of the "privacy recommendations" community. Editorial changes to this website and the products we recommend are always discussed on our extensive <a href="https://github.com/privacytoolsIO/privacytools.io/issues">issue tracker</a>, drafted in a public <a href="https://github.com/privacytoolsIO/privacytools.io/pulls">pull request</a> open for further discussion, and logged in a comprehensive <a href="https://github.com/privacytoolsIO/privacytools.io/commits/master">commit log</a> dating back to our original founding date in 2015. The <em>core</em> team members listed below are responsible for most of the edits and final decisions to changes on this website and across our services, but this website is truly the work of hundreds <a href="https://github.com/privacytoolsIO/privacytools.io/graphs/contributors">contributors and fact checkers</a> working to make sure our recommendations are solid and trustworthy.</p>
+    <p>Additionally, we are a not-for-profit organization. We do not utilize paid recommendations or affiliate programs to make the recommendations on this website. Unfortunately this practice is very common elsewhere online, which makes it difficult to trust other review sites. We are unique in this area, in that all of our research is conducted independently, and we will never accept payments to modify, add, or remove any of our reviews or recommendations. Our finances are provided entirely by our community <a href="https://opencollective.com/privacytoolsio">donors</a> and <a href="/sponsors/">sponsors</a>, and are handled by the Open Collective Foundation 501(c)(3). Because we are operating as a charity in the United States, we are legally obligated to only use our funding to further our mission of spreading privacy education and promoting online services like Mastodon, Matrix, and WriteFreely. This website is a public resource, not a profit generator. To that regard, all our financial transactions (incoming and outgoing) are logged and made available to the public via our page at <a href="https://opencollective.com/privacytoolsio">opencollective.com/privacytoolsio</a>.</p>
+    <p>We take the operation of our various <a href="/services/">services</a> very seriously, and require all participants to adhere to our <a href="https://github.com/privacytoolsIO/.github/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a>. For any questions or to report abuse, please see our CoC’s <a href="https://github.com/privacytoolsIO/.github/blob/master/CODE_OF_CONDUCT.md#enforcement">Enforcement section</a>.</p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col">
+    <h2>Core Contributors</h2>
+  </div>
+</div>
+
+<div class="row">
+
+{% include team.html
+avatar="burung.jpg"
+name="Burung Hantu"
+role="Founder"
+bio="I founded PrivacyTools in 2015 to share resources and tools, allowing users to avoid international mass-surveillance programs."
+email="dude@privacytools.io"
+mastodon="https://social.privacytools.io/@BurungHantu"
+twitter="privacytoolsIO"
+%}
+
+{% include team.html
+avatar="jonah.png"
+name="Jonah Aragon"
+nick="Jonah"
+role="Administrator"
+bio="I run the website and services for PrivacyTools. My goal is to spread the word about data privacy as widely as possible."
+email="jonah@privacytools.io"
+website="https://www.jonaharagon.com"
+mastodon="https://social.privacytools.io/@jonah"
+twitter="JonahAragon"
+blog="jonah"
+%}
+
+{% include team.html
+avatar="blacklight447.png"
+name="blacklight447"
+bio="I research new privacy recommendations and moderate our communities. My expertise is endpoint security and networking."
+role="Community Manager"
+email="blacklight447@privacytools.io"
+mastodon="https://social.privacytools.io/@blacklight447"
+%}
+
+{% include team.html
+avatar="danarel.jpg"
+name="Dan Arel"
+role="ThinkPrivacy Editor"
+bio="I'm an author, columnist, and privacy advocate whose work has appeared in Time, Huff Post, OpenSource, and more."
+website="https://www.danarel.com"
+twitter="danarel"
+mastodon="https://mastodon.technology/@danarel"
+blog="danarel"
+%}
+
+{% include team.html
+avatar="dawid.png"
+name="Dawid Potocki"
+role="Developer"
+bio="I'm a student interested in software development. I help improve PrivacyTools and promote using free libre software."
+website="https://dawidpotocki.com"
+email="dawidpotocki@privacytools.io"
+mastodon="https://social.privacytools.io/@dawidpotocki"
+%}
+
+{% include team.html
+avatar="dngray.png"
+name="dngray"
+nick="Daniel Gray"
+bio="I research and communicate with privacy-focused service providers to refine our recommendations, like email and VPN providers."
+email="dngray@privacytools.io"
+%}
+
+{% include team.html
+avatar="mikaela.png"
+name="Mikaela Suomalainen"
+nick="Mikaela"
+bio="I am interested in instant messengers. I review privacy tools, and participate in our forum, Matrix room, and issue tracker."
+website="https://mikaela.info/"
+mastodon="https://mastodon.partipirate.org/@mikaela"
+%}
+
+{% include team.html
+avatar="nitrohorse.jpg"
+name="Andreas Basurto"
+nick="nitrohorse"
+role="Developer"
+bio="I'm a privacy advocate and software developer. I write web extensions, help research, and make updates to the site."
+website="https://nitrohorse.com/"
+mastodon="https://nitro.horse/@andreas"
+blog="nitrohorse"
+%}
+
+{% include team.html
+avatar="trai_dep.jpg"
+name="trai_dep"
+role="Subreddit Mod"
+bio="I'm the moderator at r/Privacy and r/privacytoolsIO. Day to day, I am also – <i>irony alert</i> – an (ethical) digital marketer."
+email="trai_dep@privacytools.io"
+website="https://www.reddit.com/user/trai_dep"
+%}
+
+</div>
+<div class="row mt-4 mb-4">
+  <div class="col">
+    <div class="card">
+      <div class="card-body">
+        <p class="card-text">Of course, we couldn't do any of this without our very generous <a href="https://opencollective.com/privacytoolsio/">financial contributors</a>, <a href="https://github.com/privacytoolsIO/privacytools.io/graphs/contributors">website contributors</a>, and the countless community members that help share new ideas and spread the word! Thank you.</p>
+        <a href="/index.html#participate" class="btn btn-primary"><i class="fas fa-hands-helping"></i> Get involved!</a>
+        <a href="/donate/" class="btn btn-outline-danger"><i class="fas fa-heart"></i> Donate</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col">
+    <h2>Contact Us</h2>
+    <p>It's very important to us to stay up-to-date on the latest changes in the privacy space. If you have a software recommendation for us, or want to request a change on this website, please don't hesitate to reach out in one of the following ways.</p>
+    <p><a href="https://forum.privacytools.io/"><i class="fab fa-discourse fa-lg fa-fw"></i> Start a discussion in our Discourse forum</a></p>
+    <p><a href="https://github.com/privacytoolsIO/privacytools.io/issues"><i class="fab fa-github fa-lg fa-fw"></i> Open an issue on GitHub</a></p>
+    <p><a href="https://www.reddit.com/r/privacytoolsIO/"><i class="fab fa-reddit fa-lg fa-fw"></i> Suggest something new on our subreddit</a></p>
+    <p>For complete transparency, software and providers will only be considered for this website after discussions take place on our GitHub issue tracker. We of course don't make any changes in secret.</p>
+    <p>Join our Matrix room at <code>#general:privacytools.io</code> or join the <a href="https://keybase.io/team/privacytools_io">privacytools_io Keybase team</a> to chat with us and other members about this site and privacy in general! If you need a Matrix account, you can sign up with our own homeserver (<code>https://chat.privacytools.io</code>) using <a href="https://riot.privacytools.io">Riot</a>.</p>
+  </div>
+</div>

pages/contact.md

@@ -1,26 +0,0 @@
----
-layout: page
-permalink: /contact/
-title: "Contact Us"
-description: "Contact the PrivacyTools team if you have any suggestions or are experiencing any issues."
----
-
-## Suggestions?
-
-It's very important to us to stay up-to-date on the latest changes in the privacy space. If you have a software recommendation for us, or want to request a change on this website, please don't hesitate to reach out.
-
-[<i class="fab fa-discourse fa-lg fa-fw"></i> Start a discussion in our Discourse forum](https://forum.privacytools.io/)
-
-[<i class="fab fa-github fa-lg fa-fw"></i> Open an issue on GitHub](https://github.com/privacytoolsIO/privacytools.io/issues)
-
-[<i class="fab fa-reddit fa-lg fa-fw"></i> Suggest something new on our subreddit](https://www.reddit.com/r/privacytoolsIO/)
-
-For complete transparency, software and providers will only be considered for this website after discussions take place on any of the above platforms.
-
-## Chat with the Team
-
-Join our Matrix room at `#general:privacytools.io` or [privacytools_io Keybase team](https://keybase.io/team/privacytools_io) to chat with [us](https://github.com/orgs/privacytoolsIO/people) and other members about this site and privacy in general! If you need a Matrix account, you can sign up with our own homeserver (`https://chat.privacytools.io`) using [riot.privacytools.io](https://riot.privacytools.io/).
-
-## Code of Conduct
-
-We take the operation of our various [services](/services/) very seriously, and adhere to our [Code of Conduct](https://github.com/privacytoolsIO/privacytools.io/blob/master/CODE_OF_CONDUCT.md). For any questions or to report abuse, please see our CoC's [Enforcement](https://github.com/privacytoolsIO/privacytools.io/blob/master/CODE_OF_CONDUCT.md#enforcement) section.