Complete (?) website

components/ProjectPanel.module.css

@@ -1,89 +0,0 @@
-.projectPanel {
-    flex-basis: 228px !important;
-    flex-grow: 0 !important;
-    padding: 0 !important;
-    overflow: hidden;
-
-    text-decoration: none;
-}
-
-.projectImage {
-    border-radius: var(--b-border-radius);
-}
-
-.projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
-    filter: brightness(80%) blur(16px);
-}
-
-.projectDescription {
-    visibility: hidden;
-    position: absolute;
-
-    width: 228px;
-    height: 114px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-content: center;
-
-    text-align: center;
-    text-shadow: 1px 1px 0 hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)) !important;
-
-    background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
-
-    border-width: 2px;
-    border-radius: var(--b-border-radius);
-}
-
-.projectDescription h4 {
-    text-shadow: 1px 1px 0 hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)) !important;
-    line-height: 1.3em;
-}
-
-.projectPanel:hover .projectDescription, .projectPanel:focus .projectDescription {
-    visibility: visible;
-}
-
-@media (hover: none) or (any-pointer: coarse) {
-    .projectPanel {
-        flex-basis: 100% !important;
-        flex-direction: row !important;
-    }
-
-    .projectDescription {
-        position: unset;
-        visibility: visible;
-
-        width: unset;
-
-        align-content: flex-start;
-        text-align: left;
-        text-shadow: none;
-
-        background-color: transparent;
-        border-width: 0;
-    }
-
-    .projectDescription h4 {
-        text-shadow: none;
-
-        text-align: left !important;
-    }
-
-    .projectImage {
-        border-radius: var(--b-border-radius) 0 0 var(--b-border-radius) !important;
-    }
-
-    .projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
-        filter: none;
-    }
-
-    .projectPanel:hover, .projectPanel:focus {
-        --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
-    }
-
-    .projectPanel:active {
-        --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
-    }
-}

components/ProjectPanel.tsx

@@ -1,38 +0,0 @@
-import {default as Link} from "next/link"
-import React from "react"
-import {default as cn} from "classnames"
-import {default as Image, ImageProps} from "next/future/image"
-import {default as style} from "./ProjectPanel.module.css"
-
-
-export type ProjectPanelProps = Pick<ImageProps, "src"> & {
-    href?: string,
-    name: string
-    description: React.ReactNode,
-}
-
-
-export const ProjectPanel = ({src, href, name, description}: ProjectPanelProps) => {
-    const panel = (
-        <a className={cn({panel: true, [style.projectPanel]: true})}>
-            <Image alt={name} src={src} className={cn({[style.projectImage]: true})} width={228} height={114}/>
-            <div className={cn({[style.projectDescription]: true})}>
-                <h4>{name}</h4>
-                <p>
-                    {description}
-                </p>
-            </div>
-        </a>
-    )
-
-    if(href) {
-        return (
-            <Link href={href}>
-                {panel}
-            </Link>
-        )
-    }
-    else {
-        return panel
-    }
-}

pages/_app.css

