🦄 refactor(introduction-section): improve layout

that's a commit part of #41 issue
allbertuu · Sep 2, 2024 · 4c1ddeb · 4c1ddeb
1 parent 4381e98
commit 4c1ddeb
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 53 deletions.
diff --git a/src/components/BudgetContact/index.tsx b/src/components/BudgetContact/index.tsx
@@ -7,13 +7,10 @@ export const BudgetContact: React.FC = () => {
   return (
     <a
       title="Contato"
-      className="originRightReveal btn btn-accent"
+      className="originRightReveal btn btn-accent gap-2"
       href={emailLink}
     >
-      <EnvelopeSimple
-        weight="fill"
-        className="-mt-1 mr-2 inline-block text-xl text-white"
-      />
+      <EnvelopeSimple weight="fill" className="text-xl text-white" />
       Obtenha um Orçamento Agora
     </a>
   );

diff --git a/src/components/IntroductionSection/index.tsx b/src/components/IntroductionSection/index.tsx
@@ -4,32 +4,32 @@ import { MySocials } from '../MySocials';
 
 export const IntroductionSection = () => {
   return (
-    <section className="shadow-xl border-b border-b-accent">
+    <section className="shadow-xl border-b-2 border-b-accent bg-secondary text-primary/85">
       <div className="container mx-auto px-4 min-h-screen h-[calc(100vh_-_1rem)]">
-        <div className="grid grid-cols-1 content-center lg:grid-cols-2 h-full gap-8 md:gap-2 items-center justify-items-center">
+        <div className="grid grid-cols-1 content-center lg:grid-cols-2 h-full gap-8 md:gap-0 items-center justify-items-center">
           {/* Container Presentation */}
           <div className="order-2 relative px-4 lg:order-1 text-center lg:text-left">
-            <h3 className="originLeftReveal load-hidden intervalReveal text-muted/80 text-xl lg:text-2xl">
-              Olá! Eu me chamo,
+            <h3 className="originLeftReveal load-hidden intervalReveal text-xl lg:text-2xl">
+              Olá 👋🏼! Eu me chamo,
             </h3>
 
             <h1 className="originLeftReveal load-hidden intervalReveal text-[2.5rem] lg:text-6xl font-bold mb-1">
-              Alberto Santos.
+              Alberto Santos
             </h1>
 
-            <h2 className="originLeftReveal load-hidden intervalReveal text-2xl lg:text-3xl italic text-secondary/80 leading-7">
-              Software Developer
-              <br className="block sm:hidden" /> <strong>(FE-heavy)</strong>
+            <h2 className="originLeftReveal load-hidden intervalReveal text-2xl lg:text-3xl leading-7 mt-6">
+              Sou <strong>Desenvolvedor de Software Front-end</strong>
+              <br className="block sm:hidden" />
             </h2>
             {/* Container My Socials */}
-            <MySocials className="mt-8" />
+            <MySocials />
           </div>
           {/* Container The Creator */}
           <div className="px-4 order-1 mt-4 lg:mt-0 lg:order-2">
             <img
               src={creatorImg}
               alt="Criador do website"
-              className="delaySmallReveal md:originRightReveal load-hidden h-[10rem] lg:h-[25rem] drop-shadow-xl border-2 border-accent/40 rounded-[33%_67%_37%_63%_/_66%_37%_63%_34%]"
+              className="delaySmallReveal md:originRightReveal load-hidden h-[10rem] lg:h-[25rem] drop-shadow border-2 border-primary/70 rounded-[33%_67%_37%_63%_/_66%_37%_63%_34%]"
             />
           </div>
         </div>

diff --git a/src/components/MySocials/index.tsx b/src/components/MySocials/index.tsx
@@ -4,45 +4,47 @@ import { classNames } from '@/utils/index';
 import { FileText, LinkedinLogo } from '@phosphor-icons/react';
 import { ExternalLink } from '../ExternalLink';
 
-type TMySocialsProps = React.HTMLAttributes<HTMLDivElement>;
-
-export const MySocials: React.FC<TMySocialsProps> = ({ ...props }) => {
+export const MySocials = ({
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
   const { links } = aboutMe;
 
   return (
-    <div
-      {...props}
-      className={classNames(
-        props.className || '',
-        'flex flex-col items-center justify-center lg:justify-start sm:flex-row gap-4'
-      )}
-    >
-      <ExternalLink
-        href={links.linkedin.url}
-        title="LinkedIn"
-        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-blue hover:bg-blue-light text-white mySocialsReveal load-hidden intervalReveal"
-      >
-        <LinkedinLogo weight="bold" />
-        LinkedIn
-      </ExternalLink>
+    <div {...props} className={classNames(props.className || '')}>
+      <h4 className="text-lg lg:text-xl originLeftReveal load-hidden intervalReveal mb-2">
+        E essas são{' '}
+        <span className="text-accent/80 font-semibold">minhas redes</span> e{' '}
+        <span className="text-accent/80 font-semibold">currículo</span>:
+      </h4>
+
+      <div className="flex flex-col items-center justify-center lg:justify-start sm:flex-row gap-4">
+        <ExternalLink
+          href={links.linkedin.url}
+          title="LinkedIn"
+          className="btn gap-1 lg:w-full text-lg no-underline bg-white hover:bg-white/70 text-blue mySocialsReveal load-hidden intervalReveal"
+        >
+          <LinkedinLogo weight="fill" className="text-blue" />
+          LinkedIn
+        </ExternalLink>
 
-      <ExternalLink
-        href={links.github.url}
-        title="GitHub"
-        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-white/90 hover:bg-white/70 text-[#0c0b0b] mySocialsReveal load-hidden intervalReveal"
-      >
-        <GitHubLogo fill="#000" />
-        GitHub
-      </ExternalLink>
+        <ExternalLink
+          href={links.github.url}
+          title="GitHub"
+          className="btn lg:w-full gap-1 text-lg no-underline bg-white/90 hover:bg-white/70 text-black mySocialsReveal load-hidden intervalReveal"
+        >
+          <GitHubLogo fill="#000" />
+          GitHub
+        </ExternalLink>
 
-      <ExternalLink
-        href={links.cv.url}
-        title="Currículo"
-        className="btn flex items-center gap-1 rounded-md text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50 no-underline bg-accent hover:bg-accent/80 text-white mySocialsReveal load-hidden intervalReveal"
-      >
-        <FileText weight="bold" />
-        Currículo
-      </ExternalLink>
+        <ExternalLink
+          href={links.cv.url}
+          title="Currículo"
+          className="btn lg:w-full gap-1 text-lg no-underline bg-white hover:bg-white/70 text-accent mySocialsReveal load-hidden intervalReveal"
+        >
+          <FileText weight="fill" className="text-accent" />
+          Currículo
+        </ExternalLink>
+      </div>
     </div>
   );
 };
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -99,7 +99,7 @@
 @layer components {
   button,
   .btn {
-    @apply rounded px-2 py-1;
+    @apply rounded px-4 focus:outline-none focus:ring-2 text-white font-semibold h-10 flex items-center justify-center;
   }
 
   .btn-accent {

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -7,11 +7,14 @@ module.exports = {
       serif: ['DM Serif Display', 'serif'],
     },
     colors: {
-      accent: '#fe355c',
+      accent: {
+        light: '#fa3c61',
+        DEFAULT: '#fe355c',
+      },
       primary: '#041a27',
       secondary: '#e2e8f0',
       blue: {
-        light: '#0ea5e9',
+        light: '#0793db',
         DEFAULT: '#0284c7',
       },
       black: '#000',
@@ -26,7 +29,7 @@ module.exports = {
         'slate-gradient': 'linear-gradient(240deg, #041722, #041a27)',
       },
       dropShadow: {
-        xl: '0 40px 70px rgb(218 9 65 / 0.5)',
+        DEFAULT: '10px 10px 25px #041a2790',
       },
     },
   },