From 4c1cdbdcbf0bda517d645c7ddde923a8a3240ade Mon Sep 17 00:00:00 2001 From: aseckin Date: Tue, 20 Aug 2024 10:46:23 +0300 Subject: [PATCH 1/9] About page init --- .../(main)/about/components/AboutHeader.tsx | 382 ++++++++++++ .../app/(main)/about/components/Button.tsx | 83 +++ .../(main)/about/components/IconButton.tsx | 62 ++ .../app/(main)/about/components/MetacLogo.tsx | 18 + .../src/app/(main)/about/components/Modal.tsx | 75 +++ .../about/components/ModalWithArrows.tsx | 48 ++ .../src/app/(main)/about/img/person.webp | Bin 0 -> 1488 bytes front_end/src/app/(main)/about/page.tsx | 586 ++++++++++++++++++ 8 files changed, 1254 insertions(+) create mode 100644 front_end/src/app/(main)/about/components/AboutHeader.tsx create mode 100644 front_end/src/app/(main)/about/components/Button.tsx create mode 100644 front_end/src/app/(main)/about/components/IconButton.tsx create mode 100644 front_end/src/app/(main)/about/components/MetacLogo.tsx create mode 100644 front_end/src/app/(main)/about/components/Modal.tsx create mode 100644 front_end/src/app/(main)/about/components/ModalWithArrows.tsx create mode 100644 front_end/src/app/(main)/about/img/person.webp create mode 100644 front_end/src/app/(main)/about/page.tsx diff --git a/front_end/src/app/(main)/about/components/AboutHeader.tsx b/front_end/src/app/(main)/about/components/AboutHeader.tsx new file mode 100644 index 0000000000..0f4dd1db57 --- /dev/null +++ b/front_end/src/app/(main)/about/components/AboutHeader.tsx @@ -0,0 +1,382 @@ +export function AboutHeader(props: React.SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/front_end/src/app/(main)/about/components/Button.tsx b/front_end/src/app/(main)/about/components/Button.tsx new file mode 100644 index 0000000000..e80400520b --- /dev/null +++ b/front_end/src/app/(main)/about/components/Button.tsx @@ -0,0 +1,83 @@ +import clsx from "clsx"; +import { forwardRef } from "react"; + +export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"; + +export type ButtonVariant = + | "primary" + | "secondary" + | "tertiary" + | "text" + | "link"; + +export function buttonVariantClassName(variant: ButtonVariant) { + const className = { + primary: + "border border-metac-blue-900 bg-metac-blue-900 text-metac-gray-200 no-underline hover:border-metac-blue-800 hover:bg-metac-blue-800 active:border-metac-gray-800 active:bg-metac-gray-800 disabled:border-metac-blue-900 disabled:bg-metac-blue-900 dark:border-metac-blue-900-dark dark:bg-metac-blue-900-dark dark:text-metac-gray-200-dark dark:hover:border-metac-blue-800-dark dark:hover:bg-metac-blue-800-dark dark:active:border-metac-gray-800-dark dark:active:bg-metac-gray-800-dark disabled:dark:border-metac-blue-900-dark disabled:dark:bg-metac-blue-900-dark", + secondary: + "border border-metac-gray-900 bg-metac-gray-0 text-metac-gray-900 no-underline hover:bg-metac-gray-200 active:bg-metac-gray-300 disabled:bg-metac-gray-0 dark:border-metac-gray-900-dark dark:bg-metac-gray-0-dark dark:text-metac-gray-900-dark dark:hover:bg-metac-gray-200-dark dark:active:bg-metac-gray-300-dark disabled:dark:bg-metac-gray-0-dark", + tertiary: + "border border-metac-blue-500 bg-metac-gray-0 text-metac-blue-700 no-underline hover:border-metac-blue-600 hover:bg-metac-blue-100 active:border-metac-blue-600 active:bg-metac-blue-200 disabled:border-metac-blue-500 disabled:bg-metac-gray-0 dark:border-metac-blue-500-dark dark:bg-metac-gray-0-dark dark:text-metac-blue-700-dark dark:hover:border-metac-blue-600-dark dark:hover:bg-metac-blue-100-dark dark:active:border-metac-blue-600-dark dark:active:bg-metac-blue-200-dark disabled:dark:border-metac-blue-500-dark disabled:dark:bg-metac-gray-0-dark", + text: "border border-transparent text-metac-blue-800 no-underline hover:text-metac-blue-900 active:text-metac-blue-700 disabled:text-metac-blue-800 dark:text-metac-blue-800-dark dark:hover:text-metac-blue-900-dark dark:active:text-metac-blue-700-dark disabled:dark:text-metac-blue-800-dark", + link: "text-metac-blue-800 underline hover:text-metac-blue-900 active:text-metac-blue-700 disabled:text-metac-blue-800 dark:text-metac-blue-800-dark dark:hover:text-metac-blue-900-dark dark:active:text-metac-blue-700-dark disabled:dark:text-metac-blue-800-dark", + }[variant]; + + return className; +} + +interface ButtonProps extends React.PropsWithChildren { + disabled?: boolean; + size?: ButtonSize; + variant?: ButtonVariant; + className?: string; +} + +const Button = forwardRef(function Button( + { + size = "sm", + children, + className, + variant = "secondary", + href, + ...props + }: ButtonProps & + React.ButtonHTMLAttributes & + React.AnchorHTMLAttributes, + ref: React.Ref +) { + const Element = href ? "a" : "button"; + + return ( + + {children} + + ); +}); + +export default Button; diff --git a/front_end/src/app/(main)/about/components/IconButton.tsx b/front_end/src/app/(main)/about/components/IconButton.tsx new file mode 100644 index 0000000000..7b3d0a6137 --- /dev/null +++ b/front_end/src/app/(main)/about/components/IconButton.tsx @@ -0,0 +1,62 @@ +import clsx from "clsx"; +import { forwardRef } from "react"; + +import { ButtonSize, ButtonVariant, buttonVariantClassName } from "./Button"; + +interface IconButtonProps extends React.PropsWithChildren { + "aria-label": string; + disabled?: boolean; + size?: ButtonSize; + variant?: ButtonVariant; + className?: string; +} + +const IconButton = forwardRef(function IconButton( + { + size = "sm", + children, + className, + variant = "secondary", + href, + ...props + }: IconButtonProps & + React.ButtonHTMLAttributes & + React.AnchorHTMLAttributes, + ref: React.Ref +) { + const Element = href ? "a" : "button"; + + return ( + + {children} + + ); +}); + +export default IconButton; diff --git a/front_end/src/app/(main)/about/components/MetacLogo.tsx b/front_end/src/app/(main)/about/components/MetacLogo.tsx new file mode 100644 index 0000000000..4685b890fe --- /dev/null +++ b/front_end/src/app/(main)/about/components/MetacLogo.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +const MetacLogo = ({ className = "" }) => { + return ( + + + + ); +}; + +export default MetacLogo; diff --git a/front_end/src/app/(main)/about/components/Modal.tsx b/front_end/src/app/(main)/about/components/Modal.tsx new file mode 100644 index 0000000000..4d4de11334 --- /dev/null +++ b/front_end/src/app/(main)/about/components/Modal.tsx @@ -0,0 +1,75 @@ +import { faXmark } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { Dialog, DialogPanel, DialogTitle } from "@headlessui/react"; +import clsx from "clsx"; +import { useEffect } from "react"; + +import IconButton from "./IconButton"; + +interface ModalPanelProps extends React.PropsWithChildren { + className?: string; + title?: string; + hideClose?: boolean; + onClose: () => void; + beforePanel?: JSX.Element; + afterPanel?: JSX.Element; +} + +function ModalPanel({ + children, + className, + title, + hideClose, + onClose, + beforePanel, + afterPanel, +}: ModalPanelProps) { + return ( + + {beforePanel} +
+ {!hideClose && ( + + + + )} +
+ {title ? ( + + {title} + + ) : null} + {children} +
+
+ {afterPanel} + + ); +} + +export interface ModalProps extends ModalPanelProps { + open: boolean; +} + +export default function Modal({ onClose, open, ...props }: ModalProps) { + return ( + + + + ); +} diff --git a/front_end/src/app/(main)/about/components/ModalWithArrows.tsx b/front_end/src/app/(main)/about/components/ModalWithArrows.tsx new file mode 100644 index 0000000000..1ef8cec2e5 --- /dev/null +++ b/front_end/src/app/(main)/about/components/ModalWithArrows.tsx @@ -0,0 +1,48 @@ +import { + faChevronLeft, + faChevronRight, +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +import Modal, { ModalProps } from "./Modal"; + +interface ModalWithArrowsProps extends ModalProps { + onPrevious: () => void; + previousDisabled?: boolean; + onNext: () => void; + nextDisabled?: boolean; +} + +export default function ModalWithArrows({ + onPrevious, + previousDisabled, + onNext, + nextDisabled, + ...rest +}: ModalWithArrowsProps) { + return ( + + + + } + afterPanel={ + + } + /> + ); +} diff --git a/front_end/src/app/(main)/about/img/person.webp b/front_end/src/app/(main)/about/img/person.webp new file mode 100644 index 0000000000000000000000000000000000000000..2f63e994f3e0a2f455fd7e15b137d90218d3925d GIT binary patch literal 1488 zcmV;>1uyziNk&G<1pok7MM6+kP&il$0000m000210068206|PpNJj(!01cp)ZF}8D zdV^rK2=WbrY7z7+f_M9V~5zHwE$Ckc5{ECPPKw=35 z!u5a{A|$Fv(^@OS-2_D{g!t)$mxJaPO_-cWy=c6|an0YW=FooxIN%Zwky> z@kT2*xE%4O!V-x~a)Zl@Y6>iuxFqXBHn?OgoD93pXMqipST%9zlg9?ho z8Mb}0*dV!Ns18X|MkB?1a5ki;c}J?Na_AF72PB*f)gdKKg|zdb+b4q#NPnyAkOpp% zLpI%*0>j87wcajH9g)x7YaNzFN92@E9hSr`@=C|rFQ=@KTlF#Qmtwvk!)>(7Fe_wv z_uVeRtdQy5cRN3`Lbi9`?cB@?8Q*=k^D--BeHZt0D!(A}tsmy2D`bD)`?*ky{Hwz@ z%tIX^L2Bzb3j-PIaythDDOPI#JgUTicJR+qM+ov*$0r#`l1lrWN{IsR-aUg#2=lOw zPcV=sm3BI<#esM4CObl)?RKgL64kt)h6<6uba4^`nW}0(1+h@joWcYKQdNz8j94tF zTzJSpu*N<@ESbW^2Mi>us{I2j8Z<+^tAcD*(cjew2bDl&5&3 zfP5AC8yf+k9Bvd6DqOt6kgy_ur4$j0@e0dmbNY=SV?qGHLP9YD*huN+6M&WyJ3uKZ zQH)@SnH{v8DBwj->_BpQ`Gl4e1r0%yl9bkxQc6-pl3K4Nr6B1wNlHP~Bq@b|tNw=_ zNKgTyj!IA$QQ@){RESDYF_54xq6+_B#YkfEfY)M*z-29_Prz$2Il!@)0uYoEQVakb z3+W61=T{-Q-yBQIlM+#gzu~kIk;7HTB060gSxLxUi$M$MgquStpz+qoN>I_WczWE~ zHR2iWaasu{gnQ66!m+q}Un$wR`{H>cnjR1Km1yiE4lI}+4_hOc?lA`zOOFYy5sRI| zfrZjz()u72J53mjNIFcsuarQ-I90T*KrANjiN!I-=}@;y7}4U1VKBn5cQ)INSUfq{gCH!PK3*CzSj_Of(n9d#9PqUz5ri#f8MX%{fv=dUA6fxyG28xPvS%^l z-O6OnexDO|U&^cv-!Sj$t<2c)fw@<2WwwS7%)fdoGc|l*iPc|CmWB^3^ZiegA^QzW z-K|V^wpj4)^PsX4Yb<)SN6JX}iiL-|DYD_VSbW%OlZmZI3U{X?Wgyf@q_5x0>UIcocr{wcujhm82!cj07<&&F2O5Oq!iR20RD~$2q7Y=09H^q zAX)(c05BB*odGJW0IdK%kw%_LrKBSvDBlRUuo4MrZr*GI@B{P%Py_G-^a2D2@DIQX zxpYf^DhYaNVzlqEY*dX?AWSmK zd}0|zKP7l_=u>J0pA~s$>+$DX`Rs8&4AwvZ{`k(op_~8y{gD5;qR3Oj&ysBa;6^*S z-E1%Z=js=@wK8cIHpPX2g3S}Sv*08D;zO7Fnn|GqlEx*z3y{GRT>4rALF&~TozbJ_ z0na`vmZqY;a4s9rA_!IXA|hdAtG>$u=nl~Bn0k#p#pDN1{@_oq&d}cgC^z}&l1xM0 qU!VC{W@e%nw*FBhlMwee|H_N-UOziO`rBML*Rn)8pBF)G#Xtbs8?&hZ literal 0 HcmV?d00001 diff --git a/front_end/src/app/(main)/about/page.tsx b/front_end/src/app/(main)/about/page.tsx new file mode 100644 index 0000000000..49cbf330ca --- /dev/null +++ b/front_end/src/app/(main)/about/page.tsx @@ -0,0 +1,586 @@ +"use client"; + +import { faLinkedin } from "@fortawesome/free-brands-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { DialogTitle } from "@headlessui/react"; +import { useState, useEffect } from "react"; + +import { AboutHeader } from "./components/AboutHeader"; +import MetaculusLogo from "./components/MetacLogo"; +import ModalWithArrows from "./components/ModalWithArrows"; +import EngageBlock from "../(home)/components/engage_block"; + +type Group = "team" | "board" | "advisors"; + +type Groups = { + [key in Group]: Person["name"][]; +}; + +type Social = { + link: string; + platform: "LinkedIn" | "Twitter"; +}; + +interface Person { + userId?: number; + name: string; + imgSrc?: string; + position?: string; + socials?: Social[]; + introduction: string; +} +const people: Person[] = [ + { + userId: 109158, + name: "Gaia Dempsey", + position: "Special Advisor", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/gaia_dempsey.webp", + introduction: + "Gaia led Metaculus as CEO from 2020-2024 during which she scaled up the Metaculus team, raised funding, and oversaw the expansion of Metaculus’s userbase and audience. Now she continues to drive Metaculus’s mission forward as a board member and as Special Advisor. Before joining Metaculus, Gaia was already an experienced entrepreneur and leader in technology and innovation-based startups. She co-founded DAQRI, an AR hardware company catering to the industrial and enterprise market and served as a senior executive from 2010-2017. Gaia has published academic work in the field of AI policy and presented widely at conferences including at Inspirefest and Foresight Vision Weekend.", + socials: [ + { + link: "https://www.linkedin.com/in/gaiadempsey/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 177019, + name: "Deger Turan", + position: "Chief Executive Officer", + imgSrc: "https://metaculus-public.s3.us-west-2.amazonaws.com/deger.webp", + introduction: + "Before joining Metaculus as CEO in 2024, Deger Turan served as President of the AI Objectives Institute, where he built an innovative team, fundraised, and developed Talk to the City, a platform that strengthens communication between under-resourced communities and the government officials serving them. Prior to AOI, he founded Cerebra Technologies, which delivers insights into public opinion trends for 300 million citizens, and which is now used by governments, hedge funds, and international retailers.", + socials: [ + { + link: "https://www.linkedin.com/in/vehbidegerturan/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 120279, + name: "Tom Liptay", + position: "Product Director", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/tom_liptay.webp", + introduction: + "Tom is an accomplished professional with a passion for forecasting. He became a GJP Superforecaster, joined the executive team at Good Judgment, Inc., and co-founded Maby, a forecasting startup. Tom's diverse background includes starting an investment fund, designing computer chips, and conducting nanocrystal research for his doctorate at MIT.", + socials: [ + { + link: "https://www.linkedin.com/in/tom-liptay-2016343/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 130973, + name: "Nate Morrison", + position: "Chief Operating Officer", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/nate_morrison.webp", + introduction: + "Nate is an accomplished leader with extensive experience in public service. He served as Executive Director of Teach For America—New Mexico for six years and launched an initiative to expand opportunities in computer science for Native youth. Nate also co-led the NACA Inspired Schools Network as Operating Officer. His strong interest in forecasting dates back to his senior thesis at Princeton, where he ran experiments to evaluate concerns around the manipulation of prediction markets.", + socials: [ + { + link: "https://www.linkedin.com/in/nathansmorrison/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 126463, + name: "Atakan Seçkin", + position: "Head of Design", + imgSrc: "https://metaculus-media.s3.amazonaws.com/ato-bw.webp", + introduction: + "Atakan began his career in graphic design and has since worked with startups of various sizes and stages, with a particular emphasis on education and healthcare. During his studies in Visual Communication Design, he interned at Google as a UX Designer. After graduation, Atakan continued helping companies with product management, UX design, and front-end development.", + socials: [ + { + link: "https://www.linkedin.com/in/atakan-se%C3%A7kin-b7366649/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 103275, + name: "Christian Williams", + position: "Director of Communications & Data", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/christian_williams.webp", + introduction: + "Christian oversees Metaculus’ communications and marketing efforts, working closely with the operations and program teams. Previously, he worked in the aerospace and defense industry as a marketing operations lead. He received his master’s in psychology from Rutgers University, where he conducted behavioral and fMRI research on moral judgment and decision-making. Before entering the science world, he wrote for The Onion AV Club and contributed material to Saturday Night Live.", + }, + { + userId: 117502, + name: "Ryan Beck", + position: "Forecasting Program Coordinator", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/ryan_beck.webp", + introduction: + "Ryan is Metaculus’ Forecasting Program Coordinator. He received a Master’s degree in Civil Engineering from Iowa State University, and was previously a bridge engineer for six years. He is an avid forecaster and a pro-forecaster at INFER. Ryan is also the author of a science fiction novel, SEER.", + }, + { + userId: 105951, + name: "Sylvain Chevalier", + position: "Technical Product Manager", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/sylvain_chevalier.webp", + introduction: + "Sylvain is a Technical Product Manager at Metaculus, with a background in software engineering and expertise in forecasting methodologies. He holds two master's degrees in physical and organic chemistry from top universities in Lyon. Sylvain is dedicated to empowering forecasters and improving decision-making through advanced tools and techniques.", + }, + { + userId: 111848, + name: "Juan Cambeiro", + position: "Presidential Management Fellow; NIH Office of Science Policy", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/juan_cambeiro.webp", + introduction: + "Juan is a Presidential Management Fellow in the Division of Biosafety, Biosecurity, and Emerging Biotechnology Policy at the National Institutes of Health. Juan received his Masters of Public Health in epidemiology/biostatistics from Columbia University. He is currently a PhD student in Health Security at Johns Hopkins University. Juan was the top-ranked forecaster in IARPA’s COVID-19 FOCUS Forecasting Tournament and is a Superforecaster with Good Judgment Open, where he was ranked #1 on COVID-19 forecast questions.", + }, + { + userId: 104161, + name: "Rudolf Ordoyne", + position: "Junior Developer & Forecasting Analyst", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/rudolf_ordoyne.webp", + introduction: + "Rudolf contributes to Metaculus operations by delivering support on partner initiatives, conducting research, and expanding and refining the platform’s bank of questions. In addition to extensive moderation work – writing and resolving hundreds of rigorously operationalized forecast questions – Rudolf is also a contributor to our software engineering team. Previously, he studied mathematics.", + }, + { + userId: 109639, + name: "Nikos Bosse", + position: "Research Coordinator", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/nikos_bosse.webp", + introduction: + "Nikos advances Metaculus’ research agenda, focusing on forecast aggregation and forecast evaluation. He received his master’s in applied statistics from the University of Göttingen and is working toward his PhD in infectious disease forecasting and forecast evaluation at the London School of Hygiene and Tropical Medicine.", + }, + { + userId: 137979, + name: "Elis Popescu", + position: "Senior Software Engineer", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/elis_popescu.webp", + introduction: + "Elis previously cofounded Tekudo, a SaaS tool for VC firms to manage ESG data. Prior to that, he was VP and head of software at Airtame, where he managed five teams developing multiple products with various technologies. With over a decade of experience, he has expertise in cross-platform development, live video streaming, embedded systems, and more.", + }, + { + userId: 135613, + name: "Luke Sabor", + position: "Software Engineer", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/luke_sabor.webp", + introduction: + "Passionate about AI safety and fueled by a love for math and logic games, Luke previously worked as a personal assistant to Max Tegmark and conducted research at UPenn's superforecasting team under Philip Tetlock. His diverse experience, spanning AI safety research to collaborating with quantum physicists, led him to work on development for Metaculus. Beyond technology, Luke enjoys exploring nature through climbing, running, biking, and birdwatching.", + }, + { + userId: 144359, + name: "Will Aldred", + position: "Research Analyst - AI Forecasting", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/will_aldred.webp", + introduction: + "Will's work is aimed at reducing the chance of bad outcomes from misaligned AI; he largely focuses on the “deployment problem.” Before joining Metaculus, Will was a co-director at the Cambridge Existential Risks Initiative and a research manager and researcher at the Stanford Existential Risks Initiative, where he mainly worked on nuclear weapons risk.", + }, + { + userId: 8, + name: "Anthony Aguirre", + position: "Founder & Chairman of the Board", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/anthony_aguirre.webp", + introduction: + "An astrophysicist and cosmologist, Anthony co-founded the Foundational Questions Institute and The Future of Life Institute. He is a Professor of Physics at UCSC and holds a PhD from Harvard. Fascinated by deep questions in physics and a belief that the long-term future of humanity hinges upon the next half-century, Anthony’s work with Metaculus is driven by his belief that it will help society navigate the coming crucial decades.", + socials: [ + { + link: "https://www.linkedin.com/in/anthony-aguirre-75751b9/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 10, + name: "Greg Laughlin", + position: "Founder & R&D Fellow", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/greg_laughlin.webp", + introduction: + "Greg is a planet-finder, astrophysicist, and expert on numerical computation and time-series analysis from accretion disks to trading and finance. Greg has probed the limits of predictability, from microseconds in markets to the ultra-long term cosmic future. Greg is a Professor of Astronomy at Yale and holds a PhD from UCSC.", + socials: [ + { + link: "https://www.linkedin.com/in/greg-laughlin-493616205/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 5, + name: "Carroll “Max” Wainwright", + position: "Founder & AI Advisor", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/carroll_wainwright.webp", + introduction: + "Max is an AI Research Scientist at OpenAI where he focuses on technical aspects of AI safety. He earned his Ph.D. in theoretical physics from the University of California Santa Cruz, where he studied phase transitions in the very early universe.", + socials: [ + { + link: "https://www.linkedin.com/in/carroll-wainwright-7690229a/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 100038, + name: "David Levine", + position: "Founder", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/david_levine.webp", + introduction: + "David is the president and CEO of Choice Yield Inc. and the co-founder of Goodsource Solutions. He has 30 years of experience in growing, marketing, and operating successful businesses.", + socials: [ + { + link: "https://www.linkedin.com/in/david-levine-521101255/", + platform: "LinkedIn", + }, + ], + }, + { + userId: 104761, + name: "Tamay Besiroglu", + position: "Research Scientist, MIT; Associate Director, Epoch", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/tamay_besiroglu.webp", + introduction: + "Tamay is a research scientist at the Computer Science and AI Lab at MIT, an associate director at Epoch, and was previously the strategy and operations lead at Metaculus. Tamay has also contributed to the Future of Humanity Institute at Oxford University and to Bloomberg LP in London. He studied philosophy, politics, and economics at University of Warwick and received his Master of Philosophy in economics from the University of Cambridge.", + socials: [ + { + link: "https://www.linkedin.com/in/tamay-besiroglu/", + platform: "LinkedIn", + }, + ], + }, + { + name: "Welton Chang", + position: "Co-founder and CEO, Pyrra Technologies", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/welton_chang.webp", + introduction: + "Welton Chang is a co-founder and CEO of Pyrra Technologies, a startup combating disinformation, conspiracy, and incitement online. Welton received his PhD from the University of Pennsylvania, where he wrote his dissertation on forecasting and accountability systems. For nearly a decade, he worked as an intelligence officer at the Defense Intelligence Agency.", + socials: [ + { + link: "https://www.linkedin.com/in/welton-chang-a6312510/", + platform: "LinkedIn", + }, + ], + }, + { + name: "Burak Nehbit", + position: "Senior Interaction Designer, Google", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/burak_nehbit.webp", + introduction: + "Burak is a Senior Interaction Designer at Google and was the co-founder of Aether, a decentralized peer-to-peer network. Previously, Burak worked on AdWords at Google and ad fraud at Meta. He received BFAs in communication design from Parsons School of Design in New York and from Istanbul Bilgi University.", + socials: [ + { + link: "https://www.linkedin.com/in/nehbit/", + platform: "LinkedIn", + }, + ], + }, + { + name: "Steven Schkolne", + position: "Founder, MightyMeld", + imgSrc: + "https://metaculus-media.s3.us-west-2.amazonaws.com/about/steven_schkolne.webp", + introduction: + "Steven Schkolne is a computer scientist, artist, and entrepreneur who has worked with companies such as BMW, Microsoft, and Disney. He laid the foundations for popular VR art programs like Tilt Brush and Quill while at Caltech, where he also earned his MS and PhD in Computer Science. Steven has also founded and grown companies, including Vain Media and 3dSunshine. Steven’s design leadership shaped past iterations of Metaculus, and he currently advises on UI/UX across the platform.", + socials: [ + { + link: "https://www.linkedin.com/in/schkolne/", + platform: "LinkedIn", + }, + ], + }, +]; + +const groups: Groups = { + team: [ + "Deger Turan", + "Tom Liptay", + "Nate Morrison", + "Atakan Seçkin", + "Christian Williams", + "Ryan Beck", + "Sylvain Chevalier", + "Rudolf Ordoyne", + "Nikos Bosse", + "Elis Popescu", + "Luke Sabor", + "Will Aldred", + ], + board: [ + "Anthony Aguirre", + "Greg Laughlin", + "Carroll “Max” Wainwright", + "David Levine", + "Gaia Dempsey", + ], + advisors: [ + "Gaia Dempsey", + "Juan Cambeiro", + "Tamay Besiroglu", + "Welton Chang", + "Burak Nehbit", + "Steven Schkolne", + ], +}; + +export default function AboutPage() { + const [randomizedGroups, setRandomizedGroups] = useState(groups); + + useEffect(() => { + const shuffledGroups = { ...groups }; + shuffledGroups.team = [...groups.team].sort(() => 0.5 - Math.random()); + setRandomizedGroups(shuffledGroups); + }, []); + function PersonModal({ + groupName, + personsName, + setOpenPerson, + }: { + groupName: Group; + personsName: string; + setOpenPerson: React.Dispatch< + React.SetStateAction<{ groupName: Group; personsName: Person["name"] }> + >; + }) { + const group = groups[groupName]; + const previousPersonsName = group[group.indexOf(personsName) - 1]; + const nextPersonsName = group[group.indexOf(personsName) + 1]; + + const onPrevious = () => + previousPersonsName && + setOpenPerson({ groupName, personsName: previousPersonsName }); + const onNext = () => + nextPersonsName && + setOpenPerson({ groupName, personsName: nextPersonsName }); + + const person = people.find(({ name }) => name === personsName); + if (!person) return null; + + const { name, position, imgSrc, socials, introduction, userId } = person; + + const handleClose = () => + setOpenPerson({ groupName: "team", personsName: "" }); + + return ( + +
+
+ {name} + {(userId || socials) && ( +
+ {!!userId && ( + + + + )} + {socials && + socials.map(({ link, platform }) => ( + + {platform === "LinkedIn" && ( + + )} + + ))} +
+ )} +
+
+ + {personsName} + + {position && ( +

+ {position} +

+ )} +

