Pretty happy with this

.idea/steffoweb.iml

@@ -6,6 +6,7 @@
       <sourceFolder url="file://$MODULE_DIR$/components" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/pages" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/public" type="java-resource" />
+      <sourceFolder url="file://$MODULE_DIR$/hooks" isTestSource="false" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

components/LinkPanel.module.css

@@ -1,12 +1,13 @@
 .linkPanel {
     display: grid;
     grid-template-areas:
-        "icon text"
+        "icon text ext1"
-        "desc desc"
+        "desc desc ext2"
     ;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr;
 
+    grid-column-gap: 0;
     grid-row-gap: 0;
 
     white-space: nowrap;
@@ -35,6 +36,7 @@
     justify-self: center;
     align-self: center;
     width: 20px;
+    margin-right: 4px;
 }
 
 .linkPanelText {
@@ -47,4 +49,14 @@
     grid-area: desc;
     white-space: normal;
     align-self: start;
+}
+
+.linkPanelExtraTop {
+    grid-area: ext1;
+    align-self: end;
+}
+
+.linkPanelExtraBtm {
+    grid-area: ext2;
+    align-self: end;
 }

components/LinkPanel.tsx

@@ -11,24 +11,36 @@ export type LinkPanelProps = {
     icon: IconProp,
     text: React.ReactNode,
     description?: React.ReactNode,
+    extraTop?: React.ReactNode,
+    extraBtm?: React.ReactNode,
     me?: boolean,
     fade?: boolean,
     onPress?: React.EventHandler<React.SyntheticEvent<HTMLElement>>
 }
 
 
-export const LinkPanel = ({href, icon, text, description, me, fade, onPress}: LinkPanelProps) => {
+export const LinkPanel = ({href, icon, text, description, extraTop, extraBtm, me, fade, onPress}: LinkPanelProps) => {
     const panel = (
         <>
             <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
             <span className={style.linkPanelText}>
                 {text}
             </span>
+            {extraTop &&
+                <span className={style.linkPanelExtraTop}>
+                    {extraTop}
+                </span>
+            }
             {description &&
                 <small className={style.linkPanelDescription}>
                     {description}
                 </small>
             }
+            {extraBtm !== undefined &&
+                <small className={style.linkPanelExtraBtm}>
+                    {extraBtm}
+                </small>
+            }
         </>
     )
 

components/ProjectsList.module.css

@@ -0,0 +1,10 @@
+.projectsList {
+    max-height: 500px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow-y: scroll;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}

components/ProjectsList.tsx

@@ -0,0 +1,20 @@
+import {default as style} from "./ProjectsList.module.css"
+import {useGitHubRepositories} from "../hooks/useGitHubRepositories"
+import {LinkPanel} from "./LinkPanel"
+import {faBook, faCodeFork} from "@fortawesome/free-solid-svg-icons"
+
+
+export function ProjectsList() {
+    const repos = useGitHubRepositories("Steffo99")
+
+    return <div className={style.projectsList}>
+        {repos.map((repo) => <LinkPanel
+            icon={repo.fork ? faCodeFork : faBook}
+            text={repo.name}
+            description={repo.description}
+            href={repo.html_url}
+            fade={repo.archived}
+            extraBtm={repo.stargazers_count == 0 ? null : `${repo.stargazers_count} ★`}/>
+        )}
+    </div>
+}

hooks/useGitHubRepositories.ts

@@ -0,0 +1,32 @@
+import React from "react"
+
+
+export function useGitHubRepositories(user: string) {
+    const [data, setData] = React.useState<any[]>([])
+
+    const fetchData = React.useCallback(
+        async () => {
+            setData([])
+            let page = 1;
+            let count = 100;
+            while(count == 100) {
+                const resp = await fetch(`https://api.github.com/users/${user}/repos?per_page=100&page=${page}&sort=pushed&direction=desc`)
+                const data = await resp.json()
+                count = data.length
+                page += 1
+                setData((old) => [...old, ...data])
+            }
+        },
+        []
+    )
+
+    React.useEffect(
+        () => {
+            // noinspection JSIgnoredPromiseFromCall
+            fetchData()
+        },
+        [fetchData]
+    )
+
+    return data
+}

pages/index.tsx

@@ -6,6 +6,7 @@ import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackO
 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 {ProjectsList} from "../components/ProjectsList"
 import {useKonamiCode} from "../hooks/useKonamiCode"
 
 
@@ -41,7 +42,7 @@ const Index: NextPage = () => {
                 </p>
             </section>
         </div>
-        <div className={"chapter-2"}>
+        <div className={"chapter-3"}>
             <FlipPanel
                 className={"box"}
                 front={(flip) => <>
@@ -52,7 +53,7 @@ const Index: NextPage = () => {
                         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>.
+                        Over time, I've created lots of small projects, some which have succeeded in their goal, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
                     </p>
                     <hr className={"float-bottom"}/>
                     <p>
@@ -104,7 +105,7 @@ const Index: NextPage = () => {
                         <LinkPanel
                             href={"https://github.com/Steffo99/backup-duplicity"}
                             icon={faFloppyDisk}
-                            text={"docker-backup-duplicity"}
+                            text={"backup-duplicity"}
                             description={"Pluggable Docker-based backups"}
                         />
                         <LinkPanel
@@ -123,22 +124,23 @@ const Index: NextPage = () => {
                             href={"javascript:void(0)"}
                             icon={faDiagramProject}
                             text={"View all my projects"}
-                            description={"There are many more projects there!"}
+                            description={"There's a lot of stuff there!"}
                             onPress={flip}
                         />
                     </div>
                 </>}
                 back={(flip) => <>
                     <h3>
-                        My projects
+                        All my projects
                     </h3>
+                    <ProjectsList/>
                     <hr className={"float-bottom"}/>
                     <div className={"group-lp"}>
                         <LinkPanel
                             href={"javascript:void(0)"}
                             icon={faArrowLeft}
                             text={"Go back"}
-                            description={"I have seen enough"}
+                            description={"That's too much for me..."}
                             onPress={flip}
                         />
                     </div>
@@ -157,7 +159,9 @@ const Index: NextPage = () => {
                     <p>
                         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"}/>
+                    <div className={"group-lp"}>
+                        <LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
+                    </div>
                     <hr className={"float-bottom"}/>
                     <p>
                         Other services I often use are:
@@ -222,17 +226,18 @@ const Index: NextPage = () => {
                     <p>
                         If you want to find me on some other service, please:
                     </p>
-                    <LinkPanel
+                    <div className={"group-lp"}>
-                        href={"javascript:void(0)"}
+                        <LinkPanel
-                        icon={faUser}
+                            fade
-                        text={"View all my accounts"}
+                            icon={faUser}
-                        description={"I've started keeping track only recently..."}
+                            text={"View all my accounts"}
-                        onPress={flip}
+                            description={"Coming soon..."}
-                    />
+                        />
+                    </div>
                 </>}
                 back={(flip) => <>
                     <h3>
-                        My accounts
+                        All my accounts
                     </h3>
                     <hr className={"float-bottom"}/>
                     <div className={"group-lp"}>
@@ -246,8 +251,6 @@ const Index: NextPage = () => {
                     </div>
                 </>}
             />
-        </div>
-        <div className={"chapter-2"}>
             <section className={"panel box"} id={"panel-friends"}>
                 <h3>
                     My friends
@@ -313,12 +316,14 @@ const Index: NextPage = () => {
                 <p>
                     Hey friends! If you make a website, please let me know:
                 </p>
-                <LinkPanel
+                <div className={"group-lp"}>
-                    icon={faPlus}
+                    <LinkPanel
-                    text={"Made a website?"}
+                        icon={faPlus}
-                    fade
+                        text={"Made a website?"}
-                    description={"Tell me about it!"}
+                        fade
-                />
+                        description={"Tell me about it!"}
+                    />
+                </div>
             </section>
             <section className={"panel box home-ad"} id={"panel-adblocker"}>
                 <h3>