Merge pull request #10 from aureliodeboa/dev-projects

Dev projects
aureliodeboa · Jun 19, 2024 · 4226bef · 4226bef
2 parents 9e4059f + 365e55c
commit 4226bef
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 36 deletions.
diff --git a/locales/pt.json b/locales/pt.json
@@ -12,7 +12,7 @@
     },
     "about-me":{
         "title":"Sobre mim",
-        "description":"Desde criança, eu desmontava tudo, tentando entender como o mundo funciona por dentro. Daí surgiu minha paixão por compreender como os circuitos lógicos dos meus brinquedos funcionavam, o que me impulsionou a me graduar em Engenharia da Computação na Universidade Federal do Vale do São Francisco. Na universidade, enfrentei diversos desafios nas áreas de hardware e software, alguns dos quais você pode conferir no meu GitHub. No momento, me dedico ao desenvolvimento de software, mais precisamente ao front-end do desenvolvimento web. Já me aventurei em projetos de mobile (Flutter), análise de dados e inteligência artificial.Atualmente, estou envolvido com a empresa júnior I9 e continuo aprimorando meus conhecimentos em React e Power BI."
+        "description":"Desde criança, eu desmontava tudo, tentando entender como o mundo funcionava por dentro. Daí surgiu minha paixão por compreender como os circuitos lógicos dos meus brinquedos funcionavam, o que me impulsionou a me graduar em Engenharia da Computação na Universidade Federal do Vale do São Francisco. Na universidade, enfrentei diversos desafios nas áreas de hardware e software, alguns dos quais você pode conferir no meu GitHub. No momento, me dedico ao desenvolvimento de software, mais precisamente ao front-end do desenvolvimento web. Já me aventurei em projetos de mobile (Flutter), análise de dados e inteligência artificial.Atualmente, estou envolvido com a empresa júnior I9 e continuo aprimorando meus conhecimentos em React e Power BI."
     },
     "current-language":{
         "locale":"pt"

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -17,8 +17,9 @@ const Page = () =>{
       <Container>
         <Navbar/>
         <Profile/>
-        <About_me/>
         <Projects/>
+        <About_me/>
+
       </Container>
     </ThemeProvider>
 

diff --git a/src/assets/data/projectsData-en.ts b/src/assets/data/projectsData-en.ts
@@ -27,38 +27,39 @@ export const projectData_en: projectType[] = [
     },
     {
         id: 3,
-        imageProject: imgSibi,
-        title: "SIBI in the Palm of Your Hand",
-        description: "SIBI (Integrated Libraries System of UNIVASF) is an application developed using the Flutter framework. It serves as a user guide for the library system of the Federal University of Vale do São Francisco (UNIVASF), offering quick and intuitive access to SIBI information.",
-        linkGithub: "https://github.com/aureliodeboa/AplicativoSIBI?tab=readme-ov-file",
-        usedtechnologies: ["Flutter", "Dart", "Scrum", "Git"],
-        urlProject: "https://www.youtube.com/watch?v=p7WKsB0vFxk&feature=youtu.be"
+        imageProject: imgStarbuks,
+        title: "Starbucks",
+        description: "This is a Starbucks homepage project developed to practice CSS grid-template property skills. In this project, I used only HTML and CSS to create a simple replica of the Starbucks homepage.",
+        linkGithub: "https://github.com/aureliodeboa/Starbucks?tab=readme-ov-file",
+        usedtechnologies: ["Html", "Css", "Git"],
+        urlProject: "https://inquisitive-cendol-2fd1cd.netlify.app/"
     },
     {
         id: 4,
-        imageProject: imgQuizReact,
-        title: "Quiz App",
-        description: "This project is a Quiz application developed with React, Next.js, Tailwind CSS, and TypeScript. It allows users to answer a series of questions and displays correct and incorrect alternatives at the end.",
-        linkGithub: "https://github.com/aureliodeboa/Quiz-app?tab=readme-ov-file",
-        usedtechnologies: ["Typescript", "Tailwind", "React", "Next.js", "Html", "Git"],
-        urlProject: "https://fastidious-kangaroo-7e1acc.netlify.app/"
-    },
-    {
-        id: 5,
         imageProject: imgTodoReact,
         title: "To-Do List",
         description: "This is a simple To-Do List project developed using React, Next.js, and TypeScript. The application allows users to add, mark as completed, and remove tasks from the list.",
         linkGithub: "https://github.com/aureliodeboa/To-do-with-React?tab=readme-ov-file",
         usedtechnologies: ["Typescript", "Tailwind", "React", "Next.js", "Html", "Git"],
         urlProject: "https://master--gentle-snickerdoodle-46b5f2.netlify.app/"
     },
+    {
+        id: 5,
+        imageProject: imgQuizReact,
+        title: "Quiz App",
+        description: "This project is a Quiz application developed with React, Next.js, Tailwind CSS, and TypeScript. It allows users to answer a series of questions and displays correct and incorrect alternatives at the end.",
+        linkGithub: "https://github.com/aureliodeboa/Quiz-app?tab=readme-ov-file",
+        usedtechnologies: ["Typescript", "Tailwind", "React", "Next.js", "Html", "Git"],
+        urlProject: "https://fastidious-kangaroo-7e1acc.netlify.app/"
+    },    
     {
         id: 6,
-        imageProject: imgStarbuks,
-        title: "Starbucks",
-        description: "This is a Starbucks homepage project developed to practice CSS grid-template property skills. In this project, I used only HTML and CSS to create a simple replica of the Starbucks homepage.",
-        linkGithub: "https://github.com/aureliodeboa/Starbucks?tab=readme-ov-file",
-        usedtechnologies: ["Html", "Css", "Git"],
-        urlProject: "https://inquisitive-cendol-2fd1cd.netlify.app/"
-    }
+        imageProject: imgSibi,
+        title: "SIBI in the Palm of Your Hand",
+        description: "SIBI (Integrated Libraries System of UNIVASF) is an application developed using the Flutter framework. It serves as a user guide for the library system of the Federal University of Vale do São Francisco (UNIVASF), offering quick and intuitive access to SIBI information.",
+        linkGithub: "https://github.com/aureliodeboa/AplicativoSIBI?tab=readme-ov-file",
+        usedtechnologies: ["Flutter", "Dart", "Scrum", "Git"],
+        urlProject: "https://www.youtube.com/watch?v=p7WKsB0vFxk&feature=youtu.be"
+    },
+
 ];
