diff --git a/components/particles.js b/components/particles.js
new file mode 100644
index 00000000..804e9dca
--- /dev/null
+++ b/components/particles.js
@@ -0,0 +1,94 @@
+import Particles from 'react-tsparticles'
+import React from 'react'
+
+const Particle = React.memo(function Particle() {
+ const particlesInit = main => {
+ console.log(main)
+ }
+
+ const particlesLoaded = container => {
+ console.log(container)
+ }
+ return (
+
+ )
+})
+
+export default Particle
diff --git a/package.json b/package.json
index f7c716e7..f57dc5a5 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,11 @@
"react-masonry-css": "^1.0.16",
"react-reveal": "^1.2.2",
"react-scrolllock": "^5.0.1",
+ "react-tsparticles": "^1.39.2",
"react-use-websocket": "2.9.1",
"resnow": "^1.0.0",
"theme-ui": "^0.13",
+ "tinytime": "^0.2.6",
"turndown": "^7.1.1"
},
"devDependencies": {
diff --git a/pages/vitalik.js b/pages/vitalik.js
new file mode 100644
index 00000000..609a2c20
--- /dev/null
+++ b/pages/vitalik.js
@@ -0,0 +1,393 @@
+import { Box, Button, Image, Grid, Text, Link } from 'theme-ui'
+import Head from 'next/head'
+import Meta from '@hackclub/meta'
+import React, { useEffect, useState } from 'react'
+import tt from 'tinytime'
+import Particle from '../components/particles'
+
+export default function Vitalik() {
+ const calculateTimeLeft = () => {
+ const difference = +new Date(`2022-02-04T01:00:00.000Z`) - +new Date()
+
+ let timeLeft = {}
+
+ if (difference > 0) {
+ timeLeft = {
+ days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+ hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+ min: Math.floor((difference / 1000 / 60) % 60),
+ sec: Math.floor((difference / 1000) % 60)
+ }
+ }
+
+ return timeLeft
+ }
+
+ const [timeLeft, setTimeLeft] = useState(calculateTimeLeft())
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setTimeLeft(calculateTimeLeft())
+ }, 1000)
+
+ return () => clearTimeout(timer)
+ })
+
+ const timer = []
+
+ Object.keys(timeLeft).forEach(e => {
+ if (!timeLeft[e]) {
+ if (e == 'days') {
+ return
+ } else if (e == 'hours') {
+ if (!timeLeft['days']) {
+ return
+ }
+ } else if (e == 'min') {
+ if (!timeLeft['days'] && !timeLeft['hours']) {
+ return
+ }
+ } else {
+ if (!timeLeft['days'] && !timeLeft['hours'] && !timeLeft['min']) {
+ return
+ }
+ }
+ }
+
+ var name = ''
+
+ if (e == 'days') {
+ if (timeLeft[e] == 1 || timeLeft[e] == 0) {
+ name = 'day'
+ } else {
+ name = 'days'
+ }
+ } else if (e == 'hours') {
+ if (timeLeft[e] == 1 || timeLeft[e] == 0) {
+ name = 'hour'
+ } else {
+ name = 'hours'
+ }
+ } else if (e == 'min') {
+ name = 'min'
+ } else {
+ name = 'sec'
+ }
+
+ timer.push(
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+ position: 'relative',
+ width: ['16vw', '15vw', '15vw'],
+ height: ['15vh', '20vh', '35vh'],
+ borderRadius: '5px',
+ border: ['none', '1.5px solid'],
+ borderColor: theme.util.gxText('#CDAEFB', '#82A9F9'),
+ fontSize: [4, 5, 7],
+ fontWeight: 'bold',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ textAlign: 'center'
+ })}
+ >
+
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9')
+ })}
+ >
+ {timeLeft[e]}{' '}
+
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+ position: 'relative',
+ fontSize: [1, 3, 4],
+ fontWeight: 'bold',
+ display: 'block',
+ pb: '15px'
+ })}
+ >
+ {name}
+
+
+
+ )
+ })
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+ mt: [3, 4],
+ px: '10px',
+ py: '5px',
+ borderRadius: '5px',
+ border: '1px solid',
+ fontSize: [1, 2],
+ display: 'block',
+ fontWeight: 'bold'
+ })}
+ >
+ {tt('{MM} {Do} {h}:{mm} {a}').render(
+ new Date(`2022-02-04T01:00:00.000Z`)
+ )}
+
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+ display: 'block'
+ })}
+ >
+ in your local date/time
+
+
+
+
+
+
+
+ {timer.length ? (
+
+ {timer}
+
+ ) : (
+
+ ({
+ color: 'primary',
+ ...theme.util.gxText('#CDAEFB', '#82A9F9'),
+ fontSize: [3, 4, 5],
+ fontWeight: 'bold'
+ })}
+ >
+ The AMA is happening right now...
+
+
+
+
+
+ {' '}
+ ( for Hack Clubbers )
+
+
+
+
+
+
+ )}
+ {timer.length ? (
+
+
+ Teenager? New here? Welcome!{' '}
+
+ Hack Club
+ {' '}
+ is a global community of high school makers & student-led coding
+ clubs. We’ve got a 24/7 Slack chatroom of 10k+ teenagers
+ learning to code & building amazing projects, & you’ll fit right
+ in.
+
+
+ ) : (
+
+
+ Teenager? New here? Welcome!{' '}
+
+ Hack Club
+ {' '}
+ is a global community of high school makers & student-led coding
+ clubs. We’ve got a 24/7 Slack chatroom of 10k+ teenagers
+ learning to code & building amazing projects, & you’ll fit right
+ in.
+
+
+ )}
+
+
+ {timer.length ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+ )}
+
+
+
+ )
+}
diff --git a/public/ama/logo-purple.svg b/public/ama/logo-purple.svg
new file mode 100644
index 00000000..91ea358e
--- /dev/null
+++ b/public/ama/logo-purple.svg
@@ -0,0 +1,17 @@
+
diff --git a/public/ama/vitalikImage.svg b/public/ama/vitalikImage.svg
new file mode 100644
index 00000000..73a8f4c5
--- /dev/null
+++ b/public/ama/vitalikImage.svg
@@ -0,0 +1,15 @@
+
diff --git a/public/ama/vitalikImageMobile.svg b/public/ama/vitalikImageMobile.svg
new file mode 100644
index 00000000..fca44774
--- /dev/null
+++ b/public/ama/vitalikImageMobile.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/ama/vitalikName.svg b/public/ama/vitalikName.svg
new file mode 100644
index 00000000..f696470d
--- /dev/null
+++ b/public/ama/vitalikName.svg
@@ -0,0 +1,86 @@
+
diff --git a/public/ama/vitalikName2.svg b/public/ama/vitalikName2.svg
new file mode 100644
index 00000000..ab8505b0
--- /dev/null
+++ b/public/ama/vitalikName2.svg
@@ -0,0 +1,87 @@
+
diff --git a/public/ama/vitalikNameMobile.svg b/public/ama/vitalikNameMobile.svg
new file mode 100644
index 00000000..3486837d
--- /dev/null
+++ b/public/ama/vitalikNameMobile.svg
@@ -0,0 +1,14 @@
+
diff --git a/yarn.lock b/yarn.lock
index d636a342..0792093a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2910,6 +2910,14 @@ react-scrolllock@^5.0.1:
dependencies:
exenv "^1.2.2"
+react-tsparticles@^1.39.2:
+ version "1.39.2"
+ resolved "https://registry.yarnpkg.com/react-tsparticles/-/react-tsparticles-1.39.2.tgz#8706f264b9775a321f0b0e1d3c436e174319a6ec"
+ integrity sha512-KDMLhKHuLQS3M6tKiS9fAt9dWWEuckv/Bhh3kqGAXwS9JnA7UGklav4WrtKlZE8fKTQ+c1yIRPfX2GD+AaNZ3g==
+ dependencies:
+ fast-deep-equal "^3.1.3"
+ tsparticles "^1.39.2"
+
react-use-websocket@2.9.1:
version "2.9.1"
resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-2.9.1.tgz#ef4a73a618b24f2a5875829ac0a0a0573c524710"
@@ -3299,6 +3307,11 @@ theme-ui@^0.13:
"@theme-ui/mdx" "0.13.1"
"@theme-ui/theme-provider" "0.13.1"
+tinytime@^0.2.6:
+ version "0.2.6"
+ resolved "https://registry.yarnpkg.com/tinytime/-/tinytime-0.2.6.tgz#3d68b8eda06fd2a0d650f9206c57e4e44280bfa7"
+ integrity sha512-FdiVbzssIGxpi9tuDWcMnDb4dUeoYIA4rpsdx1wVzvCaGMk5pt4WyFg2G+MFZ08HGyWB/CM/ajQfLKp6CYiD3w==
+
to-fast-properties@^2.0.0:
version "2.0.0"
resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -3354,6 +3367,11 @@ tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+tsparticles@^1.39.2:
+ version "1.39.2"
+ resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.39.2.tgz#5529b52967ba67f4cc48d66fabaf1001de29fffd"
+ integrity sha512-ClhuRuruVoR0ijj4fA8tmV+dRgGymMNqcBlvYu2gKUUIXRAkQRJrRfzqHqHY9eHqC/7gXEr6yUTNHs2vvvvUqw==
+
tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"