+

+
+ + ); + } + const [openPerson, setOpenPerson] = useState<{ + groupName: Group; + personsName: Person["name"]; + }>({ groupName: "team", personsName: "" }); + const numbers = [ + { + title: "Predictions", + number: "1,926,071", + }, + { + title: "Questions", + number: "10,357", + }, + { + title: "Resolved Questions", + number: "5,463", + }, + { + title: "Years of Predictions", + number: "9", + }, + ]; + return ( +
+
+

+ About Metaculus +

+

+ Metaculus is an online forecasting platform and aggregation engine + working to improve human reasoning and coordination on topics of + global importance. +

+
+ +
+
+ {numbers.map(({ title, number }) => ( +
+ + {title} + + + {number} + +
+ ))} +
+
+
+
+

+ Metaculus is a{" "} + + Public Benefit Corporation + + . +

+

+ This organizational structure enables us to serve the public good + through the following commitments in our charter: +

+
+
    + {[ + "Fostering the growth, learning, and development of the forecasting and forecasting research communities.", + "Supporting stakeholders who are serving the public good by informing their decision making.", + "Increasing public access to information regarding forecasts of public interest.", + ].map((text, i) => ( +
  1. + + {i + 1} + + {text} +
    2. + ))} +
+
+
+

+ Mission +

+

+ To build epistemic infrastructure that enables the global community to + model, understand, predict, and navigate the world’s most important + and complex challenges. +

+
+ {Object.entries(randomizedGroups).map(([groupName, names]) => ( +
+

+ {groupName} +

+
+ {names.map((personsName) => { + const person = people.find(({ name }) => name === personsName); + if (!person) return null; + + const { name, position, imgSrc } = person; + return ( + + ); + })} +
+
+ ))} + + {!!openPerson.personsName && ( + + )} +
+ ); +} From e1d6bfb5a92aa0098e6087b017f362cbbdc4cbd7 Mon Sep 17 00:00:00 2001 From: aseckin Date: Tue, 20 Aug 2024 12:24:25 +0300 Subject: [PATCH 2/9] Added Press page --- .../press/components/DisclosureItem.tsx | 42 +++ .../press/components/DisclosureSection.tsx | 298 ++++++++++++++++++ .../press/components/ReferenceSection.tsx | 104 ++++++ front_end/src/app/(main)/press/page.tsx | 174 ++++++++++ 4 files changed, 618 insertions(+) create mode 100644 front_end/src/app/(main)/press/components/DisclosureItem.tsx create mode 100644 front_end/src/app/(main)/press/components/DisclosureSection.tsx create mode 100644 front_end/src/app/(main)/press/components/ReferenceSection.tsx create mode 100644 front_end/src/app/(main)/press/page.tsx diff --git a/front_end/src/app/(main)/press/components/DisclosureItem.tsx b/front_end/src/app/(main)/press/components/DisclosureItem.tsx new file mode 100644 index 0000000000..44183c4c23 --- /dev/null +++ b/front_end/src/app/(main)/press/components/DisclosureItem.tsx @@ -0,0 +1,42 @@ +import { faChevronDown } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import React, { useState, ReactNode } from "react"; + +interface DisclosureItemProps { + question: string; + description: ReactNode; +} + +const DisclosureItem: React.FC = ({ + question, + description, +}) => { + const [isOpen, setIsOpen] = useState(false); + + return ( +
+ + {isOpen &&
{description}
} +
+ ); +}; + +export default DisclosureItem; diff --git a/front_end/src/app/(main)/press/components/DisclosureSection.tsx b/front_end/src/app/(main)/press/components/DisclosureSection.tsx new file mode 100644 index 0000000000..ec3f9bbf98 --- /dev/null +++ b/front_end/src/app/(main)/press/components/DisclosureSection.tsx @@ -0,0 +1,298 @@ +"use client"; + +import React from "react"; + +import DisclosureItem from "./DisclosureItem"; // Assuming Disclosure is in the same directory + +const DisclosureSection = () => { + return ( +
+ +

