.minor changes

src/components/MainLayout.tsx

@@ -12,7 +12,7 @@ export const MainLayout = () => {
         <div className='ml-[10%] mr-[10%]'>
           <div className='flex flex-col max-w-3xl mx-auto mb-16 mt-32'>
             <h1 className='text-7xl font-bold'>albert</h1>
-            <p className='text-2xl text-gray-600 dark:text-gray-400 mt-2 font-semibold'>
+            <p className='text-2xl text-gray-600 mt-2 font-semibold'>
               {Math.floor(
                 (new Date().getTime() - new Date('2004-07-22').getTime()) /
                   (1000 * 60 * 60 * 24 * 365.25),

src/components/SocialLayout.tsx

@@ -4,18 +4,16 @@ import React from 'react';
 
 export const SocialLayout = () => {
   return (
-    <>
-      <div className='grid grid-flow-col w-48 mt-3 text-2xl space-x-8'>
-        {socials.map((social) => (
-          <Icon
-            key={social.id}
-            reference={social.ref}
-            copyValue={social.copyValue}
-          >
-            {React.createElement(social.icon)}
-          </Icon>
-        ))}
-      </div>
-    </>
+    <div className='grid grid-flow-col w-48 mt-3 text-2xl space-x-8'>
+      {socials.map((social) => (
+        <Icon
+          key={social.id}
+          reference={social.ref}
+          copyValue={social.copyValue}
+        >
+          {React.createElement(social.icon)}
+        </Icon>
+      ))}
+    </div>
   );
 };

src/components/SpotifyCard.tsx

@@ -1,9 +1,9 @@
 import { truncate } from '@/utils/truncate';
-import FadeIn from 'react-fade-in';
 import Image from 'next/image';
 import useSWR from 'swr';
 import SongImage from '@/public/song.webp';
 import Link from 'next/link';
+import { HiMusicNote } from 'react-icons/hi';
 
 export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json());
 
@@ -14,35 +14,29 @@ export const NowPlayingCard = () => {
   });
 
   return (
-    <FadeIn>
-      <div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
-        {spotify.song ? (
-          <Image
-            height={45}
-            width={45}
-            alt='Song cover art'
-            src={spotify.song?.image}
-          />
-        ) : (
-          <Image height={45} width={45} alt='Song cover art' src={SongImage} />
-        )}
-        <div className='my-auto ml-4'>
-          <div className='font-semibold text-l sm:text-regular'>
-            Listening to{' '}
-            {spotify.song ? (
-              <Link
-                href={`${spotify.song.url}`}
-                target='_blank'
-                className='text-[rgb(50,180,100)]'
-              >
-                {truncate(`${spotify.song.title}`, 20)}
-              </Link>
-            ) : (
-              <span className='text-[rgb(50,180,100)]'>nothing</span>
-            )}
-          </div>
+    <div className='mt-5 focus:outline-none transition duration-300 ease-in-out transform hover:scale-105 p-3 rounded-md border border-gray-800 shadow flex flex-row max-w-sm'>
+      {spotify.song ? (
+        <Image
+          height={45}
+          width={45}
+          alt='Song cover art'
+          src={spotify.song?.image}
+        />
+      ) : (
+        <HiMusicNote size={45} className='p-2.5' />
+      )}
+      <div className='my-auto ml-4'>
+        <div className='font-semibold text-l sm:text-regular'>
+          Listening to{' '}
+          {spotify.song ? (
+            <Link href={`${spotify.song.url}`} target='_blank'>
+              {truncate(`${spotify.song.title}`, 20)}
+            </Link>
+          ) : (
+            <span>nothing</span>
+          )}
         </div>
       </div>
-    </FadeIn>
+    </div>
   );
 };

src/pages/index.tsx

@@ -1,9 +1,5 @@
 import { MainLayout } from '@/components/MainLayout';
 
 export default function Home () {
-  return (
-    <>
-      <MainLayout />
-    </>
-  );
+  return <MainLayout />;
 }