Update "My projects" section

components/ProjectPanel.module.css

@@ -1,5 +1,5 @@
 .projectPanel {
-    flex-basis: 232px !important;
+    flex-basis: 228px !important;
     flex-grow: 0 !important;
     padding: 0 !important;
     overflow: hidden;
@@ -19,8 +19,8 @@
     visibility: hidden;
     position: absolute;
 
-    width: 232px;
+    width: 228px;
-    height: 116px;
+    height: 114px;
 
     display: flex;
     flex-direction: column;
@@ -38,6 +38,7 @@
 
 .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 {

components/ProjectPanel.tsx

@@ -15,7 +15,7 @@ export type ProjectPanelProps = Pick<ImageProps, "src"> & {
 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}/>
+            <Image alt={name} src={src} className={cn({[style.projectImage]: true})} width={228} height={114}/>
             <div className={cn({[style.projectDescription]: true})}>
                 <h4>{name}</h4>
                 <p>

pages/index.tsx

@@ -47,7 +47,7 @@ const Index: NextPage = () => {
                 <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"}>
+                <details className={"details-no-indent details-header panel box"}>
                     <summary>Software</summary>
                     <div className={"chapter-4"}>
                         <ProjectPanel
@@ -70,7 +70,18 @@ const Index: NextPage = () => {
                         />
                     </div>
                 </details>
-                <details className={"details-no-indent details-header"}>
+                <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
@@ -123,6 +134,35 @@ const Index: NextPage = () => {
                         />
                     </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"}>