Continue the rebuild with new things

.idea/steffoweb.iml

@@ -2,7 +2,11 @@
 <module type="JAVA_MODULE" version="4">
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <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" />
+    </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>

components/LinkPanel.module.css

@@ -0,0 +1,11 @@
+.linkPanel {
+    text-decoration: none;
+}
+
+.linkPanel:hover, .linkPanel:focus {
+    --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
+}
+
+.linkPanel:active {
+    --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
+}

components/LinkPanel.tsx

@@ -2,13 +2,14 @@ import {IconProp} from "@fortawesome/fontawesome-svg-core"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import {default as Link} from "next/link"
 import {default as cn} from "classnames"
+import {default as style} from "./LinkPanel.module.css"
 import React from "react"
 
 
 export type LinkPanelProps = {
     href?: string,
     icon: IconProp,
-    text: string,
+    text: React.ReactNode,
     me?: boolean,
     fade?: boolean,
 }
@@ -16,19 +17,17 @@ export type LinkPanelProps = {
 
 export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
     const panel = (
-        <div className={cn({panel: true, fade: fade})}>
+        <a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
             <span>
                 <FontAwesomeIcon icon={icon}/>&nbsp;{text}
             </span>
-        </div>
+        </a>
     )
 
     if(href) {
         return (
             <Link href={href}>
-                <a rel={me ? "me" : ""}>
                 {panel}
-                </a>
             </Link>
         )
     }

components/ProjectPanel.module.css

@@ -0,0 +1,43 @@
+.projectPanel {
+    flex-basis: 232px !important;
+    flex-grow: 0 !important;
+    padding: 0 !important;
+    overflow: hidden;
+}
+
+.projectImage {
+    border-radius: var(--b-border-radius);
+}
+
+.projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
+    filter: brightness(80%) blur(16px);
+}
+
+.projectDescription {
+    visibility: hidden;
+    position: absolute;
+
+    width: 232px;
+    height: 116px;
+
+    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;
+}
+
+.projectPanel:hover .projectDescription, .projectPanel:focus .projectDescription {
+    visibility: visible;
+}

components/ProjectPanel.tsx

@@ -0,0 +1,38 @@
+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={232} height={116}/>
+            <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
+    }
+}

next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    images: {
+        domains: [],
+    },
+}

pages/_app.css

@@ -4,20 +4,20 @@ body {
   background-size: cover;
 }
 
+footer {
+  text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
+}
+
+.panel {
+  min-width: 288px;
+}
+
+.panel .panel {
+  min-width: 0;
+}
+
 #__next {
   margin: 0 auto;
   min-height: 100vh;
   max-width: 1000px;
 }
-
-#panel-internet a {
-  text-decoration: none;
-}
-
-#panel-internet a:hover, #panel-internet a:focus {
-  --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
-}
-
-#panel-internet a:active {
-  --bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
-}

pages/_app.tsx

@@ -1,4 +1,5 @@
-import Link from "next/link"
+import {default as Link} from "next/link"
+import {default as Image} from "next/future/image"
 import React from 'react'
 
 import "@steffo/bluelib/dist/base.root.css"
@@ -9,13 +10,15 @@ import "@steffo/bluelib/dist/glass.root.css"
 import "@steffo/bluelib/dist/fun.root.css"
 import "./_app.css"
 
+import {default as imgSRound} from "../public/s-round.png"
+
 import type {AppProps} from "next/app"
 
 
 const App = ({Component, pageProps}: AppProps) => {
     return <>
         <h1>
-            Steffo's website
+            <Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo's website
         </h1>
         <Component {...pageProps}/>
         <footer>

pages/index.tsx

@@ -1,61 +1,123 @@
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import React from 'react'
 import type {NextPage} from "next"
 import {default as Link} from "next/link"
-import {faReddit, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter} from "@fortawesome/free-brands-svg-icons"
+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} 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"
 
 
 const Index: NextPage = () => {
     return <>
-        <div className={"chapter-0"}>
+        <div className={"chapter-1"}>
-            <section className={"panel box todo"} style={{maxWidth: "488px"}}>
+            <section className={"panel box"} style={{maxWidth: "488px"}}>
-                <h3>
-                    Under construction
-                </h3>
-                <p>
-                    This website is currently being recreated from scratch, therefore much of its content is missing!
-                </p>
-            </section>
-        </div>
-        <div className={"chapter-0"}>
-            <section className={"panel box todo"} style={{maxWidth: "488px"}}>
                 <h3>
                     About me
                 </h3>
                 <p>
                     I'm <dfn>Stefano Pigozzi</dfn>, a Computer Science graduate and Master's student at <Link href={"https://www.unimore.it/"}>Unimore</Link>!
                 </p>
+                <p>
+                    When I'm not studying, I <b>contribute to open source</b>, <b>play video games</b>, and <b>eat tons of gelato</b>!
+                </p>
+                <p>
+                    I'm also somewhat interested in the <b>social mechanisms of the Internet</b>, specifically in how platforms influence how people interact with each other online.
+                </p>
             </section>
         </div>
-        <div className={"chapter-0"}>
+        <div className={"chapter-1"}>
             <section className={"panel box todo"}>
                 <h3>
                     My projects
                 </h3>
                 <p>
-                    One of the things I enjoy doing in my free time is developing software to solve problems I encounter in my life, and then publishing the result on the Internet, allowing others to benefit from my solutions and contributing to the open source community.
+                    I should write an intro sentence here
                 </p>
+                <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>}
+                    />
+                    <ProjectPanel
+                        src={imgParticleClash}
+                        href={"https://github.com/Steffo99/particle-clash"}
+                        name={"Particle Clash"}
+                        description={<span>Match-4 game for two players about particles about to collide</span>}
+                    />
+                </div>
             </section>
         </div>
