fix:

src/components/Icon.tsx

@@ -1,4 +1,4 @@
-import { socials } from '@/components/data/Socials'
+import { Socials } from '@/components/data/Socials'
 import copy from 'copy-to-clipboard'
 import toast from 'react-hot-toast'
 import Link from 'next/link'
@@ -27,7 +27,7 @@ export const Icon = ({ children, reference, copyValue }: Icon) => {
         href={''}
         className={`cursor-pointer`}
         aria-label={
-          socials.find((social) => social.ref === reference)?.ariaLabel
+          Socials.find((social) => social.ref === reference)?.ariaLabel
         }
         onClick={() => {
           notify(), copy(reference)
@@ -43,7 +43,7 @@ export const Icon = ({ children, reference, copyValue }: Icon) => {
       href={reference}
       target='_blank'
       className={'cursor-pointer'}
-      aria-label={socials.find((social) => social.ref === reference)?.ariaLabel}
+      aria-label={Socials.find((social) => social.ref === reference)?.ariaLabel}
     >
       {children}
     </Link>

src/components/SocialLayout.tsx

@@ -1,11 +1,11 @@
-import { socials } from '@/components/data/Socials'
+import { Socials } from '@/components/data/Socials'
 import { Icon } from '@/components/Icon'
 import React from 'react'
 
 export const SocialLayout = () => {
   return (
-    <div className='mt-3 grid w-48 grid-flow-col space-x-8 pl-1 text-2xl'>
+    <div className='mt-3 grid w-48 grid-flow-col space-x-8 pl-1 text-[1.7rem] leading-none'>
-      {socials.map((social) => (
+      {Socials.map((social) => (
         <Icon
           key={social.id}
           reference={social.ref}

src/components/SpotifyCard.tsx

@@ -48,7 +48,7 @@ export const NowPlayingCard = () => {
                 )}
               </h2>
             </div>
-            <div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-44'>
+            <div className='mt-2 bg-gray-200 rounded-full h-1 dark:bg-gray-700 bg-fixed flex w-48'>
               <div
                 className='bg-[#1DB954] h-1 rounded-full transition-width duration-300 ease-in-out'
                 style={{
@@ -60,7 +60,7 @@ export const NowPlayingCard = () => {
         </>
       ) : (
         <>
-          <HiMusicNote size={60} className='p-2.5' />
+          <HiMusicNote size={60} className='pl-1 p-2.5' />
           <div className='my-auto ml-4'>
             <div className='text-l sm:text-regular font-semibold'>
               Not listening to anything

src/components/ThemeSwitcher.tsx

@@ -1,35 +1,33 @@
-import { BsSunFill, BsMoonFill } from 'react-icons/bs'
+import { VscColorMode } from 'react-icons/vsc'
-import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 
 export const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false)
   const { theme, setTheme } = useTheme()
 
   const toggle = () => {
-    if (theme === 'dark') {
+    switch (theme) {
+      case 'dark':
         setTheme('light')
-    } else {
+        break
+      case 'light':
         setTheme('dark')
+        break
+      default:
+        setTheme('dark')
+        break
     }
   }
 
-  useEffect(() => setMounted(true), [])
-
-  if (!mounted) return null
-
   return (
     <button
       aria-label='Switch Theme'
       type='button'
-      className='ml-auto mr-5 mt-5 flex'
+      className={`ml-auto mr-5 mt-5 flex transition duration-300 ease-in-out ${
+        theme === 'light' ? 'hover:bg-gray-300' : 'dark:hover:bg-gray-700'
+      } p-2 rounded-full`}
       onClick={() => toggle()}
     >
-      {theme === 'light' ? (
+      <VscColorMode size={30} />
-        <BsMoonFill style={{ fill: 'black' }} size={25} />
-      ) : (
-        <BsSunFill size={25} />
-      )}
     </button>
   )
 }

src/components/data/Socials.ts

@@ -10,7 +10,7 @@ type Socials = {
   ariaLabel?: string
 }
 
-export const socials: Array<Socials> = [
+export const Socials: Array<Socials> = [
   {
     id: 1,
     ref: 'https://github.com/skidoodle',

src/pages/index.tsx

@@ -12,8 +12,8 @@ export default function Home() {
       <FadeIn>
         <div className='ml-[10%] mr-[10%]'>
           <div className='mx-auto mb-16 mt-32 flex max-w-3xl flex-col'>
-            <h1 className='text-7xl font-bold'>albert</h1>
+            <h1 className='text-[5rem] leading-none font-bold'>albert</h1>
-            <p className='mt-2 text-2xl font-semibold text-gray-600'>
+            <p className='mt-2 text-[1.6rem] leading-none font-semibold text-slate-600'>
               {age()}yo devops engineer
             </p>
             <SocialLayout />

src/styles/globals.scss

@@ -24,13 +24,3 @@
     border-radius: 10px;
   }
 }
-
-:root {
-  --background: #fff;
-  --foreground: #000;
-}
-
-[data-theme='dark'] {
-  --background: #000;
-  --foreground: #fff;
-}

src/utils/type.ts

@@ -14,3 +14,9 @@ export type SongResult = {
   duration: number
   is_playing: boolean
 }
+
+export type Icon = {
+  children: React.ReactNode
+  reference: string
+  copyValue?: boolean
+}