Add my logo to layout

MarcoEscaleira · Aug 19, 2023 · dc2b955 · dc2b955
1 parent a072ace
commit dc2b955
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 8 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
-import { HomeIcon } from "@heroicons/react/24/outline";
 import { NextFont } from "@next/font/dist/types";
 import { useRouter } from "next/router";
+import Image from "next/image";
 import Link from "next/link";
 import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 
@@ -15,20 +15,20 @@ const Header: FC<IHeaderProps> = ({ font }) => {
   return (
     <header className={font.className}>
       <div className="w-full h-16 flex items-center justify-between px-4">
-        <section className='flex items-center'>
-          <HomeIcon className="w-8 accent-blue-500" />
-          <nav className="flex gap-4 ml-4">
+        <section className="flex items-center">
+          <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} />
+          <nav className="flex gap-4 ml-8">
             {[
               ["Home", "/"],
               ["Portfolio", "/portfolio"],
               ["Contact", "/contact"],
             ].map(([title, path]) => {
-              const isActiveClass = router.pathname === path ? "bg-white text-slate-900" : "";
+              const isActiveClass = router.pathname === path ? "border-b border-b-white text-slate-200" : "";
               return (
                 <Link
                   key={path}
                   href={path}
-                  className={`rounded-lg px-3 py-2 font-medium hover:bg-slate-100 hover:text-slate-900 ${isActiveClass}`}
+                  className={`px-3 py-2 font-medium hover:border-b hover:border-b-white hover:text-slate-200 ${isActiveClass}`}
                 >
                   {title}
                 </Link>

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -13,7 +13,10 @@ export default function Layout({ children, font }: LayoutProps) {
     <>
       <Head>
         <title>Escaleira&apos;s Portfolio</title>
-        <link rel="icon" href="/logo.png" />
+        <link rel="icon" href="/favicon.ico" sizes="32x32" />
+        <link rel="icon" href="/favicon-16x16.png" sizes="16x16" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/site.webmanifest" />
       </Head>
 
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -12,7 +12,8 @@ export default function Contact() {
           <div className="flex mt-4 -mx-1.5">
             <a
               className="mx-1.5 dark:hover:text-blue-400 text-gray-400 transition-colors duration-300 transform hover:text-blue-500"
-              href="#"
+              href="https://www.linkedin.com/in/marco-escaleira00/"
+              target="_blank"
             >
               <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo-white.svg b/public/logo-white.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}