+ Forecasting is the practice of putting explicit probabilities, + dates, and numbers on future events—calculating odds via both + models and human judgment. +

+

+ Although such estimates are subjective, a substantial body of + scientific research demonstrates two points: that people who + forecast can improve, with some becoming expertly calibrated; and + that aggregating across many diverse opinions produces more + accurate forecasts than even the best individuals forecasting + alone. The resulting predictions give us a clearer sense of what + tomorrow will look like, allowing us to make better decisions + today, just as a good meteorologist can help us decide whether to + carry an umbrella. +

+

+ Of course, subjects like geopolitics are not like meteorology. + Yet, the scientific validity of human forecasting holds true even + when it comes to subjects with a high degree of uncertainty, like + the war between Russia and Ukraine. In fact,{" "} + + research + {" "} + by University of Pennsylvania psychologists Philip Tetlock and + Barbara Mellers found that the aggregated geopolitical predictions + of top forecasters were{" "} + + more accurate + {" "} + than those of CIA analysts with access to classified information. +

+

+ Because forecasts are expressed probabilistically, we can rarely + say that a particular forecast was “right” or “wrong,”. Rather, we + score forecasts mathematically by comparing forecasts to outcomes + over a large body of questions. This enables us to determine how + “well-calibrated” any given forecaster is—i.e., do things that + they believe are 70% likely actually happen 70% of the time-as + well as track the record of the whole Metaculus community over + thousands of questions. +

+

+ Metaculus forecasts are well-calibrated. They provide greater + visibility into the future. +

+ + } + /> + +

+ Metaculus is an online forecasting platform and aggregation engine + working to improve human reasoning and coordination on topics of + global importance. As a Public Benefit Corporation, Metaculus + provides decision support based on these forecasts to a variety of + institutions (learn more). +

+

+ Metaculus features questions on a wide range of topics, with a + particular focus on{" "} + artificial intelligence,{" "} + biosecurity,{" "} + + climate change + + , and nuclear risk. +

+ + } + /> + +

+ No, Metaculus is a forecasting platform and aggregation engine. + Like prediction markets, we collect people's forecasts and + reward them for accuracy. But in prediction markets, participants + place bets against each other for financial rewards, can only win + insofar as someone else loses. Metaculus forecasters are + incentivized only to make the most accurate forecasts, and they + often collaborate to do so. +

+

+ Prediction markets produce forecasts via where the betting market + settles. Metaculus explicitly aggregates everyone's forecasts + together using algorithms we refine over time. We produce a + time-weighted median, the "Community Prediction," as + well as the more sophisticated "Metaculus Prediction". +

+

+ Prediction market bettors can produce accurate forecasts because + they have “skin in the game.” But{" "} + + research + {" "} + shows that forecasting platforms like Metaculus often outperform + prediction markets, while avoiding many of the downsides of market + incentives that lead to regulators{" "} + + restricting their activity. + {" "} + And critically, the research, methods, and reasoning that + Metaculus forecasters produce are themselves valuable, as seen + both in question comments as well as in the{" "} + Metaculus Journal. +

