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

Re-animate!

Browse source
This commit is contained in:
Steffo 2023-05-29 01:18:24 +02:00
parent 311b88c2b1
commit b310d37d17
Signed by: steffo
GPG key ID: 2A24051445686895
5 changed files with 392 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
components/FlipPanel.module.css Normal file
View file

@ -0,0 +1,53 @@
.flipPanelContainer {
max-width: 476px;
display: flex;
justify-content: stretch;
align-items: stretch;
position: relative;
}
.flipPanelContainer .flipPanelContainer {
max-width: unset;
}
.flipPanel {
height: 100%;
transition-property: transform, z-index, opacity;
transition-duration: 1s, 1s, 0.5s;
transition-delay: 0s, 0s, 0s;
}
.flipPanelFront {
transform: rotateY(180deg);
z-index: 0;
user-select: none;
opacity: 0.4;
transition-delay: 0s, 0s, 0.5s;
}
.flipPanelFrontVisible {
transform: rotateY(0);
z-index: 1;
user-select: auto;
opacity: 1;
transition-delay: 0s, 0s, 0s;
}
.flipPanelBack {
transform: rotateY(180deg);
margin-left: -100%;
z-index: 0;
user-select: none;
opacity: 0.4;
transition-delay: 0s, 0s, 0.5s;
}
.flipPanelBackVisible {
transform: rotateY(0);
z-index: 1;
user-select: auto;
opacity: 1;
transition-delay: 0s, 0s, 0s;
}

51
components/FlipPanel.tsx Normal file
View file

@ -0,0 +1,51 @@
import React, {useCallback} from "react"
import {default as cn} from "classnames";
import {default as style} from "./FlipPanel.module.css"
export type FlipPanelProps = {
front: (f: () => void) => React.ReactNode,
back: (f: () => void) => React.ReactNode,
containerClassName?: cn.Argument,
className?: cn.Argument,
frontClassName?: cn.Argument,
backClassName?: cn.Argument,
containerProps?: {[prop: string]: any},
props?: {[prop: string]: any},
frontProps?: {[prop: string]: any},
backProps?: {[prop: string]: any},
}
export const FlipPanel = ({front, back, containerClassName, className, frontClassName, backClassName, containerProps, props, frontProps, backProps}: FlipPanelProps) => {
const [isFront, setFront] = React.useState<boolean>(true)
const frontElement = React.useRef<HTMLElement>()
const backElement = React.useRef<HTMLElement>()
const flipToFront = React.useCallback(
() => {
setFront(true)
frontElement.current.inert = false
backElement.current.inert = true
},
[frontElement, backElement]
)
const flipToBack = React.useCallback(
() => {
setFront(false)
frontElement.current.inert = true
backElement.current.inert = false
},
[frontElement, backElement]
)
return <div className={cn(style.flipPanelContainer, containerClassName)} {...containerProps}>
<section ref={frontElement} className={cn("panel", style.flipPanel, style.flipPanelFront, {[style.flipPanelFrontVisible]: isFront}, className, frontClassName)} {...props} {...frontProps}>
{front(flipToBack)}
</section>
<section ref={backElement} className={cn("panel", style.flipPanel, style.flipPanelBack, {[style.flipPanelBackVisible]: !isFront}, className, backClassName)} {...props} {...backProps}>
{back(flipToFront)}
</section>
</div>
}

7
components/LinkPanel.tsx
View file

@ -13,10 +13,11 @@ export type LinkPanelProps = {
description?: React.ReactNode, description?: React.ReactNode,
me?: boolean, me?: boolean,
fade?: boolean, fade?: boolean,
onPress?: React.EventHandler<React.SyntheticEvent<HTMLElement>>
} }
export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelProps) => { export const LinkPanel = ({href, icon, text, description, me, fade, onPress}: LinkPanelProps) => {
const panel = ( const panel = (
<> <>
<FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/> <FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
@ -34,7 +35,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
if(href) { if(href) {
return ( return (
<Link href={href}> <Link href={href}>
<a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}> <a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""} onClick={onPress} onKeyPress={onPress}>
{panel} {panel}
</a> </a>
</Link> </Link>
@ -42,7 +43,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
} }
else { else {
return ( return (
<div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}> <div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} onClick={onPress} onKeyPress={onPress}>
{panel} {panel}
</div> </div>
) )

6
pages/_app.css
View file

@ -7,15 +7,15 @@
@import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css'; @import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
@import 'node_modules/@fortawesome/fontawesome-svg-core/styles.css'; @import 'node_modules/@fortawesome/fontawesome-svg-core/styles.css';
body .panel { .panel {
max-width: 476px; max-width: 476px;
} }
body .panel .panel { .panel .panel {
max-width: unset; max-width: unset;
} }
body .group-lp { .group-lp {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;

477
pages/index.tsx
View file

@ -1,10 +1,10 @@
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {useRouter} from "next/router" import {useRouter} from "next/router"
import React from 'react' import React from 'react'
import type {NextPage} from "next" import type {NextPage} from "next"
import {default as Link} from "next/link" import {default as Link} from "next/link"
import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons" import {faMastodon, faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
import {faBorderAll, faEnvelope, faGlobe, faUser, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faCog, faFloppyDisk, faScissors} from "@fortawesome/free-solid-svg-icons" import {faBorderAll, faEnvelope, faGlobe, faUser, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faArrowLeft, faCog, faFloppyDisk, faScissors, faShield} from "@fortawesome/free-solid-svg-icons"
import {FlipPanel} from "../components/FlipPanel"
import {LinkPanel} from "../components/LinkPanel" import {LinkPanel} from "../components/LinkPanel"
import {useKonamiCode} from "../hooks/useKonamiCode" import {useKonamiCode} from "../hooks/useKonamiCode"
@ -23,6 +23,7 @@ const Index: NextPage = () => {
<p> <p>
I'm <dfn>Stefano Pigozzi</dfn>, an Italian Computer Science graduate and <b>Master's student</b> at <Link href={"https://www.unimore.it/"}>Unimore</Link>! I'm <dfn>Stefano Pigozzi</dfn>, an Italian Computer Science graduate and <b>Master's student</b> at <Link href={"https://www.unimore.it/"}>Unimore</Link>!
</p> </p>
<hr/>
<p> <p>
I'm interested in improving the interactions between people via technology. I'm interested in improving the interactions between people via technology.
</p> </p>
@ -30,13 +31,10 @@ const Index: NextPage = () => {
For that reason, I enjoy using, exploring, studying and developing: For that reason, I enjoy using, exploring, studying and developing:
</p> </p>
<ul> <ul>
<li>social applications;</li> <li>social applications and their communities;</li>
<li>chat applications and automations;</li> <li>videogames and their competitions;</li>
<li>multiplayer videogames;</li> <li>websites and Internet protocols in general;</li>
<li>game tournaments;</li> <li>chat bots and integrations.</li>
<li>websites;</li>
<li>online communities;</li>
<li>and Internet protocols in general!</li>
</ul> </ul>
<p> <p>
I'm also an advocate of the <a href={"https://fsfe.org/freesoftware/freesoftware.en.html"}>free software movement</a>, and try to release everything I make under a free software license. I'm also an advocate of the <a href={"https://fsfe.org/freesoftware/freesoftware.en.html"}>free software movement</a>, and try to release everything I make under a free software license.
@ -44,172 +42,210 @@ const Index: NextPage = () => {
</section> </section>
</div> </div>
<div className={"chapter-2"}> <div className={"chapter-2"}>
<section className={"panel box"} id={"panel-projects"}> <FlipPanel
<h3> className={"box"}
My projects front={(flip) => <>
</h3> <h3>
<p> My projects
Often, while experimenting with a new technology, I notice something that can be improved, and I try to come up with a solution to it. </h3>
</p> <p>
<p> Often, while experimenting with a new technology, I notice something that can be improved, and I try to come up with a solution to it.
Over time, I've created lots of small projects, some which have succeeded, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>. </p>
</p> <p>
<hr className={"float-bottom"}/> Over time, I've created lots of small projects, some which have succeeded, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
<p> </p>
Here's a small sample of what I've worked on: <hr className={"float-bottom"}/>
</p> <p>
<div className={"group-lp"}> Here's a small sample of what I've worked on:
</p>
<div className={"group-lp"}>
<LinkPanel
href={"https://bluelib.steffo.eu/examples/index.html"}
icon={faPaintRoller}
text={"Bluelib"}
description={"Customizable web stylesheet"}
/>
<LinkPanel
href={"https://github.com/Steffo99/greed"}
icon={faCashRegister}
text={"Greed"}
description={"Telegram store bot"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://github.com/Steffo99/greed"}
icon={faBookAtlas}
text={"Sophon"}
description={"Research hub for universities"}
/>
<LinkPanel
href={"https://steffo.itch.io/pineapple-surf"}
icon={faGamepad}
text={"Pineapple Surf"}
description={"Game jam prototype"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"}
icon={faPaintbrush}
text={"Steffula Code"}
description={"Color theme for the VSCode editor"}
/>
<LinkPanel
href={"https://steffo.itch.io/pineapple-surf"}
icon={faCog}
text={"Micronfig"}
description={"12-factor app config for Rust"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://github.com/Steffo99/backup-duplicity"}
icon={faFloppyDisk}
text={"docker-backup-duplicity"}
description={"Pluggable Docker-based backups"}
/>
<LinkPanel
href={"https://steffo.itch.io/pineapple-surf"}
icon={faScissors}
text={"actions-semver"}
description={"GH Action for semver parsing"}
/>
</div>
<hr/>
<p>
If you're interested in seeing more, you can:
</p>
<div className={"group-lp"}>
<LinkPanel
href={"javascript:void(0)"}
icon={faDiagramProject}
text={"View all my projects"}
description={"There are many more projects there!"}
onPress={flip}
/>
</div>
</>}
back={(flip) => <>
<h3>
My projects
</h3>
<hr className={"float-bottom"}/>
<div className={"group-lp"}>
<LinkPanel
href={"javascript:void(0)"}
icon={faArrowLeft}
text={"Go back"}
description={"I have seen enough"}
onPress={flip}
/>
</div>
</>}
/>
<FlipPanel
className={"box"}
front={(flip) => <>
<h3>
Me on the Internet
</h3>
<p>
I sign up to basically any website I stumble upon to explore and study its functions, mechanisms, culture and community, so don't be surprised if you see me somewhere!
</p>
<hr/>
<p>
Apart from experimentation, I'm currently the most active on the Fediverse, in particular on:
</p>
<LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
<hr className={"float-bottom"}/>
<p>
Other services I often use are:
</p>
<div className={"group-lp"}>
<LinkPanel
href={"https://github.com/Steffo99"}
icon={faGithub}
text={"GitHub"}
description={"Steffo99"}
/>
<LinkPanel
href={"https://stackoverflow.com/users/4334568/steffo"}
icon={faStackOverflow}
text={"Stack Overflow"}
description={"Steffo"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://www.linkedin.com/in/steffo45/"}
icon={faBorderAll}
text={"Matrix"}
description={"@steffo:ryg.one"}
/>
<LinkPanel
href={"https://discord.com/users/77703771181817856"}
icon={faDiscord}
text={"Discord"}
description={"Steffo#4036"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://www.linkedin.com/in/steffo45/"}
icon={faLinkedin}
text={"Linkedin"}
description={"Stefano Pigozzi"}
/>
<LinkPanel
href={"mailto:me@steffo.eu"}
icon={faEnvelope}
text={"Email"}
description={"me@steffo.eu"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://steamcommunity.com/profiles/76561198034314260/"}
icon={faSteam}
text={"Steam"}
description={"[U:1:74048532]"}
/>
<LinkPanel
href={"https://steffo.itch.io/"}
icon={faItchIo}
text={"Itch.io"}
description={"Steffo"}
/>
</div>
<hr/>
<p>
If you want to find me on some other service, please:
</p>
<LinkPanel <LinkPanel
href={"https://bluelib.steffo.eu/examples/index.html"} href={"javascript:void(0)"}
icon={faPaintRoller} icon={faUser}
text={"Bluelib"} text={"View all my accounts"}
description={"Customizable web stylesheet"} description={"I've started keeping track only recently..."}
onPress={flip}
/> />
<LinkPanel </>}
href={"https://github.com/Steffo99/greed"} back={(flip) => <>
icon={faCashRegister} <h3>
text={"Greed"} My accounts
description={"Telegram store bot"} </h3>
/> <hr className={"float-bottom"}/>
</div> <div className={"group-lp"}>
<div className={"group-lp"}> <LinkPanel
<LinkPanel href={"javascript:void(0)"}
href={"https://github.com/Steffo99/greed"} icon={faArrowLeft}
icon={faBookAtlas} text={"Go back"}
text={"Sophon"} description={"I have seen enough"}
description={"Research hub for universities"} onPress={flip}
/> />
<LinkPanel </div>
href={"https://steffo.itch.io/pineapple-surf"} </>}
icon={faGamepad} />
text={"Pineapple Surf"}
description={"Game jam prototype"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"}
icon={faPaintbrush}
text={"Steffula Code"}
description={"Color theme for the VSCode editor"}
/>
<LinkPanel
href={"https://steffo.itch.io/pineapple-surf"}
icon={faCog}
text={"Micronfig"}
description={"12-factor app config for Rust"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://github.com/Steffo99/backup-duplicity"}
icon={faFloppyDisk}
text={"docker-backup-duplicity"}
description={"Pluggable Docker-based backups"}
/>
<LinkPanel
href={"https://steffo.itch.io/pineapple-surf"}
icon={faScissors}
text={"actions-semver"}
description={"GH Action for semver parsing"}
/>
</div>
<hr/>
<p>
If you're interested in seeing more, you can:
</p>
<div className={"group-lp"}>
<LinkPanel
fade
icon={faDiagramProject}
text={"Visit my Projects page"}
description={"There are many more projects there!"}
/>
</div>
</section>
<section className={"panel box"} id={"panel-internet"}>
<h3>
Me on the Internet
</h3>
<p>
I sign up to basically any website I stumble upon to explore and study its functions, mechanisms, culture and community, so don't be surprised if you see me somewhere!
</p>
<hr/>
<p>
Apart from experimentation, I'm currently the most active on the Fediverse, in particular on:
</p>
<LinkPanel href={"/projects"} icon={faMastodon} text={"Mastodon"} description={"@steffo@fosstodon.org"}/>
<hr/>
<p>
Other services I often use are:
</p>
<div className={"group-lp"}>
<LinkPanel
href={"https://github.com/Steffo99"}
icon={faGithub}
text={"GitHub"}
description={"Steffo99"}
/>
<LinkPanel
href={"https://stackoverflow.com/users/4334568/steffo"}
icon={faStackOverflow}
text={"Stack Overflow"}
description={"Steffo"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://www.linkedin.com/in/steffo45/"}
icon={faBorderAll}
text={"Matrix"}
description={"@steffo:ryg.one"}
/>
<LinkPanel
href={"https://discord.com/users/77703771181817856"}
icon={faDiscord}
text={"Discord"}
description={"Steffo#4036"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://www.linkedin.com/in/steffo45/"}
icon={faLinkedin}
text={"Linkedin"}
description={"Stefano Pigozzi"}
/>
<LinkPanel
href={"mailto:me@steffo.eu"}
icon={faEnvelope}
text={"Email"}
description={"me@steffo.eu"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
href={"https://steamcommunity.com/profiles/76561198034314260/"}
icon={faSteam}
text={"Steam"}
description={"[U:1:74048532]"}
/>
<LinkPanel
href={"https://steffo.itch.io/"}
icon={faItchIo}
text={"Itch.io"}
description={"Steffo"}
/>
</div>
<hr/>
<p>
If you want to find me on some other service, please:
</p>
<LinkPanel
fade
icon={faUser}
text={"Visit my Accounts page"}
description={"I've started keeping track only recently..."}
/>
</section>
</div> </div>
<div className={"chapter-2"}> <div className={"chapter-2"}>
<section className={"panel box"} id={"panel-friends"}> <section className={"panel box"} id={"panel-friends"}>
@ -217,26 +253,72 @@ const Index: NextPage = () => {
My friends My friends
</h3> </h3>
<p> <p>
I think that everyone should have their tiny, personal website! I think that everyone should have their personal website, and to encourage that, I list the website of all my friends here, so that other people may see them!
</p> </p>
<hr className={"float-bottom"}/>
<p> <p>
You can check out my friends' websites here: You can check them out here:
</p> </p>
<div className={"chapter-3"}> <div className={"group-lp"}>
<LinkPanel icon={faGlobe} text={"Gimbaro"} href={"https://gimbaro.dev/"}/> <LinkPanel
<LinkPanel icon={faGlobe} text={"Ichicoro"} href={"https://marte.dev/"}/> icon={faGlobe}
<LinkPanel icon={faGlobe} text={"Malbyx"} href={"https://about.malbyx.tk/"}/> text={"Gimbaro"}
<LinkPanel icon={faGlobe} text={"Nemesis"} href={"https://www.fermitech.info/"}/> href={"https://gimbaro.dev/"}
<LinkPanel icon={faGlobe} text={"SnowyCoder"} href={"https://rossilorenzo.dev/"}/> description={"gimbaro.dev"}
<LinkPanel icon={faGlobe} text={"Proto"} href={"https://fabiodesim.one/"}/> />
<LinkPanel icon={faGlobe} text={"Viktya"} href={"https://viktya.github.io/"}/> <LinkPanel
<div className={"panel fade"}> icon={faGlobe}
<span><FontAwesomeIcon icon={faPlus}/> And more!</span> text={"Ichicoro"}
</div> href={"https://marte.dev/"}
description={"marte.dev"}
/>
</div> </div>
<small style={{fontSize: "x-small"}} className={"float-bottom"}> <div className={"group-lp"}>
Hey friends, please make a small personal website, so I can add you here! <span aria-hidden>:D</span> <LinkPanel
</small> icon={faGlobe}
text={"Malbyx"}
href={"https://about.malbyx.tk/"}
description={"malbyx.tk"}
/>
<LinkPanel
icon={faGlobe}
text={"Nemesis"}
href={"https://www.fermitech.info/"}
description={"fermitech.info"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
icon={faGlobe}
text={"Proto"}
href={"https://fabiodesim.one/"}
description={"fabiodesim.one"}
/>
<LinkPanel
icon={faGlobe}
text={"SnowyCoder"}
href={"https://rossilorenzo.dev/"}
description={"rossilorenzo.dev"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
icon={faGlobe}
text={"Viktya"}
href={"https://viktya.github.io/"}
description={"viktya.github.io"}
/>
</div>
<hr/>
<p>
Hey friends! If you make a website, please let me know:
</p>
<LinkPanel
icon={faPlus}
text={"Made a website?"}
fade
description={"Tell me about it!"}
/>
</section> </section>
<section className={"panel box home-ad"} id={"panel-adblocker"}> <section className={"panel box home-ad"} id={"panel-adblocker"}>
<h3> <h3>
@ -245,21 +327,24 @@ const Index: NextPage = () => {
<p> <p>
Hey! You're browsing the Internet without an ad-blocker! Hey! You're browsing the Internet without an ad-blocker!
</p> </p>
<hr/>
<p> <p>
For your safety and better browser performance, you should install: For your safety and better browser performance, you should install:
</p> </p>
<div className={"chapter-1"}> <div className={"group-lp"}>
<LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"}/> <LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"} description={"Free, open-source ad content blocker"}/>
</div> </div>
<hr/>
<p> <p>
Additionally, if you are technically inclined, consider setting up this on your network: Additionally, if you are technically inclined, consider setting up this on your network:
</p> </p>
<div className={"chapter-1"}> <div className={"group-lp"}>
<LinkPanel icon={faShieldAlt} text={"Pi-Hole"} href={"https://pi-hole.net"}/> <LinkPanel icon={faShield} text={"Pi-Hole"} href={"https://pi-hole.net"} description={"Network-wide ad blocking"}/>
</div> </div>
<small style={{fontSize: "x-small"}} className={"float-bottom"}> <hr/>
I am not affiliated with the developers of this software, but I heavily recommend them to everyone! <p>
</small> Enjoy a better Internet, and remember to pay for the services you find useful so that they don't need ads to keep existing!
</p>
</section> </section>
</div> </div>
</> </>