feat(page): add new sections structure, theme and styles

raferdev · raferdev · commit 985fb19fcd6a · 2023-12-07T22:22:44.000-03:00
- First space theme provided
diff --git a/src/app/_page/_components/chessInviteSection.tsx b/src/app/_page/_components/chessInviteSection.tsx
@@ -6,26 +6,25 @@ import { Section } from '@/components/Section'
 const { links } = __site
 
 const { Container, Header, Title, Description, Content, SubSection } = Section
-const { Playwright } = Planets
+const { Playwright, Decorative } = Planets
 
 const ChessInviteSection = () => (
-  <Container className="lg:mb-44">
+  <Container className="relative mb-32 md:mb-40 lg:mb-52">
+    <Decorative className="left-32 top-0 h-1 w-1 bg-yellow-100 blur-sm" />
+
     <Header className="bg-gradient-to-r from-white from-10% via-red-200 to-green-400 bg-clip-text text-transparent">
       <Playwright className="right-0 top-0 -z-10 sm:-right-12 sm:bottom-0 lg:-right-20 lg:bottom-0" />
       <Title asChild>
         <h4>Let's play chess</h4>
       </Title>
       <Description>Invite me to play a chess game on chess.com</Description>
     </Header>
-    <Content className="px-8 text-neutral-300">
+    <Content className="text-neutral-300">
       <SubSection.Content.Container>
-        <SubSection.Content.Illustration
-          color_big="green_300"
-          color_small="green_200"
-        >
+        <SubSection.Content.Illustration>
           <div className="relative rounded-full">
-            <div className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm"></div>
-            <div className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-gradient-to-br from-green-200 via-green-500 to-green-900"></div>
+            <Decorative className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm" />
+            <Decorative className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-[conic-gradient(at_bottom_right,_var(--tw-gradient-stops))] from-white from-40% via-green-500 to-green-900" />
 
             <img
               width="auto"
@@ -34,7 +33,7 @@ const ChessInviteSection = () => (
               decoding="async"
               alt="chess.com logo"
               src="./logos/chess-icon.png"
-              className="h-24 w-auto shadow-black drop-shadow-lg"
+              className="h-24 w-auto opacity-80 shadow-black drop-shadow-lg"
             />
           </div>
         </SubSection.Content.Illustration>
@@ -46,12 +45,12 @@ const ChessInviteSection = () => (
         </SubSection.Content.Description>
       </SubSection.Content.Container>
 
-      <SubSection.Links.Container>
+      <SubSection.Links.Container className="flex items-center justify-center">
         <Link
-          text="gray"
-          hover="cyan"
+          hover="bgCyan"
           target="_blank"
-          color="#d4d4d4"
+          iconColor="#60bf6e"
+          textColor="gray"
           iconName="BellPlus"
           background="black1"
           iconFillColor="none"
diff --git a/src/app/_page/_components/footerSection.tsx b/src/app/_page/_components/footerSection.tsx
@@ -12,38 +12,53 @@ const FooterSection = () => (
     asChild
   >
     <footer>
-      <div className="absolute bottom-0 h-3 w-screen bg-white blur"></div>
       <Section.Content className="flex flex-col justify-start py-0 md:items-start md:justify-end md:gap-0 lg:flex  lg:flex-col lg:items-end lg:justify-end">
-        <img
-          className="absolute -bottom-10 right-0 h-64 w-auto object-contain opacity-80"
-          height="256px"
-          width="256px"
-          loading="lazy"
-          decoding="async"
-          src="./idea-launch.png"
-        />
+        <div className="flex w-full items-center justify-center">
+          <img
+            className=" h-64 w-auto object-contain"
+            height="256px"
+            width="256px"
+            loading="lazy"
+            decoding="async"
+            src="./idea-launch.png"
+          />
+        </div>
 
         <Balancer
-          className="max-h-50px flex w-full flex-row justify-start text-center text-neutral-800 drop-shadow-md md:max-w-sm lg:max-w-none lg:text-start"
+          className="max-h-50px flex w-full flex-row justify-start text-center text-neutral-800"
           as={'p'}
         >
           This landing page is open source, and you can find it here,
           <Link
             href={links.self.repository}
             target="_blank"
             variant="raw"
-            hover="textGreen"
+            hover="textYellow"
             background="none"
-            size="none"
+            size="sm"
             aria-label="Github Repository"
-            className="m-0 inline-block w-0 min-w-min p-0 text-base sm:text-lg md:min-w-min"
           >
             github.com
           </Link>
           . See you soon!
         </Balancer>
       </Section.Content>
-      <Section.Footer className="flex w-full items-center justify-center text-sm text-neutral-700">
+      <Section.Footer className="flex w-full flex-col items-center justify-center text-sm text-neutral-800">
+        <span>
+          Illustration source:{' '}
+          <Link
+            href="https://popsy.co/"
+            target="_blank"
+            variant="raw"
+            hover="textYellow"
+            background="none"
+            size="none"
+            aria-label="Github Repository"
+            className="m-0 inline-block w-0 min-w-min p-0 md:min-w-min"
+          >
+            popsy
+          </Link>
+        </span>
         raferdev@2023
       </Section.Footer>
     </footer>
diff --git a/src/app/_page/_components/greetingSection.tsx b/src/app/_page/_components/greetingSection.tsx
@@ -8,10 +8,10 @@ const { Aws, Docker, Jest, NextJs, Node, Decorative } = Planets
 const GreetingSection = () => (
   <Section.Container className="relative flex h-screen flex-col flex-wrap content-center items-center justify-center">
     <Aws className="left-[calc(100vw/8)] top-[calc((100vh/8)-20px)] lg:left-[calc(100vw/8)] lg:top-[calc(100vw/8)]" />
-    <Docker className="right-[calc(100vw/8-40px)] top-[calc((100vh/5)-40px)] sm:right-[calc(100vw/8-40px)] sm:top-14" />
+    <Docker className="right-[calc(100vw/8-40px)] top-[calc((100vh/5)-40px)] sm:right-[calc(100vw/8-40px)] sm:top-14 lg:-top-10" />
     <Jest className="left-8 top-[calc((100vh/2)+100px)]" />
     <NextJs className="right-4 top-auto" />
-    <Node className="left-auto top-[calc((100vh/5)-50px)]" />
+    <Node className="left-auto top-[calc((100vh/5)-50px)] md:top-[calc((100vh/5)-200px)] lg:top-[calc((100vh/5)-50px)]" />
     <Decorative className="right-40 top-40 h-[6px] w-[6px] animate-pulse bg-cyan-300 blur-sm lg:left-40 lg:top-80" />
     <Decorative className="right-40 top-40 h-[4px] w-[4px] bg-blue-100  blur-sm lg:left-40 lg:top-60" />
     <Decorative className="right-20 top-40 hidden h-1 w-1 bg-yellow-100 blur-sm" />
diff --git a/src/app/_page/_components/linksSection.tsx b/src/app/_page/_components/linksSection.tsx
@@ -7,19 +7,20 @@ const { links } = __site
 const { Container, Header, Title, Description, Content } = Section
 
 const LinksSection = () => (
-  <Container className="mb-32 lg:mb-28">
-    <Header className="text-neutral-800">
-      <Title className="text-2xl" asChild>
+  <Container className="mb-28 md:mb-32">
+    <Header>
+      <Title className="text-2xl text-neutral-300" asChild>
         <h5>See more</h5>
       </Title>
-      <Description>
+      <Description className="text-neutral-300">
         You can see more about me at the following links
       </Description>
     </Header>
     <Content className="min-h-40 grid w-full grid-cols-1 justify-items-center gap-x-8 gap-y-4 p-8 md:grid-cols-2 md:gap-y-4 lg:grid-cols-3 lg:grid-rows-2 lg:gap-y-0">
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Github"
         iconFillColor="github"
         href={links.profile.github}
@@ -28,8 +29,9 @@ const LinksSection = () => (
         Github
       </Link>
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Youtube"
         iconFillColor="youtube"
         href={links.profile.youtube}
@@ -38,8 +40,9 @@ const LinksSection = () => (
         Youtube
       </Link>
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Linkedin"
         iconFillColor="linkedin"
         href={links.profile.linkedin}
@@ -48,8 +51,9 @@ const LinksSection = () => (
         Linkedin
       </Link>
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Mail"
         aria-label="Email"
         iconFillColor="white"
@@ -58,8 +62,9 @@ const LinksSection = () => (
         Email
       </Link>
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Twitter"
         iconFillColor="twitter"
         href={links.profile.twitter}
@@ -68,8 +73,9 @@ const LinksSection = () => (
         Twitter / X
       </Link>
       <Link
-        text="black"
+        textColor="black"
         target="_blank"
+        hover="bgCyan"
         iconName="Instagram"
         iconFillColor="instagram"
         href={links.profile.instagram}
diff --git a/src/app/_page/_components/logoImage.tsx b/src/app/_page/_components/logoImage.tsx
@@ -1,11 +1,11 @@
 const LogoImage = () => (
   <div className="relative order-2 lg:order-1">
     <div className="absolute left-0 top-0 min-h-[175px] min-w-[175px] animate-wiggle-more rounded-full border-b-[30px] border-l-[3px] border-r-[20px] border-t-[3px] border-slate-100 bg-slate-100 blur-md animate-duration-[500ms] sm:min-h-[215px] sm:min-w-[215px] md:left-8  md:min-h-[250px] md:min-w-[250px]"></div>
-    <div className="absolute bottom-0 left-0 z-10 h-[200px] w-[176px] animate-spin animate-duration-[120s] sm:h-[220px] sm:w-[192px] md:h-[270px] md:w-[250px] lg:h-[300px] lg:w-[256px]">
-      <div className="absolute left-0 top-0 h-2 w-2 animate-bounce rounded-full bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-pink-300 via-purple-300 to-indigo-400 animate-duration-[180s]"></div>
+    <div className="absolute bottom-0 left-0 z-10 h-[200px] w-[176px] animate-spin opacity-50 animate-duration-[160s] sm:h-[220px] sm:w-[192px] md:h-[270px] md:w-[250px] lg:h-[300px] lg:w-[256px]">
+      <div className="absolute left-0 top-0 h-2 w-2 animate-bounce rounded-full bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-white to-black animate-duration-[180s]"></div>
     </div>
-    <div className="absolute bottom-0 left-2 z-10 h-[200px] w-[140px] animate-spin animate-duration-[60s] sm:h-[220px] sm:w-[144px] md:h-[240px] md:w-[240px] lg:h-[300px] lg:w-[176px]">
-      <div className="absolute bottom-0 left-0 h-6 w-6 animate-spin rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-pink-500 via-red-500 to-cyan-500  animate-duration-[180s]"></div>
+    <div className="absolute bottom-0 left-2 z-10 h-[200px] w-[200px] animate-spin animate-duration-[90s] sm:h-[220px] sm:w-[220px] md:h-[240px] md:w-[240px] lg:h-[300px] lg:w-[300px]">
+      <div className="absolute bottom-0 left-0 h-6 w-6 rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-white via-red-500 to-pink-500 opacity-90"></div>
     </div>
 
     <div className="relative h-[175px] w-[175px] opacity-95 sm:h-[215px] sm:w-[215px] md:ml-8 md:h-[250px] md:w-[250px]">
diff --git a/src/app/_page/_components/myworldxSection.tsx b/src/app/_page/_components/myworldxSection.tsx
@@ -5,30 +5,38 @@ import { Section } from '@/components/Section'
 
 const { links } = __site
 const { Container, Header, Title, Description, Content, SubSection } = Section
-const { Postgres } = Planets
+const { Postgres, Decorative } = Planets
+
+const AnimationPlanetSpotMyworlx = () => {
+  return (
+    <>
+      <div className="absolute bottom-0 left-0 -z-10 h-24 w-44 animate-spin opacity-50  animate-duration-[120s]">
+        <div className="absolute left-0 top-0 h-6 w-6 animate-bounce rounded-full bg-gradient-to-tl from-gray-400 via-gray-900 to-black animate-duration-[180s]"></div>
+      </div>
+    </>
+  )
+}
 
 const MyworldxSection = () => (
-  <Container className="mb-24 lg:mb-44">
+  <Container className="mb-52 lg:mb-64">
     <Header className="bg-gradient-to-l from-blue-300 from-10% to-white bg-clip-text text-transparent">
       <Postgres className="bottom-0 right-0 sm:-right-20 sm:bottom-0 lg:bottom-0 lg:right-0" />
       <Title asChild>
         <h2>Check this out</h2>
       </Title>
       <Description>My new open source project</Description>
-      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-cyan-500 blur-sm"></div>
+      <Decorative className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-cyan-500 blur-sm" />
     </Header>
-    <Content className="relative px-8">
-      <div className="absolute bottom-0 left-20 h-1 w-1 rounded-full bg-red-500 blur-sm"></div>
-      <div className="absolute bottom-0 right-20 h-1 w-1 animate-pulse rounded-full bg-white blur-sm"></div>
+    <Content className="relative gap-8 lg:gap-0">
+      <Decorative className="absolute bottom-0 left-20 h-1 w-1 rounded-full bg-red-500 blur-sm" />
+      <Decorative className="absolute bottom-0 right-20 h-1 w-1 animate-pulse rounded-full bg-white blur-sm" />
 
       <SubSection.Content.Container>
-        <SubSection.Content.Illustration
-          color_big="gray_400"
-          color_small="gray_300"
-        >
+        <SubSection.Content.Illustration>
+          <AnimationPlanetSpotMyworlx />
           <div className="relative rounded-full">
-            <div className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm"></div>
-            <div className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-slate-600 to-indigo-200"></div>
+            <Decorative className="absolute left-0 top-0 -z-20 h-24 w-24 rounded-full bg-white blur-sm" />
+            <Decorative className=" absolute left-0 top-0 -z-10 h-24 w-24 rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-slate-600 to-indigo-200" />
             <img
               loading="lazy"
               decoding="async"
@@ -51,9 +59,9 @@ const MyworldxSection = () => (
       </SubSection.Content.Container>
       <SubSection.Links.Container>
         <Link
-          text="white"
-          hover="cyan"
-          color="#d9d9d9"
+          textColor="white"
+          hover="bgCyan"
+          iconColor="#8ce5f5"
           target="_blank"
           iconName="Home"
           background="black3"
@@ -64,10 +72,10 @@ const MyworldxSection = () => (
           Home
         </Link>
         <Link
-          text="white"
-          hover="cyan"
+          textColor="white"
+          hover="bgCyan"
           target="_blank"
-          color="#d9d9d9"
+          iconColor="#8ce5f5"
           iconName="FileText"
           background="black3"
           iconFillColor="none"
@@ -77,13 +85,13 @@ const MyworldxSection = () => (
           My page
         </Link>
         <Link
-          text="white"
-          hover="cyan"
+          textColor="white"
+          hover="bgCyan"
           target="_blank"
-          color="#d9d9d9"
+          iconColor="#8ce5f5"
           iconName="Github"
-          background="black3"
           iconFillColor="none"
+          background="black3"
           href={links.myworldx.repository}
           aria-label="MyWorldx github repository"
         >
diff --git a/src/app/_page/_components/presentationSection.tsx b/src/app/_page/_components/presentationSection.tsx
@@ -3,37 +3,40 @@ import { Planets } from '@/components/Planets'
 import { Section } from '@/components/Section'
 
 const { Container, Header, Title, Description, Content } = Section
-const { MongoDB } = Planets
+const { MongoDB, Decorative } = Planets
 
 const PresentationSection = () => (
-  <Container className="mb-24 w-full border-0 bg-inherit shadow-none lg:mb-44">
+  <Container className="mb-32 w-full border-0 bg-inherit shadow-none lg:mb-52">
     <Header className="bg-gradient-to-l from-emerald-200 from-10% to-white bg-clip-text text-transparent">
-      <MongoDB className="-top-10 right-0 -z-10 animate-wiggle animate-duration-[40s] animate-infinite" />
+      <MongoDB className="-top-28 right-0 -z-10" />
       <Title>Software Engineer</Title>
       <Description>Pragmatism and creativity to create new things</Description>
-      <div className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-cyan-500 blur-sm"></div>
+      <Decorative className="absolute bottom-0 right-0 h-1 w-1 rounded-full bg-cyan-500 blur-sm" />
     </Header>
-    <Content className="relative flex flex-col px-8 align-middle lg:grid lg:grid-cols-2">
-      <div className="absolute bottom-0 right-20 h-1 w-1 rounded-full bg-cyan-500 blur-sm"></div>
+    <Content className="relative gap-8 align-middle lg:grid-cols-2">
+      <Decorative className="absolute bottom-0 right-20 h-1 w-1 rounded-full bg-cyan-500 blur-sm" />
 
-      <div className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-yellow-500 blur-sm"></div>
+      <Decorative className="absolute bottom-0 left-0 h-1 w-1 rounded-full bg-yellow-500 blur-sm" />
       <div>
         <p>
           I have worked since 2019 with development using VBA, Python to create
           macros and other automations, and Nocode websites. Since January 2022,
           I've been working with FullStack web development. I'm graduating from
           physics and starting a software engineering degree.
         </p>
-      </div>
-      <div>
         <p>
           I'm working on building web solutions with NodeJS, NextJS, and tests
           with Jest, database SQL and NoSQL, Docker, deploy servers, and
           serveless environments with CI/CD. I selected other languages to be
-          familiar with and probably work with. The objective is to build a
-          solid base of knowledge and experience to solve problems and create
-          new things, regardless of the tools, framework, or technology. Until
-          then, I will become a specialist in what I do now.
+          familiar with and probably work with.
+        </p>
+      </div>
+      <div>
+        <p>
+          The objective is to build a solid base of knowledge and experience to
+          solve problems and create new things, regardless of the tools,
+          framework, or technology. Until then, I will become a specialist in
+          what I do now.
         </p>
       </div>
     </Content>
diff --git a/src/app/_page/_components/storybookSection.tsx b/src/app/_page/_components/storybookSection.tsx
