Flesh out about us with links, one sentence description

[jazzdan]

As we ramp up hiring we'll be linking to our "about us" page so that people can see who else works here, and that they should work here too because you're interesting, and we're interesting!

I'm imagining that each employee has a sentence, and a link to a website/twitter/something that shows off who they are and what their values are.

[jazzdan]

I think we're small enough that we can highlight everyone who currently works at Replay. Here's some about us pages from similarly sized companies that I like:

• Glide Testimonials are a cool idea, but I'm not sure if they would set off BS detectors, including perhaps our own

• Orbit: Nice and simple with links. I don't like that just looking at the about us page doesn't tell you anything about these people though.

• Tilt: I like that the blurbs give you an insight in to their personality. No links though. Also no titles which is a little weird.

@jonbell-lot23 If you could think about how we should lay this out in the context of our about page, maybe even with some code that'd be amazing. I can do the cat herding to get everyone to write their own blurb/supply their links/whatever you think would be best!

[jonbell-lot23]

Roger! Will send something along by EOD NZ (which would be late at night PST)

[jonbell-lot23]

I've copy-pasted the code that does two columns of images, which will look about like so:

You can also find it here: https://tailwindui.com/components/marketing/sections/team-sections

See next comment for ideas about the content.

/*
  This example requires Tailwind CSS v2.0+ 

  This example requires some changes to your config:

// tailwind.config.js module.exports = { // ... plugins: [ // ... require('@tailwindcss/aspect-ratio'), ] }

*/
const people = [
  {
    name: 'Emma Dorsey',
    role: 'Senior Front-end Developer',
    imageUrl:
      'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
    bio:
      'Ultricies massa malesuada viverra cras lobortis. Tempor orci hac ligula dapibus mauris sit ut eu. Eget turpis urna maecenas cras. Nisl dictum.',
    twitterUrl: '#',
    linkedinUrl: '#',
  },
  // More people...
]

export default function Example() {
  return (
    <div className="bg-white">
      <div className="mx-auto py-12 px-4 max-w-7xl sm:px-6 lg:px-8 lg:py-24">
        <div className="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
          <div className="space-y-5 sm:space-y-4">
            <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Our Team</h2>
            <p className="text-xl text-gray-500">
              Nulla quam felis, enim faucibus proin velit, ornare id pretium. Augue ultrices sed arcu condimentum
              vestibulum suspendisse. Volutpat eu faucibus vivamus eget bibendum cras.
            </p>
          </div>
          <div className="lg:col-span-2">
            <ul className="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:gap-x-8">
              {people.map((person) => (
                <li key={person.name}>
                  <div className="space-y-4">
                    <div className="aspect-w-3 aspect-h-2">
                      <img className="object-cover shadow-lg rounded-lg" src={person.imageUrl} alt="" />
                    </div>
                    <div className="text-lg leading-6 font-medium space-y-1">
                      <h3>{person.name}</h3>
                      <p className="text-indigo-600">{person.role}</p>
                    </div>
                    <div className="text-lg">
                      <p className="text-gray-500">{person.bio}</p>
                    </div>

                    <ul className="flex space-x-5">
                      <li>
                        <a href={person.twitterUrl} className="text-gray-400 hover:text-gray-500">
                          <span className="sr-only">Twitter</span>
                          <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
                          </svg>
                        </a>
                      </li>
                      <li>
                        <a href={person.linkedinUrl} className="text-gray-400 hover:text-gray-500">
                          <span className="sr-only">LinkedIn</span>
                          <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                            <path
                              fillRule="evenodd"
                              d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

[jonbell-lot23]

From a content standpoint, we could pick super obvious things like:

• Name
• Twitter
• Links to Twitter, Github, etc
• Some sort of description

But it would be nice to ask some broader questions in a spreadsheet, have people fill them out, and it might lead to some good ideas that would make the page feel a bit more personal. I started one here! https://docs.google.com/spreadsheets/d/1aaWG59OSSHoFjU71ZQ5HCCJYnTnz2KG-lrK_VjrC90M/edit?usp=sharing

Also, for the photos it might be cool to have everyone take a pic of everyone at their desk the way they'd look on a video call. Helps the photos look consistent, but also authentic because this is how we look at work! :)

[jazzdan]

Thanks @jonbell-lot23, that info sounds great and I love the idea of using the spreadsheet to ideate. Can you give everyone edit access? :D

[jonbell-lot23]

Whoops! Ok, edit access is added @jazzdan :)

[jasonLaster]

Thanks @jonbell-lot23 @jazzdan

I love the idea of making the About Us page more personal

1. Improved photos
2. One of two links (github, twitter, linkedin, blog, medium)
3. A simple bio that touches on (what you're excited about with Replay, what your background is, what your hobbies are).

It's hard to strike the right balance, but it would be nice if people got a sense of our personality, curiosity, interests.

re: spreadsheet, I like the brainstorming, but I think it also pulls us pretty far on the personal side of the personal/professional spectrum.

[jonbell-lot23]

Follow-up:

Jon and Jason chatted and we're on the same page. Jon sent an email out to the team asking for bios by end of week.

[jazzdan]

I wonder if we should acknowledge the contractors who helped us along the way, like George and Jolyon. Maybe that doesn't belong on the team page though

[jonbell-lot23]

I think that's a great idea. Imagine a separate page where we call out community folks. We are open source, and we do love our community. Let's keep that in mind.

[jazzdan]

@jonbell-lot23 sweet, I'll make a separate issue for that.

Okay, looks like everyone has filled out their about page on notion! I'll take a pass at porting in to the website.