+ + } + /> + +
+

+ 1. Complement expert analysis. +

+

+ News stories often rely on expert analysis to put developments + in context and to anticipate the future course of events. + Unfortunately, experts frequently offer imprecisely worded + forecasts—e.g., “If the United States provides it with F-16s, + there is a real possibility that Ukraine will regain control of + its airspace”—and{" "} + + research + {" "} + shows that people interpret “real possibility” to mean anything + between 20% and 80%, confusing both journalists and their + audiences. Probabilistic forecasts eliminate this problem. +

+

+ What’s more, to the extent that experts do put precise + probabilities on future events, their track record is poor. One + of Tetlock’s{" "} + + early findings + {" "} + was that political experts are highly overconfident in their + predictions. In fact, although there is significant variance, + their aggregate forecasts perform little better than chance. By + contrast, Metaculus predictions perform significantly better + than chance. +

+

+ 2. Serve as a check on the conventional wisdom. +

+

+ Forecasts can suggest that the conventional wisdom may be wrong + and that strongly held beliefs are worth questioning strongly. + For example, the conventional wisdom within the American + military is that China will invade Taiwan in the next few years. + One four-star general went so far as to{" "} + + suggest + {" "} + there was a 100% chance of the PRC attempting to seize the + island in 2025, leading to war with the United States. By + contrast, the Metaculus forecast for the same time period is{" "} + {/* */} + + 9% + + , not least because war between great powers is rare and because + war between nuclear-armed great powers is unprecedented. + Forecasts can provide an outside perspective on highly charged + issues and serve as a check on inside thinking, adding nuance to + stories. +

