new changes

GuilhaoF · Aug 28, 2024 · c4faf50 · c4faf50
1 parent 34cc90b
commit c4faf50
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 19 deletions.
diff --git a/public/images/about.jpg b/public/images/about.jpg
diff --git a/src/components/about-section.tsx b/src/components/about-section.tsx
@@ -0,0 +1,168 @@
+'use client';
+import Image from "next/image";
+import { useState, useTransition } from "react";
+import TabButton from "./tabbar-button";
+import {
+  GithubIcon,
+  HeadsetIcon,
+  LinkedinIcon,
+  MailIcon,
+  TrophyIcon,
+} from "lucide-react";
+import Link from "next/link";
+
+const TAB_DATA = [
+  {
+    title: "Skills",
+    id: "skills",
+    content: (
+      <ul className="text-gray-400 pl-2">
+        <li>ReactJs</li>
+        <li>NextJs</li>
+        <li>React Native</li>
+        <li>Expo</li>
+        <li>Tailwind Css</li>
+        <li>Javascript</li>
+        <li>Typescript</li>
+        <li>Styled-Components</li>
+      </ul>
+    ),
+  },
+  {
+    title: "Educaçao",
+    id: "education",
+    content: (
+      <ul className="text-gray-400 pl-2">
+        <li>Analise e Desenvolvimento de Sistemas - Unip </li>
+        <li>Ensino Tecnico em Informatica - IFMA</li>
+        <li>Bootcamp Spread Fullstack - Js/Ts</li>
+      </ul>
+    ),
+  },
+  {
+    title: "Certificaçoes",
+    id: "certifications",
+    content: (
+      <div className="text-gray-400 pl-2 space-y-2">
+        <li className="flex items-center gap-2">
+          <TrophyIcon />
+          Especialista React Native - Rocketseat
+        </li>
+        <li className="flex items-center gap-2">
+          <TrophyIcon />
+          Especialista React/NextJs - Rocketseat
+        </li>
+        <li className="flex items-center gap-2">
+          <TrophyIcon />
+          React Native - Udemy
+        </li>
+        <li className="flex items-center gap-2">
+          <TrophyIcon />
+          Desenvolvimento Mobile - Sujeito Programador
+        </li>
+      </div>
+    ),
+  },
+  {
+    title: "Redes",
+    id: "redes",
+    content: (
+      <div className="text-gray-400 pl-2 space-y-2">
+        <Link
+          className="flex items-center gap-2"
+          href="https://www.linkedin.com/in/luis-felipe-silv/"
+          target="_blank"
+        >
+          <LinkedinIcon />
+          Linkedin
+        </Link>
+
+        <Link className="flex items-center gap-2" href="/">
+          <HeadsetIcon />
+          Discord
+        </Link>
+
+        <Link className="flex items-center gap-2" href="/">
+          <MailIcon />
+          Gmail
+        </Link>
+        <Link
+          className="flex items-center gap-2"
+          href="https://github.com/GuilhaoF"
+          target="_blank"
+        >
+          <GithubIcon />
+          Github
+        </Link>
+      </div>
+    ),
+  },
+];
+
+export function AboutSection() {
+  const [tabSelected, setTabSelected] = useState("skills");
+  const [isPending, startTransition] = useTransition(); // serve para fazer animações de transição de elementos
+
+  function handleTabChange(id: any) {
+    startTransition(() => {
+      setTabSelected(id);
+    });
+  }
+
+  return (
+    <section className="text-black" id="about">
+      <div className="md:grid md:grid-cols-2 gap-8 items-center py-8 px-4 xl:gap-16 sm:py-16 xl:px-16">
+        <Image
+          src="/images/about.jpg"
+          alt="Luis Felipe"
+          width={600}
+          height={600}
+          className=""
+        />
+        <div className="mt-4 md:mt-0 text-left flex flex-col h-full">
+          <h2 className="text-4xl font-bold text-black mb-4">Sobre Mim</h2>
+          <div className="blur-background text-gray-500 p-14">
+            Meu nome é Luis Felipe, tenho 25 anos e sou desenvolvedor de
+            software. Atualmente trabalho como desenvolvedor freelancer , com
+            projetos para a comunidade. Tenho trabalhado com tecnologias como
+            ReactJs, NextJs e React Native. Sou apaixonado por tecnologia e
+            sempre busco aprender coisas novas.
+          </div>
+          <div className="flex flex-row justify-start mt-8">
+            <TabButton
+              selectTab={() => handleTabChange("skills")}
+              active={tabSelected === "skills"}
+            >
+              {" "}
+              Skills{" "}
+            </TabButton>
+            <TabButton
+              selectTab={() => handleTabChange("education")}
+              active={tabSelected === "education"}
+            >
+              {" "}
+              Educaçao{" "}
+            </TabButton>
+            <TabButton
+              selectTab={() => handleTabChange("certifications")}
+              active={tabSelected === "certifications"}
+            >
+              {" "}
+              Certificaçoes{" "}
+            </TabButton>
+            <TabButton
+              selectTab={() => handleTabChange("redes")}
+              active={tabSelected === "redes"}
+            >
+              {" "}
+              Redes de Contato{" "}
+            </TabButton>
+          </div>
+          <div className="mt-2">
+            {TAB_DATA.find((t) => t.id === tabSelected)?.content}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -0,0 +1,11 @@
+
+export function Footer(){
+  return (
+    <footer className="blur-background border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-black">
+        <div className="container  flex justify-between">
+        <span className="text-slate-600">LF</span>
+        <p className="text-slate-600">Todos os direitos reservados</p>
+      </div>
+    </footer>
+  )
+}
diff --git a/src/components/hero-section.tsx b/src/components/hero-section.tsx
@@ -17,7 +17,7 @@ export function HeroSection() {
           transition={{ duration: 0.5 }}
           className="col-span-8 place-self-center text-center sm:text-left justify-self-start"
         >
-          <h1 className="text-black mb-4 text-4xl sm:text-5xl lg:text-8xl lg:leading-normal font-extrabold">
+          <h1 className="text-black mb-4 text-4xl sm:text-2xl lg:text-8xl lg:leading-normal font-extrabold">
             <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-600">
               Hello, I&apos;m{" "}
             </span>
@@ -26,14 +26,12 @@ export function HeroSection() {
               sequence={[
                 "Luis Felipe ",
                 1000,
-                "Web Developer",
-                1000,
-                "Mobile Developer",
+                "Web e Mobile Developer",
                 1000,
               ]}
               wrapper="span"
-              speed={80}
-              repeat={Infinity}
+              speed={50}
+              repeat={2}
             />
           </h1>
           {/* <p className="text-[#ADB7BE] text-base sm:text-lg mb-6 lg:text-xl">
@@ -80,7 +78,7 @@ export function HeroSection() {
             className="absolute inset-0 flex items-center justify-center"
             >
               <Image
-                src="/hero-1.png"
+                src="/images/hero-1.png"
                 alt="hero image"
                 width={1000}
                 height={1000}

diff --git a/src/components/tabbar-button.tsx b/src/components/tabbar-button.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const variants = {
+  default: { width: 0 },
+  active: { width: "calc(100% - 0.75rem)" },
+};
+interface TabButtonProps {
+  active: boolean;
+  selectTab: () => void;
+  children: React.ReactNode;
+}
+
+export function TabButton({ active, selectTab, children } : TabButtonProps) {
+  const buttonClasses = active ? "text-green-500 border-b-2 border-green-500" : "text-black";
+
+  return (
+    <button onClick={selectTab}>
+      <p className={`mr-3 font-semibold ${buttonClasses}`}>
+        {children}
+      </p>
+      <motion.div
+        animate={active ? "active" : "default"}
+        variants={variants}
+        className="h-1 bg-primary-500 mt-2 mr-3"
+      ></motion.div>
+    </button>
+  );
+};
+
+export default TabButton;
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -2,19 +2,24 @@ import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
-    <Html lang="pt-Br">
+    <Html lang="pt-br">
       <Head />
       <body>
-      <div className="bubbles">
-          <div className="bubble"></div>
-          <div className="bubble"></div>
-          <div className="bubble"></div>
-          <div className="bubble"></div>
-          <div className="bubble"></div>
+        <div className="background">
+          <div className="bubbles">
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+            <div className="bubble"></div>
+          </div>
         </div>
-          <Main />
-          <NextScript />
+        <Main />
+        <NextScript />
       </body>
     </Html>
   );
-}
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,13 +1,17 @@
+import { AboutSection } from "@/components/about-section";
+import { Footer } from "@/components/footer";
 import { HeroSection } from "@/components/hero-section";
 import { Navbar } from "@/components/navbar";
 
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col ">
       <Navbar />
-      <div className=" mt-24 mx-auto px-12 py-4">
+      <div className="container mt-36 mx-auto px-18 py-4">
         <HeroSection />
+        <AboutSection />
       </div>
+      <Footer />
     </div>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -19,9 +19,17 @@
 body {
   color: rgb(var(--foreground-rgb));
   background: #f7f7f7;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
+.blur-background {
+  backdrop-filter: blur(10px);
+  background-color: rgba(255, 255, 255, 0.3); /* Ajuste a opacidade conforme necessário */
+  padding: 1rem; /* Adicione padding para espaçamento interno */
+  border-radius: 8px; /* Adicione bordas arredondadas, se desejar */
+  border: 2px solid #cccc; /* Adicione uma borda para separar o conteúdo do fundo */
+  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1); /* Adicione uma sombra para destacar o conteúdo */
+}
 
 .bubbles {
   position: absolute;