Fascinated/simple-links
1
1
Fork 0
generated from Fascinated/nextjs-13-template-with-tailwindcss
Code Issues 1 Pull Requests 10 Actions Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.json
View File

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

33
src/app/page.tsx
View File

@ -46,26 +46,21 @@ export default function Home() {
return ( return (
<> <>
<main <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 {background.showBackground && background.backgroundImage && (
className={`absolute inset-0 filter w-screen h-screen ${ <Image
background.blur && "blur-sm" alt="Background image"
}`} src={background.backgroundImage}
style={ fill={true}
background.showBackground style={{
? { zIndex: 0,
zIndex: 0, filter: `${background.blur && "blur(4px)"} brightness(${
background: background.darken.enabled background.darken.enabled && background.darken.amount / 2
? `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>
<div <div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`} className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{ style={{