steffo/steffoweb
steffo/steffoweb
1
Fork 0
mirror of https://github.com/Steffo99/steffoweb.git synced 2024-11-21 23:54:30 +00:00
Code Activity

Update "My projects" section

Browse source
This commit is contained in:
Steffo 2022-10-20 15:44:10 +00:00 committed by GitHub
parent ebd12c0c06
commit 4d9d59063f
Signed by: github
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/ProjectPanel.module.css
View file

@ -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;
height: 116px;
width: 228px;
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 {

2
components/ProjectPanel.tsx
View file

@ -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>

44
pages/index.tsx
View file

@ -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"}>