feat: enable contact page

MarcoEscaleira · Jun 30, 2024 · 910308a · 910308a
1 parent b56d2a8
commit 910308a
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 35 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,5 @@ next-env.d.ts
 
 # Webstorm
 .idea
+
+.vscode
diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
@@ -1,26 +1,18 @@
-import { useState, useEffect } from "react";
+import { Button } from "@material-tailwind/react";
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
 export const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
   return (
-    <button
-      className="rounded-md p-1 duration-200 hover:scale-110 active:scale-100 dark:bg-[#212933]"
+    <Button
+      variant="text"
+      className="duration-200 hover:scale-110 active:scale-100 text-white-500 dark:text-gray-200"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       aria-label="Color mode switch"
     >
-      {theme === "light" ? <Moon className="w-4" /> : <Sun className="w-4" />}
-    </button>
+      {theme === "light" ? <Moon className="size-5" /> : <Sun className="size-5" />}
+    </Button>
   );
 };
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export const Footer: FC = () => {
   return (
-    <footer className={`bg-transparent dark:bg-gray-900`}>
+    <footer className={`bg-transparent`}>
       <div className="container mx-auto flex items-center justify-between p-4 sm:flex-row sm:p-6">
         <Link href="/">
           <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} className="text-black" />

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 import Image from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { ThemeSwitcher } from "src/components/ThemeSwitcher";
 
@@ -11,24 +12,23 @@ export const Header: FC = () => {
       <div className="container mx-auto flex items-center justify-between p-4 sm:flex-row sm:p-6">
         <section className="flex items-center">
           <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} loading="lazy" />
-          {/*<nav className="ml-8 flex gap-4">*/}
-          {/*  {[*/}
-          {/*    ["Home", "/"],*/}
-          {/*    ["Portfolio", "/portfolio"],*/}
-          {/*    ["Contact", "/contact"],*/}
-          {/*  ].map(([title, path]) => {*/}
-          {/*    const isActiveClass = router.pathname === path ? "border-b border-b-white text-slate-200" : "";*/}
-          {/*    return (*/}
-          {/*      <Link*/}
-          {/*        key={path}*/}
-          {/*        href={path}*/}
-          {/*        className={`hover:text-slate-200 px-3 py-2 font-medium hover:border-b hover:border-b-white ${isActiveClass}`}*/}
-          {/*      >*/}
-          {/*        {title}*/}
-          {/*      </Link>*/}
-          {/*    );*/}
-          {/*  })}*/}
-          {/*</nav>*/}
+          <nav className="ml-8 md:ml-12 flex gap-4">
+            {[
+              ["Home", "/"],
+              ["Contact", "/contact"],
+            ].map(([title, path]) => {
+              const isActiveClass = router.pathname === path ? "border-b border-b-white text-slate-200" : "";
+              return (
+                <Link
+                  key={path}
+                  href={path}
+                  className={`hover:text-slate-200 px-3 py-2 font-medium hover:border-b hover:border-b-white ${isActiveClass}`}
+                >
+                  {title}
+                </Link>
+              );
+            })}
+          </nav>
         </section>
         <section>
           <ThemeSwitcher />

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -11,7 +11,7 @@ export const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
       <Head>
-        <title>Escaleira&apos;s Portfolio</title>
+        <title>Marco Escaleira</title>
         <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" />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -9,7 +9,7 @@ export default function Home() {
       <Image src="/marco.jpg" alt="Marco's face" width={250} height={250} className="rounded-[50%] shadow" />
       <div className="p-4 md:ml-10 md:p-0">
         <Typography variant="h1" className="mb-2">
-          Hi 👋, I&apos;m Marco Escaleira.
+          Hi, I&apos;m Marco Escaleira.
         </Typography>
         <Typography variant="lead" className="mb-6">
           You landed in the right place!