feat: changing wallpapers

next.config.js

@@ -1,2 +1,4 @@
 /** @type {import('next').NextConfig} */
-export const nextConfig = {}
+export const nextConfig = {
+    reactStrictMode: false,
+}

public/blog/atom.xml

@@ -2,7 +2,7 @@
 <feed xmlns="http://www.w3.org/2005/Atom">
     <id>https://srizan.dev/blog</id>
     <title>Sr Izan's Blog</title>
-    <updated>2023-12-03T11:54:57.906Z</updated>
+    <updated>2023-12-03T19:13:44.979Z</updated>
     <generator>https://github.com/jpmonette/feed</generator>
     <author>
         <name>Sr Izan</name>

public/blog/rss.xml

@@ -4,7 +4,7 @@
         <title>Sr Izan's Blog</title>
         <link>https://srizan.dev/blog</link>
         <description>My little donowall place on the net</description>
-        <lastBuildDate>Sun, 03 Dec 2023 11:54:57 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 03 Dec 2023 19:13:44 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

src/app/(pages)/(root)/page.tsx

@@ -4,14 +4,12 @@ import { SiOsu } from 'react-icons/si';
 import { FaDiscord, FaGithub, FaMastodon, FaTwitter, FaBlog } from 'react-icons/fa6';
 import Link from "next/link";
 import Image from 'next/image';
-import Backgrounds from '../../../backgrounds.json'
-import ImageAuthor from '@/app/_components/ImageAuthor';
+import RandomBackground from '@/app/_components/RandomBackground';
 
 export default function Page() {
-  const randomBg = Backgrounds[Math.floor(Math.random() * Backgrounds.length)];
   return (
     <div>
-      <div className='bgImage' style={{ backgroundImage: `url("${randomBg.url}")` }} />
+      <RandomBackground />
       <div className='aboutMeBox'>
         <Image src='/pfp.webp' alt='main profile picture' width='200' height='200' style={{ borderRadius: '100px' }} />
         <p>A spanish hobbyist developer and osu! player</p>
@@ -22,10 +20,9 @@ export default function Page() {
             <Link href='https://discord.com/users/703974042700611634'><FaDiscord /></Link>
             <Link href='https://social.srizan.dev'><FaMastodon /></Link>
             <Link href='https://twitter.com/itssrizan'><FaTwitter /></Link>
-            <Link href='https://osu.ppy.sh/users/25350735'><SiOsu style={{ strokeWidth: "0.8" }} /></Link>
+            <Link href='https://osu.ppy.sh/users/25350735'><SiOsu /></Link>
         </div>
       </div>
-      <ImageAuthor {...randomBg} />
     </div>
   )
 }

src/app/_components/RandomBackground.tsx

@@ -0,0 +1,14 @@
+"use client"
+import Backgrounds from '../../backgrounds.json'
+import ImageAuthor from '@/app/_components/ImageAuthor';
+import '../_css/RandomBackground.css'
+
+export default function RandomBackground() {
+  const randomBg = Backgrounds[Math.floor(Math.random() * Backgrounds.length)];
+  return (
+    <div>
+      <div className='bgImage' style={{ backgroundImage: `url("${randomBg.url}")` }} />
+      <ImageAuthor {...randomBg} />
+    </div>
+  )
+}

src/app/_css/RandomBackground.css

@@ -0,0 +1,9 @@
+.bgImage {
+    width: 100vw;
+    height: 100vh;
+    filter: blur(5px);
+    filter: brightness(30%);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}

src/app/_css/Root.css

@@ -14,16 +14,6 @@ body {
   padding: 0;
 }
 
-.bgImage {
-  width: 100vw;
-  height: 100vh;
-  filter: blur(5px);
-  filter: brightness(30%);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
 .icons {
   align-self: flex-end;
 }