feat(header): replace signature by a styled name

mateusfg7 · Mar 4, 2024 · 26e3c3b · 26e3c3b
1 parent d90609b
commit 26e3c3b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 18 deletions.
diff --git a/src/app/_components/header/index.tsx b/src/app/_components/header/index.tsx
@@ -2,16 +2,12 @@
 
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import Image from 'next/image'
 import { usePathname } from 'next/navigation'
 
 import { ToggleTheme } from './toggle-theme'
 import { MobileMenu } from './mobile-menu'
 import { Search } from './search'
 
-import signatureDark from './signature-dark.png'
-import signatureLight from './signature-light.png'
-
 const MenuItem: React.FC<{ name: string; path: string }> = ({ name, path }) => {
   const pathname = usePathname()
   const isHome = path === '/'
@@ -67,17 +63,11 @@ export function Header() {
     >
       <div className="content-container m-auto flex flex-wrap items-center justify-between">
         <div className="md:hidden" />
-        <Link href="/">
-          <Image
-            src={signatureDark}
-            alt="Mateus Felipe"
-            className="w-16 dark:hidden"
-          />
-          <Image
-            src={signatureLight}
-            alt="Mateus Felipe"
-            className="hidden w-16 dark:block"
-          />
+        <Link
+          href="/"
+          className="font-handwrite text-2xl font-bold drop-shadow-lg"
+        >
+          Mateus F.
         </Link>
         <div className="hidden flex-wrap items-center justify-center gap-8 md:flex">
           <nav className="flex flex-wrap items-center justify-center gap-5">

diff --git a/src/app/_components/header/signature-dark.png b/src/app/_components/header/signature-dark.png
diff --git a/src/app/_components/header/signature-light.png b/src/app/_components/header/signature-light.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata, Viewport } from 'next'
 import Script from 'next/script'
-import { Inter } from 'next/font/google'
+import { Inter, Caveat } from 'next/font/google'
 
 import { config } from 'global-config'
 import { Header } from './_components/header'
@@ -71,6 +71,13 @@ const inter = Inter({
   display: 'swap'
 })
 
+const dancingScript = Caveat({
+  subsets: ['latin'],
+  weight: ['700'],
+  variable: '--font-caveat',
+  display: 'swap'
+})
+
 export default function RootLayout({
   children
 }: {
@@ -85,7 +92,9 @@ export default function RootLayout({
           data-website-id={process.env.UMAMI_WEBSITE_ID}
         />
       </head>
-      <body className={`scroll-smooth ${inter.variable}`}>
+      <body
+        className={`scroll-smooth ${inter.variable} ${dancingScript.variable}`}
+      >
         <Providers>
           <Header />
           <div>{children}</div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,7 +10,8 @@ const config: Config = {
         20: '20deg'
       },
       fontFamily: {
-        sans: 'var(--font-inter)'
+        sans: 'var(--font-inter)',
+        handwrite: 'var(--font-caveat)'
       },
       colors: {
         neutral: {