@@ -10,6 +10,7 @@ footer {
 
 .panel {
   min-width: 288px;
+  max-width: 500px;
 }
 
 .panel .panel {
@@ -49,5 +50,5 @@ footer {
 #__next {
   margin: 0 auto;
   min-height: 100vh;
-  max-width: 1000px;
+  max-width: 1024px;
 }

pages/index.tsx

@@ -3,28 +3,14 @@ import React from 'react'
 import type {NextPage} from "next"
 import {default as Link} from "next/link"
 import {faRedditAlien, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
-import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic, faGlobe, faPlus} from "@fortawesome/free-solid-svg-icons"
+import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic, faGlobe, faPlus, faFileCode, faBagShopping, faBookBookmark} from "@fortawesome/free-solid-svg-icons"
 import {LinkPanel} from "../components/LinkPanel"
-import {ProjectPanel} from "../components/ProjectPanel"
-
-import {default as imgSteffoweb} from "../public/opengraph.png"
-import {default as imgBlank} from "../public/img/projects/blank.png"
-import {default as imgBluelib} from "../public/img/projects/bluelib.png"
-import {default as imgSophon} from "../public/img/projects/sophon.png"
-import {default as imgParticleClash} from "../public/img/projects/particle-clash.png"
-import {default as imgTheColdNight} from "../public/img/projects/the-cold-night.png"
-import {default as imgLoopingForLoops} from "../public/img/projects/looping-for-loops.png"
-import {default as imgKeepEverythingAlive} from "../public/img/projects/keep-everything-alive.png"
-import {default as imgGravityFusion} from "../public/img/projects/gravity-fusion.png"
-import {default as imgSlimeBloodAndPain} from "../public/img/projects/slime-blood-and-pain.png"
-import {default as imgBleachBeach} from "../public/img/projects/bleach-beach.png"
-import {default as imgBeatTD} from "../public/img/projects/beat-td.png"
 
 
 const Index: NextPage = () => {
     return <>
         <div className={"chapter-1"}>
-            <section className={"panel box"} style={{maxWidth: "488px"}}>
+            <section className={"panel box"}>
                 <h3>
                     About me
                 </h3>
@@ -39,132 +25,6 @@ const Index: NextPage = () => {
                 </p>
             </section>
         </div>
-        <div className={"chapter-1"}>
-            <section className={"panel box todo"}>
-                <h3>
-                    My projects
-                </h3>
-                <p>
-                    In my free time, I have developed many open source projects, some of which have gained popularity and are still in use today!
-                </p>
-                <details className={"details-no-indent details-header panel box"}>
-                    <summary>Software</summary>
-                    <div className={"chapter-4"}>
-                        <ProjectPanel
-                            src={imgSteffoweb}
-                            href={"https://github.com/Steffo99/steffoweb"}
-                            name={"Steffoweb"}
-                            description={<span>This very website!</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBluelib}
-                            href={"https://github.com/Steffo99/bluelib"}
-                            name={"Bluelib"}
-                            description={<span>Customizable, flexible and modular CSS library</span>}
-                        />
-                        <ProjectPanel
-                            src={imgSophon}
-                            href={"https://github.com/Steffo99/sophon"}
-                            name={"Sophon"}
-                            description={<span>Research hub for universities</span>}
-                        />
-                    </div>
-                </details>
-                <details className={"details-no-indent details-header panel box"}>
-                    <summary>Scientific papers</summary>
-                    <div className={"chapter-4"}>
-                        <ProjectPanel
-                            src={imgSophon}
-                            href={"https://dl.acm.org/doi/fullHtml/10.1145/3491418.3535163"}
-                            name={"Sophon: an Extensible Platform for Collaborative Research"}
-                            description={<span><cite>Stefano Pigozzi</cite>, <cite>Francesco Faenza</cite>, <cite>Claudia Canali</cite></span>}
-                        />
-                    </div>
-                </details>
-                <details className={"details-no-indent details-header panel box"}>
-                    <summary>Game jam entries</summary>
-                    <div className={"chapter-4"}>
-                        <ProjectPanel
-                            src={imgParticleClash}
-                            href={"https://steffo.itch.io/particle-clash"}
-                            name={"Particle Clash"}
-                            description={<span><abbr title={"Ludum Dare 51"}>LD51</abbr>: Match-4 particle collider</span>}
-                        />
-                        <ProjectPanel
-                            src={imgTheColdNight}
-                            href={"https://steffo.itch.io/the-cold-night"}
-                            name={"The Cold Night"}
-                            description={<span><abbr title={"Ludum Dare 50"}>LD50</abbr>: Top-down snowman melter</span>}
-                        />
-                        <ProjectPanel
-                            src={imgLoopingForLoops}
-                            href={"https://steffo.itch.io/the-cold-night"}
-                            name={"Looping for lööps"}
-                            description={<span><abbr title={"Ludum Dare 47"}>LD47</abbr>: Fruit-looping platformer</span>}
-                        />
-                        <ProjectPanel
-                            src={imgKeepEverythingAlive}
-                            href={"https://steffo.itch.io/keep-everything-alive"}
-                            name={"Keep Everything Alive"}
-                            description={<span><abbr title={"Ludum Dare 46"}>LD46</abbr>: Lively microgame collection</span>}
-                        />
-                        <ProjectPanel
-                            src={imgGravityFusion}
-                            href={"https://steffo.itch.io/gravity-fusion"}
-                            name={"Gravity Fusion"}
-                            description={<span><abbr title={"Ludum Dare 45"}>LD45</abbr>: Colorful incremental game</span>}
-                        />
-                        <ProjectPanel
-                            src={imgSlimeBloodAndPain}
-                            href={"https://steffo.itch.io/slime-blood-and-pain"}
-                            name={"Slime, Blood and Pain"}
-                            description={<span><abbr title={"Ludum Dare 44"}>LD44</abbr>: Infinite dungeon crawler</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBleachBeach}
-                            href={"https://steffo.itch.io/bleach-beach"}
-                            name={"Bleach Beach"}
-                            description={<span><abbr title={"Ludum Dare 42"}>LD42</abbr>: Wonky physics-based spear fishing simulator</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBeatTD}
-                            href={"https://steffo.itch.io/beat-td"}
-                            name={"Beat TD"}
-                            description={<span><abbr title={"Ludum Dare 41"}>LD41</abbr>: Rhythm-based tower-defense</span>}
-                        />
-                    </div>
-                </details>
-                <details className={"details-no-indent details-header panel box"}>
-                    <summary>Notes</summary>
-                    <div className={"chapter-4"}>
-                        <ProjectPanel
-                            src={imgBlank}
-                            href={"https://example.org"}
-                            name={"Placeholder"}
-                            description={<span>There's nothing here yet.</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBlank}
-                            href={"https://example.org"}
-                            name={"Placeholder"}
-                            description={<span>There's nothing here yet.</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBlank}
-                            href={"https://example.org"}
-                            name={"Placeholder"}
-                            description={<span>There's nothing here yet.</span>}
-                        />
-                        <ProjectPanel
-                            src={imgBlank}
-                            href={"https://example.org"}
-                            name={"Placeholder"}
-                            description={<span>There's nothing here yet.</span>}
-                        />
-                    </div>
-                </details>
-            </section>
-        </div>
         <div className={"chapter-2"}>
             <section className={"panel box"} id={"panel-internet"}>
                 <h3>
@@ -198,39 +58,38 @@ const Index: NextPage = () => {
             </section>
             <section className={"panel box"}>
                 <h3>
-                    My posts
+                    My projects
                 </h3>
                 <p>
-                    Very rarely, I may write something interesting and put it here.
+                    You might be interested in one of my released projects:
-                </p>
-                <div className={"chapter-1"}>
-                    <div className={"panel fade"}>
-                        <p>
-                            Nothing has been posted here yet.
-                        </p>
-                    </div>
-                </div>
-            </section>
-        </div>
-        <div className={"chapter-2"}>
-            <section className={"panel box todo"}>
-                <h3>
-                    My recommendations
-                </h3>
-                <p>
-                    I have fun rating and comparing things based on my personal tastes!
                 </p>
                 <div className={"chapter-3"}>
-                    <LinkPanel fade icon={faGamepad} text={"Videogames"}/>
+                    <LinkPanel href={"https://github.com/Steffo99/greed"} icon={faFileCode} text={"Greed"}/>
-                    <LinkPanel fade icon={faFilm} text={"Movies"}/>
+                    <LinkPanel href={"https://github.com/Steffo99/sophon"} icon={faFileCode} text={"Sophon"}/>
-                    <LinkPanel fade icon={faBox} text={"Anime"}/>
+                    <LinkPanel href={"https://gh.steffo.eu/bluelib/examples/index.html"} icon={faGlobe} text={"Bluelib"}/>
-                    <LinkPanel fade icon={faMusic} text={"Music"}/>
+                    <LinkPanel href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"} icon={faBagShopping} text={"Steffula Code"}/>
-                    <LinkPanel fade icon={faBook} text={"Books"}/>
+                    <LinkPanel href={"https://github.com/Steffo99/steffula-ultra"} icon={faFileCode} text={"Steffula Ultra"}/>
-                    <LinkPanel fade icon={faPizzaSlice} text={"Pizzerie"}/>
+                    <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>}/>
+                    <LinkPanel href={"https://github.com/Steffo99/estus"} icon={faFileCode} text={"Estus"}/>
                 </div>
-                <p style={{fontSize: "x-small"}} className={"float-bottom"}>
+                <small style={{fontSize: "x-small"}} className={"float-bottom"}>
-                    I am by no means a critic, so don't pay this too much attention unless you're interested in what I like...
+                    There are more on <Link href={"https://github.com/Steffo99?tab=repositories"}>my GitHub profile</Link>!
-                </p>
+                </small>
             </section>
             <section className={"panel box"}>
                 <h3>