Re-animate!

components/FlipPanel.module.css

@@ -0,0 +1,53 @@
+.flipPanelContainer {
+    max-width: 476px;
+
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+    position: relative;
+}
+
+.flipPanelContainer .flipPanelContainer {
+    max-width: unset;
+}
+
+.flipPanel {
+    height: 100%;
+
+    transition-property: transform, z-index, opacity;
+    transition-duration: 1s, 1s, 0.5s;
+    transition-delay: 0s, 0s, 0s;
+}
+
+.flipPanelFront {
+    transform: rotateY(180deg);
+    z-index: 0;
+    user-select: none;
+    opacity: 0.4;
+    transition-delay: 0s, 0s, 0.5s;
+}
+
+.flipPanelFrontVisible {
+    transform: rotateY(0);
+    z-index: 1;
+    user-select: auto;
+    opacity: 1;
+    transition-delay: 0s, 0s, 0s;
+}
+
+.flipPanelBack {
+    transform: rotateY(180deg);
+    margin-left: -100%;
+    z-index: 0;
+    user-select: none;
+    opacity: 0.4;
+    transition-delay: 0s, 0s, 0.5s;
+}
+
+.flipPanelBackVisible {
+    transform: rotateY(0);
+    z-index: 1;
+    user-select: auto;
+    opacity: 1;
+    transition-delay: 0s, 0s, 0s;
+}

components/FlipPanel.tsx

@@ -0,0 +1,51 @@
+import React, {useCallback} from "react"
+import {default as cn} from "classnames";
+import {default as style} from "./FlipPanel.module.css"
+
+export type FlipPanelProps = {
+    front: (f: () => void) => React.ReactNode,
+    back: (f: () => void) => React.ReactNode,
+
+    containerClassName?: cn.Argument,
+    className?: cn.Argument,
+    frontClassName?: cn.Argument,
+    backClassName?: cn.Argument,
+
+    containerProps?: {[prop: string]: any},
+    props?: {[prop: string]: any},
+    frontProps?: {[prop: string]: any},
+    backProps?: {[prop: string]: any},
+}
+
+export const FlipPanel = ({front, back, containerClassName, className, frontClassName, backClassName, containerProps, props, frontProps, backProps}: FlipPanelProps) => {
+    const [isFront, setFront] = React.useState<boolean>(true)
+    const frontElement = React.useRef<HTMLElement>()
+    const backElement = React.useRef<HTMLElement>()
+
+    const flipToFront = React.useCallback(
+        () => {
+            setFront(true)
+            frontElement.current.inert = false
+            backElement.current.inert = true
+        },
+        [frontElement, backElement]
+    )
+
+    const flipToBack = React.useCallback(
+        () => {
+            setFront(false)
+            frontElement.current.inert = true
+            backElement.current.inert = false
+        },
+        [frontElement, backElement]
+    )
+
+    return <div className={cn(style.flipPanelContainer, containerClassName)} {...containerProps}>
+        <section ref={frontElement} className={cn("panel", style.flipPanel, style.flipPanelFront, {[style.flipPanelFrontVisible]: isFront}, className, frontClassName)} {...props} {...frontProps}>
+            {front(flipToBack)}
+        </section>
+        <section ref={backElement} className={cn("panel", style.flipPanel, style.flipPanelBack, {[style.flipPanelBackVisible]: !isFront}, className, backClassName)} {...props} {...backProps}>
+            {back(flipToFront)}
+        </section>
+    </div>
+}

components/LinkPanel.tsx

@@ -13,10 +13,11 @@ export type LinkPanelProps = {
     description?: React.ReactNode,
     me?: boolean,
     fade?: boolean,
+    onPress?: React.EventHandler<React.SyntheticEvent<HTMLElement>>
 }
 
 