-        <div className={"chapter-0"}>
+        <div className={"chapter-2"}>
-            <section className={"panel box todo"}>
+            <section className={"panel box"} id={"panel-internet"}>
+                <h3>
+                    Me on the Internet
+                </h3>
+                <p>
+                    You can find me in many places around the Internet:
+                </p>
+                <div className={"chapter-2"}>
+                    <LinkPanel me href={"https://github.com/Steffo99"} icon={faGithub} text={"Steffo99"}/>
+                    <LinkPanel me href={"https://old.reddit.com/user/steffo99"} icon={faRedditAlien} text={<span><small>/u/</small>Steffo99</span>}/>
+                    <LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={<span>@steffo<small>@fosstodon.org</small></span>}/>
+                    <LinkPanel me href={"https://twitter.com/CaptSteffo/"} icon={faTwitter} text={"@CaptSteffo"}/>
+                    <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://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:
+                </p>
+                <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"}>
                 <h3>
                     My posts
                 </h3>
                 <p>
-                    Very rarely, I write something interesting and put it here.
+                    Very rarely, I may write something interesting and put it here.
                 </p>
+                <div className={"chapter-1"}>
                     <div className={"panel fade"}>
                         <p>
-                        Guess what? Nothing has been posted here yet.
+                            Nothing has been posted here yet.
                         </p>
                     </div>
+                </div>
             </section>
+        </div>
+        <div className={"chapter-2"}>
             <section className={"panel box todo"}>
                 <h3>
-                    My ratings
+                    My recommendations
                 </h3>
                 <p>
                     I have fun rating and comparing things based on my personal tastes!
@@ -72,37 +134,7 @@ const Index: NextPage = () => {
                     I am by no means a critic, so don't pay this too much attention unless you're interested in what I like...
                 </p>
             </section>
-        </div>
+            <section className={"panel box"}>
-        <div className={"chapter-0"}>
-            <section className={"panel box"} id={"panel-internet"}>
-                <h3>
-                    Me on the Internet
-                </h3>
-                <p>
-                    You can find me in many places on the web, but these are the ones I'm most active on:
-                </p>
-                <div className={"chapter-2"}>
-                    <LinkPanel me href={"https://github.com/Steffo99"} icon={faGithub} text={"Steffo99"}/>
-                    <LinkPanel me href={"https://old.reddit.com/user/steffo99"} icon={faReddit} text={"/u/Steffo99"}/>
-                    <LinkPanel me href={"https://steamcommunity.com/profiles/76561198034314260/"} icon={faSteam} text={"Steffo"}/>
-                    <LinkPanel me href={"https://steffo.itch.io/"} icon={faItchIo} text={"Steffo"}/>
-                    <LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={"@steffo@fosstodon.org"}/>
-                    <LinkPanel me href={"https://twitter.com/CaptSteffo/"} icon={faTwitter} text={"@CaptSteffo"}/>
-                </div>
-                <p>
-                    You can send me messages on the following ways:
-                </p>
-                <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={"Steffo#4036"}/>
-                    <LinkPanel me href={"https://matrix.to/@steffo:ryg.one"} icon={faBorderAll} text={"@steffo:ryg.one"}/>
-                </div>
-                <p style={{fontSize: "x-small"}} className={"float-bottom"}>
-                    Please <em>do not</em> send me chat messages about <i>Greed</i>, open an issue or you'll end up in my Hall of Shame!
-                </p>
-            </section>
-            <section className={"panel box todo"}>
                 <h3>
                     Friends with a website
                 </h3>

public/manifest.json

@@ -4,18 +4,8 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+      "sizes": "2048x2048",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",