From 2f6baccd1a04a55977ad5e9507172e6eadb89c3b Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:42:42 +0200
Subject: [PATCH 01/24] add darkMode support

---
 tailwind.config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index a436c7f..4cf83ad 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: 'class',
   plugins: [],
   theme: {
     extend: {
@@ -17,7 +18,7 @@ const config: Config = {
         'top-down': 'top-down 0.5s ease forwards',
         'top-up': 'top-up 0.5s ease forwards',
       },
-      boxShadow: { blur: '0 4px 30px rgba(0, 0, 0, 0.1);' },
+      boxShadow: { blur: '0 4px 30px rgba(0, 0, 0, 0.1)' },
       colors: {
         accent: '#ff5100',
         dark: '#1a1a1a',

From 00effe409c25a6d0cc40c67fb898b53cc5481894 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:43:33 +0200
Subject: [PATCH 02/24] update buttonVariants and variants prop usage

---
 src/components/ui/button.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 82b859e..8f772e2 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -2,7 +2,10 @@ import { classnames } from '@/utils'
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 
-type ButtonVariant = 'outline' | 'solid'
+const buttonVariants = {
+  outline: 'text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
+  solid: 'text-light bg-accent md:hover:bg-opacity-80',
+}
 
 type ButtonProps = {
   children: ReactNode
@@ -11,12 +14,7 @@ type ButtonProps = {
   href?: string
   onClick?: () => void
   type?: 'button' | 'reset' | 'submit'
-  variant?: ButtonVariant
-}
-
-const buttonStyles: Record<ButtonVariant, string> = {
-  outline: 'text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
-  solid: 'text-light bg-accent md:hover:bg-opacity-80',
+  variant?: keyof typeof buttonVariants
 }
 
 const Button: FC<ButtonProps> = ({
@@ -34,7 +32,7 @@ const Button: FC<ButtonProps> = ({
         <Link
           className={classnames(
             'px-5 py-2 rounded-md border-2 border-accent text-lg font-medium transition-all active:scale-95',
-            buttonStyles[variant],
+            buttonVariants[variant],
             className
           )}
           href={href}
@@ -45,7 +43,7 @@ const Button: FC<ButtonProps> = ({
         <button
           className={classnames(
             'px-5 py-2 rounded-md border-2 border-accent md:text-lg font-medium transition-all active:scale-95',
-            buttonStyles[variant],
+            buttonVariants[variant],
             className
           )}
           disabled={disabled}

From 6d2314ce7cbaf6b15c815a3eea7aae19f0c39563 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:44:08 +0200
Subject: [PATCH 03/24] update styles

---
 src/components/header/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index f0efa32..d1a16fd 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -13,7 +13,7 @@ const Header: FC<HeaderProps> = ({ className }) => {
   return (
     <header
       className={classnames(
-        'px-8 lg:px-10 py-5 fixed z-10 top-0 left-0 w-full bg-light bg-opacity-10 shadow-blur backdrop-blur-[8px]',
+        'px-8 lg:px-10 py-4 fixed z-10 top-0 left-0 w-full bg-light bg-opacity-10 shadow-blur backdrop-blur-[8px]',
         className
       )}
     >

From cdb0d1525e23b1a9d97bb204a8b6cf4aadc6dba5 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:44:29 +0200
Subject: [PATCH 04/24] update styles

---
 src/components/header/menu/menu-icon/menu-icon-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/menu/menu-icon/menu-icon-bar.tsx b/src/components/header/menu/menu-icon/menu-icon-bar.tsx
index 6b4ab89..871c73d 100644
--- a/src/components/header/menu/menu-icon/menu-icon-bar.tsx
+++ b/src/components/header/menu/menu-icon/menu-icon-bar.tsx
@@ -7,7 +7,7 @@ const MenuIconBar: FC<MenuIconBarProps> = ({ className }) => {
   return (
     <span
       className={classnames(
-        'relative block w-full h-0.5 rounded-md bg-dark transition-all',
+        'absolute left-0 right-0 block w-full h-0.5 rounded-sm bg-dark transition-all',
         className
       )}
     />

From b892dde146a82df007c6134efd066ce8c0d0a791 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:46:46 +0200
Subject: [PATCH 05/24] update MenuIconBar components styles

---
 .../header/menu/menu-icon/menu-icon.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/header/menu/menu-icon/menu-icon.tsx b/src/components/header/menu/menu-icon/menu-icon.tsx
index 849c4ce..a3e635d 100644
--- a/src/components/header/menu/menu-icon/menu-icon.tsx
+++ b/src/components/header/menu/menu-icon/menu-icon.tsx
@@ -15,20 +15,26 @@ const MenuIcon: FC<MenuIconProps> = ({ className }) => {
 
   return (
     <div
-      className={classnames(
-        'cursor-pointer relative z-30 w-7 flex flex-col gap-2',
-        className
-      )}
+      className={classnames('cursor-pointer relative z-30 w-7 h-5', className)}
       onClick={toggleMenu}
     >
       <MenuIconBar
-        className={isMenuOpened ? 'animate-top-down' : 'animate-top-up'}
+        className={classnames(
+          isMenuOpened ? 'top-1/2 -translate-y-1/2 rotate-45' : 'top-0'
+        )}
       />
       <MenuIconBar
-        className={isMenuOpened ? 'animate-scaled-none' : 'animate-scaled'}
+        className={classnames(
+          'top-1/2 -translate-y-1/2',
+          isMenuOpened && 'opacity-0'
+        )}
       />
       <MenuIconBar
-        className={isMenuOpened ? 'animate-bottom-up' : 'animate-bottom-down'}
+        className={classnames(
+          isMenuOpened
+            ? 'top-1/2 -translate-y-1/2 -rotate-45'
+            : 'top-full -translate-y-full'
+        )}
       />
     </div>
   )

From 2e3f40c3a9c961b38cb8f6a9817dfaabd4456794 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 17:47:14 +0200
Subject: [PATCH 06/24] update header height variable

---
 src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 6bf12fc..f1a8956 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 html {
-  --header-height: 3.875rem;
+  --header-height: 3.375rem;
   @apply scroll-smooth;
 }
 
@@ -21,6 +21,6 @@ body {
 
 @media (min-width: theme('screens.md')) {
   html {
-    --header-height: 4.25rem;
+    --header-height: 3.75rem;
   }
 }

From 684c3ca82a3ab96e4c1a5d4b246ef9c4deede1c9 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Thu, 25 Jan 2024 21:17:50 +0200
Subject: [PATCH 07/24] add next-themes package

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 2 files changed, 12 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 07021e5..25fbdff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "14.1.0",
+        "next-themes": "^0.2.1",
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.0.1"
@@ -4826,6 +4827,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz",
+      "integrity": "sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==",
+      "peerDependencies": {
+        "next": "*",
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 97ba04f..7746f84 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "next": "14.1.0",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.0.1"

From d4654dd79227b58463ec014e002062267da74cab Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 11:27:21 +0200
Subject: [PATCH 08/24] add react strict mode

---
 next.config.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index 767719f..a843cbe 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  reactStrictMode: true,
+}
 
 module.exports = nextConfig

From ee4487ca405e019c361c8c1d0887c309066e14d2 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 11:27:48 +0200
Subject: [PATCH 09/24] add Theme enum

---
 src/types/enums/Theme.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 src/types/enums/Theme.ts

diff --git a/src/types/enums/Theme.ts b/src/types/enums/Theme.ts
new file mode 100644
index 0000000..f7d6341
--- /dev/null
+++ b/src/types/enums/Theme.ts
@@ -0,0 +1,8 @@
+export const THEME = {
+  dark: 'dark',
+  light: 'light',
+} as const
+
+type Theme = keyof typeof THEME
+
+export default Theme

From baa7a71851beab5c93206119a3df53025d87cddc Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 13:38:23 +0200
Subject: [PATCH 10/24] add icon button variant, update styles

---
 src/components/ui/button.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8f772e2..6cb2446 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,8 +3,11 @@ import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 
 const buttonVariants = {
-  outline: 'text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
-  solid: 'text-light bg-accent md:hover:bg-opacity-80',
+  icon: 'p-2 bg-transparent md:hover:text-accent',
+  outline:
+    'px-5 py-2 rounded-md border-2 border-accent text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
+  solid:
+    'px-5 py-2 rounded-md border-2 border-accent text-light bg-accent md:hover:bg-opacity-80',
 }
 
 type ButtonProps = {
@@ -31,7 +34,7 @@ const Button: FC<ButtonProps> = ({
       {href ? (
         <Link
           className={classnames(
-            'px-5 py-2 rounded-md border-2 border-accent text-lg font-medium transition-all active:scale-95',
+            'md:text-lg font-medium transition-all active:scale-95',
             buttonVariants[variant],
             className
           )}
@@ -42,7 +45,7 @@ const Button: FC<ButtonProps> = ({
       ) : (
         <button
           className={classnames(
-            'px-5 py-2 rounded-md border-2 border-accent md:text-lg font-medium transition-all active:scale-95',
+            'md:text-lg font-medium transition-all active:scale-95',
             buttonVariants[variant],
             className
           )}

From a593927cf177b4a91656d7f50836e66ae0aa2f07 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 13:38:50 +0200
Subject: [PATCH 11/24] update styles

---
 src/components/ui/socials/socials-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/socials/socials-item.tsx b/src/components/ui/socials/socials-item.tsx
index f35f525..cbb6f89 100644
--- a/src/components/ui/socials/socials-item.tsx
+++ b/src/components/ui/socials/socials-item.tsx
@@ -11,7 +11,7 @@ const SocialsItem: FC<SocialsItemProps> = ({ children, className, href }) => {
   return (
     <li className={className}>
       <Link
-        className="text-3xl md:text-4xl hover:text-accent transition-colors"
+        className="hover:text-accent transition-colors"
         href={href}
         target="_blank"
       >

From 69847be88ac209273d150fecbe0ec582366556e3 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 14:25:41 +0200
Subject: [PATCH 12/24] add theme provider

---
 src/store/providers/theme-provider.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 src/store/providers/theme-provider.tsx

diff --git a/src/store/providers/theme-provider.tsx b/src/store/providers/theme-provider.tsx
new file mode 100644
index 0000000..f0a6bdc
--- /dev/null
+++ b/src/store/providers/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ThemeProviderProps } from 'next-themes/dist/types'
+import { FC } from 'react'
+
+const ThemeProvider: FC<ThemeProviderProps> = ({ children, ...props }) => {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
+
+export default ThemeProvider

From 1dd0cb27cc8b644ce89e1d003402b38312465555 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 14:26:10 +0200
Subject: [PATCH 13/24] utilize ThemeProvider

---
 src/store/providers/index.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/store/providers/index.tsx b/src/store/providers/index.tsx
index 29c8c10..cc29ffc 100644
--- a/src/store/providers/index.tsx
+++ b/src/store/providers/index.tsx
@@ -1,3 +1,4 @@
+import ThemeProvider from '@/store/providers/theme-provider'
 import { FC, ReactNode } from 'react'
 
 import HeaderProvider from './header-provider'
@@ -5,7 +6,16 @@ import HeaderProvider from './header-provider'
 type ProvidersProps = { children: ReactNode }
 
 const Providers: FC<ProvidersProps> = ({ children }) => {
-  return <HeaderProvider>{children}</HeaderProvider>
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      disableTransitionOnChange
+      enableSystem
+    >
+      <HeaderProvider>{children}</HeaderProvider>
+    </ThemeProvider>
+  )
 }
 
 export default Providers

From 54e946e0061ed6602590f7c826434428122ee9d7 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 14:31:30 +0200
Subject: [PATCH 14/24] refactor social item props, update return statement

---
 src/components/ui/socials/socials-item.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/socials/socials-item.tsx b/src/components/ui/socials/socials-item.tsx
index cbb6f89..220d2bf 100644
--- a/src/components/ui/socials/socials-item.tsx
+++ b/src/components/ui/socials/socials-item.tsx
@@ -1,13 +1,20 @@
 import Link from 'next/link'
-import { FC, ReactNode } from 'react'
+import { ComponentType, FC } from 'react'
+import { IconBaseProps } from 'react-icons'
 
 type SocialsItemProps = {
-  children: ReactNode
+  Icon: ComponentType<IconBaseProps>
   className?: string
   href: string
+  title: string
 }
 
-const SocialsItem: FC<SocialsItemProps> = ({ children, className, href }) => {
+const SocialsItem: FC<SocialsItemProps> = ({
+  Icon,
+  className,
+  href,
+  title,
+}) => {
   return (
     <li className={className}>
       <Link
@@ -15,7 +22,8 @@ const SocialsItem: FC<SocialsItemProps> = ({ children, className, href }) => {
         href={href}
         target="_blank"
       >
-        {children}
+        <Icon aria-hidden="true" className="w-8 h-8" focusable="false" />
+        <span className="sr-only">{title}</span>
       </Link>
     </li>
   )

From 45316f7493352304d8e3e85a16725d58e8184047 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 14:31:59 +0200
Subject: [PATCH 15/24] update SocialItem components usage

---
 src/components/ui/socials/socials.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/socials/socials.tsx b/src/components/ui/socials/socials.tsx
index f6a64f6..09ea4d3 100644
--- a/src/components/ui/socials/socials.tsx
+++ b/src/components/ui/socials/socials.tsx
@@ -10,12 +10,16 @@ type SocialsProps = {
 const Socials: FC<SocialsProps> = ({ className }) => {
   return (
     <ul className={classnames('p-5 flex gap-8', className)}>
-      <SocialsItem href="https://www.linkedin.com/in/anton-bochkovskyi/">
-        <FaLinkedin />
-      </SocialsItem>
-      <SocialsItem href="https://github.com/firehawk89">
-        <FaGithub />
-      </SocialsItem>
+      <SocialsItem
+        Icon={FaLinkedin}
+        href="https://www.linkedin.com/in/anton-bochkovskyi/"
+        title="LinkedIn"
+      />
+      <SocialsItem
+        Icon={FaGithub}
+        href="https://github.com/firehawk89"
+        title="GitHub"
+      />
     </ul>
   )
 }

From e7bd1b82e3275355d864068ae35ff816b783dfec Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:39:59 +0200
Subject: [PATCH 16/24] place Providers component after body declaration

---
 src/app/layout.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fcd19d2..09626b0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,19 +18,16 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <Providers>
-      <html lang="en">
-        <body
-          className={classnames(
-            'min-h-screen flex flex-col',
-            raleway.className
-          )}
-        >
+    <html lang="en">
+      <body
+        className={classnames('min-h-screen flex flex-col', raleway.className)}
+      >
+        <Providers>
           <Header />
           <main className="flex-grow flex-shrink basis-0">{children}</main>
           <div>11111</div>
-        </body>
-      </html>
-    </Providers>
+        </Providers>
+      </body>
+    </html>
   )
 }

From 7cb3c216d0b12bf6eea8d313b77619ee7ab61191 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:41:33 +0200
Subject: [PATCH 17/24] utilize ThemeToggler component

---
 src/components/header/header.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index d1a16fd..1cf1ff6 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,4 +1,5 @@
 import Menu from '@/components/header/menu/menu'
+import ThemeToggler from '@/components/ui/theme-toggler'
 import { classnames } from '@/utils'
 import { FC } from 'react'
 
@@ -22,7 +23,10 @@ const Header: FC<HeaderProps> = ({ className }) => {
         <MenuItem href="/#my-projects">My Work</MenuItem>
         <MenuItem href="/#contact-me">Contact Me</MenuItem>
       </Menu>
-      <MenuIcon className="md:hidden ml-auto" />
+      <div className="flex justify-between items-center">
+        <ThemeToggler className="-m-2 md:m-0 md:absolute md:top-1/2 md:-translate-y-1/2 md:right-10" />
+        <MenuIcon className="md:hidden" />
+      </div>
     </header>
   )
 }

From f333f3455d7b047b4760e7cf4fa8a90fa57255f4 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:42:09 +0200
Subject: [PATCH 18/24] add theme-toggler component

---
 src/components/ui/theme-toggler.tsx | 39 +++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ui/theme-toggler.tsx

diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx
new file mode 100644
index 0000000..932d372
--- /dev/null
+++ b/src/components/ui/theme-toggler.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import Button from '@/components/ui/button'
+import Theme from '@/types/enums/Theme'
+import { useTheme } from 'next-themes'
+import { FC, useEffect, useState } from 'react'
+import { CiDark, CiLight } from 'react-icons/ci'
+
+type ThemeTogglerProps = { className?: string }
+
+const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
+  const [mounted, setMounted] = useState<boolean>(false)
+  const { resolvedTheme, setTheme } = useTheme()
+  const isDarkTheme = (resolvedTheme as Theme) === 'dark'
+
+  const toggleTheme = () => (isDarkTheme ? setTheme('light') : setTheme('dark'))
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) {
+    return (
+      <Button className={className} variant="icon">
+        <div className="w-6 h-6 rounded-full bg-gray-300 animate-pulse" />
+      </Button>
+    )
+  }
+
+  return (
+    <Button className={className} onClick={toggleTheme} variant="icon">
+      {isDarkTheme ? (
+        <CiDark className="w-6 h-6" />
+      ) : (
+        <CiLight className="w-6 h-6" />
+      )}
+    </Button>
+  )
+}
+
+export default ThemeToggler

From 76ed4bc9d75ebc83cbfb8b56aefd08724770bb99 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:50:54 +0200
Subject: [PATCH 19/24] uupdate styles

---
 src/components/pages/hero.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/hero.tsx b/src/components/pages/hero.tsx
index 073579a..3ee2985 100644
--- a/src/components/pages/hero.tsx
+++ b/src/components/pages/hero.tsx
@@ -9,7 +9,10 @@ import styles from './hero.module.css'
 const Hero: FC = () => {
   return (
     <section
-      className={classnames('relative bg-ghost', styles['hero-container'])}
+      className={classnames(
+        'relative bg-ghost dark:bg-dark',
+        styles['hero-container']
+      )}
     >
       <Content className="flex flex-col items-center justify-center text-center">
         <div className="max-w-4xl">

From 391b8cfc15968c7ab0ba07c66d1ade45f3223d44 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:51:46 +0200
Subject: [PATCH 20/24] add tailwind prettier plugin

---
 package-lock.json | 72 ++++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |  3 +-
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 25fbdff..3ae6c3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,8 @@
         "husky": "^8.0.3",
         "lint-staged": "^15.2.0",
         "postcss": "^8",
-        "prettier": "3.2.4",
+        "prettier": "^3.2.4",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.0",
         "typescript": "^5"
       }
@@ -5409,6 +5410,75 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index 7746f84..946ddca 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "postcss": "^8",
-    "prettier": "3.2.4",
+    "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

From 6250552c46a6f6449a11621143b2e3302c998ea2 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 15:59:23 +0200
Subject: [PATCH 21/24] update styles

---
 src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f1a8956..86568d9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,7 +8,7 @@ html {
 }
 
 body {
-  @apply text-dark;
+  @apply text-dark dark:text-light;
 }
 
 .no-scroll {
@@ -16,7 +16,7 @@ body {
 }
 
 .menu-icon {
-  @apply before:absolute before:top-0 before:left-0 before:h-0.5 after:h-0.5;
+  @apply before:absolute before:left-0 before:top-0 before:h-0.5 after:h-0.5;
 }
 
 @media (min-width: theme('screens.md')) {

From e046f6a951de271415906a79115ecee2300c4a92 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 16:14:52 +0200
Subject: [PATCH 22/24] utilize prettier tailwind plugin

---
 .prettierrc | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index fa51da2..c357370 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,8 @@
 {
-  "trailingComma": "es5",
+  "plugins": ["prettier-plugin-tailwindcss"],
   "tabWidth": 2,
+  "tailwindConfig": "./tailwind.config.ts",
+  "trailingComma": "es5",
   "semi": false,
   "singleQuote": true
 }

From ba90e888c731652a038e832bb32a299651480a19 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 16:16:14 +0200
Subject: [PATCH 23/24] format with prettier

---
 src/app/layout.tsx                                     |  4 ++--
 src/components/header/header.tsx                       |  6 +++---
 src/components/header/menu/menu-icon/menu-icon-bar.tsx |  2 +-
 src/components/header/menu/menu-icon/menu-icon.tsx     |  2 +-
 src/components/header/menu/menu-item.tsx               |  2 +-
 src/components/header/menu/menu.tsx                    |  2 +-
 src/components/pages/hero.tsx                          |  4 ++--
 src/components/ui/button.tsx                           | 10 +++++-----
 src/components/ui/content.tsx                          |  2 +-
 src/components/ui/socials/socials-item.tsx             |  4 ++--
 src/components/ui/socials/socials.tsx                  |  2 +-
 src/components/ui/theme-toggler.tsx                    |  6 +++---
 12 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 09626b0..199b661 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,11 +20,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={classnames('min-h-screen flex flex-col', raleway.className)}
+        className={classnames('flex min-h-screen flex-col', raleway.className)}
       >
         <Providers>
           <Header />
-          <main className="flex-grow flex-shrink basis-0">{children}</main>
+          <main className="flex-shrink flex-grow basis-0">{children}</main>
           <div>11111</div>
         </Providers>
       </body>
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 1cf1ff6..9c76bd6 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -14,7 +14,7 @@ const Header: FC<HeaderProps> = ({ className }) => {
   return (
     <header
       className={classnames(
-        'px-8 lg:px-10 py-4 fixed z-10 top-0 left-0 w-full bg-light bg-opacity-10 shadow-blur backdrop-blur-[8px]',
+        'fixed left-0 top-0 z-10 w-full bg-light bg-opacity-10 px-8 py-4 shadow-blur backdrop-blur-[8px] lg:px-10',
         className
       )}
     >
@@ -23,8 +23,8 @@ const Header: FC<HeaderProps> = ({ className }) => {
         <MenuItem href="/#my-projects">My Work</MenuItem>
         <MenuItem href="/#contact-me">Contact Me</MenuItem>
       </Menu>
-      <div className="flex justify-between items-center">
-        <ThemeToggler className="-m-2 md:m-0 md:absolute md:top-1/2 md:-translate-y-1/2 md:right-10" />
+      <div className="flex items-center justify-between">
+        <ThemeToggler className="-m-2 md:absolute md:right-10 md:top-1/2 md:m-0 md:-translate-y-1/2" />
         <MenuIcon className="md:hidden" />
       </div>
     </header>
diff --git a/src/components/header/menu/menu-icon/menu-icon-bar.tsx b/src/components/header/menu/menu-icon/menu-icon-bar.tsx
index 871c73d..b400caf 100644
--- a/src/components/header/menu/menu-icon/menu-icon-bar.tsx
+++ b/src/components/header/menu/menu-icon/menu-icon-bar.tsx
@@ -7,7 +7,7 @@ const MenuIconBar: FC<MenuIconBarProps> = ({ className }) => {
   return (
     <span
       className={classnames(
-        'absolute left-0 right-0 block w-full h-0.5 rounded-sm bg-dark transition-all',
+        'absolute left-0 right-0 block h-0.5 w-full rounded-sm bg-dark transition-all',
         className
       )}
     />
diff --git a/src/components/header/menu/menu-icon/menu-icon.tsx b/src/components/header/menu/menu-icon/menu-icon.tsx
index a3e635d..6ec2ae1 100644
--- a/src/components/header/menu/menu-icon/menu-icon.tsx
+++ b/src/components/header/menu/menu-icon/menu-icon.tsx
@@ -15,7 +15,7 @@ const MenuIcon: FC<MenuIconProps> = ({ className }) => {
 
   return (
     <div
-      className={classnames('cursor-pointer relative z-30 w-7 h-5', className)}
+      className={classnames('relative z-30 h-5 w-7 cursor-pointer', className)}
       onClick={toggleMenu}
     >
       <MenuIconBar
diff --git a/src/components/header/menu/menu-item.tsx b/src/components/header/menu/menu-item.tsx
index 6d13ad6..d275d3a 100644
--- a/src/components/header/menu/menu-item.tsx
+++ b/src/components/header/menu/menu-item.tsx
@@ -11,7 +11,7 @@ const MenuItem: FC<MenuItemProps> = ({ children, className, href }) => {
   return (
     <li className={className}>
       <Link
-        className="text-lg font-medium uppercase md:hover:text-accent transition-colors"
+        className="text-lg font-medium uppercase transition-colors md:hover:text-accent"
         href={href}
       >
         {children}
diff --git a/src/components/header/menu/menu.tsx b/src/components/header/menu/menu.tsx
index 7880b44..e47029c 100644
--- a/src/components/header/menu/menu.tsx
+++ b/src/components/header/menu/menu.tsx
@@ -15,7 +15,7 @@ const Menu: FC<MenuProps> = ({ children, className }) => {
   return (
     <ul
       className={classnames(
-        'py-8 md:p-0 fixed md:static z-20 top-0 left-0 md:translate-y-0 w-full md:w-fit flex flex-col md:flex-row justify-center md:justify-stretch items-center md:items-stretch gap-6 md:gap-10 bg-light md:bg-transparent transition-transform duration-500',
+        'fixed left-0 top-0 z-20 flex w-full flex-col items-center justify-center gap-6 bg-light py-8 transition-transform duration-500 md:static md:w-fit md:translate-y-0 md:flex-row md:items-stretch md:justify-stretch md:gap-10 md:bg-transparent md:p-0',
         isMenuOpened ? 'translate-y-0' : '-translate-y-full',
         className
       )}
diff --git a/src/components/pages/hero.tsx b/src/components/pages/hero.tsx
index 3ee2985..45b5b9b 100644
--- a/src/components/pages/hero.tsx
+++ b/src/components/pages/hero.tsx
@@ -16,10 +16,10 @@ const Hero: FC = () => {
     >
       <Content className="flex flex-col items-center justify-center text-center">
         <div className="max-w-4xl">
-          <h1 className="text-4xl md:text-5xl font-bold">
+          <h1 className="text-4xl font-bold md:text-5xl">
             Hi, I&apos;m <span className="text-accent">Anton Bochkovskyi</span>
           </h1>
-          <p className="mt-4 md:text-xl font-medium">
+          <p className="mt-4 font-medium md:text-xl">
             Motivated Junior Front-End Developer with a passion for creating
             engaging, elegant and responsive user interfaces.
           </p>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 6cb2446..d0011cf 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,11 +3,11 @@ import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 
 const buttonVariants = {
-  icon: 'p-2 bg-transparent md:hover:text-accent',
+  icon: 'bg-transparent p-2 md:hover:text-accent',
   outline:
-    'px-5 py-2 rounded-md border-2 border-accent text-accent bg-transparent md:hover:text-light md:hover:bg-accent',
+    'rounded-md border-2 border-accent bg-transparent px-5 py-2 text-accent md:hover:bg-accent md:hover:text-light',
   solid:
-    'px-5 py-2 rounded-md border-2 border-accent text-light bg-accent md:hover:bg-opacity-80',
+    'rounded-md border-2 border-accent bg-accent px-5 py-2 text-light md:hover:bg-opacity-80',
 }
 
 type ButtonProps = {
@@ -34,7 +34,7 @@ const Button: FC<ButtonProps> = ({
       {href ? (
         <Link
           className={classnames(
-            'md:text-lg font-medium transition-all active:scale-95',
+            'font-medium transition-all active:scale-95 md:text-lg',
             buttonVariants[variant],
             className
           )}
@@ -45,7 +45,7 @@ const Button: FC<ButtonProps> = ({
       ) : (
         <button
           className={classnames(
-            'md:text-lg font-medium transition-all active:scale-95',
+            'font-medium transition-all active:scale-95 md:text-lg',
             buttonVariants[variant],
             className
           )}
diff --git a/src/components/ui/content.tsx b/src/components/ui/content.tsx
index 88e4b77..e394ef8 100644
--- a/src/components/ui/content.tsx
+++ b/src/components/ui/content.tsx
@@ -6,7 +6,7 @@ type ContentProps = { children: ReactNode; className?: string }
 const Content: FC<ContentProps> = ({ children, className }) => {
   return (
     <div
-      className={classnames('mx-auto px-5 w-full h-full max-w-7xl', className)}
+      className={classnames('mx-auto h-full w-full max-w-7xl px-5', className)}
     >
       {children}
     </div>
diff --git a/src/components/ui/socials/socials-item.tsx b/src/components/ui/socials/socials-item.tsx
index 220d2bf..39adab4 100644
--- a/src/components/ui/socials/socials-item.tsx
+++ b/src/components/ui/socials/socials-item.tsx
@@ -18,11 +18,11 @@ const SocialsItem: FC<SocialsItemProps> = ({
   return (
     <li className={className}>
       <Link
-        className="hover:text-accent transition-colors"
+        className="transition-colors hover:text-accent"
         href={href}
         target="_blank"
       >
-        <Icon aria-hidden="true" className="w-8 h-8" focusable="false" />
+        <Icon aria-hidden="true" className="h-8 w-8" focusable="false" />
         <span className="sr-only">{title}</span>
       </Link>
     </li>
diff --git a/src/components/ui/socials/socials.tsx b/src/components/ui/socials/socials.tsx
index 09ea4d3..b1f0df1 100644
--- a/src/components/ui/socials/socials.tsx
+++ b/src/components/ui/socials/socials.tsx
@@ -9,7 +9,7 @@ type SocialsProps = {
 
 const Socials: FC<SocialsProps> = ({ className }) => {
   return (
-    <ul className={classnames('p-5 flex gap-8', className)}>
+    <ul className={classnames('flex gap-8 p-5', className)}>
       <SocialsItem
         Icon={FaLinkedin}
         href="https://www.linkedin.com/in/anton-bochkovskyi/"
diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx
index 932d372..f5ded0c 100644
--- a/src/components/ui/theme-toggler.tsx
+++ b/src/components/ui/theme-toggler.tsx
@@ -20,7 +20,7 @@ const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
   if (!mounted) {
     return (
       <Button className={className} variant="icon">
-        <div className="w-6 h-6 rounded-full bg-gray-300 animate-pulse" />
+        <div className="h-6 w-6 animate-pulse rounded-full bg-gray-300" />
       </Button>
     )
   }
@@ -28,9 +28,9 @@ const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
   return (
     <Button className={className} onClick={toggleTheme} variant="icon">
       {isDarkTheme ? (
-        <CiDark className="w-6 h-6" />
+        <CiDark className="h-6 w-6" />
       ) : (
-        <CiLight className="w-6 h-6" />
+        <CiLight className="h-6 w-6" />
       )}
     </Button>
   )

From 19f442de75009862f39e39ae433741e275077692 Mon Sep 17 00:00:00 2001
From: Bochkovskyi <unundertale1@ukr.net>
Date: Fri, 26 Jan 2024 16:18:58 +0200
Subject: [PATCH 24/24] update styles

---
 src/components/ui/theme-toggler.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/theme-toggler.tsx b/src/components/ui/theme-toggler.tsx
index f5ded0c..13521ac 100644
--- a/src/components/ui/theme-toggler.tsx
+++ b/src/components/ui/theme-toggler.tsx
@@ -20,7 +20,7 @@ const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
   if (!mounted) {
     return (
       <Button className={className} variant="icon">
-        <div className="h-6 w-6 animate-pulse rounded-full bg-gray-300" />
+        <div className="h-6 w-6 animate-pulse rounded-full bg-gray-200 dark:bg-gray-600" />
       </Button>
     )
   }