Merge pull request #2 from afsaa/dev

Dev updates

Author: afsaa

package.json

@@ -21,7 +21,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "graphql": "^16.6.0",
     "markdown-to-jsx": "^7.1.7",
-    "next": "latest",
+    "next": "^13.5.3",
     "prettier": "^2.5.1",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",

src/components/ExperiencePreview/index.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import Markdown from 'markdown-to-jsx';
 import Button from '@/ui/button';
+import { useTranslations } from '../../hooks';
 
 interface IExperiencePreview {
   heading: string;
@@ -10,19 +11,25 @@ interface IExperiencePreview {
 
 const ExperiencePreview = ({ heading, description }: IExperiencePreview) => {
   const router = useRouter();
+  const translationsResponse = useTranslations('ExperiencePreview');
+  const [labels, setLabels] = useState(async () => {
+    await translationsResponse.then((data) => {
+      setLabels(data);
+    });
+  });
 
   return (
-    <section className="m-0 h-auto flex flex-col items-center">
+    <section className="w-full md:w-1/2 lg:w-2/3 p-0 md:pr-10 flex flex-col items-center justify-evenly">
       <article className="w-full flex flex-col  items-center justify-between">
         <div className="flex items-center justify-center">
-          <h2 className="text-3xl text-carrara font-montserrat font-bold">{heading}</h2>
+          <h2 className="text-center text-3xl text-carrara font-montserrat font-bold">{heading}</h2>
         </div>
         <div className="mt-5 flex items-center justify-center">
           <Markdown className="font-cabin text-lg text-justify indent-8">{description || ''}</Markdown>
         </div>
       </article>
       <div className="my-5 flex items-center justify-center">
-        <Button primary text="See more" onClick={() => router.push('/exp-and-projects')} />
+        <Button primary text={labels['seeMore']} onClick={() => router.push('/exp-and-projects')} />
       </div>
     </section>
   );

src/components/ExperiencesCard/index.tsx

@@ -1,20 +1,40 @@
 import Experience from './../Experience';
-import React from 'react';
+import React, { useState } from 'react';
 import Button from '@/ui/button';
 import { Experience as ExpGenerated } from '../../generated/graphql';
+import Link from 'next/link';
+import { useTranslations } from '../../hooks';
+
+type experienceCardProps = {
+  cvUrl?: string;
+  experiences: ExpGenerated[];
+};
+
+const ExperiencesCard = ({ cvUrl, experiences }: experienceCardProps) => {
+  const translationsResponse = useTranslations('ExperiencesCard');
+  const [labels, setLabels] = useState(async () => {
+    await translationsResponse.then((data) => {
+      setLabels(data);
+    });
+  });
 
-const ExperiencesCard = ({ experiences }: { experiences: ExpGenerated[] }) => {
   return (
-    <div className="w-auto md:w-96 h-auto p-4 border border-stone-600 rounded-xl flex flex-col justify-between justify-self-center bg-black/50">
-      <>
-        <h2 className="font-montserrat font-bold text-carrara">Work</h2>
-        {experiences.map((experience) => {
-          return <Experience {...experience} />;
-        })}
-        <div className="mt-4">
-          <Button primary size="full" text="Download CV" />
-        </div>
-      </>
+    <div className="w-full md:w-1/2 lg:w-1/3 flex items-center justify-center">
+      <div className="w-auto md:w-96 h-auto p-4 border border-stone-600 rounded-xl flex flex-col justify-between justify-self-center bg-black/50">
+        <>
+          <h2 className="font-montserrat font-bold text-carrara">{labels['work']}</h2>
+          {experiences.map((experience) => {
+            return <Experience {...experience} />;
+          })}
+          <div className="mt-4">
+            {cvUrl?.length > 0 && (
+              <Link href={cvUrl} target="_blank">
+                <Button primary size="full" text={labels['downloadCV']} />
+              </Link>
+            )}
+          </div>
+        </>
+      </div>
     </div>
   );
 };

src/components/Footer/index.tsx

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslations } from '../../hooks';
 import NavItem, { INavItem } from '../Navbar/partials/NavItem';
 
 const Footer = ({ navItems }: { navItems?: INavItem[] }) => {
+  const translationsResponse = useTranslations('Footer');
+  const [labels, setLabels] = useState(async () => {
+    await translationsResponse.then((data) => {
+      setLabels(data);
+    });
+  });
+
   return (
-    <div className="mt-10 p-5 md:p-20 flex flex-col md:flex-row justify-between bg-black shadow-xl">
+    <div className="mt-10 p-5 md:px-11 md:py-16 flex flex-col md:flex-row justify-between bg-black shadow-xl">
       <div className="flex flex-col md:flex-row">
         {navItems?.map(({ sys, title, pathname }) => (
           <NavItem key={sys?.id} title={title} pathname={pathname} />
         ))}
       </div>
       <div className="flex items-center justify-center md:justify-start my-5 md:my-0">
-        <p className="font-cabin text-center md:text-left text-carrara/50"> &copy; 2023 Andres Saa. All rights reserved.</p>
+        <p className="font-cabin text-center md:text-left text-carrara/50"> &copy; 2023 Andres Saa. {labels['allRightsReserved']}.</p>
       </div>
     </div>
   );

src/components/Hero/index.tsx

@@ -6,7 +6,7 @@ type HeroProps = {
 
 const Hero = ({ error, onError, render }: HeroProps) => {
   return (
-    <section className="m-0 md:my-4 px-10 py-5 md:py-10 flex flex-wrap items-center justify-around md:flex-nowrap">
+    <section className="my-4 md:my-10 px-10 py-5 md:py-10 flex flex-wrap">
       {error && onError()}
       {render && render()}
     </section>

src/components/Navbar/index.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { GiHamburgerMenu } from 'react-icons/gi';
 import Link from 'next/link';
 import NavItem, { INavItem } from './partials/NavItem';
 import Icon from '@/ui/icon';
@@ -12,7 +11,7 @@ const Navbar = ({ navItems }: { navItems?: INavItem[] }) => {
   };
 
   return (
-    <nav className="mb-10 p-5 md:p-20 relative md:static flex items-center justify-between bg-black shadow-xl">
+    <nav className="mb-10 p-5 md:px-11 md:py-16 relative md:static flex items-center justify-between bg-black shadow-xl">
       <Link href="/" legacyBehavior>
         <a className="font-montserrat font-semibold text-2xl text-carrara">AFSAA</a>
       </Link>
@@ -22,7 +21,7 @@ const Navbar = ({ navItems }: { navItems?: INavItem[] }) => {
         ))}
       </div>
       <div className="md:hidden cursor-pointer" onClick={() => handleToggleMenu()}>
-        <Icon className="text-carrara" icon={<GiHamburgerMenu />} fontSize="25px" color="" />
+        <Icon className="text-carrara" icon="GiHamburgerMenu" fontSize="25px" color="" />
       </div>
     </nav>
   );

src/components/Navbar/partials/NavItem.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import Link from 'next/link';
 import { Sys } from '../../../generated/graphql';
+import { useRouter } from 'next/router';
 
 export type INavItem = { sys?: Sys; pathname?: string; query?: string; title?: string };
 
 const NavItem = ({ pathname, query = '', title }: INavItem) => {
+  const router = useRouter();
+
   return (
-    <li className="transition-all mx-2 p-2 list-none no-underline rounded-md font-montserrat font-medium text-lg text-carrara hover:bg-primary-light/50 hover:drop-shadow-lg">
+    <li
+      className={`transition-all mx-2 p-2 list-none no-underline font-montserrat font-medium text-lg text-carrara ${
+        pathname === router.route ? 'border-b-2 border-primary-light hover:drop-shadow-lg' : ''
+      } hover:border-b-2 border-primary-light hover:drop-shadow-lg`}
+    >
       <Link className="h-full" href={{ pathname, query }}>
         {title}
       </Link>

src/components/ProjectCard/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Project } from '../../generated/graphql';
+import Icon from '../../ui/icon';
+import Link from 'next/link';
+
+interface ProjectCardProps extends Project {}
+
+const ProjectCard = ({ title, description, technologies, image, url }: ProjectCardProps): JSX.Element => {
+  return (
+    <Link href={url} target="_blank">
+      <div className="max-w-md border border-stone-600 rounded-xl bg-black/50 shadow-md  overflow-hidden hover:opacity-80 focus:opacity-80">
+        <img src={image?.url || 'https://via.placeholder.com/400x250'} alt={title} className="w-full h-48 object-fill" />
+        <div className="p-4">
+          <h3 className="mb-2 font-montserrat font-bold text-xl">{title}</h3>
+          <p className="mb-4 font-cabin text-carrara/50 whitespace-normal">{description}</p>
+          <div className="flex flex-wrap">
+            {technologies.map((technology) => (
+              <span key={technology} className="mr-2 mb-2 py-1 px-2 rounded-full bg-primary-light text-mirage  font-cabin font-medium text-sm">
+                {technology}
+              </span>
+            ))}
+          </div>
+          <div className="mt-2">
+            <p className="flex items-center gap-2 text-white font-cabin">
+              <Icon icon="BiLink" fontSize="20px" color="white" />
+              {url}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default ProjectCard;

src/components/Skill/index.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Skill } from '../../generated/graphql';
+import { useTranslations } from '../../hooks';
+import SkillItem from './partials/SkillItem';
+
+interface ISkill {
+  skills: Skill[];
+  hasHardSkills?: boolean;
+  hasSoftSkills?: boolean;
+  hasOtherSkills?: boolean;
+}
+
+const SkillComponent = ({ skills, hasHardSkills, hasSoftSkills, hasOtherSkills }: ISkill): JSX.Element => {
+  const translationsResponse = useTranslations('Skill');
+  const [labels, setLabels] = useState(async () => {
+    await translationsResponse.then((data) => {
+      setLabels(data);
+    });
+  });
+
+  return (
+    <>
+      {hasHardSkills && (
+        <div>
+          <h2 className="text-2xl font-montserrat">{labels['hardSkillsHeading']}</h2>
+          <div className="my-5 flex items-center justify-around md:justify-start flex-wrap gap-10">
+            {skills.map((skill) => {
+              return <SkillItem type="hard" name={skill.technology} />;
+            })}
+          </div>
+        </div>
+      )}
+      {hasSoftSkills && (
+        <div>
+          <h2 className="text-2xl font-montserrat">{labels['softSkillsHeading']}</h2>
+          <div className="my-5 flex md:flex-row flex-col items-center justify-start gap-10 font-cabin">
+            {skills.map((skill) => {
+              return <SkillItem type="soft" name={skill.technology} />;
+            })}
+          </div>
+        </div>
+      )}
+      {hasOtherSkills && (
+        <div>
+          <h2 className="text-2xl font-montserrat"> {labels['otherSkillsHeading']}</h2>
+          <div className="my-5 flex md:flex-row flex-col items-center justify-start gap-10 font-cabin">
+            {skills.map((skill) => {
+              return <SkillItem type="other" name={skill.technology} />;
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SkillComponent;

src/components/Skill/partials/SkillItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Icon from '@/ui/icon';
+
+interface ISkillItem {
+  type: 'hard' | 'soft' | 'other';
+  name: string;
+}
+
+const SkillItem = ({ type, name }: ISkillItem): JSX.Element => {
+  const hasSoftOrOtherSkill: boolean = type === 'soft' || type === 'other';
+
+  return (
+    <>
+      {type === 'hard' && (
+        <span className="flex flex-col items-center font-cabin">
+          <Icon className="mb-2 text-carrara" icon={`Si${name}`} fontSize="50px" color="" />
+          {name}
+        </span>
+      )}
+      {hasSoftOrOtherSkill && (
+        <div className="my-5 flex md:flex-row flex-col items-center justify-start gap-10 font-cabin">
+          <p>{name}</p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SkillItem;