-export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelProps) => {
+export const LinkPanel = ({href, icon, text, description, me, fade, onPress}: LinkPanelProps) => {
     const panel = (
         <>
             <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
@@ -34,7 +35,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
     if(href) {
         return (
             <Link href={href}>
-                <a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
+                <a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""} onClick={onPress} onKeyPress={onPress}>
                     {panel}
                 </a>
             </Link>
@@ -42,7 +43,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
     }
     else {
         return (
-            <div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
+            <div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} onClick={onPress} onKeyPress={onPress}>
                 {panel}
             </div>
         )

pages/_app.css

@@ -7,15 +7,15 @@
 @import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
 @import 'node_modules/@fortawesome/fontawesome-svg-core/styles.css';
 
-body .panel {
+.panel {
     max-width: 476px;
 }
 
-body .panel .panel {
+.panel .panel {
     max-width: unset;
 }
 
-body .group-lp {
+.group-lp {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;

pages/index.tsx

@@ -1,10 +1,10 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {useRouter} from "next/router"
 import React from 'react'
 import type {NextPage} from "next"
 import {default as Link} from "next/link"
 import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
-import {faBorderAll, faEnvelope, faGlobe, faUser, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faCog, faFloppyDisk, faScissors} from "@fortawesome/free-solid-svg-icons"
+import {faBorderAll, faEnvelope, faGlobe, faUser, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faArrowLeft, faCog, faFloppyDisk, faScissors, faShield} from "@fortawesome/free-solid-svg-icons"
+import {FlipPanel} from "../components/FlipPanel"
 import {LinkPanel} from "../components/LinkPanel"
 import {useKonamiCode} from "../hooks/useKonamiCode"
 
@@ -23,6 +23,7 @@ const Index: NextPage = () => {
                 <p>
                     I'm <dfn>Stefano Pigozzi</dfn>, an Italian Computer Science graduate and <b>Master's student</b> at <Link href={"https://www.unimore.it/"}>Unimore</Link>!
                 </p>
+                <hr/>
                 <p>
                     I'm interested in improving the interactions between people via technology.
                 </p>
@@ -30,13 +31,10 @@ const Index: NextPage = () => {
                     For that reason, I enjoy using, exploring, studying and developing:
                 </p>
                 <ul>
-                    <li>social applications;</li>
+                    <li>social applications and their communities;</li>
-                    <li>chat applications and automations;</li>
+                    <li>videogames and their competitions;</li>
-                    <li>multiplayer videogames;</li>
+                    <li>websites and Internet protocols in general;</li>
-                    <li>game tournaments;</li>
+                    <li>chat bots and integrations.</li>
-                    <li>websites;</li>
-                    <li>online communities;</li>
-                    <li>and Internet protocols in general!</li>
                 </ul>
                 <p>
                     I'm also an advocate of the <a href={"https://fsfe.org/freesoftware/freesoftware.en.html"}>free software movement</a>, and try to release everything I make under a free software license.
@@ -44,7 +42,9 @@ const Index: NextPage = () => {
             </section>
         </div>
         <div className={"chapter-2"}>
-            <section className={"panel box"} id={"panel-projects"}>
+            <FlipPanel
+                className={"box"}
+                front={(flip) => <>
                     <h3>
                         My projects
                     </h3>
@@ -120,14 +120,33 @@ const Index: NextPage = () => {
                     </p>
                     <div className={"group-lp"}>
                         <LinkPanel
-                        fade
+                            href={"javascript:void(0)"}
                             icon={faDiagramProject}
-                        text={"Visit my Projects page"}
+                            text={"View all my projects"}
                             description={"There are many more projects there!"}
+                            onPress={flip}
                         />
                     </div>
-            </section>
+                </>}
-            <section className={"panel box"} id={"panel-internet"}>
+                back={(flip) => <>
+                    <h3>
+                        My projects
+                    </h3>
+                    <hr className={"float-bottom"}/>
+                    <div className={"group-lp"}>
+                        <LinkPanel
+                            href={"javascript:void(0)"}
+                            icon={faArrowLeft}
+                            text={"Go back"}
+                            description={"I have seen enough"}
+                            onPress={flip}
+                        />
+                    </div>
+                </>}
+            />
+            <FlipPanel
+                className={"box"}
+                front={(flip) => <>
                     <h3>
                         Me on the Internet
                     </h3>
@@ -139,7 +158,7 @@ const Index: NextPage = () => {
                         Apart from experimentation, I'm currently the most active on the Fediverse, in particular on:
                     </p>
                     <LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
-                <hr/>
+                    <hr className={"float-bottom"}/>
                     <p>
                         Other services I often use are:
                     </p>
@@ -204,12 +223,29 @@ const Index: NextPage = () => {
                         If you want to find me on some other service, please:
                     </p>
                     <LinkPanel
-                    fade
+                        href={"javascript:void(0)"}
                         icon={faUser}
-                    text={"Visit my Accounts page"}
+                        text={"View all my accounts"}
                         description={"I've started keeping track only recently..."}
+                        onPress={flip}
+                    />
+                </>}
+                back={(flip) => <>
+                    <h3>
+                        My accounts
+                    </h3>
+                    <hr className={"float-bottom"}/>
+                    <div className={"group-lp"}>
+                        <LinkPanel
+                            href={"javascript:void(0)"}
+                            icon={faArrowLeft}
+                            text={"Go back"}
+                            description={"I have seen enough"}
+                            onPress={flip}
+                        />
+                    </div>
+                </>}
             />
-            </section>
         </div>
         <div className={"chapter-2"}>
             <section className={"panel box"} id={"panel-friends"}>
@@ -217,26 +253,72 @@ const Index: NextPage = () => {
                     My friends
                 </h3>
                 <p>
-                    I think that everyone should have their tiny, personal website!
+                    I think that everyone should have their personal website, and to encourage that, I list the website of all my friends here, so that other people may see them!
                 </p>
+                <hr className={"float-bottom"}/>
                 <p>
-                    You can check out my friends' websites here:
+                    You can check them out here:
                 </p>
-                <div className={"chapter-3"}>
+                <div className={"group-lp"}>
-                    <LinkPanel icon={faGlobe} text={"Gimbaro"} href={"https://gimbaro.dev/"}/>
+                    <LinkPanel
-                    <LinkPanel icon={faGlobe} text={"Ichicoro"} href={"https://marte.dev/"}/>
+                        icon={faGlobe}
-                    <LinkPanel icon={faGlobe} text={"Malbyx"} href={"https://about.malbyx.tk/"}/>
+                        text={"Gimbaro"}
-                    <LinkPanel icon={faGlobe} text={"Nemesis"} href={"https://www.fermitech.info/"}/>
+                        href={"https://gimbaro.dev/"}
-                    <LinkPanel icon={faGlobe} text={"SnowyCoder"} href={"https://rossilorenzo.dev/"}/>
+                        description={"gimbaro.dev"}
-                    <LinkPanel icon={faGlobe} text={"Proto"} href={"https://fabiodesim.one/"}/>
+                    />
-                    <LinkPanel icon={faGlobe} text={"Viktya"} href={"https://viktya.github.io/"}/>
+                    <LinkPanel
-                    <div className={"panel fade"}>
+                        icon={faGlobe}
-                        <span><FontAwesomeIcon icon={faPlus}/> And more!</span>
+                        text={"Ichicoro"}
+                        href={"https://marte.dev/"}
+                        description={"marte.dev"}
+                    />
                 </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        icon={faGlobe}
+                        text={"Malbyx"}
+                        href={"https://about.malbyx.tk/"}
+                        description={"malbyx.tk"}
+                    />
+                    <LinkPanel
+                        icon={faGlobe}
+                        text={"Nemesis"}
+                        href={"https://www.fermitech.info/"}
+                        description={"fermitech.info"}
+                    />
                 </div>
-                <small style={{fontSize: "x-small"}} className={"float-bottom"}>
+                <div className={"group-lp"}>
-                    Hey friends, please make a small personal website, so I can add you here! <span aria-hidden>:D</span>
+                    <LinkPanel
-                </small>
+                        icon={faGlobe}
+                        text={"Proto"}
+                        href={"https://fabiodesim.one/"}
+                        description={"fabiodesim.one"}
+                    />
+                    <LinkPanel
+                        icon={faGlobe}
+                        text={"SnowyCoder"}
+                        href={"https://rossilorenzo.dev/"}
+                        description={"rossilorenzo.dev"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        icon={faGlobe}
+                        text={"Viktya"}
+                        href={"https://viktya.github.io/"}
+                        description={"viktya.github.io"}
+                    />
+                </div>
+                <hr/>
+                <p>
+                    Hey friends! If you make a website, please let me know:
+                </p>
+                <LinkPanel
+                    icon={faPlus}
+                    text={"Made a website?"}
+                    fade
+                    description={"Tell me about it!"}
+                />
             </section>
             <section className={"panel box home-ad"} id={"panel-adblocker"}>
                 <h3>
@@ -245,21 +327,24 @@ const Index: NextPage = () => {
                 <p>
                     Hey! You're browsing the Internet without an ad-blocker!
                 </p>
+                <hr/>
                 <p>
                     For your safety and better browser performance, you should install:
                 </p>
-                <div className={"chapter-1"}>
+                <div className={"group-lp"}>
-                    <LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"}/>
+                    <LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"} description={"Free, open-source ad content blocker"}/>
                 </div>
+                <hr/>
                 <p>
                     Additionally, if you are technically inclined, consider setting up this on your network:
                 </p>
-                <div className={"chapter-1"}>
+                <div className={"group-lp"}>
-                    <LinkPanel icon={faShieldAlt} text={"Pi-Hole"} href={"https://pi-hole.net"}/>
+                    <LinkPanel icon={faShield} text={"Pi-Hole"} href={"https://pi-hole.net"} description={"Network-wide ad blocking"}/>
                 </div>
-                <small style={{fontSize: "x-small"}} className={"float-bottom"}>
+                <hr/>
-                    I am not affiliated with the developers of this software, but I heavily recommend them to everyone!
+                <p>
-                </small>
+                    Enjoy a better Internet, and remember to pay for the services you find useful so that they don't need ads to keep existing!
+                </p>
             </section>
         </div>
     </>