Revamp author page

package-lock.json

@@ -15,6 +15,8 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.0.1",
+        "react-konami-code": "^2.3.0",
+        "react-snowfall": "^2.1.0",
         "react-toastify": "^10.0.4",
         "zustand": "^4.5.0"
       },
@@ -3866,7 +3868,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4324,7 +4325,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4383,6 +4383,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -4394,8 +4399,31 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "dev": true
+    },
+    "node_modules/react-konami-code": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-konami-code/-/react-konami-code-2.3.0.tgz",
+      "integrity": "sha512-9x90HnzstiMXs2kFS9cYsb5a+ojKEB/iC24uzNKCoE9znorLJwUcy98tjsiW2i5AHB05GuqIMTzV5RaDpVSThw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/react-snowfall": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-2.1.0.tgz",
+      "integrity": "sha512-5nYWmBTJi/rrRRTmE62QLhxSp3sfX9niPP1Ysrd4dkVZLr0fxHTkcqCLQx7BAkclCEq5MWZ7kgIHrqk5Ugq1PA==",
+      "dependencies": {
+        "react-fast-compare": "^3.2.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || 17.x || 18.x",
+        "react-dom": "^16.8 || 17.x || 18.x"
+      }
     },
     "node_modules/react-toastify": {
       "version": "10.0.4",

package.json

@@ -17,6 +17,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1",
+    "react-konami-code": "^2.3.0",
+    "react-snowfall": "^2.1.0",
     "react-toastify": "^10.0.4",
     "zustand": "^4.5.0"
   },

src/app/author/[author]/AuthorDisplay.tsx

@@ -1,11 +1,14 @@
+'use client'
 import Link from 'next/link'
-import { Fragment } from 'react'
+import { Fragment, useState } from 'react'
 import { affiliations, nationalities, authors } from '../../db/data'
 import { Zilla_Slab } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import DocumentCard from '@/app/components/DocumentCard'
 import findDocumentsByAuthor from './findDocumentsByAuthor'
 import cardEffects from '@/app/styles/cardEffects.module.css'
+import Konami from 'react-konami-code'
+import Snowfall from 'react-snowfall'
 
 const zillaSlab = Zilla_Slab({ subsets: ['latin'], weight: ['500'] })
 
@@ -17,17 +20,47 @@ export default function AuthorDisplay({
     notFound()
   }
 
+  const [snowfallActivated, setSnowfallActivated] = useState<boolean>(false)
   const { name, affiliation, image, nationality, formerAffiliations } = data
 
   const authorsDocuments = findDocumentsByAuthor(author)
+  const handleKonami = () => {
+    setSnowfallActivated(!snowfallActivated)
+  }
 
   const MainPosition = () => {
     const mainAffiliationShort = affiliation[0].split('@')[1]
     const mainPosition = affiliation[0].split('@')[0]
     const mainAffiliation = affiliations[mainAffiliationShort]
     const { website } = data
+
+    const images: HTMLImageElement[] = []
+    nationality.forEach(n => {
+      const { flag } = nationalities[n]
+      const image = new Image()
+      image.src = flag
+      images.push(image)
+    })
+
     return (
       <>
+        <Konami action={handleKonami} />
+        {snowfallActivated &&
+          <Snowfall
+            snowflakeCount={500}
+            color="white"
+            images={images}
+            radius={[20, 60]}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              zIndex: -1,
+              pointerEvents: 'none',
+              height: `${document.documentElement.scrollHeight}px`,
+            }}
+          />
+        }
         <span>{mainPosition} at </span>
         <Link href={`/affiliation/${mainAffiliationShort}`}>
           {mainAffiliation.name}
@@ -40,17 +73,17 @@ export default function AuthorDisplay({
             </a>
           </div>
         ) : null}
-        <div className='my-4 max-h-12 flex flex-wrap gap-2'>
+        <div className='my-4 max-h-16 flex flex-wrap gap-2'>
           {affiliation.map((a: string) => (
             <Link
               key={a}
               href={`/affiliation/${a.split('@')[1]}`}
-              className={cardEffects['card-small']}
+              className={`${cardEffects['card-small']} rounded-md`}
             >
               <img
                 src={affiliations[a.split('@')[1]].image}
                 alt={affiliations[a.split('@')[1]].name}
-                className='h-12 rounded-md'
+                className='h-16 rounded-md p-2'
               />
             </Link>
           ))}
@@ -133,8 +166,8 @@ export default function AuthorDisplay({
 
     return (
       <>
-        <h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>Bio:</h1>
+        <h1 className='text-3xl md:mt-6 mt-4 mb-2 font-serif'>Bio</h1>
-        <p>{bio}</p>
+        <p className='mb-2'>{bio}</p>
       </>
     )
   }
@@ -181,9 +214,8 @@ export default function AuthorDisplay({
         {authorsDocuments.length > 0 && (
           <>
             <hr className='mx-auto w-full h-1 border-0 bg-slate-200 my-2 rounded-md' />
-            <br />
             <h1 className='text-3xl md:my-6 my-4 font-serif'>
-              Published documents
+              Published documents {`(${authorsDocuments.length})`}
             </h1>
             {authorsDocuments.map((d) => (
               <Fragment key={d.slug}>