Update with more things

components/ProjectPanel.module.css

@@ -3,6 +3,8 @@
     flex-grow: 0 !important;
     padding: 0 !important;
     overflow: hidden;
+
+    text-decoration: none;
 }
 
 .projectImage {
@@ -41,3 +43,46 @@
 .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%);
+    }
+}

pages/_app.css

@@ -16,6 +16,36 @@ footer {
   min-width: 0;
 }
 
+.chapter-no-header-margin h1,
+.chapter-no-header-margin h2,
+.chapter-no-header-margin h3,
+.chapter-no-header-margin h4,
+.chapter-no-header-margin h5,
+.chapter-no-header-margin h6 {
+  margin-top: 0 !important;
+}
+
+.details-no-indent {
+  margin-left: 0;
+}
+
+.details-no-indent summary {
+  margin-left: 0;
+}
+
+.details-header summary {
+  text-align: center;
+  --bhsl-current-hue: var(--bhsl-primary-hue);
+  --bhsl-current-saturation: var(--bhsl-primary-saturation);
+  --bhsl-current-lightness: var(--bhsl-primary-lightness);
+  font-style: var(--bfont-header-style);
+  font-variant: var(--bfont-header-variant);
+  font-weight: var(--bfont-header-weight);
+  font-stretch: var(--bfont-header-stretch);
+  line-height: var(--bfont-header-height);
+  font-family: var(--bfont-header-family);
+}
+
 #__next {
   margin: 0 auto;
   min-height: 100vh;

pages/index.tsx

@@ -1,8 +1,9 @@
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 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} from "@fortawesome/free-solid-svg-icons"
+import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic, faGlobe, faPlus} from "@fortawesome/free-solid-svg-icons"
 import {LinkPanel} from "../components/LinkPanel"
 import {ProjectPanel} from "../components/ProjectPanel"
 
@@ -11,6 +12,13 @@ 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 = () => {
@@ -37,34 +45,84 @@ const Index: NextPage = () => {
                     My projects
                 </h3>
                 <p>
-                    I should write an intro sentence here
+                    In my free time, I have developed many open source projects, some of which have gained popularity and are still in use today!
                 </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>
+                <details className={"details-no-indent details-header"}>
+                    <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"}>
+                    <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>
             </section>
         </div>
         <div className={"chapter-2"}>
@@ -134,17 +192,18 @@ 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>
-            <section className={"panel box"}>
+            <section className={"panel box todo"}>
                 <h3>
-                    Friends with a website
+                    Friends
                 </h3>
                 <p>
                     You can check out my friends' websites here:
                 </p>
-                <div className={"panel fade"}>
-                    <p>
-                        This section was just created: if you know me, please tell me your website so I can add it here! :D
-                    </p>
+                <div className={"chapter-3"}>
+                    <LinkPanel icon={faGlobe} text={"SnowyCoder"} href={"https://rossilorenzo.dev"}/>
+                    <div className={"panel fade"}>
+                        <span><FontAwesomeIcon icon={faPlus}/> And more yet to add!</span>
+                    </div>
                 </div>
             </section>
         </div>