fixing reponsivity

lucasheartcliff · Jan 30, 2024 · 44160ca · 44160ca
1 parent 72e692c
commit 44160ca
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 44 deletions.
diff --git a/public/assets/images/profile.jpeg b/public/assets/images/profile.jpeg
diff --git a/public/assets/jsons/profile.json b/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",

diff --git a/src/components/Footer/index.tsx b/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;
diff --git a/src/components/LanguageChart/index.tsx b/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,

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -1,8 +1,8 @@
-import React, { useState } 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;
@@ -15,25 +15,23 @@ export default function Navbar({ logoTitle }: Props) {
     <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="/">
-            <a className="text-primary hover:border-0">
-              <Logo title={logoTitle} />
-            </a>
+          <Link href="/" className={"text-primary hover:border-0"}>
+            <Logo title={logoTitle} />
           </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>
+            <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-primary"
+              className="h-6 w-6 fill-current text-gray-600"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -45,15 +43,14 @@ export default function Navbar({ logoTitle }: Props) {
             </svg>
           </button>
         </div>
-        {/* Menu móvel */}
         {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>
+              <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>
         )}

diff --git a/src/components/ProjectCard/index.tsx b/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}>

diff --git a/src/components/ProjectGrid/index.tsx b/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} />
         ))}

diff --git a/src/components/Timeline/Item/index.tsx b/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}>

diff --git a/src/layouts/Block.tsx b/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>
+  );
 }
diff --git a/src/layouts/Row.tsx b/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>
+  );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,15 +1,15 @@
 import {
   GithubOutlined,
-  InstagramOutlined,
   LinkedinOutlined,
   MailOutlined,
-  TwitterOutlined,
+  WhatsAppOutlined,
 } from '@ant-design/icons';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import CertificateCard from '@/components/CertificateCard';
+import Footer from '@/components/Footer';
 import Icon from '@/components/Icon';
 import { SocialLink } from '@/components/Link';
 import ProjectGrid from '@/components/ProjectGrid';
@@ -41,6 +41,7 @@ const Index = () => {
   const {
     name,
     username,
+    phone,
     introductionBio,
     bio,
     email,
@@ -104,36 +105,47 @@ const Index = () => {
   return (
     <>
       <Main meta={<Meta title={name} description={introductionBio} />}>
-        <div className="mx-14">
+        <div className="mx-2 md:mx-14">
           <Row>
             <Block>
               <div className="flex flex-col">
-                <h1 className="text-7xl font-bold text-black">{name}</h1>
-                <h2 className="text-4xl font-semibold italic text-black ">
+                <h1 className="text-4xl font-bold text-black md:text-7xl">
+                  {name}
+                </h1>
+                <h2 className="text-xl font-semibold italic text-black md:text-4xl ">
                   {`@${username}`}
                 </h2>
-                <p className="my-5 text-3xl text-gray-600">{introductionBio}</p>
+                <p className="my-5 text-xl text-gray-600 md:text-3xl">
+                  {introductionBio}
+                </p>
                 <div className="flex flex-1 flex-row items-center justify-start text-3xl text-black hover:no-underline">
                   <SocialLink href={`https://github.com/${username}`}>
                     <Icon color={'#000000'}>
                       <GithubOutlined />
                     </Icon>
                   </SocialLink>
-                  <SocialLink href={`https://x.com/${username}`}>
-                    <Icon color={'#00acee'}>
-                      <TwitterOutlined />
+                  <SocialLink
+                    href={`https://api.whatsapp.com/send?phone=${phone}`}
+                  >
+                    <Icon color={'#25D366'}>
+                      <WhatsAppOutlined />
                     </Icon>
                   </SocialLink>
+                  {/* <SocialLink href={`https://x.com/${username}`}>
+                    <Icon color={"#00acee"}>
+                      <TwitterOutlined />
+                    </Icon>
+                  </SocialLink> */}
                   <SocialLink href={`https://linkedin.com/in/${username}`}>
                     <Icon color={'#0e76a8'}>
                       <LinkedinOutlined />
                     </Icon>
                   </SocialLink>
-                  <SocialLink href={`https://instagram.com/${username}`}>
+                  {/* <SocialLink href={`https://instagram.com/${username}`}>
                     <Icon color={'#dd2a7b'}>
                       <InstagramOutlined />
                     </Icon>
-                  </SocialLink>
+                  </SocialLink> */}
                   <SocialLink href={`mailto:${email}`}>
                     <Icon color={'#d44638'}>
                       <MailOutlined />
@@ -143,7 +155,7 @@ const Index = () => {
               </div>
             </Block>
             <Block>
-              <div className="flex w-full items-center justify-center">
+              <div className="hidden w-full items-center justify-center md:flex ">
                 <div
                   className=" border-0 bg-cover"
                   style={{
@@ -157,7 +169,7 @@ const Index = () => {
           </Row>
           <Row>
             <Block>
-              <div className="flex w-full items-center justify-center">
+              <div className="mt-5 flex w-full items-center justify-center md:mt-0">
                 <div>
                   <div
                     className="h-72 w-72 rounded-full bg-cover"
@@ -172,11 +184,11 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="about"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'About Me'}
                 </span>
-                <p className="text-2xl text-gray-600">{bio}</p>
+                <p className="text-lg text-gray-600 md:text-2xl">{bio}</p>
               </div>
             </Block>
           </Row>
@@ -186,7 +198,7 @@ const Index = () => {
               <div className="flex flex-1 flex-col ">
                 <span
                   id="languages"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'Languages'}
                 </span>
@@ -197,7 +209,7 @@ const Index = () => {
               <div className="flex flex-1 flex-col ">
                 <span
                   id="experience"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'Experience'}
                 </span>
@@ -210,7 +222,7 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="education"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'Education'}
                 </span>
@@ -221,7 +233,7 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="certification"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'Certification'}
                 </span>
@@ -240,7 +252,7 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="projects"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
                   {'Open Source Projects'}
                 </span>
@@ -253,6 +265,7 @@ const Index = () => {
             </Block>
           </Row>
         </div>
+        <Footer />
       </Main>
     </>
   );