mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-21 15:44:31 +00:00
Refactor main page
(I'm not done yet.)
This commit is contained in:
parent
1f824176d9
commit
311b88c2b1
GPG key ID:
2A24051445686895
6 changed files with 243 additions and 75 deletions
|
|
@ -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,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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
15
pages/_document.tsx
Normal 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
230
pages/index.tsx
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue