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 } 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 diff --git a/package-lock.json b/package-lock.json index 07021e5..3ae6c3f 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" @@ -25,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" } @@ -4826,6 +4828,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", @@ -5398,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 97ba04f..946ddca 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" @@ -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 index 6bf12fc..86568d9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,12 +3,12 @@ @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 { @@ -16,11 +16,11 @@ 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')) { html { - --header-height: 4.25rem; + --header-height: 3.75rem; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fcd19d2..199b661 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -18,19 +18,16 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - - + + +
-
{children}
+
{children}
11111
- - - + + + ) } diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index f0efa32..9c76bd6 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' @@ -13,7 +14,7 @@ const Header: FC = ({ className }) => { return (
@@ -22,7 +23,10 @@ const Header: FC = ({ className }) => { My Work Contact Me - +
+ + +
) } 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..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 = ({ className }) => { return ( diff --git a/src/components/header/menu/menu-icon/menu-icon.tsx b/src/components/header/menu/menu-icon/menu-icon.tsx index 849c4ce..6ec2ae1 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 = ({ className }) => { return (
) 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 = ({ children, className, href }) => { return (
  • {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 = ({ children, className }) => { return (
      { return (
      -

      +

      Hi, I'm Anton Bochkovskyi

      -

      +

      Motivated Junior Front-End Developer with a passion for creating engaging, elegant and responsive user interfaces.

      diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 82b859e..d0011cf 100644 --- 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 = { - 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 = ({ @@ -33,8 +34,8 @@ const Button: FC = ({ {href ? ( = ({ ) : ( + ) + } + + return ( + + ) +} + +export default ThemeToggler 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 = ({ children }) => { - return {children} + return ( + + {children} + + ) } export default Providers 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 = ({ children, ...props }) => { + return {children} +} + +export default ThemeProvider 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 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',