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,

31
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,
background: background.darken.enabled filter: `${background.blur && "blur(4px)"} brightness(${
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})), background.darken.enabled && background.darken.amount / 2
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={{