mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-21 23:54:30 +00:00
358 lines
16 KiB
TypeScript
358 lines
16 KiB
TypeScript
import {useRouter} from "next/router"
|
|
import React from 'react'
|
|
import type {NextPage} from "next"
|
|
import {default as Link} from "next/link"
|
|
import {faGithub, faDiscord, faSteam, faItchIo, faLinkedin, faStackOverflow} from "@fortawesome/free-brands-svg-icons"
|
|
import {faBorderAll, faEnvelope, faGlobe, faComment, faPlus, faCashRegister, faShieldAlt, faDiagramProject, faPaintRoller, faBookAtlas, faGamepad, faPaintbrush, faArrowLeft, faCog, faFloppyDisk, faScissors, faShield, faCircleNodes} from "@fortawesome/free-solid-svg-icons"
|
|
import {FlipPanel} from "../components/FlipPanel"
|
|
import {LinkPanel} from "../components/LinkPanel"
|
|
import {ProjectsList} from "../components/ProjectsList"
|
|
import {useKonamiCode} from "../hooks/useKonamiCode"
|
|
|
|
|
|
const Index: NextPage = () => {
|
|
const router = useRouter()
|
|
|
|
useKonamiCode(() => router.push("/garasauto"))
|
|
|
|
return <>
|
|
<div className={"chapter-1"}>
|
|
<section className={"panel box"} id={"panel-about"}>
|
|
<h3>
|
|
About me
|
|
</h3>
|
|
<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>
|
|
<p>
|
|
For that reason, I enjoy using, exploring, studying and developing:
|
|
</p>
|
|
<ul>
|
|
<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.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<div className={"chapter-3"}>
|
|
<FlipPanel
|
|
className={"box"}
|
|
front={(flip) => <>
|
|
<h3>
|
|
My projects
|
|
</h3>
|
|
<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.
|
|
</p>
|
|
<p>
|
|
Over time, I've created lots of small projects, some which have succeeded in their goal, and some which have unfortunately failed <small>(or have been abandoned due to a lack of time)</small>.
|
|
</p>
|
|
<hr className={"float-bottom"}/>
|
|
<p>
|
|
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={"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's a lot of stuff there!"}
|
|
onPress={flip}
|
|
/>
|
|
</div>
|
|
</>}
|
|
back={(flip) => <>
|
|
<h3>
|
|
All my projects
|
|
</h3>
|
|
<ProjectsList/>
|
|
<hr className={"float-bottom"}/>
|
|
<div className={"group-lp"}>
|
|
<LinkPanel
|
|
href={"javascript:void(0)"}
|
|
icon={faArrowLeft}
|
|
text={"Go back"}
|
|
description={"That's too much for me..."}
|
|
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>
|
|
<div className={"group-lp"}>
|
|
<LinkPanel href={"https://uno.starshard.studio/@steffo"} icon={faCircleNodes} text={"Star Shard Social"} description={"@steffo@uno.starshard.studio"}/>
|
|
</div>
|
|
<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>
|
|
Want to see what I've been thinking about lately?
|
|
</p>
|
|
<div className={"group-lp"}>
|
|
<LinkPanel
|
|
fade
|
|
icon={faComment}
|
|
text={"View my latest posts"}
|
|
description={"Coming soon..."}
|
|
/>
|
|
</div>
|
|
</>}
|
|
back={(flip) => <>
|
|
<h3>
|
|
All 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 className={"panel box"} id={"panel-friends"}>
|
|
<h3>
|
|
My friends
|
|
</h3>
|
|
<p>
|
|
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 them out here:
|
|
</p>
|
|
<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>
|
|
<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>
|
|
<div className={"group-lp"}>
|
|
<LinkPanel
|
|
icon={faPlus}
|
|
text={"Made something?"}
|
|
href={"mailto:imadeawebsite@steffo.eu"}
|
|
description={"Tell me about it!"}
|
|
/>
|
|
</div>
|
|
</section>
|
|
<section className={"panel box home-ad"} id={"panel-adblocker"}>
|
|
<h3>
|
|
Fake advertisement
|
|
</h3>
|
|
<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={"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={"group-lp"}>
|
|
<LinkPanel icon={faShield} text={"Pi-Hole"} href={"https://pi-hole.net"} description={"Network-wide ad blocking"}/>
|
|
</div>
|
|
<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>
|
|
</>
|
|
}
|
|
|
|
export default Index;
|