Refactor main page

(I'm not done yet.)

components/LinkPanel.module.css

@@ -1,26 +1,50 @@
 .linkPanel {
-    white-space: nowrap;
+    display: grid;
+    grid-template-areas:
+        "icon text"
+        "desc desc"
+    ;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr;
 
-    flex-direction: row;
+    grid-row-gap: 0;
-    gap: 8px;
+
-    align-items: center;
+    white-space: nowrap;
+    text-decoration: none;
+
+    flex-basis: calc(50% - 4px);
+    flex-grow: 1;
 }
 
-.linkPanel:hover, .linkPanel:focus {
+@media (max-width: 492px) {
+    .linkPanel {
+        width: 100%;
+    }
+}
+
+.linkPanel[href]:hover, .linkPanel[href]:focus {
     --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
 }
 
-.linkPanel:active {
+.linkPanel[href]:active {
     --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
 }
 
 .linkPanelIcon {
+    grid-area: icon;
     justify-self: center;
+    align-self: center;
     width: 20px;
-    flex-shrink: 0;
 }
 
 .linkPanelText {
-    flex-grow: 1;
+    grid-area: text;
-    justify-self: flex-start;
+    align-self: center;
+    text-decoration: 1px solid underline currentColor;
+}
+
+.linkPanelDescription {
+    grid-area: desc;
+    white-space: normal;
+    align-self: start;
 }

components/LinkPanel.tsx

@@ -10,18 +10,24 @@ export type LinkPanelProps = {
     href?: string,
     icon: IconProp,
     text: React.ReactNode,
+    description?: React.ReactNode,
     me?: boolean,
     fade?: boolean,
 }
 
 
-export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
+export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelProps) => {
     const panel = (
         <>
             <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
             <span className={style.linkPanelText}>
                 {text}
             </span>
+            {description &&
+                <small className={style.linkPanelDescription}>
+                    {description}
+                </small>
+            }
         </>
     )
 
@@ -36,7 +42,7 @@ export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
     }
     else {
         return (
-            <div className={cn({panel: true, fade: fade})}>
+            <div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
                 {panel}
             </div>
         )

pages/_app.css

@@ -1,9 +1,22 @@
 @import 'node_modules/@steffo/bluelib/dist/base.root.css';
-@import 'node_modules/@steffo/bluelib/dist/colors-royalblue.root.css';
-@import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
 @import 'node_modules/@steffo/bluelib/dist/layouts-center.root.css';
 @import 'node_modules/@steffo/bluelib/dist/layouts-flex.root.css';
 @import 'node_modules/@steffo/bluelib/dist/classic.root.css';
 @import 'node_modules/@steffo/bluelib/dist/glass.root.css';
-@import 'node_modules/@steffo/bluelib/dist/fun.root.css';
+@import 'node_modules/@steffo/bluelib/dist/colors-royalblue.root.css';
+@import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
 @import 'node_modules/@fortawesome/fontawesome-svg-core/styles.css';
+
+body .panel {
+    max-width: 476px;
+}
+
+body .panel .panel {
+    max-width: unset;
+}
+
+body .group-lp {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}

pages/_app.tsx

@@ -14,7 +14,7 @@ config.autoAddCss = false
 const App = ({Component, pageProps}: AppProps) => {
     return <>
         <h1>
-            <Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo's website
+            <Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo
         </h1>
         <main>
             <Component {...pageProps}/>

pages/_document.tsx

@@ -0,0 +1,15 @@
+import Document, {Html, Head, Main, NextScript} from "next/document"
+
+export default class extends Document {
+    render() {
+        return (
+            <Html>
+                <Head/>
+                <body className={"layout-center"}>
+                    <Main/>
+                    <NextScript/>
+                </body>
+            </Html>
+        )
+    }
+}

pages/index.tsx

@@ -3,8 +3,8 @@ import {useRouter} from "next/router"
 import React from 'react'
 import type {NextPage} from "next"
 import {default as Link} from "next/link"
-import {faRedditAlien, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faLinkedin, faStackOverflow, faWikipediaW} from "@fortawesome/free-brands-svg-icons"
+import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
-import {faBorderAll, faEnvelope, faGlobe, faPlus, faFileCode, faBagShopping, faShieldAlt} from "@fortawesome/free-solid-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 {LinkPanel} from "../components/LinkPanel"
 import {useKonamiCode} from "../hooks/useKonamiCode"
 
@@ -15,7 +15,7 @@ const Index: NextPage = () => {
     useKonamiCode(() => router.push("/garasauto"))
 
     return <>
-        <div className={"chapter-2"}>
+        <div className={"chapter-1"}>
             <section className={"panel box"} id={"panel-about"}>
                 <h3>
                     About me
@@ -23,13 +23,8 @@ 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>
-            </section>
-            <section className={"panel box"} id={"panel-interests"}>
-                <h3>
-                    My interests
-                </h3>
                 <p>
-                    I'm interested in how to improve the interactions between people via technology.
+                    I'm interested in improving the interactions between people via technology.
                 </p>
                 <p>
                     For that reason, I enjoy using, exploring, studying and developing:
@@ -38,77 +33,192 @@ const Index: NextPage = () => {
                     <li>social applications;</li>
                     <li>chat applications and automations;</li>
                     <li>multiplayer videogames;</li>
+                    <li>game tournaments;</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.
+                </p>
             </section>
         </div>
         <div className={"chapter-2"}>
+            <section className={"panel box"} id={"panel-projects"}>
+                <h3>
+                    My projects
+                </h3>
+                <p>
+                    Often, while experimenting with a new technology, I notice something that can be improved, and I try to come up with a solution to it.
+                </p>
+                <p>
+                    Over time, I've created lots of small projects, some which have succeeded, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
+                </p>
+                <hr className={"float-bottom"}/>
+                <p>
+                    Here's a small sample of what I've worked on:
+                </p>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://bluelib.steffo.eu/examples/index.html"}
+                        icon={faPaintRoller}
+                        text={"Bluelib"}
+                        description={"Customizable web stylesheet"}
+                    />
+                    <LinkPanel
+                        href={"https://github.com/Steffo99/greed"}
+                        icon={faCashRegister}
+                        text={"Greed"}
+                        description={"Telegram store bot"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://github.com/Steffo99/greed"}
+                        icon={faBookAtlas}
+                        text={"Sophon"}
+                        description={"Research hub for universities"}
+                    />
+                    <LinkPanel
+                        href={"https://steffo.itch.io/pineapple-surf"}
+                        icon={faGamepad}
+                        text={"Pineapple Surf"}
+                        description={"Game jam prototype"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"}
+                        icon={faPaintbrush}
+                        text={"Steffula Code"}
+                        description={"Color theme for the VSCode editor"}
+                    />
+                    <LinkPanel
+                        href={"https://steffo.itch.io/pineapple-surf"}
+                        icon={faCog}
+                        text={"Micronfig"}
+                        description={"12-factor app config for Rust"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://github.com/Steffo99/backup-duplicity"}
+                        icon={faFloppyDisk}
+                        text={"docker-backup-duplicity"}
+                        description={"Pluggable Docker-based backups"}
+                    />
+                    <LinkPanel
+                        href={"https://steffo.itch.io/pineapple-surf"}
+                        icon={faScissors}
+                        text={"actions-semver"}
+                        description={"GH Action for semver parsing"}
+                    />
+                </div>
+                <hr/>
+                <p>
+                    If you're interested in seeing more, you can:
+                </p>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        fade
+                        icon={faDiagramProject}
+                        text={"Visit my Projects page"}
+                        description={"There are many more projects there!"}
+                    />
+                </div>
+            </section>
             <section className={"panel box"} id={"panel-internet"}>
                 <h3>
                     Me on the Internet
                 </h3>
                 <p>
-                    You can find me in many places around the Internet:
+                    I sign up to basically any website I stumble upon to explore and study its functions, mechanisms, culture and community, so don't be surprised if you see me somewhere!
                 </p>
-                <div className={"chapter-2"}>
+                <hr/>
-                    <LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={<span>@steffo<small>@fosstodon.org</small></span>}/>
-                    <LinkPanel me href={"https://old.reddit.com/user/steffo99"} icon={faRedditAlien} text={<span><small>/u/</small>Steffo99</span>}/>
-                    <LinkPanel me href={"https://github.com/Steffo99"} icon={faGithub} text={"Steffo99"}/>
-                    <LinkPanel me href={"https://stackoverflow.com/users/4334568/steffo"} icon={faStackOverflow} text={"Steffo"}/>
-                    <LinkPanel me href={"https://www.linkedin.com/in/steffo45/"} icon={faLinkedin} text={"Stefano Pigozzi"}/>
-                    <LinkPanel me href={"https://en.wikipedia.org/wiki/User:Steffo99"} icon={faWikipediaW} text={"Steffo99"}/>
-                    <LinkPanel me href={"https://steamcommunity.com/profiles/76561198034314260/"} icon={faSteam} text={"Steffo"}/>
-                    <LinkPanel me href={"https://steffo.itch.io/"} icon={faItchIo} text={"Steffo"}/>
-                </div>
                 <p>
-                    You may message me on any of the following messengers:
+                    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/>
+                <p>
+                    Other services I often use are:
+                </p>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://github.com/Steffo99"}
+                        icon={faGithub}
+                        text={"GitHub"}
+                        description={"Steffo99"}
+                    />
+                    <LinkPanel
+                        href={"https://stackoverflow.com/users/4334568/steffo"}
+                        icon={faStackOverflow}
+                        text={"Stack Overflow"}
+                        description={"Steffo"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://www.linkedin.com/in/steffo45/"}
+                        icon={faBorderAll}
+                        text={"Matrix"}
+                        description={"@steffo:ryg.one"}
+                    />
+                    <LinkPanel
+                        href={"https://discord.com/users/77703771181817856"}
+                        icon={faDiscord}
+                        text={"Discord"}
+                        description={"Steffo#4036"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://www.linkedin.com/in/steffo45/"}
+                        icon={faLinkedin}
+                        text={"Linkedin"}
+                        description={"Stefano Pigozzi"}
+                    />
+                    <LinkPanel
+                        href={"mailto:me@steffo.eu"}
+                        icon={faEnvelope}
+                        text={"Email"}
+                        description={"me@steffo.eu"}
+                    />
+                </div>
+                <div className={"group-lp"}>
+                    <LinkPanel
+                        href={"https://steamcommunity.com/profiles/76561198034314260/"}
+                        icon={faSteam}
+                        text={"Steam"}
+                        description={"[U:1:74048532]"}
+                    />
+                    <LinkPanel
+                        href={"https://steffo.itch.io/"}
+                        icon={faItchIo}
+                        text={"Itch.io"}
+                        description={"Steffo"}
+                    />
+                </div>
+                <hr/>
+                <p>
+                    If you want to find me on some other service, please:
+                </p>
+                <LinkPanel
+                    fade
+                    icon={faUser}
+                    text={"Visit my Accounts page"}
+                    description={"I've started keeping track only recently..."}
+                />
+            </section>
+        </div>
         <div className={"chapter-2"}>
-                    <LinkPanel me href={"mailto:me@steffo.eu"} icon={faEnvelope} text={"me@steffo.eu"}/>
-                    <LinkPanel me href={"https://t.me/Steffo"} icon={faTelegram} text={"@Steffo"}/>
-                    <LinkPanel me href={"https://discord.com/users/77703771181817856"} icon={faDiscord} text={<span>Steffo<small>#4036</small></span>}/>
-                    <LinkPanel me href={"https://matrix.to/@steffo:ryg.one"} icon={faBorderAll} text={<span>@steffo<small>:ryg.one</small></span>}/>
-                </div>
-                <small style={{fontSize: "x-small"}} className={"float-bottom"}>
-                    Please <em>do not</em> send me chat messages about <i>Greed</i>, <Link href={"https://github.com/Steffo99/greed/issues/new/choose"}>open an issue</Link> instead!
-                </small>
-            </section>
-            <section className={"panel box"} id={"panel-projects"}>
-                <h3>
-                    My projects
-                </h3>
-                <div className={"chapter-3"}>
-                    <LinkPanel href={"https://github.com/Steffo99/greed"} icon={faFileCode} text={"Greed"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/sophon"} icon={faFileCode} text={"Sophon"}/>
-                    <LinkPanel href={"https://gh.steffo.eu/bluelib/examples/index.html"} icon={faGlobe} text={"Bluelib"}/>
-                    <LinkPanel href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"} icon={faBagShopping} text={"Steffula Code"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/steffula-ultra"} icon={faFileCode} text={"Steffula Ultra"}/>
-                    <LinkPanel href={"https://uni.steffo.eu/"} icon={faGlobe} text={"Unisteffo"}/>
-                    <LinkPanel href={"https://github.com/RYGhub/revenants-brooch"} icon={faFileCode} text={<span style={{fontSize: "small"}}>Revenant's Brooch</span>}/>
-                    <LinkPanel href={"https://hub.ryg.one/bobbot/"} icon={faDiscord} text={"Bob Bot"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/cfig"} icon={faFileCode} text={"cfig"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/threadkiller"} icon={faFileCode} text={"Threadkiller"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/actions-semver"} icon={faFileCode} text={"actions-semver"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/template-poetry"} icon={faFileCode} text={<span style={{fontSize: "small"}}>template-poetry</span>}/>
-                    <LinkPanel href={"https://github.com/Steffo99/lokiunimore"} icon={faFileCode} text={"Loki"}/>
-                    <LinkPanel href={"https://t.me/patchedporobot"} icon={faTelegram} text={<span style={{fontSize: "small"}}>Patched Porobot</span>}/>
-                    <LinkPanel href={"https://github.com/Steffo99/io-beep-boop"} icon={faFileCode} text={"Io Beep Boop"}/>
-                    <LinkPanel href={"https://addons.mozilla.org/en-US/firefox/addon/tidebringer/"} icon={faBagShopping} text={"Tidebringer"}/>
-                    <LinkPanel href={"https://steamcommunity.com/sharedfiles/filedetails/?id=2572658701"} icon={faSteam} text={"Starting Perk"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/lihzahrd"} icon={faFileCode} text={"lihzahrd"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/flyingsnake"} icon={faFileCode} text={"flyingsnake"}/>
-                    <LinkPanel href={"https://gh.steffo.eu/trivia/"} icon={faGlobe} text={"Trivia"}/>
-                    <LinkPanel href={"https://github.com/Steffo99/steamleaderboards"} icon={faFileCode} text={<span style={{fontSize: "small"}}>steamleaderboards</span>}/>
-                </div>
-                <small style={{fontSize: "x-small"}} className={"float-bottom"}>
-                    There are more on <Link href={"https://github.com/Steffo99?tab=repositories"}>my GitHub profile</Link>!
-                </small>
-            </section>
             <section className={"panel box"} id={"panel-friends"}>
                 <h3>
-                    Friends
+                    My friends
                 </h3>
+                <p>
+                    I think that everyone should have their tiny, personal website!
+                </p>
                 <p>
                     You can check out my friends' websites here:
                 </p>