Add Footer

src/app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 html {
-  --header-height: 3.375rem;
+  --header-height: 4.25rem;
   @apply scroll-smooth;
 }
 

src/app/layout.tsx

@@ -1,5 +1,10 @@
+// TODO: Adjust site metadata
+// TODO: Adjust components props types
+// TODO: Add 404 page
+
 import type { Metadata } from 'next'
 
+import Footer from '@/components/footer'
 import Header from '@/components/header/header'
 import Providers from '@/store/providers'
 import { cn } from '@/utils'
@@ -23,7 +28,7 @@ export default function RootLayout({
         <Providers>
           <Header />
           <main className="flex-shrink flex-grow basis-0">{children}</main>
-          <div>11111</div>
+          <Footer />
         </Providers>
       </body>
     </html>

src/components/footer.tsx

@@ -0,0 +1,21 @@
+import Socials from '@/components/ui/socials/socials'
+import { cn } from '@/utils'
+import { FC, HTMLAttributes } from 'react'
+
+interface FooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+const Footer: FC<FooterProps> = ({ className }) => {
+  return (
+    <footer
+      className={cn(
+        'flex items-center justify-between gap-5 border-t border-accent bg-dark px-8 py-5 text-light lg:px-10',
+        className
+      )}
+    >
+      <p>&copy; {new Date().getFullYear()} Bochkovskyi Anton</p>
+      <Socials />
+    </footer>
+  )
+}
+
+export default Footer

src/components/header/header-navbar.tsx

@@ -19,13 +19,13 @@ const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
   return (
     <nav
       className={cn(
-        'fixed left-0 right-0 top-0 z-20 -translate-y-full border-b border-accent bg-light py-8 transition-transform duration-500 dark:bg-black md:static md:translate-y-0 md:border-none md:bg-transparent md:p-0 md:dark:bg-transparent',
+        'fixed left-0 right-0 top-0 z-20 -translate-y-full border-b border-accent bg-light py-8 transition-transform duration-500 dark:bg-dark md:static md:translate-y-0 md:border-none md:bg-transparent md:p-0 md:dark:bg-transparent',
         isMenuOpened && 'translate-y-0',
         className
       )}
     >
       <Menu
-        className="mx-auto"
+        className="mx-auto uppercase"
         orientation={isMobile ? 'vertical' : 'horizontal'}
       >
         <MenuItem href="/#about-me">About Me</MenuItem>

src/components/header/header.tsx

@@ -13,7 +13,7 @@ const Header: FC<HeaderProps> = ({ className }) => {
   return (
     <header
       className={cn(
-        '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',
+        'fixed left-0 top-0 z-10 w-full bg-light bg-opacity-10 px-8 py-5 shadow-blur backdrop-blur-[8px] lg:px-10',
         className
       )}
     >

src/components/header/menu/menu-item.tsx

@@ -16,7 +16,7 @@ const MenuItem: FC<MenuItemProps> = ({ children, className, href }) => {
   return (
     <li className={className} onClick={toggleMenu}>
       <Link
-        className="text-lg font-medium uppercase transition-colors md:hover:text-accent"
+        className="text-lg font-medium transition-colors md:hover:text-accent"
         href={href}
       >
         {children}

src/components/sections/projects/project-card.tsx

@@ -1,3 +1,5 @@
+// TODO: Add projects individual routes
+
 import Card from '@/components/ui/card'
 import Heading from '@/components/ui/heading'
 import ImagePlaceholder from '@/components/ui/image-placeholder'

tsconfig.json

@@ -16,13 +16,13 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["src/*"],
-    },
+      "@/*": ["src/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }