Add people page and temp. people data (#14)

* Add people page and people data

* Fix missing import

* Add website icon

app/impressum/page.tsx

@@ -9,11 +9,6 @@ export default function Impressum() {
       <PageTitle>Impressum</PageTitle>
       <div className="prose max-w-none pb-8 pt-8 dark:prose-invert">
         <h2>Contact</h2>
-        <p>
-          We are (in random order): Raul, Kirill, Eylon, Wesley, Caspar, Phil, Franzi, Kaan, Rose,
-          Tim, Ksenya, Ligi, Stina, Helena, MP, Martin, Alex, Afri, Nich, Carl, Hany, Jacob, and
-          Peter. Supported by countless volunteers and creative contributors. &lt;3
-        </p>
         <p>
           Our public, in-person Stammtisch happens every 3rd Wednesday at the{' '}
           <a href="https://c-base.org/" target="_blank" rel="noreferrer">

app/people/page.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image'
+import SocialIcon from '@/components/social-icons'
+import { peopleData, PersonData } from './peopleData'
+
+function SocialLinks({ socials }: { socials: Record<string, string> }) {
+  return (
+    <div className="mt-1 flex gap-2">
+      {socials.twitter && <SocialIcon kind="twitter" href={socials.twitter} size={5} />}
+      {socials.github && <SocialIcon kind="github" href={socials.github} size={5} />}
+      {socials.website && <SocialIcon kind="website" href={socials.website} size={5} />}
+      {socials.mail && <SocialIcon kind="mail" href={`mailto:${socials.mail}`} size={5} />}
+      {socials.linkedin && <SocialIcon kind="linkedin" href={socials.linkedin} size={5} />}
+    </div>
+  )
+}
+
+function PersonCard({ person }: { person: PersonData }) {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative mb-1 h-32 w-32">
+        <Image
+          src={person.avatar}
+          alt={person.name}
+          fill
+          className="rounded-full object-cover"
+          sizes="(max-width: 128px) 100vw, 128px"
+        />
+      </div>
+      <h3 className="text-xl font-semibold">{person.name}</h3>
+      <SocialLinks socials={person.socials} />
+    </div>
+  )
+}
+
+export default function PeoplePage() {
+  const currentMembers = peopleData.filter((person) => !person.isAlumni)
+  const alumni = peopleData.filter((person) => person.isAlumni)
+
+  return (
+    <div className="container mx-auto px-4 py-12">
+      <h1 className="mb-12 text-center text-4xl font-bold">Department Members</h1>
+
+      <section className="mb-16">
+        <h2 className="mb-8 text-2xl font-semibold">Office</h2>
+        <div className="flex flex-wrap gap-8">
+          {currentMembers.map((person) => (
+            <PersonCard key={person.name} person={person} />
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2 className="mb-8 text-2xl font-semibold">Alumni</h2>
+        <div className="flex flex-wrap gap-8">
+          {alumni.map((person) => (
+            <PersonCard key={person.name} person={person} />
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}

app/people/peopleData.ts

@@ -0,0 +1,136 @@
+import { StaticImageData } from 'next/image'
+import stinaImg from './images/stina.jpeg'
+import roseImg from './images/rose.gif'
+import raulImg from './images/raul.jpeg'
+import mpImg from './images/MP.jpeg'
+import martinImg from './images/martin.jpeg'
+import ligiImg from './images/ligi.jpg'
+import leaImg from './images/lea.jpeg'
+import kirillImg from './images/kirill.jpeg'
+import kaanImg from './images/Kaan.jpeg'
+import jacobImg from './images/jacob.jpeg'
+import helsImg from './images/hels.jpeg'
+import franziImg from './images/franzi.jpeg'
+import afriImg from './images/afri.jpeg'
+
+export interface PersonData {
+  name: string
+  avatar: StaticImageData
+  isAlumni: boolean
+  socials: {
+    twitter?: string
+    github?: string
+    website?: string
+    linkedin?: string
+  }
+}
+
+export const peopleData: PersonData[] = [
+  {
+    name: 'ligi',
+    avatar: ligiImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/mr_ligi',
+      github: 'https://github.com/ligi',
+    },
+  },
+  {
+    name: 'Afri',
+    avatar: afriImg,
+    isAlumni: false,
+    socials: {
+      github: 'https://github.com/q9f',
+      website: 'https://q9f.cc/',
+    },
+  },
+  {
+    name: 'Franziska',
+    avatar: franziImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/_franzihei',
+      github: 'https://github.com/franzihei',
+    },
+  },
+  {
+    name: 'Jacob',
+    avatar: jacobImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/_czepluch',
+      github: 'https://github.com/czepluch',
+    },
+  },
+  {
+    name: 'Kaan',
+    avatar: kaanImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/kaanuzdogan',
+      github: 'https://github.com/kuzdogan',
+    },
+  },
+  {
+    name: 'Kirill',
+    avatar: kirillImg,
+    isAlumni: false,
+    socials: {
+      website: 'https://pimenov.cc/',
+    },
+  },
+  {
+    name: 'Raul',
+    avatar: raulImg,
+    isAlumni: false,
+    socials: {},
+  },
+  {
+    name: 'Stina',
+    avatar: stinaImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/stinalinneag',
+    },
+  },
+  {
+    name: 'Lea',
+    avatar: leaImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/_schmitted',
+    },
+  },
+  {
+    name: 'Rose',
+    avatar: roseImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/roseighteth',
+    },
+  },
+  {
+    name: 'Helena',
+    avatar: helsImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/helsfoftroy',
+    },
+  },
+  {
+    name: 'Martin',
+    avatar: martinImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/MartinBreiten',
+    },
+  },
+  {
+    name: 'MP',
+    avatar: mpImg,
+    isAlumni: false,
+    socials: {
+      twitter: 'https://twitter.com/MPtherealmvp',
+    },
+  },
+]

