mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-21 23:54:30 +00:00
Begin rebuilding the home page
This commit is contained in:
parent
4fd26c5a5e
commit
d6ca8195e9
GPG key ID:
6965406171929D01
13 changed files with 186 additions and 297 deletions
|
|
@ -1,5 +0,0 @@
|
|||
.Account {
|
||||
white-space: nowrap;
|
||||
width: 50%;
|
||||
flex-basis: calc(50% - 8px) !important;
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import * as React from "react"
|
||||
import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
|
||||
import {Panel, Anchor} from "@steffo/bluelib-react";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import Style from "./Account.module.css"
|
||||
|
||||
|
||||
interface AccountProps {
|
||||
icon: IconDefinition,
|
||||
url: string,
|
||||
name: string,
|
||||
}
|
||||
|
||||
|
||||
export function Account({icon, url, name}: AccountProps): JSX.Element {
|
||||
let contents: JSX.Element
|
||||
if(url) {
|
||||
contents = <Anchor href={url}><FontAwesomeIcon icon={icon}/> {name}</Anchor>
|
||||
}
|
||||
else {
|
||||
contents = <><FontAwesomeIcon icon={icon}/> {name}</>
|
||||
}
|
||||
|
||||
return (
|
||||
<Panel className={Style.Account} style={{minWidth: "unset"}}>
|
||||
{contents}
|
||||
</Panel>
|
||||
)
|
||||
}
|
||||
38
components/LinkPanel.tsx
Normal file
38
components/LinkPanel.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import {IconProp} from "@fortawesome/fontawesome-svg-core"
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import {default as Link} from "next/link"
|
||||
import {default as cn} from "classnames"
|
||||
import React from "react"
|
||||
|
||||
|
||||
export type LinkPanelProps = {
|
||||
href?: string,
|
||||
icon: IconProp,
|
||||
text: string,
|
||||
me?: boolean,
|
||||
fade?: boolean,
|
||||
}
|
||||
|
||||
|
||||
export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
|
||||
const panel = (
|
||||
<div className={cn({panel: true, fade: fade})}>
|
||||
<span>
|
||||
<FontAwesomeIcon icon={icon}/> {text}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
if(href) {
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a rel={me ? "me" : ""}>
|
||||
{panel}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return panel
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import * as React from "react"
|
||||
import {Anchor} from "@steffo/bluelib-react"
|
||||
import Style from "./MoreProjects.module.css"
|
||||
|
||||
|
||||
export function MoreProjects({user, minus}) {
|
||||
const [data, setData] = React.useState(null)
|
||||
const [error, setError] = React.useState(null)
|
||||
|
||||
const fetchData = React.useCallback(
|
||||
() => {
|
||||
fetch(`https://api.github.com/users/${user}`)
|
||||
.then(r => r.json())
|
||||
.then(d => setData(d))
|
||||
.catch(e => setError(e))
|
||||
},
|
||||
[user, setData, setError]
|
||||
)
|
||||
|
||||
React.useEffect(
|
||||
() => {
|
||||
fetchData()
|
||||
},
|
||||
[fetchData]
|
||||
)
|
||||
|
||||
const contents = React.useMemo(
|
||||
() => {
|
||||
if(data === null) return "Loading..."
|
||||
else if(error !== null) return "Error: {error}"
|
||||
return `...and ${data["public_repos"] - minus} more!`
|
||||
},
|
||||
[data, error, minus]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={Style.More}>
|
||||
<Anchor href={"https://github.com/Steffo99?tab=repositories"}>{contents}</Anchor>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.More {
|
||||
font-size: small;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import * as React from "react"
|
||||
import {Panel, Anchor} from "@steffo/bluelib-react";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import Style from "./Project.module.css"
|
||||
import { faStar } from "@fortawesome/free-solid-svg-icons"
|
||||
|
||||
|
||||
export function Project({user, repo, lang}) {
|
||||
const [data, setData] = React.useState(null)
|
||||
const [error, setError] = React.useState(null)
|
||||
|
||||
const fetchData = React.useCallback(
|
||||
() => {
|
||||
fetch(`https://api.github.com/repos/${user}/${repo}`)
|
||||
.then(r => r.json())
|
||||
.then(d => setData(d))
|
||||
.catch(e => setError(e))
|
||||
},
|
||||
[user, repo, setData, setError]
|
||||
)
|
||||
|
||||
React.useEffect(
|
||||
() => {
|
||||
fetchData()
|
||||
},
|
||||
[fetchData]
|
||||
)
|
||||
|
||||
const color = React.useMemo(
|
||||
() => {
|
||||
if(data === null) {
|
||||
return "color-yellow"
|
||||
}
|
||||
else if(error !== null) {
|
||||
return "color-red"
|
||||
}
|
||||
else {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
[data, error]
|
||||
)
|
||||
|
||||
const info = React.useMemo(
|
||||
() => {
|
||||
if(data === null) return (
|
||||
<div className={Style.Description}>Loading...</div>
|
||||
)
|
||||
else if(error !== null) return (
|
||||
<div className={Style.Description}>Error: {error}</div>
|
||||
)
|
||||
|
||||
return <>
|
||||
<div className={Style.Description}>
|
||||
{data["description"]}
|
||||
</div>
|
||||
<div className={Style.Stars}>
|
||||
<Anchor href={`https://github.com/${user}/${repo}/stargazers`}>
|
||||
<FontAwesomeIcon icon={faStar}/> {data["stargazers_count"]}
|
||||
</Anchor>
|
||||
</div>
|
||||
</>
|
||||
},
|
||||
[user, repo, data, error]
|
||||
)
|
||||
|
||||
return (
|
||||
<Panel className={Style.Project} bluelibClassNames={color}>
|
||||
<div className={Style.Title}>
|
||||
<Anchor href={`https://github.com/${user}/${repo}`}>
|
||||
{repo}
|
||||
</Anchor>
|
||||
</div>
|
||||
{info}
|
||||
</Panel>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
.Project {
|
||||
display: grid;
|
||||
|
||||
grid-template-areas:
|
||||
"title description stars"
|
||||
;
|
||||
grid-template-columns: 1fr 4fr auto;
|
||||
grid-column-gap: 12px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-size: larger;
|
||||
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.Description {
|
||||
justify-self: start;
|
||||
|
||||
grid-area: description;
|
||||
}
|
||||
|
||||
.Stars {
|
||||
justify-self: end;
|
||||
|
||||
grid-area: stars;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import * as React from "react"
|
||||
import { BluelibTheme } from "@steffo/bluelib-react/dist/types"
|
||||
|
||||
|
||||
export const ThemeContext = React.createContext<[BluelibTheme, React.Dispatch<React.SetStateAction<BluelibTheme>>]>(["royalblue", undefined]);
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@steffo/bluelib": "^6.0.0",
|
||||
"classnames": "^2.3.2",
|
||||
"next": "^12.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background-color: #0d193b;
|
||||
background-image: url("/space_default.jpg");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
color: #a0ccff;
|
||||
}
|
||||
|
||||
body > * {
|
||||
#__next {
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
body > * > * {
|
||||
min-height: 100vh;
|
||||
#panel-internet a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#panel-internet a:hover, #panel-internet a:focus {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
|
||||
}
|
||||
|
||||
#panel-internet a:active {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
|
||||
}
|
||||
|
|
@ -1,38 +1,28 @@
|
|||
import Link from "next/link"
|
||||
import React from 'react'
|
||||
import type {AppProps} from "next/app"
|
||||
|
||||
import "@steffo/bluelib/dist/base.root.css"
|
||||
import "@steffo/bluelib/dist/colors-royalblue.root.css"
|
||||
import "@steffo/bluelib/dist/fonts-fira-ghpages.root.css"
|
||||
import "@steffo/bluelib/dist/classic.root.css"
|
||||
import "@steffo/bluelib/dist/glass.root.css"
|
||||
import "@steffo/bluelib/dist/fun.root.css"
|
||||
import "./_app.css"
|
||||
import {LayoutThreeCol, Heading, BringAttention as B, Footer, Anchor as A, useBluelibInBody } from "@steffo/bluelib-react"
|
||||
import {BluelibTheme} from "@steffo/bluelib-react/dist/types"
|
||||
import { ThemeContext } from '../components/ThemeContext'
|
||||
|
||||
import type {AppProps} from "next/app"
|
||||
|
||||
|
||||
function App({Component, pageProps}: AppProps) {
|
||||
const [theme, setTheme] = React.useState<BluelibTheme>("royalblue")
|
||||
useBluelibInBody(theme)
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={[theme, setTheme]}>
|
||||
<LayoutThreeCol>
|
||||
<LayoutThreeCol.Center>
|
||||
<Heading level={1}>
|
||||
<B>Steffo</B>'s website
|
||||
</Heading>
|
||||
const App = ({Component, pageProps}: AppProps) => {
|
||||
return <>
|
||||
<h1>
|
||||
Steffo's website
|
||||
</h1>
|
||||
<Component {...pageProps}/>
|
||||
<Footer>
|
||||
<p>
|
||||
© {new Date().getFullYear()} Stefano Pigozzi
|
||||
</p>
|
||||
<p>
|
||||
<A href="https://github.com/Steffo99/steffoweb">Open source</A> website based on <A href="https://github.com/Steffo99/bluelib">Bluelib</A> and <A href="https://github.com/Steffo99/bluelib-react">Bluelib React</A>
|
||||
</p>
|
||||
<p>
|
||||
Please do not use the source code of this website to impersonate me!
|
||||
</p>
|
||||
</Footer>
|
||||
</LayoutThreeCol.Center>
|
||||
</LayoutThreeCol>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
<footer>
|
||||
© {new Date().getFullYear()} Stefano Pigozzi | <Link href={"https://github.com/Steffo99/steffoweb-2021"}>Source code</Link>
|
||||
</footer>
|
||||
</>
|
||||
}
|
||||
|
||||
// noinspection JSUnusedGlobalSymbols
|
||||
export default App;
|
||||
|
|
|
|||
176
pages/index.tsx
176
pages/index.tsx
|
|
@ -1,83 +1,121 @@
|
|||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import React from 'react'
|
||||
import type {NextPage} from "next"
|
||||
import {Heading, Chapter, Box, BringAttention as B, Anchor, Form} from "@steffo/bluelib-react";
|
||||
import {BluelibTheme} from "@steffo/bluelib-react/dist/types"
|
||||
import {faEnvelope} from "@fortawesome/free-solid-svg-icons"
|
||||
import {faDiscord, faGithub, faReddit, faTelegram} from "@fortawesome/free-brands-svg-icons"
|
||||
import {Project} from "../components/Project"
|
||||
import {MoreProjects} from "../components/MoreProjects"
|
||||
import {Account} from "../components/Account"
|
||||
import {ThemeContext} from '../components/ThemeContext';
|
||||
|
||||
|
||||
type ThemeMap = {
|
||||
[fullname: string]: BluelibTheme;
|
||||
};
|
||||
const FULL_THEME_NAMES: ThemeMap = {
|
||||
"Royal Blue": "royalblue",
|
||||
"The Sophonity": "sophon",
|
||||
"Sheet of Paper": "paper",
|
||||
"Hacker Terminal": "hacker",
|
||||
"Gestione Amber": "amber",
|
||||
}
|
||||
import {default as Link} from "next/link"
|
||||
import {faReddit, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter} from "@fortawesome/free-brands-svg-icons"
|
||||
import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic} from "@fortawesome/free-solid-svg-icons"
|
||||
import {LinkPanel} from "../components/LinkPanel"
|
||||
|
||||
|
||||
const Index: NextPage = () => {
|
||||
const [_theme, setTheme] = React.useContext(ThemeContext);
|
||||
|
||||
return <>
|
||||
<Chapter>
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box todo"} style={{maxWidth: "488px"}}>
|
||||
<h3>
|
||||
Under construction
|
||||
</h3>
|
||||
<p>
|
||||
This website is currently being recreated from scratch, therefore much of its content is missing!
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box todo"} style={{maxWidth: "488px"}}>
|
||||
<h3>
|
||||
About me
|
||||
</Heading>
|
||||
</h3>
|
||||
<p>
|
||||
I'm <B>Stefano Pigozzi</B>, a Computer Science graduate at <Anchor href={"https://www.unimore.it"}>Unimore</Anchor>!
|
||||
I'm <dfn>Stefano Pigozzi</dfn>, a Computer Science graduate and Master's student at <Link href={"https://www.unimore.it/"}>Unimore</Link>!
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My projects
|
||||
</h3>
|
||||
<p>
|
||||
I develop and maintain many <B>open source</B> software projects, such as websites, chat bots, libraries, videogames and mods.
|
||||
One of the things I enjoy doing in my free time is developing software to solve problems I encounter in my life, and then publishing the result on the Internet, allowing others to benefit from my solutions and contributing to the open source community.
|
||||
</p>
|
||||
</Box>
|
||||
</Chapter>
|
||||
<Chapter>
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
My software projects
|
||||
</Heading>
|
||||
<Project user={"Steffo99"} repo={"sophon"} lang={"Multilanguage"}/>
|
||||
<Project user={"Steffo99"} repo={"greed"} lang={"Python"}/>
|
||||
<Project user={"Steffo99"} repo={"bluelib"} lang={"Less"}/>
|
||||
<Project user={"RYGhub"} repo={"bobbot"} lang={"Rust"}/>
|
||||
<Project user={"RYGhub"} repo={"impressive-strawberry"} lang={"Python"}/>
|
||||
<Project user={"Steffo99"} repo={"flyingsnake"} lang={"Python"}/>
|
||||
<Project user={"pds-nest"} repo={"nest"} lang={"JavaScript"}/>
|
||||
<Project user={"Steffo99"} repo={"keep-everything-alive"} lang={"C#"}/>
|
||||
<MoreProjects user={"Steffo99"} minus={7}/>
|
||||
</Box>
|
||||
</Chapter>
|
||||
<Chapter>
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
Me on the web
|
||||
</Heading>
|
||||
<Chapter>
|
||||
<Account icon={faReddit} url={"https://www.reddit.com/u/Steffo99/"} name={"/u/Steffo99"}/>
|
||||
<Account icon={faGithub} url={"https://github.com/Steffo99"} name={"Steffo99"}/>
|
||||
<Account icon={faDiscord} url={""} name={"Steffo#4036"}/>
|
||||
<Account icon={faTelegram} url={"https://t.me/Steffo"} name={"Steffo"}/>
|
||||
<Account icon={faEnvelope} url={"mailto:ste.pigozzi@gmail.com"} name={"ste.pigozzi@gmail.com"}/>
|
||||
<Account icon={faEnvelope} url={"mailto:me@steffo.eu"} name={"me@steffo.eu"}/>
|
||||
</Chapter>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
Other stuff
|
||||
</Heading>
|
||||
<Form>
|
||||
<Form.Select label={"Theme"} onChange={event => setTheme(FULL_THEME_NAMES[event.target.value])} options={FULL_THEME_NAMES}/>
|
||||
</Form>
|
||||
</Box>
|
||||
</Chapter>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My posts
|
||||
</h3>
|
||||
<p>
|
||||
Very rarely, I write something interesting and put it here.
|
||||
</p>
|
||||
<div className={"panel fade"}>
|
||||
<p>
|
||||
Guess what? Nothing has been posted here yet.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My ratings
|
||||
</h3>
|
||||
<p>
|
||||
I have fun rating and comparing things based on my personal tastes!
|
||||
</p>
|
||||
<div className={"chapter-3"}>
|
||||
<LinkPanel fade icon={faGamepad} text={"Videogames"}/>
|
||||
<LinkPanel fade icon={faFilm} text={"Movies"}/>
|
||||
<LinkPanel fade icon={faBox} text={"Anime"}/>
|
||||
<LinkPanel fade icon={faMusic} text={"Music"}/>
|
||||
<LinkPanel fade icon={faBook} text={"Books"}/>
|
||||
<LinkPanel fade icon={faPizzaSlice} text={"Pizzerie"}/>
|
||||
</div>
|
||||
<p style={{fontSize: "x-small"}} className={"float-bottom"}>
|
||||
I am by no means a critic, so don't pay this too much attention unless you're interested in what I like...
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box"} id={"panel-internet"}>
|
||||
<h3>
|
||||
Me on the Internet
|
||||
</h3>
|
||||
<p>
|
||||
You can find me in many places on the web, but these are the ones I'm most active on:
|
||||
</p>
|
||||
<div className={"chapter-2"}>
|
||||
<LinkPanel me href={"https://github.com/Steffo99"} icon={faGithub} text={"Steffo99"}/>
|
||||
<LinkPanel me href={"https://old.reddit.com/user/steffo99"} icon={faReddit} text={"/u/Steffo99"}/>
|
||||
<LinkPanel me href={"https://steamcommunity.com/profiles/76561198034314260/"} icon={faSteam} text={"Steffo"}/>
|
||||
<LinkPanel me href={"https://steffo.itch.io/"} icon={faItchIo} text={"Steffo"}/>
|
||||
<LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={"@steffo@fosstodon.org"}/>
|
||||
<LinkPanel me href={"https://twitter.com/CaptSteffo/"} icon={faTwitter} text={"@CaptSteffo"}/>
|
||||
</div>
|
||||
<p>
|
||||
You can send me messages on the following ways:
|
||||
</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={"Steffo#4036"}/>
|
||||
<LinkPanel me href={"https://matrix.to/@steffo:ryg.one"} icon={faBorderAll} text={"@steffo:ryg.one"}/>
|
||||
</div>
|
||||
<p style={{fontSize: "x-small"}} className={"float-bottom"}>
|
||||
Please <em>do not</em> send me chat messages about <i>Greed</i>, open an issue or you'll end up in my Hall of Shame!
|
||||
</p>
|
||||
</section>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
Friends with a website
|
||||
</h3>
|
||||
<p>
|
||||
You can check out my friends' websites here:
|
||||
</p>
|
||||
<div className={"panel fade"}>
|
||||
<p>
|
||||
This section was just created: if you know me, please tell me your website so I can add it here! :D
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -169,6 +169,11 @@ caniuse-lite@^1.0.30001406:
|
|||
resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001420.tgz#f62f35f051e0b6d25532cf376776d41e45b47ef6"
|
||||
integrity sha512-OnyeJ9ascFA9roEj72ok2Ikp7PHJTKubtEJIQ/VK3fdsS50q4KWy+Z5X0A1/GswEItKX0ctAp8n4SYDE7wTu6A==
|
||||
|
||||
classnames@^2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
|
||||
integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
|
||||
|
||||
csstype@^3.0.2:
|
||||
version "3.0.10"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
|
||||
|
|
|
|||
Loading…
Reference in a new issue