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

Refactor main page

Browse source 
(I'm not done yet.)
This commit is contained in:
Steffo 2023-05-28 04:37:00 +02:00
parent 1f824176d9
commit 311b88c2b1
Signed by: steffo
GPG key ID: 2A24051445686895
6 changed files with 243 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
components/LinkPanel.module.css
View file

@ -1,26 +1,50 @@
.linkPanel {
white-space: nowrap;
display: grid;
grid-template-areas:
"icon text"
"desc desc"
;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
flex-direction: row;
gap: 8px;
align-items: center;
grid-row-gap: 0;
white-space: nowrap;
text-decoration: none;
flex-basis: calc(50% - 4px);
flex-grow: 1;
}
.linkPanel:hover, .linkPanel:focus {
@media (max-width: 492px) {
.linkPanel {
width: 100%;
}
}
.linkPanel[href]:hover, .linkPanel[href]:focus {
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
}
.linkPanel:active {
.linkPanel[href]:active {
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
}
.linkPanelIcon {
grid-area: icon;
justify-self: center;
align-self: center;
width: 20px;
flex-shrink: 0;
}
.linkPanelText {
flex-grow: 1;
justify-self: flex-start;
grid-area: text;
align-self: center;
text-decoration: 1px solid underline currentColor;
}
.linkPanelDescription {
grid-area: desc;
white-space: normal;
align-self: start;
}

10
components/LinkPanel.tsx
View file

@ -10,18 +10,24 @@ export type LinkPanelProps = {
href?: string,
icon: IconProp,
text: React.ReactNode,
description?: React.ReactNode,
me?: boolean,
fade?: boolean,
}
export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
export const LinkPanel = ({href, icon, text, description, me, fade}: LinkPanelProps) => {
const panel = (
<>
<FontAwesomeIcon className={style.linkPanelIcon} icon={icon}/>
<span className={style.linkPanelText}>
{text}
</span>
{description &&
<small className={style.linkPanelDescription}>
{description}
</small>
}
</>
)
@ -36,7 +42,7 @@ export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
}
else {
return (
<div className={cn({panel: true, fade: fade})}>
<div className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
{panel}
</div>
)

19
pages/_app.css
View file

@ -1,9 +1,22 @@
@import 'node_modules/@steffo/bluelib/dist/base.root.css';
@import 'node_modules/@steffo/bluelib/dist/colors-royalblue.root.css';
@import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
@import 'node_modules/@steffo/bluelib/dist/layouts-center.root.css';
@import 'node_modules/@steffo/bluelib/dist/layouts-flex.root.css';
@import 'node_modules/@steffo/bluelib/dist/classic.root.css';
@import 'node_modules/@steffo/bluelib/dist/glass.root.css';
@import 'node_modules/@steffo/bluelib/dist/fun.root.css';
@import 'node_modules/@steffo/bluelib/dist/colors-royalblue.root.css';
@import 'node_modules/@steffo/bluelib/dist/fonts-fira-ghpages.root.css';
@import 'node_modules/@fortawesome/fontawesome-svg-core/styles.css';
body .panel {
max-width: 476px;
}
body .panel .panel {
max-width: unset;
}
body .group-lp {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

2
pages/_app.tsx
View file

@ -14,7 +14,7 @@ config.autoAddCss = false
const App = ({Component, pageProps}: AppProps) => {
return <>
<h1>
<Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo's website
<Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo
</h1>
<main>
<Component {...pageProps}/>

15
pages/_document.tsx Normal file
View file

@ -0,0 +1,15 @@
import Document, {Html, Head, Main, NextScript} from "next/document"
export default class extends Document {
render() {
return (
<Html>
<Head/>
<body className={"layout-center"}>
<Main/>
<NextScript/>
</body>
</Html>
)
}
}

230
pages/index.tsx
View file

@ -3,8 +3,8 @@ import {useRouter} from "next/router"
import React from 'react'
import type {NextPage} from "next"
import {default as Link} from "next/link"
import {faRedditAlien, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faLinkedin, faStackOverflow, faWikipediaW} from "@fortawesome/free-brands-svg-icons"
import {faBorderAll, faEnvelope, faGlobe, faPlus, faFileCode, faBagShopping, faShieldAlt} from "@fortawesome/free-solid-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 {LinkPanel} from "../components/LinkPanel"
import {useKonamiCode} from "../hooks/useKonamiCode"
@ -15,7 +15,7 @@ const Index: NextPage = () => {
useKonamiCode(() => router.push("/garasauto"))
return <>
<div className={"chapter-2"}>
<div className={"chapter-1"}>
<section className={"panel box"} id={"panel-about"}>
<h3>
About me
@ -23,13 +23,8 @@ 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>
</section>
<section className={"panel box"} id={"panel-interests"}>
<h3>
My interests
</h3>
<p>
I'm interested in how to improve the interactions between people via technology.
I'm interested in improving the interactions between people via technology.
</p>
<p>
For that reason, I enjoy using, exploring, studying and developing:
@ -38,77 +33,192 @@ const Index: NextPage = () => {
<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>
</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-2"}>
<section className={"panel box"} id={"panel-projects"}>
<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, 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={"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>
You can find me in many places around the Internet:
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>
<div className={"chapter-2"}>
<LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={<span>@steffo<small>@fosstodon.org</small></span>}/>
<LinkPanel me href={"https://old.reddit.com/user/steffo99"} icon={faRedditAlien} text={<span><small>/u/</small>Steffo99</span>}/>
<LinkPanel me href={"https://github.com/Steffo99"} icon={faGithub} text={"Steffo99"}/>
<LinkPanel me href={"https://stackoverflow.com/users/4334568/steffo"} icon={faStackOverflow} text={"Steffo"}/>
<LinkPanel me href={"https://www.linkedin.com/in/steffo45/"} icon={faLinkedin} text={"Stefano Pigozzi"}/>
<LinkPanel me href={"https://en.wikipedia.org/wiki/User:Steffo99"} icon={faWikipediaW} text={"Steffo99"}/>
<LinkPanel me href={"https://steamcommunity.com/profiles/76561198034314260/"} icon={faSteam} text={"Steffo"}/>
<LinkPanel me href={"https://steffo.itch.io/"} icon={faItchIo} text={"Steffo"}/>
</div>
<hr/>
<p>
You may message me on any of the following messengers:
Apart from experimentation, I'm currently the most active on the Fediverse, in particular on:
</p>
<div className={"chapter-2"}>
<LinkPanel me href={"mailto:me@steffo.eu"} icon={faEnvelope} text={"me@steffo.eu"}/>
<LinkPanel me href={"https://t.me/Steffo"} icon={faTelegram} text={"@Steffo"}/>
<LinkPanel me href={"https://discord.com/users/77703771181817856"} icon={faDiscord} text={<span>Steffo<small>#4036</small></span>}/>
<LinkPanel me href={"https://matrix.to/@steffo:ryg.one"} icon={faBorderAll} text={<span>@steffo<small>:ryg.one</small></span>}/>
<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>
<small style={{fontSize: "x-small"}} className={"float-bottom"}>
Please <em>do not</em> send me chat messages about <i>Greed</i>, <Link href={"https://github.com/Steffo99/greed/issues/new/choose"}>open an issue</Link> instead!
</small>
</section>
<section className={"panel box"} id={"panel-projects"}>
<h3>
My projects
</h3>
<div className={"chapter-3"}>
<LinkPanel href={"https://github.com/Steffo99/greed"} icon={faFileCode} text={"Greed"}/>
<LinkPanel href={"https://github.com/Steffo99/sophon"} icon={faFileCode} text={"Sophon"}/>
<LinkPanel href={"https://gh.steffo.eu/bluelib/examples/index.html"} icon={faGlobe} text={"Bluelib"}/>
<LinkPanel href={"https://marketplace.visualstudio.com/items?itemName=steffo.steffula-code"} icon={faBagShopping} text={"Steffula Code"}/>
<LinkPanel href={"https://github.com/Steffo99/steffula-ultra"} icon={faFileCode} text={"Steffula Ultra"}/>
<LinkPanel href={"https://uni.steffo.eu/"} icon={faGlobe} text={"Unisteffo"}/>
<LinkPanel href={"https://github.com/RYGhub/revenants-brooch"} icon={faFileCode} text={<span style={{fontSize: "small"}}>Revenant's Brooch</span>}/>
<LinkPanel href={"https://hub.ryg.one/bobbot/"} icon={faDiscord} text={"Bob Bot"}/>
<LinkPanel href={"https://github.com/Steffo99/cfig"} icon={faFileCode} text={"cfig"}/>
<LinkPanel href={"https://github.com/Steffo99/threadkiller"} icon={faFileCode} text={"Threadkiller"}/>
<LinkPanel href={"https://github.com/Steffo99/actions-semver"} icon={faFileCode} text={"actions-semver"}/>
<LinkPanel href={"https://github.com/Steffo99/template-poetry"} icon={faFileCode} text={<span style={{fontSize: "small"}}>template-poetry</span>}/>
<LinkPanel href={"https://github.com/Steffo99/lokiunimore"} icon={faFileCode} text={"Loki"}/>
<LinkPanel href={"https://t.me/patchedporobot"} icon={faTelegram} text={<span style={{fontSize: "small"}}>Patched Porobot</span>}/>
<LinkPanel href={"https://github.com/Steffo99/io-beep-boop"} icon={faFileCode} text={"Io Beep Boop"}/>
<LinkPanel href={"https://addons.mozilla.org/en-US/firefox/addon/tidebringer/"} icon={faBagShopping} text={"Tidebringer"}/>
<LinkPanel href={"https://steamcommunity.com/sharedfiles/filedetails/?id=2572658701"} icon={faSteam} text={"Starting Perk"}/>
<LinkPanel href={"https://github.com/Steffo99/lihzahrd"} icon={faFileCode} text={"lihzahrd"}/>
<LinkPanel href={"https://github.com/Steffo99/flyingsnake"} icon={faFileCode} text={"flyingsnake"}/>
<LinkPanel href={"https://gh.steffo.eu/trivia/"} icon={faGlobe} text={"Trivia"}/>
<LinkPanel href={"https://github.com/Steffo99/steamleaderboards"} icon={faFileCode} text={<span style={{fontSize: "small"}}>steamleaderboards</span>}/>
<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>
<small style={{fontSize: "x-small"}} className={"float-bottom"}>
There are more on <Link href={"https://github.com/Steffo99?tab=repositories"}>my GitHub profile</Link>!
</small>
<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 className={"chapter-2"}>
<section className={"panel box"} id={"panel-friends"}>
<h3>
Friends
My friends
</h3>
<p>
I think that everyone should have their tiny, personal website!
</p>
<p>
You can check out my friends' websites here:
</p>