migrate background image to a nextjs image
Some checks failed
Publish Docker Image / docker (push) Has been cancelled

This commit is contained in:
Lee 2023-07-12 10:43:14 +01:00
parent a269b49714
commit e3b0079a90
2 changed files with 15 additions and 20 deletions

@ -4,7 +4,7 @@
"description": "A description about yourself",
"avatar": "/avatar.webp",
"background": {
"showBackground": true,
"showBackground": false,
"blur": true,
"darken": {
"enabled": true,

@ -46,26 +46,21 @@ export default function Home() {
return (
<>
<main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-800 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter w-screen h-screen ${
background.blur && "blur-sm"
}`}
style={
background.showBackground
? {
{background.showBackground && background.backgroundImage && (
<Image
alt="Background image"
src={background.backgroundImage}
fill={true}
style={{
zIndex: 0,
background: background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
url(${background.backgroundImage})`
: `url(${background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
filter: `${background.blur && "blur(4px)"} brightness(${
background.darken.enabled && background.darken.amount / 2
})`,
}}
/>
)}
<div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{