diff --git a/src/components/ExpandableText.tsx b/src/components/ExpandableText.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+interface ExpandableTextProps {
+  text: string;
+  maxLength: number;
+}
+
+const ExpandableText: React.FC<ExpandableTextProps> = ({ text, maxLength }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className="text-container">
+      <p className="text-justify text-sm sm:text-base md:text-lg">
+        {isExpanded ? text : `${text.substring(0, maxLength)}...`}
+      </p>
+      <button onClick={toggleExpand} className="text-yellow-500  hover:animate-pulse">
+        {isExpanded ? 'Ver menos' : 'Ver mais'}
+      </button>
+    </div>
+  );
+};
+
+export default ExpandableText;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -11,7 +11,7 @@ export const ProjectCard = (projectCardContent:projectType) =>{
 
                 <h1 className="text-sm sm:text-lg text-center px-3 md:text-3xl font-bold hover:text-[#AAA]">{projectCardContent.title}</h1>
             </a>
-           <p className="text-xs sm:text-sm px-2 md:text-base md:px-6 text-justify">{projectCardContent.description}</p>
+           <p className="text-xs sm:text-sm px-4 md:text-base md:px-6 text-justify">{projectCardContent.description}</p>
            <div className="p-3 flex flex-row gap-2 flex-wrap w-full items-center justify-center">
             {
                   projectCardContent.usedtechnologies.map((usedTechnologie,index)=>(

diff --git a/src/components/sections/About-me.tsx b/src/components/sections/About-me.tsx
@@ -3,6 +3,7 @@ import { ExperienceCard } from "../ExperienceCard";
 import { experienceData_pt } from "@/assets/data/experienceData-pt";
 import { experienceData_en } from "@/assets/data/experienceData-en"
 
+import ExpandableText from '@/components/ExpandableText';
 
 
 export const About_me = () =>{
@@ -17,8 +18,8 @@ export const About_me = () =>{
         <section className="flex flex-col items-center w-full pt-8  h-auto gap-8  justify-around border-t-[1px] border-gray-800 border-solid ">
 
              <div className="h-1/2 px-4 sm:px-10 md:px-20  ">
-                <h1 className="py-5 text-2xl">{t("about-me.title")}</h1>
-                <p className="text-justify text-sm sm:text-base md:text-lg">{t("about-me.description")}</p>
+                <h1 className="py-5 text-2xl md:text-3xl font-bold">{t("about-me.title")}</h1>
+                <ExpandableText text={t("about-me.description")}  maxLength={250} />
              </div>
 
              <div className=" relative h-auto flex flex-row flex-wrap  justify-around py-10 gap-8 w-full items-center ">
@@ -28,7 +29,7 @@ export const About_me = () =>{
                     <hr className="absolute w-[2px] xl:left-[50%] h-full border-0 border-l-2 border-dotted border-black dark:border-white" />
 
                     {experienceData.map((experience)=>(
-                        <div key={experience.id} className={`w-full px-4 sm:px-5 xl:px-20 flex justify-center    ${experience.id%2?'md:justify-start':'md:justify-end'}`}>
+                        <div key={experience.id} className={`w-full px-4 sm:px-5 lg:px-10  xl:px-32 flex justify-center    ${experience.id%2?'md:justify-start':'md:justify-end'}`}>
 
 
                             <ExperienceCard  id={experience.id} logoCompany={experience.logoCompany} titleCompany={experience.titleCompany} titleJob={experience.titleJob}

diff --git a/src/components/sections/Projects.tsx b/src/components/sections/Projects.tsx
@@ -7,7 +7,8 @@ import { EffectCoverflow, Navigation, Pagination } from "swiper/modules";
 // Import Swiper styles
 import 'swiper/css';
 import 'swiper/css/pagination';
-import 'swiper/css/navigation'
+
+
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 //import os dados dos projetos
@@ -19,7 +20,7 @@ export const Projects = () => {
   //função para pegar o tamanho da tela e retornar a quantidade dos cards
 
   const getSlidesPerView = () => {
-
+    //o primeiro if resolve o problema do window undefined
     if (typeof window !== "undefined") {
       if (window.innerWidth > 1720) {
 
@@ -60,15 +61,15 @@ export const Projects = () => {
 
 
   return (
-    <div className="h-auto py-8 flex flex-col items-center w-full">
-      <div className="h-dvh w-full">
-        <h1 className="text-4xl px-10 font-bold text-left">Projetos</h1>
-        <h6 className="pt-5 px-10 text-base text-left">
+    <div className="h-auto py-8 flex flex-col items-center  w-full">
+      <div className="h-auto w-full ">
+        <h1 className="text-2xl md:text-4xl px-5 md:px-10 font-bold text-left">Projetos</h1>
+        <h6 className="pt-5  px-5 md:px-10 text-base text-left">
           Esses são alguns dos meus projetos pessoais que estão disponíveis no GitHub, ao clicar na imagem você será redirecionado para o site do projeto e ao clicar no titulo você irá para o repositorio.
         </h6>
-        <div className="flex justify-center mr-28 items-center w-full mt-6">
+        <div className="flex justify-center h-auto items-center w-full mt-6">
           <Swiper
-            modules={[Navigation,Pagination, EffectCoverflow]}
+            modules={[Pagination, EffectCoverflow]}
             effect={'coverflow'}
             grabCursor={true}
             centeredSlides={true}
@@ -95,6 +96,7 @@ export const Projects = () => {
             }
 
             <div className="relative slider-controler flex flex-row justify-center items-center gap-2 mt-5 w-full h-8">
+
               <div className="absolute swiper-pagination"></div>
             </div>
           </Swiper>