app/tag-data.json

@@ -1 +1 @@
-{"3":3,"25":1,"ethberlin":25,"results":2,"sponsors":2,"judging":2,"transparency":1,"mentor":1,"bounties":1,"dod":11,"news":5,"foundation":1,"talkshow":1,"diffusion":2,"cogx":1,"zwei":7,"dappcon":1,"ethglobal":1,"meetup":1,"goerli":2,"hackathon":2,"collaboration":1,"culture":3,"blockstars":1,"critiquedao":1,"04":5,"experiences":1}
+{"3":3,"25":1,"ethberlin":25,"results":2,"sponsors":2,"judging":2,"transparency":1,"mentor":1,"bounties":1,"dod":11,"diffusion":2,"cogx":1,"zwei":7,"news":5,"dappcon":1,"ethglobal":1,"meetup":1,"goerli":2,"hackathon":2,"collaboration":1,"culture":3,"blockstars":1,"critiquedao":1,"foundation":1,"talkshow":1,"04":5,"experiences":1}

components/social-icons/icons.tsx

@@ -93,3 +93,12 @@ export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function Website(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...svgProps}>
+      <path d="M20.501 6.028V6h-.02A10.28 10.28 0 0 0 4.519 6H4.5v.028a10.262 10.262 0 0 0 0 12.944V19h.02a10.28 10.28 0 0 0 15.962 0h.021v-.028a10.262 10.262 0 0 0 0-12.944zM13 6V3.272A4.533 4.533 0 0 1 15.54 6zm2.935 1a16.827 16.827 0 0 1 .853 5H13V7zM12 3.272V6H9.46A4.533 4.533 0 0 1 12 3.272zM12 7v5H8.212a16.827 16.827 0 0 1 .853-5zm-4.787 5H3.226a9.234 9.234 0 0 1 1.792-5h2.984a17.952 17.952 0 0 0-.79 5zm0 1a17.952 17.952 0 0 0 .789 5H5.018a9.234 9.234 0 0 1-1.792-5zm1 0H12v5H9.065a16.827 16.827 0 0 1-.853-5zM12 19v2.728A4.533 4.533 0 0 1 9.46 19zm1 2.728V19h2.54A4.533 4.533 0 0 1 13 21.728zM13 18v-5h3.788a16.827 16.827 0 0 1-.853 5zm4.787-5h3.987a9.234 9.234 0 0 1-1.792 5h-2.984a17.952 17.952 0 0 0 .79-5zm0-1a17.952 17.952 0 0 0-.789-5h2.984a9.234 9.234 0 0 1 1.792 5zm1.352-6h-2.501a8.524 8.524 0 0 0-1.441-2.398A9.306 9.306 0 0 1 19.139 6zM9.803 3.602A8.524 8.524 0 0 0 8.363 6H5.86a9.306 9.306 0 0 1 3.942-2.398zM5.861 19h2.501a8.524 8.524 0 0 0 1.441 2.398A9.306 9.306 0 0 1 5.861 19zm9.336 2.398A8.524 8.524 0 0 0 16.637 19h2.502a9.306 9.306 0 0 1-3.942 2.398z" />
+      <path fill="none" d="M0 0h24v24H0z" />
+    </svg>
+  )
+}

components/social-icons/index.tsx

@@ -9,6 +9,7 @@ import {
   Mastodon,
   Threads,
   Instagram,
+  Website,
 } from './icons'
 
 const components = {
@@ -22,6 +23,7 @@ const components = {
   mastodon: Mastodon,
   threads: Threads,
   instagram: Instagram,
+  website: Website,
 }
 
 type SocialIconProps = {

data/footerNavLinks.ts

@@ -9,7 +9,7 @@ type FooterNavLink = {
 const footerNavLinks: FooterNavLink[] = [
   { href: '/impressum', title: 'Impressum' },
   { href: '/conduct', title: 'Code of Conduct', hotkey: 'o' },
-  { href: '/privacy', title: 'Privacy Policy' },
+  { href: '/privacy', title: 'Privacy Policy', hotkey: 'v' },
 ]
 
 export default footerNavLinks

data/headerNavLinks.ts

@@ -9,6 +9,7 @@ const headerNavLinks: HeaderNavLink[] = [
   { href: '/events', title: 'Events' },
   { href: '/blog', title: 'Blog' },
   { href: '/impressum', title: 'Contact' },
+  { href: '/people', title: 'People' },
 ]
 
 export default headerNavLinks