+

+ 3. Make sense of the big questions. +

+

+ Metaculus forecasts can help both journalists and their readers + make sense of developments where there is tremendous uncertainty + by breaking large, difficult-to-answer questions into smaller, + more tractable ones. +

+

+ The future of artificial intelligence falls into this category, + where the questions people are most interested in (e.g., “Will + AI lead to a more utopian or a more dystopian future?”) are + impossible to answer at this point. We can, however, provide + forecasts on{" "} + more targeted questions on AI + safety, the regulation of AI, technical progress on AI, and the + business of AI—all of which can help us better understand which + direction we are headed in and how fast. Forecasting questions + serve as clues as to what developments we should be paying + particular attention to. And a{" "} + + thorough analysis + {" "} + of our track record on AI-related questions showed that + Metaculus predictions offer clear and useful insights into the + future of the field and its impacts. +

+

+ Metaculus forecasts can also identify where there have been + significant changes in our anticipations of the future. For + example, the drastic reduction in the forecast arrival date of + transformative AI—from the early 2040s to the current + distribution, centered around{" "} + {/* */} + + Apr 29, 2033 + + —was used by{" "} + + The Economist + {" "} + as a tangible example of how society’s expectations of AI are + changing rapidly. +

+
+ + The Economist graph based on data by Metaculus on the question of when will the first general-AI system be devised, tested and announced + +
+ } + /> + + ); +}; + +export default DisclosureSection; diff --git a/front_end/src/app/(main)/press/components/ReferenceSection.tsx b/front_end/src/app/(main)/press/components/ReferenceSection.tsx new file mode 100644 index 0000000000..b303d763ab --- /dev/null +++ b/front_end/src/app/(main)/press/components/ReferenceSection.tsx @@ -0,0 +1,104 @@ +"use client"; + +import React from "react"; + +import DisclosureItem from "./DisclosureItem"; // Assuming Disclosure is in the same directory + +const DisclosureSection = () => { + return ( +
+ +

+ On Substack, Twitter, or most other social media: +

+

+ Simply paste the link to the Metaculus question URL, like{" "} + + www.metaculus.com/questions/17096/us-tracks-training-runs-by-2026 + + , and the preview image with the graph will show up automatically. +

+

+ On Other Sites: +

+

+ On the question page, click “embed” at the top. Choose + your theme, width, and height, then copy the iframe onto your + site. +

+

+ If you'd prefer to have a static image rather than an embed + that users can interact with, navigate to the URL of the embed, + e.g.{" "} + + www.metaculus.com/questions/embed/17096/ + + . Then save the image, generally via right click + “save + image as”, and upload it to your preferred site. +

+