small touches

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

Hide file tree

Showing 8 changed files with 87 additions and 35 deletions.
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { NextFont } from "@next/font/dist/types";
+import Image from "next/image";
+import Link from "next/link";
+
+interface IFooterProps {
+  font: NextFont;
+}
+
+export const Footer: FC<IFooterProps> = ({ font }) => {
+  return (
+    <footer className={`${font.className} bg-transparent dark:bg-gray-900`}>
+      <div className="container flex flex-col items-center justify-between p-6 mx-auto space-y-4 sm:space-y-0 sm:flex-row">
+        <Link href="/">
+          <Image src="/logo-white.svg" alt="logo-marco" height={60} width={60} className="text-black" />
+        </Link>
+
+        <p className="text-sm text-gray-100 dark:text-gray-300">© Copyright 2023. All Rights Reserved.</p>
+
+        <div className="flex -mx-2">
+          <Link
+            href="https://www.linkedin.com/in/marco-escaleira00/"
+            target="_blank"
+            className="mx-2 text-gray-200 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+            aria-label="LinkedIn"
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M15.2 8.80005C16.4731 8.80005 17.694 9.30576 18.5941 10.2059C19.4943 11.1061 20 12.327 20 13.6V19.2H16.8V13.6C16.8 13.1757 16.6315 12.7687 16.3314 12.4687C16.0313 12.1686 15.6244 12 15.2 12C14.7757 12 14.3687 12.1686 14.0687 12.4687C13.7686 12.7687 13.6 13.1757 13.6 13.6V19.2H10.4V13.6C10.4 12.327 10.9057 11.1061 11.8059 10.2059C12.7061 9.30576 13.927 8.80005 15.2 8.80005Z"
+                fill="currentColor"
+              />
+              <path d="M7.2 9.6001H4V19.2001H7.2V9.6001Z" fill="currentColor" />
+              <path
+                d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z"
+                fill="currentColor"
+              />
+            </svg>
+          </Link>
+
+          <Link
+            href="https://github.com/MarcoEscaleira"
+            target="_blank"
+            className="mx-2 text-gray-200 transition-colors duration-300 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+            aria-label="Github"
+          >
+            <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z"></path>
+            </svg>
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+};
diff --git a/components/Header.tsx → components/layout/Header.tsx b/components/Header.tsx → components/layout/Header.tsx
@@ -9,7 +9,7 @@ interface IHeaderProps {
   font: NextFont;
 }
 
-const Header: FC<IHeaderProps> = ({ font }) => {
+export const Header: FC<IHeaderProps> = ({ font }) => {
   const router = useRouter();
 
   return (
@@ -43,5 +43,3 @@ const Header: FC<IHeaderProps> = ({ font }) => {
     </header>
   );
 };
-
-export default Header;
diff --git a/components/layout.tsx → components/layout/Layout.tsx b/components/layout.tsx → components/layout/Layout.tsx
@@ -1,14 +1,15 @@
+import { FC } from "react";
 import Head from "next/head";
 import { ThemeProvider } from "next-themes";
 import { NextFont } from "@next/font/dist/types";
-import Header from "@/components/Header";
+import { Header, Footer } from "@/components/layout";
 
 type LayoutProps = {
   children: React.ReactNode;
   font: NextFont;
 };
 
-export default function Layout({ children, font }: LayoutProps) {
+export const Layout: FC<LayoutProps> = ({ children, font }) => {
   return (
     <>
       <Head>
@@ -20,16 +21,14 @@ export default function Layout({ children, font }: LayoutProps) {
       </Head>
 
       <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-        <div className="w-full h-screen bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-gray-100 dark:text-white">
+        <div className="flex flex-col w-full h-screen bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-gray-100 dark:text-white">
           <Header font={font} />
 
-          <main className={font.className}>{children}</main>
+          <main className={`${font.className} flex-1`}>{children}</main>
 
-          <footer className={font.className}>
-            <p>Powered by Marco Escaleira</p>
-          </footer>
+          <Footer font={font} />
         </div>
       </ThemeProvider>
     </>
   );
-}
+};
diff --git a/components/layout/index.ts b/components/layout/index.ts
@@ -0,0 +1,3 @@
+export * from "./Header";
+export * from "./Footer";
+export * from "./Layout";
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,7 +1,7 @@
 import "@/styles/global.css";
 import "normalize.css";
 import type { AppProps } from "next/app";
-import Layout from "@/components/layout";
+import { Layout } from "@/components/layout";
 import { Inter } from "@next/font/google";
 
 const inter = Inter({ subsets: ["latin"] });

diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -1,17 +1,19 @@
+import Link from "next/link";
+
 export default function Contact() {
   return (
-    <section className="w-full min-h-screen bg-white dark:bg-gray-900 lg:flex">
-      <div className="flex flex-col justify-center w-full p-8 lg:bg-gray-100 lg:dark:bg-gray-800 lg:px-12 xl:px-32 lg:w-1/2">
-        <h1 className="text-2xl font-semibold text-gray-800 capitalize dark:text-white lg:text-3xl">contact me.</h1>
+    <section className="w-full h-full lg:flex">
+      <div className="flex flex-col justify-center w-full p-8 lg:px-12 xl:px-32 lg:w-1/2">
+        <h1 className="text-2xl font-semibold text-sky-200 capitalize dark:text-white lg:text-3xl">contact me.</h1>
 
-        <p className="mt-4 text-gray-500 dark:text-gray-400">Ask me everything and I would love to hear from you</p>
+        <p className="mt-4 text-sky-100 dark:text-gray-400">Ask me everything and I would love to hear from you</p>
 
         <div className="mt-6 md:mt-8">
-          <h3 className="font-medium text-gray-600 dark:text-gray-300">Follow me</h3>
+          <h3 className="font-medium text-gray-100 dark:text-gray-300">Follow me</h3>
 
           <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"
+            <Link
+              className="mx-1.5 dark:hover:text-blue-400 text-blue-200 transition-colors duration-300 transform hover:text-blue-500"
               href="https://www.linkedin.com/in/marco-escaleira00/"
               target="_blank"
             >
@@ -26,7 +28,7 @@ export default function Contact() {
                   fill="currentColor"
                 />
               </svg>
-            </a>
+            </Link>
           </div>
         </div>
       </div>
@@ -35,29 +37,29 @@ export default function Contact() {
         <form>
           <div className="-mx-2 md:items-center md:flex">
             <div className="flex-1 px-2">
-              <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Full Name</label>
+              <label className="block mb-2 text-sm text-gray-200">Full Name</label>
               <input
                 type="text"
-                placeholder="John Doe"
-                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+                placeholder="Marco Escaleira"
+                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
               />
             </div>
 
             <div className="flex-1 px-2 mt-4 md:mt-0">
-              <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email address</label>
+              <label className="block mb-2 text-sm text-gray-200">Email address</label>
               <input
                 type="email"
-                placeholder="johndoe@example.com"
-                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+                placeholder="marco@gmail.com"
+                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
               />
             </div>
           </div>
 
           <div className="w-full mt-4">
-            <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Message</label>
+            <label className="block mb-2 text-sm text-gray-200">Message</label>
             <textarea
-              className="block w-full h-32 px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md md:h-56 dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
-              placeholder="Message"
+              className="block w-full h-32 px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-200 rounded-md md:h-56 dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+              placeholder="Your message..."
             ></textarea>
           </div>
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,9 +1,7 @@
 export default function Home() {
   return (
     <div>
-      <h3 className="text-3xl font-bold">
-        Welcome to <span className="text-blue-500">Marco Portfolio!</span>
-      </h3>
+
     </div>
   );
 }
diff --git a/pages/portfolio.tsx b/pages/portfolio.tsx
@@ -1,9 +1,7 @@
 export default function Portfolio() {
   return (
     <div>
-      <h3 className="text-3xl font-bold">
-        Marco&apos;s portfolio
-      </h3>
+
     </div>
   );
 }