mirror of
https://github.com/Steffo99/steffoweb.git
synced 2024-11-21 23:54:30 +00:00
Complete (?) website
This commit is contained in:
parent
cb2d1b6935
commit
edd8bc67a5
GPG key ID:
6965406171929D01
15 changed files with 31 additions and 298 deletions
|
|
@ -1,89 +0,0 @@
|
|||
.projectPanel {
|
||||
flex-basis: 228px !important;
|
||||
flex-grow: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.projectImage {
|
||||
border-radius: var(--b-border-radius);
|
||||
}
|
||||
|
||||
.projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
|
||||
filter: brightness(80%) blur(16px);
|
||||
}
|
||||
|
||||
.projectDescription {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
|
||||
width: 228px;
|
||||
height: 114px;
|
||||
|
||||
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;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.projectPanel:hover .projectDescription, .projectPanel:focus .projectDescription {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (hover: none) or (any-pointer: coarse) {
|
||||
.projectPanel {
|
||||
flex-basis: 100% !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.projectDescription {
|
||||
position: unset;
|
||||
visibility: visible;
|
||||
|
||||
width: unset;
|
||||
|
||||
align-content: flex-start;
|
||||
text-align: left;
|
||||
text-shadow: none;
|
||||
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.projectDescription h4 {
|
||||
text-shadow: none;
|
||||
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.projectImage {
|
||||
border-radius: var(--b-border-radius) 0 0 var(--b-border-radius) !important;
|
||||
}
|
||||
|
||||
.projectPanel:hover .projectImage, .projectPanel:focus .projectImage {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.projectPanel:hover, .projectPanel:focus {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 20%);
|
||||
}
|
||||
|
||||
.projectPanel:active {
|
||||
--bhsl-current-lightness: calc(var(--bhsl-link-lightness) + 40%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
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={228} height={114}/>
|
||||
<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
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ footer {
|
|||
|
||||
.panel {
|
||||
min-width: 288px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.panel .panel {
|
||||
|
|
@ -49,5 +50,5 @@ footer {
|
|||
#__next {
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
max-width: 1000px;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
|
|
|||
199
pages/index.tsx
199
pages/index.tsx
|
|
@ -3,28 +3,14 @@ import React from 'react'
|
|||
import type {NextPage} from "next"
|
||||
import {default as Link} from "next/link"
|
||||
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, faGlobe, faPlus} from "@fortawesome/free-solid-svg-icons"
|
||||
import {faBorderAll, faEnvelope, faPizzaSlice, faGamepad, faBook, faBox, faFilm, faMusic, faGlobe, faPlus, faFileCode, faBagShopping, faBookBookmark} 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"
|
||||
import {default as imgTheColdNight} from "../public/img/projects/the-cold-night.png"
|
||||
import {default as imgLoopingForLoops} from "../public/img/projects/looping-for-loops.png"
|
||||
import {default as imgKeepEverythingAlive} from "../public/img/projects/keep-everything-alive.png"
|
||||
import {default as imgGravityFusion} from "../public/img/projects/gravity-fusion.png"
|
||||
import {default as imgSlimeBloodAndPain} from "../public/img/projects/slime-blood-and-pain.png"
|
||||
import {default as imgBleachBeach} from "../public/img/projects/bleach-beach.png"
|
||||
import {default as imgBeatTD} from "../public/img/projects/beat-td.png"
|
||||
|
||||
|
||||
const Index: NextPage = () => {
|
||||
return <>
|
||||
<div className={"chapter-1"}>
|
||||
<section className={"panel box"} style={{maxWidth: "488px"}}>
|
||||
<section className={"panel box"}>
|
||||
<h3>
|
||||
About me
|
||||
</h3>
|
||||
|
|
@ -39,132 +25,6 @@ const Index: NextPage = () => {
|
|||
</p>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-1"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My projects
|
||||
</h3>
|
||||
<p>
|
||||
In my free time, I have developed many open source projects, some of which have gained popularity and are still in use today!
|
||||
</p>
|
||||
<details className={"details-no-indent details-header panel box"}>
|
||||
<summary>Software</summary>
|
||||
<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>}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
<details className={"details-no-indent details-header panel box"}>
|
||||
<summary>Scientific papers</summary>
|
||||
<div className={"chapter-4"}>
|
||||
<ProjectPanel
|
||||
src={imgSophon}
|
||||
href={"https://dl.acm.org/doi/fullHtml/10.1145/3491418.3535163"}
|
||||
name={"Sophon: an Extensible Platform for Collaborative Research"}
|
||||
description={<span><cite>Stefano Pigozzi</cite>, <cite>Francesco Faenza</cite>, <cite>Claudia Canali</cite></span>}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
<details className={"details-no-indent details-header panel box"}>
|
||||
<summary>Game jam entries</summary>
|
||||
<div className={"chapter-4"}>
|
||||
<ProjectPanel
|
||||
src={imgParticleClash}
|
||||
href={"https://steffo.itch.io/particle-clash"}
|
||||
name={"Particle Clash"}
|
||||
description={<span><abbr title={"Ludum Dare 51"}>LD51</abbr>: Match-4 particle collider</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgTheColdNight}
|
||||
href={"https://steffo.itch.io/the-cold-night"}
|
||||
name={"The Cold Night"}
|
||||
description={<span><abbr title={"Ludum Dare 50"}>LD50</abbr>: Top-down snowman melter</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgLoopingForLoops}
|
||||
href={"https://steffo.itch.io/the-cold-night"}
|
||||
name={"Looping for lööps"}
|
||||
description={<span><abbr title={"Ludum Dare 47"}>LD47</abbr>: Fruit-looping platformer</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgKeepEverythingAlive}
|
||||
href={"https://steffo.itch.io/keep-everything-alive"}
|
||||
name={"Keep Everything Alive"}
|
||||
description={<span><abbr title={"Ludum Dare 46"}>LD46</abbr>: Lively microgame collection</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgGravityFusion}
|
||||
href={"https://steffo.itch.io/gravity-fusion"}
|
||||
name={"Gravity Fusion"}
|
||||
description={<span><abbr title={"Ludum Dare 45"}>LD45</abbr>: Colorful incremental game</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgSlimeBloodAndPain}
|
||||
href={"https://steffo.itch.io/slime-blood-and-pain"}
|
||||
name={"Slime, Blood and Pain"}
|
||||
description={<span><abbr title={"Ludum Dare 44"}>LD44</abbr>: Infinite dungeon crawler</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBleachBeach}
|
||||
href={"https://steffo.itch.io/bleach-beach"}
|
||||
name={"Bleach Beach"}
|
||||
description={<span><abbr title={"Ludum Dare 42"}>LD42</abbr>: Wonky physics-based spear fishing simulator</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBeatTD}
|
||||
href={"https://steffo.itch.io/beat-td"}
|
||||
name={"Beat TD"}
|
||||
description={<span><abbr title={"Ludum Dare 41"}>LD41</abbr>: Rhythm-based tower-defense</span>}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
<details className={"details-no-indent details-header panel box"}>
|
||||
<summary>Notes</summary>
|
||||
<div className={"chapter-4"}>
|
||||
<ProjectPanel
|
||||
src={imgBlank}
|
||||
href={"https://example.org"}
|
||||
name={"Placeholder"}
|
||||
description={<span>There's nothing here yet.</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBlank}
|
||||
href={"https://example.org"}
|
||||
name={"Placeholder"}
|
||||
description={<span>There's nothing here yet.</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBlank}
|
||||
href={"https://example.org"}
|
||||
name={"Placeholder"}
|
||||
description={<span>There's nothing here yet.</span>}
|
||||
/>
|
||||
<ProjectPanel
|
||||
src={imgBlank}
|
||||
href={"https://example.org"}
|
||||
name={"Placeholder"}
|
||||
description={<span>There's nothing here yet.</span>}
|
||||
/>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-2"}>
|
||||
<section className={"panel box"} id={"panel-internet"}>
|
||||
<h3>
|
||||
|
|
@ -198,39 +58,38 @@ const Index: NextPage = () => {
|
|||
</section>
|
||||
<section className={"panel box"}>
|
||||
<h3>
|
||||
My posts
|
||||
My projects
|
||||
</h3>
|
||||
<p>
|
||||
Very rarely, I may write something interesting and put it here.
|
||||
</p>
|
||||
<div className={"chapter-1"}>
|
||||
<div className={"panel fade"}>
|
||||
<p>
|
||||
Nothing has been posted here yet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={"chapter-2"}>
|
||||
<section className={"panel box todo"}>
|
||||
<h3>
|
||||
My recommendations
|
||||
</h3>
|
||||
<p>
|
||||
I have fun rating and comparing things based on my personal tastes!
|
||||
You might be interested in one of my released projects:
|
||||
</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"}/>
|
||||
<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>}/>
|
||||
<LinkPanel href={"https://github.com/Steffo99/estus"} icon={faFileCode} text={"Estus"}/>
|
||||
</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>
|
||||
<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>
|
||||
</section>
|
||||
<section className={"panel box"}>
|
||||
<h3>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 511 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 760 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 590 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 265 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 418 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
Loading…
Reference in a new issue