Merge pull request #14 from firehawk89/add-dark-theme

Add Dark Theme
firehawk89 · Jan 26, 2024 · cafb4f8 · cafb4f8
2 parents b744c6d + 19f442d
commit cafb4f8
Show file tree

Hide file tree

Showing 21 changed files with 240 additions and 61 deletions.
diff --git 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
 }
diff --git 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
diff --git a/package-lock.json b/package-lock.json
diff --git 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"
@@ -32,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"
   }

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,24 +3,24 @@
 @tailwind utilities;
 
 html {
-  --header-height: 3.875rem;
+  --header-height: 3.375rem;
   @apply scroll-smooth;
 }
 
 body {
-  @apply text-dark;
+  @apply text-dark dark:text-light;
 }
 
 .no-scroll {
   @apply overflow-hidden;
 }
 
 .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')) {
   html {
-    --header-height: 4.25rem;
+    --header-height: 3.75rem;
   }
 }
diff --git 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('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>
-        </body>
-      </html>
-    </Providers>
+        </Providers>
+      </body>
+    </html>
   )
 }
diff --git 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'
 
@@ -13,7 +14,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]',
+        '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
       )}
     >
@@ -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 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
@@ -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 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
@@ -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('relative z-30 h-5 w-7 cursor-pointer', 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>
   )

diff --git 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
@@ -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
@@ -9,14 +9,17 @@ 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">
-          <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
@@ -2,7 +2,13 @@ import { classnames } from '@/utils'
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
 
-type ButtonVariant = 'outline' | 'solid'
+const buttonVariants = {
+  icon: 'bg-transparent p-2 md:hover:text-accent',
+  outline:
+    'rounded-md border-2 border-accent bg-transparent px-5 py-2 text-accent md:hover:bg-accent md:hover:text-light',
+  solid:
+    'rounded-md border-2 border-accent bg-accent px-5 py-2 text-light md:hover:bg-opacity-80',
+}
 
 type ButtonProps = {
   children: ReactNode
@@ -11,12 +17,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> = ({
@@ -33,8 +34,8 @@ 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',
-            buttonStyles[variant],
+            'font-medium transition-all active:scale-95 md:text-lg',
+            buttonVariants[variant],
             className
           )}
           href={href}
@@ -44,8 +45,8 @@ 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],
+            'font-medium transition-all active:scale-95 md:text-lg',
+            buttonVariants[variant],
             className
           )}
           disabled={disabled}

diff --git 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>