Skip to content

Commit

Permalink
Merge pull request #2 from afsaa/dev
Browse files Browse the repository at this point in the history
Dev updates
  • Loading branch information
afsaa authored Sep 27, 2023
2 parents 5a79839 + be9c7b1 commit 434140f
Show file tree
Hide file tree
Showing 37 changed files with 965 additions and 220 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
15 changes: 11 additions & 4 deletions src/components/ExperiencePreview/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
);
Expand Down
44 changes: 32 additions & 12 deletions src/components/ExperiencesCard/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Expand Down
14 changes: 11 additions & 3 deletions src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Hero/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/components/Navbar/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
Expand All @@ -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>
);
Expand Down
9 changes: 8 additions & 1 deletion src/components/Navbar/partials/NavItem.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
35 changes: 35 additions & 0 deletions src/components/ProjectCard/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
57 changes: 57 additions & 0 deletions src/components/Skill/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
29 changes: 29 additions & 0 deletions src/components/Skill/partials/SkillItem.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 434140f

Please sign in to comment.