mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-24 09:04:30 +00:00
Continue the rebuild with new things
This commit is contained in:
parent
d6ca8195e9
commit
0b1b8aa6db
GPG key ID:
6965406171929D01
18 changed files with 212 additions and 87 deletions
|
|
@ -2,7 +2,11 @@
|
|||
<module type="JAVA_MODULE" version="4">
|
||||
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||
<exclude-output />
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<sourceFolder url="file://$MODULE_DIR$/components" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/pages" isTestSource="false" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/public" type="java-resource" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
|
|
|
|||
11
components/LinkPanel.module.css
Normal file
11
components/LinkPanel.module.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.linkPanel {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.linkPanel:hover, .linkPanel:focus {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
|
||||
}
|
||||
|
||||
.linkPanel:active {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
|
||||
}
|
||||
|
|
@ -2,13 +2,14 @@ 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 {default as style} from "./LinkPanel.module.css"
|
||||
import React from "react"
|
||||
|
||||
|
||||
export type LinkPanelProps = {
|
||||
href?: string,
|
||||
icon: IconProp,
|
||||
text: string,
|
||||
text: React.ReactNode,
|
||||
me?: boolean,
|
||||
fade?: boolean,
|
||||
}
|
||||
|
|
@ -16,19 +17,17 @@ export type LinkPanelProps = {
|
|||
|
||||
export const LinkPanel = ({href, icon, text, me, fade}: LinkPanelProps) => {
|
||||
const panel = (
|
||||
<div className={cn({panel: true, fade: fade})}>
|
||||
<a className={cn({panel: true, [style.linkPanel]: true, fade: fade})} rel={me ? "me" : ""}>
|
||||
<span>
|
||||
<FontAwesomeIcon icon={icon}/> {text}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
if(href) {
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a rel={me ? "me" : ""}>
|
||||
{panel}
|
||||
</a>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
43
components/ProjectPanel.module.css
Normal file
43
components/ProjectPanel.module.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.projectPanel {
|
||||
flex-basis: 232px !important;
|
||||
flex-grow: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.projectImage {
|
||||
border-radius: var(--b-border-radius);
|
||||
}
|
||||
|
||||
.projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
|
||||
filter: brightness(80%) blur(16px);
|
||||
}
|
||||
|
||||
.projectDescription {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
|
||||
width: 232px;
|
||||
height: 116px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0 hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)) !important;
|
||||
|
||||
background-color: hsl(var(--bhsl-current-hue) var(--bhsl-current-saturation) var(--bhsl-current-lightness) / 0.075);
|
||||
|
||||
border-width: 2px;
|
||||
border-radius: var(--b-border-radius);
|
||||
}
|
||||
|
||||
.projectDescription h4 {
|
||||
text-shadow: 1px 1px 0 hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)) !important;
|
||||
}
|
||||
|
||||
.projectPanel:hover .projectDescription, .projectPanel:focus .projectDescription {
|
||||
visibility: visible;
|
||||
}
|
||||
38
components/ProjectPanel.tsx
Normal file
38
components/ProjectPanel.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import {default as Link} from "next/link"
|
||||
import React from "react"
|
||||
import {default as cn} from "classnames"
|
||||
import {default as Image, ImageProps} from "next/future/image"
|
||||
import {default as style} from "./ProjectPanel.module.css"
|
||||
|
||||
|
||||
export type ProjectPanelProps = Pick<ImageProps, "src"> & {
|
||||
href?: string,
|
||||
name: string
|
||||
description: React.ReactNode,
|
||||
}
|
||||
|
||||
|
||||
export const ProjectPanel = ({src, href, name, description}: ProjectPanelProps) => {
|
||||
const panel = (
|
||||
<a className={cn({panel: true, [style.projectPanel]: true})}>
|
||||
<Image alt={name} src={src} className={cn({[style.projectImage]: true})} width={232} height={116}/>
|
||||
<div className={cn({[style.projectDescription]: true})}>
|
||||
<h4>{name}</h4>
|
||||
<p>
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
)
|
||||
|
||||
if(href) {
|
||||
return (
|
||||
<Link href={href}>
|
||||
{panel}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
else {
|
||||
return panel
|
||||
}
|
||||
}
|
||||
5
next.config.js
Normal file
5
next.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
images: {
|
||||
domains: [],
|
||||
},
|
||||
}
|
||||
|
|
@ -4,20 +4,20 @@ body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-shadow: 2px 2px 4px hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
|
||||
}
|
||||
|
||||
.panel {
|
||||
min-width: 288px;
|
||||
}
|
||||
|
||||
.panel .panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#__next {
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
#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,4 +1,5 @@
|
|||
import Link from "next/link"
|
||||
import {default as Link} from "next/link"
|
||||
import {default as Image} from "next/future/image"
|
||||
import React from 'react'
|
||||
|
||||
import "@steffo/bluelib/dist/base.root.css"
|
||||
|
|
@ -9,13 +10,15 @@ import "@steffo/bluelib/dist/glass.root.css"
|
|||
import "@steffo/bluelib/dist/fun.root.css"
|
||||
import "./_app.css"
|
||||
|
||||
import {default as imgSRound} from "../public/s-round.png"
|
||||
|
||||
import type {AppProps} from "next/app"
|
||||
|
||||
|
||||
const App = ({Component, pageProps}: AppProps) => {
|
||||
return <>
|
||||
<h1>
|
||||
Steffo's website
|
||||
<Image alt={""} src={imgSRound} style={{height: "48px", width: "48px", display: "inline-block", verticalAlign: "text-bottom"}}/> Steffo's website
|
||||
</h1>
|
||||
<Component {...pageProps}/>
|
||||
<footer>
|
||||
|
|
|
|||
136
pages/index.tsx
136
pages/index.tsx
|
|
@ -1,61 +1,123 @@
|
|||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import React from 'react'
|
||||
import type {NextPage} from "next"
|
||||
import {default as Link} from "next/link"
|
||||
import {faReddit, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter} from "@fortawesome/free-brands-svg-icons"
|
||||
import {faRedditAlien, faMastodon, faGithub, faDiscord, faTelegram, faSteam, faItchIo, faTwitter, faLinkedin, faStackOverflow} 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"
|
||||
import {ProjectPanel} from "../components/ProjectPanel"
|
||||
|
||||
import {default as imgSteffoweb} from "../public/opengraph.png"
|
||||
import {default as imgBlank} from "../public/img/projects/blank.png"
|
||||
import {default as imgBluelib} from "../public/img/projects/bluelib.png"
|
||||
import {default as imgSophon} from "../public/img/projects/sophon.png"
|
||||
import {default as imgParticleClash} from "../public/img/projects/particle-clash.png"
|
||||
|
||||
|
||||
const Index: NextPage = () => {
|
||||
return <>
|
||||
<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"}}>
|
||||
<div className={"chapter-1"}>
|
||||
<section className={"panel box"} style={{maxWidth: "488px"}}>
|
||||
<h3>
|
||||
About me
|
||||
</h3>
|
||||
<p>
|
||||
I'm <dfn>Stefano Pigozzi</dfn>, a Computer Science graduate and Master's student at <Link href={"https://www.unimore.it/"}>Unimore</Link>!
|
||||
</p>
|
||||
<p>
|
||||
When I'm not studying, I <b>contribute to open source</b>, <b>play video games</b>, and <b>eat tons of gelato</b>!
|
||||
</p>
|
||||
<p>
|
||||
I'm also somewhat interested in the <b>social mechanisms of the Internet</b>, specifically in how platforms influence how people interact with each other online.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<div className={"chapter-1"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My projects
|
||||
</h3>
|
||||
<p>
|
||||
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.
|
||||
I should write an intro sentence here
|
||||
</p>
|
||||
<div className={"chapter-4"}>
|
||||
<ProjectPanel
|
||||
src={imgSteffoweb}
|
||||
href={"https://github.com/Steffo99/steffoweb"}
|
||||
name={"Steffoweb"}
|
||||
description={<span>This very website!</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBluelib}
|
||||
href={"https://github.com/Steffo99/bluelib"}
|
||||
name={"Bluelib"}
|
||||
description={<span>Customizable, flexible and modular CSS library</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgSophon}
|
||||
href={"https://github.com/Steffo99/sophon"}
|
||||
name={"Sophon"}
|
||||
description={<span>Research hub for universities</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgParticleClash}
|
||||
href={"https://github.com/Steffo99/particle-clash"}
|
||||
name={"Particle Clash"}
|
||||
description={<span>Match-4 game for two players about particles about to collide</span>}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-0"}>
|
||||
<section className={"panel box todo"}>
|
||||
<div className={"chapter-2"}>
|
||||
<section className={"panel box"} id={"panel-internet"}>
|
||||
<h3>
|
||||
Me on the Internet
|
||||
</h3>
|
||||
<p>
|
||||
You can find me in many places around the Internet:
|
||||
</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={faRedditAlien} text={<span><small>/u/</small>Steffo99</span>}/>
|
||||
<LinkPanel me href={"https://fosstodon.org/@steffo"} icon={faMastodon} text={<span>@steffo<small>@fosstodon.org</small></span>}/>
|
||||
<LinkPanel me href={"https://twitter.com/CaptSteffo/"} icon={faTwitter} text={"@CaptSteffo"}/>
|
||||
<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://steamcommunity.com/profiles/76561198034314260/"} icon={faSteam} text={"Steffo"}/>
|
||||
<LinkPanel me href={"https://steffo.itch.io/"} icon={faItchIo} text={"Steffo"}/>
|
||||
</div>
|
||||
<p>
|
||||
You may message me on any of the following messengers:
|
||||
</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>}/>
|
||||
</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"}>
|
||||
<h3>
|
||||
My posts
|
||||
</h3>
|
||||
<p>
|
||||
Very rarely, I write something interesting and put it here.
|
||||
Very rarely, I may write something interesting and put it here.
|
||||
</p>
|
||||
<div className={"chapter-1"}>
|
||||
<div className={"panel fade"}>
|
||||
<p>
|
||||
Guess what? Nothing has been posted here yet.
|
||||
Nothing has been posted here yet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-2"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My ratings
|
||||
My recommendations
|
||||
</h3>
|
||||
<p>
|
||||
I have fun rating and comparing things based on my personal tastes!
|
||||
|
|
@ -72,37 +134,7 @@ const Index: NextPage = () => {
|
|||
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"}>
|
||||
<section className={"panel box"}>
|
||||
<h3>
|
||||
Friends with a website
|
||||
</h3>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 62 KiB |
BIN
public/img/projects/blank.png
Normal file
BIN
public/img/projects/blank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 KiB |
BIN
public/img/projects/bluelib.png
Normal file
BIN
public/img/projects/bluelib.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 760 KiB |
BIN
public/img/projects/particle-clash.png
Normal file
BIN
public/img/projects/particle-clash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
public/img/projects/sophon.png
Normal file
BIN
public/img/projects/sophon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
|
|
@ -4,18 +4,8 @@
|
|||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"sizes": "2048x2048",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
|
|
|
|||
BIN
public/s-round.png
Normal file
BIN
public/s-round.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Loading…
Reference in a new issue