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,
me?: 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 = (
<>
<FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
@ -34,7 +35,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
if(href) {
return (
<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}
</a>
</Link>
@ -42,7 +43,7 @@ export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelPr
}
else {
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}
</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/@fortawesome/fontawesome-svg-core/styles.css';
body .panel {
.panel {
max-width: 476px;
}
body .panel .panel {
.panel .panel {
max-width: unset;
}
body .group-lp {
.group-lp {
display: flex;
flex-wrap: wrap;
gap: 8px;

165
pages/index.tsx
View file

@ -1,10 +1,10 @@
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {useRouter} from "next/router"
import React from 'react'
import type {NextPage} from "next"
import {default as Link} from "next/link"
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 {useKonamiCode} from "../hooks/useKonamiCode"
@ -23,6 +23,7 @@ const Index: NextPage = () => {
<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>!
</p>
<hr/>
<p>
I'm interested in improving the interactions between people via technology.
</p>
@ -30,13 +31,10 @@ const Index: NextPage = () => {
For that reason, I enjoy using, exploring, studying and developing:
</p>
<ul>
<li>social applications;</li>
<li>chat applications and automations;</li>
<li>multiplayer videogames;</li>
<li>game tournaments;</li>
<li>websites;</li>
<li>online communities;</li>
<li>and Internet protocols in general!</li>
<li>social applications and their communities;</li>
<li>videogames and their competitions;</li>
<li>websites and Internet protocols in general;</li>
<li>chat bots and integrations.</li>
</ul>
<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.
@ -44,7 +42,9 @@ const Index: NextPage = () => {
</section>
</div>
<div className={"chapter-2"}>
<section className={"panel box"} id={"panel-projects"}>
<FlipPanel
className={"box"}
front={(flip) => <>
<h3>
My projects
</h3>
@ -120,14 +120,33 @@ const Index: NextPage = () => {
</p>
<div className={"group-lp"}>
<LinkPanel
fade
href={"javascript:void(0)"}
icon={faDiagramProject}
text={"Visit my Projects page"}
text={"View all my projects"}
description={"There are many more projects there!"}
onPress={flip}
/>
</div>
</section>
<section className={"panel box"} id={"panel-internet"}>
</>}
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>
@ -139,7 +158,7 @@ const Index: NextPage = () => {
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/>
<hr className={"float-bottom"}/>
<p>
Other services I often use are:
</p>
@ -204,12 +223,29 @@ const Index: NextPage = () => {
If you want to find me on some other service, please:
</p>
<LinkPanel
fade
href={"javascript:void(0)"}
icon={faUser}
text={"Visit my Accounts page"}
text={"View all my accounts"}
description={"I've started keeping track only recently..."}
onPress={flip}
/>
</>}
back={(flip) => <>
<h3>
My accounts
</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>
</>}
/>
</section>
</div>
<div className={"chapter-2"}>
<section className={"panel box"} id={"panel-friends"}>
@ -217,26 +253,72 @@ const Index: NextPage = () => {
My friends
</h3>
<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>
<hr className={"float-bottom"}/>
<p>
You can check out my friends' websites here:
You can check them out here:
</p>
<div className={"chapter-3"}>
<LinkPanel icon={faGlobe} text={"Gimbaro"} href={"https://gimbaro.dev/"}/>
<LinkPanel icon={faGlobe} text={"Ichicoro"} href={"https://marte.dev/"}/>
<LinkPanel icon={faGlobe} text={"Malbyx"} href={"https://about.malbyx.tk/"}/>
<LinkPanel icon={faGlobe} text={"Nemesis"} href={"https://www.fermitech.info/"}/>
<LinkPanel icon={faGlobe} text={"SnowyCoder"} href={"https://rossilorenzo.dev/"}/>
<LinkPanel icon={faGlobe} text={"Proto"} href={"https://fabiodesim.one/"}/>
<LinkPanel icon={faGlobe} text={"Viktya"} href={"https://viktya.github.io/"}/>
<div className={"panel fade"}>
<span><FontAwesomeIcon icon={faPlus}/> And more!</span>
<div className={"group-lp"}>
<LinkPanel
icon={faGlobe}
text={"Gimbaro"}
href={"https://gimbaro.dev/"}
description={"gimbaro.dev"}
/>
<LinkPanel
icon={faGlobe}
text={"Ichicoro"}
href={"https://marte.dev/"}
description={"marte.dev"}
/>
</div>
<div className={"group-lp"}>
<LinkPanel
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>
<small style={{fontSize: "x-small"}} className={"float-bottom"}>
Hey friends, please make a small personal website, so I can add you here! <span aria-hidden>:D</span>
</small>
<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 className={"panel box home-ad"} id={"panel-adblocker"}>
<h3>
@ -245,21 +327,24 @@ const Index: NextPage = () => {
<p>
Hey! You're browsing the Internet without an ad-blocker!
</p>
<hr/>
<p>
For your safety and better browser performance, you should install:
</p>
<div className={"chapter-1"}>
<LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"}/>
<div className={"group-lp"}>
<LinkPanel icon={faShieldAlt} text={"uBlock Origin"} href={"https://ublockorigin.com"} description={"Free, open-source ad content blocker"}/>
</div>
<hr/>
<p>
Additionally, if you are technically inclined, consider setting up this on your network:
</p>
<div className={"chapter-1"}>
<LinkPanel icon={faShieldAlt} text={"Pi-Hole"} href={"https://pi-hole.net"}/>
<div className={"group-lp"}>
<LinkPanel icon={faShield} text={"Pi-Hole"} href={"https://pi-hole.net"} description={"Network-wide ad blocking"}/>
</div>
<small style={{fontSize: "x-small"}} className={"float-bottom"}>
I am not affiliated with the developers of this software, but I heavily recommend them to everyone!
</small>
<hr/>
<p>
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>
</div>
</>