Merge pull request #3 from lucasheartcliff/next

Next

package.json

@@ -95,7 +95,7 @@
     "rimraf": "^4.4.1",
     "semantic-release": "^19.0.5",
     "start-server-and-test": "^2.0.0",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "3.4.1",
     "typescript": "^4.9.5"
   },
   "config": {

public/assets/jsons/profile.json

@@ -4,6 +4,7 @@
   "introductionBio": "A full-stack developer focused on results, with strong skills in performance optimization and efficiency. Committed to delivering pragmatic solutions that delivers what the customer needs with etichal and responsability.",
   "bio": "In recent years, my journey in development has been marked by a challenging narrative, filled with achievements and significant learnings. When I embarked on this journey, I faced a steep learning curve, delving into the complexities of both front-end and back-end. Every line of code was an accomplishment, and every challenge was an opportunity for growth. Crafting intuitive interfaces and architecting robust solutions became my daily mantra.\n\nHowever, the true essence of development goes beyond the code. I found myself consistently challenged to translate customer needs into tangible solutions. Additionally, the importance of data security and respect for user privacy became integral aspects of my daily work.\n\nThese years in development are not just a chapter but the foundation for what lies ahead. I am excited to embrace future opportunities, apply the knowledge gained, and contribute to shaping the ever-evolving technological landscape.",
   "email": "[email protected]",
+  "phone": "5521995366450",
   "experience": [
     {
       "title": "Intelie by Viasat",

src/components/Footer/index.tsx

@@ -0,0 +1,16 @@
+import { HeartFilled } from '@ant-design/icons';
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className=" py-10 text-center text-gray-700">
+      <div className="flex items-center justify-center">
+        <p className="mr-2">Made with </p>
+        <HeartFilled className="text-red-700" />
+        <p className="ml-2"> by Lucas Morais</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/LanguageChart/index.tsx

@@ -21,6 +21,8 @@ const buildState = (
   options: {
     chart: {
       type: 'bar',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
       height: 550,
       toolbar: {
         show: false,

src/components/Navbar/index.tsx

@@ -1,29 +1,59 @@
-import React from 'react';
+import React, { useState } from "react";
 
-import Link from '@/components/Link';
+import Link from "@/components/Link";
 
-import Logo from '../logo';
+import Logo from "../logo";
 
 interface Props {
   logoTitle: string;
 }
 
 export default function Navbar({ logoTitle }: Props) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   return (
-    <nav className="sticky  top-0 z-50 bg-white p-4 px-16 text-white no-underline shadow-md">
-      <div className="w-full">
+    <nav className="sticky top-0 z-50 bg-white p-4 px-6 text-white no-underline shadow-md md:px-16">
+      <div className="container mx-auto">
         <div className="flex items-center justify-between">
-          <Link href="/" className={'text-primary hover:border-0'}>
+          <Link href="/" className={"text-primary hover:border-0"}>
             <Logo title={logoTitle} />
           </Link>
-          <div className="flex space-x-4">
-            <Link href="#about">{'About'}</Link>
-            <Link href="#experience">{'Experience'}</Link>
-            <Link href="#education">{'Education'}</Link>
-            <Link href="#certification">{'Certification'}</Link>
-            <Link href="#projects">{'Projects'}</Link>
+          <div className="hidden space-x-4 md:flex">
+            <Link href="#about">{"About"}</Link>
+            <Link href="#experience">{"Experience"}</Link>
+            <Link href="#education">{"Education"}</Link>
+            <Link href="#certification">{"Certification"}</Link>
+            <Link href="#projects">{"Projects"}</Link>
           </div>
+          <button
+            className="md:hidden"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Toggle Menu"
+          >
+            <svg
+              className="h-6 w-6 fill-current text-gray-600"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 5h16a1 1 0 010 2H4a1 1 0 010-2zm0 5h16a1 1 0 010 2H4a1 1 0 010-2z"
+              />
+            </svg>
+          </button>
         </div>
+        {menuOpen && (
+          <div className="mt-4 md:hidden">
+            <div className="flex flex-col space-y-4">
+              <Link href="#about">{"About"}</Link>
+              <Link href="#experience">{"Experience"}</Link>
+              <Link href="#education">{"Education"}</Link>
+              <Link href="#certification">{"Certification"}</Link>
+              <Link href="#projects">{"Projects"}</Link>
+            </div>
+          </div>
+        )}
       </div>
     </nav>
   );

src/components/ProjectCard/index.tsx

@@ -21,7 +21,7 @@ export default function ProjectCard({
   url,
 }: Props) {
   return (
-    <div className="flex h-28 flex-row items-center justify-center  border p-4 shadow-lg">
+    <div className="flex h-28 w-full flex-row items-center justify-center border  p-4 shadow-md md:w-fit">
       <div className="w-full">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-black">
           <Tooltip title={name}>

src/components/ProjectGrid/index.tsx

@@ -22,7 +22,7 @@ export default function ProjectGrid({
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex w-full flex-wrap justify-items-start gap-1.5">
+      <div className="my-2 flex w-full flex-wrap justify-items-start gap-1.5">
         {items.slice(0, visibleItems).map((item, index) => (
           <ProjectCard key={index} {...item} />
         ))}

src/components/Timeline/Item/index.tsx

@@ -49,7 +49,7 @@ export default function Item(props: Props) {
   } ${formatDuration()}`;
 
   return (
-    <div className="flex h-20 w-7/12 flex-row items-center  justify-center px-4 pb-4">
+    <div className="flex h-20 w-full flex-row items-center justify-center  px-4 pb-4 md:w-8/12">
       <div className="w-full">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-black">
           <Tooltip title={title}>

src/layouts/Block.tsx

@@ -5,5 +5,7 @@ interface Props {
 }
 
 export default function Block({ children }: Props) {
-  return <div className="flex flex-1 p-5">{children}</div>;
+  return (
+    <div className="flex flex-1 p-2 sm:align-middle md:p-5 ">{children}</div>
+  );
 }

src/layouts/Row.tsx

@@ -5,5 +5,9 @@ interface Props {
 }
 
 export default function Row({ children }: Props) {
-  return <div className="flex w-full flex-1 flex-row py-10">{children}</div>;
+  return (
+    <div className="flex w-full flex-1 flex-col md:flex-row md:py-10">
+      {children}
+    </div>
+  );
 }