refactor: 'use client' when appropriate

components/Header/Language/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
@@ -61,7 +63,7 @@ export const Language: React.FC = () => {
       >
         {i18n.locales.map((language, index) => {
           if (language === currentLanguage) {
-            return null
+            return <></>
           }
           return (
             <li

components/Header/SwitchTheme.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useState } from 'react'
 import classNames from 'clsx'
 import { useTheme } from 'next-themes'

components/OpenSource/Repository.tsx

@@ -1,5 +1,5 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { GitHubIcon } from 'components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
+import { GitHubIcon } from '@/components/Profile/SocialMediaList/SocialMediaIcons/GitHubIcon'
 
 export interface RepositoryProps {
   name: string

components/OpenSource/index.tsx

@@ -11,7 +11,7 @@ export const OpenSource: React.FC = () => {
       <div className='my-6 grid grid-cols-1 gap-6 md:w-10/12 md:grid-cols-2'>
         <Repository
           name='nodejs/node'
-          description='Node.js JavaScript runtime 🐢🚀'
+          description='Node.js JavaScript runtime ✨🐢🚀✨'
           href='https://github.com/nodejs/node/commits?author=theoludwig'
         />
         <Repository
@@ -21,12 +21,12 @@ export const OpenSource: React.FC = () => {
         />
         <Repository
           name='nrwl/nx'
-          description='Smart, Extensible Build Framework'
+          description='Smart, Fast and Extensible Build System'
           href='https://github.com/nrwl/nx/commits?author=theoludwig'
         />
         <Repository
           name='vercel/next.js'
-          description='The React Framework for Production'
+          description='The React Framework'
           href='https://github.com/vercel/next.js/commits?author=theoludwig'
         />
       </div>

components/Portfolio/PortfolioItem.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image'
 
-import { ShadowContainer } from 'components/design/ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
 
 export interface PortfolioItemProps {
   title: string

components/Profile/ProfileList/index.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import useTranslation from 'next-translate/useTranslation'
 import { useMemo } from 'react'
 
-import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from 'utils/getAge'
+import { BIRTH_DATE, BIRTH_DATE_STRING, getAge } from '@/utils/getAge'
 
 import { ProfileItem } from './ProfileItem'
 

components/Profile/SocialMediaList/index.tsx

@@ -16,7 +16,7 @@ export const SocialMediaList: React.FC = () => {
       <SocialMediaItem link='https://gitlab.com/theoludwig' ariaLabel='GitLab'>
         <GitLabIcon />
       </SocialMediaItem>
-      <SocialMediaItem link='https://www.npmjs.com/~theoludwig' ariaLabel='NPM'>
+      <SocialMediaItem link='https://www.npmjs.com/~theoludwig' ariaLabel='npm'>
         <NPMIcon />
       </SocialMediaItem>
       <SocialMediaItem

components/Skills/SkillsSection.tsx

@@ -1,4 +1,4 @@
-import { ShadowContainer } from 'components/design/ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
 
 export interface SkillsSectionProps {
   title: string

components/design/RevealFade.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useRef } from 'react'
 
 export const RevealFade: React.FC<React.PropsWithChildren> = (props) => {

components/design/Section/index.tsx

@@ -1,5 +1,5 @@
-import { ShadowContainer } from '../ShadowContainer'
+import { ShadowContainer } from '@/components/design/ShadowContainer'
-import { SectionHeading } from './SectionHeading'
+import { SectionHeading } from '@/components/design/Section/SectionHeading'
 
 type SectionProps = React.ComponentPropsWithRef<'section'> & {
   heading?: string

cypress/component/utils/getAge.cy.ts

@@ -1,4 +1,4 @@
-import { getAge } from '../../../utils/getAge'
+import { getAge } from '@/utils/getAge'
 
 describe('utils/getAge', () => {
   it('should calculate the right age of a person', () => {