From 0c404e4d06dd10b29a1cca65c2aea1e4944d734d Mon Sep 17 00:00:00 2001 From: Krsiak Daniel Date: Sat, 30 Nov 2024 21:38:19 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=91=B7=20homepage=20layout=20?= =?UTF-8?q?and=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/about-me/page.tsx | 2 +- app/page.tsx | 2 + components/aboutMe/JobsDescription.tsx | 2 +- components/aboutMe/Photo.tsx | 13 +++- components/homepage/ContactVcard.tsx | 13 +++- components/homepage/Hero.tsx | 71 +++------------------ components/homepage/HeroContactLinks.tsx | 20 ++++++ components/homepage/HeroHeading.tsx | 13 ++++ components/homepage/HeroLink.tsx | 16 +++++ components/homepage/HeroMainLinks.tsx | 29 +++++++++ components/homepage/HeroParagraph.tsx | 9 +++ components/homepage/MyMindset.tsx | 22 +++++++ components/homepage/Skills.tsx | 16 +---- components/homepage/SkillsForCompany.tsx | 22 +++++++ components/homepage/SkillsIconGroup.tsx | 17 +++++ components/homepage/WhatIDoMindset.tsx | 81 +----------------------- data/whatido/index.ts | 42 ++++++++++++ 17 files changed, 226 insertions(+), 164 deletions(-) create mode 100644 components/homepage/HeroContactLinks.tsx create mode 100644 components/homepage/HeroHeading.tsx create mode 100644 components/homepage/HeroLink.tsx create mode 100644 components/homepage/HeroMainLinks.tsx create mode 100644 components/homepage/HeroParagraph.tsx create mode 100644 components/homepage/MyMindset.tsx create mode 100644 components/homepage/SkillsForCompany.tsx create mode 100644 components/homepage/SkillsIconGroup.tsx create mode 100644 data/whatido/index.ts diff --git a/app/about-me/page.tsx b/app/about-me/page.tsx index b75d36f8..66d0c368 100644 --- a/app/about-me/page.tsx +++ b/app/about-me/page.tsx @@ -40,7 +40,7 @@ const About = () => {
- +
{ + {/* TODO: refactor for all pages into constants, urls, text, test IDs */} { return ( -
+
    {jobs.map((job) => ( diff --git a/components/aboutMe/Photo.tsx b/components/aboutMe/Photo.tsx index bde9f91f..568fbbcd 100644 --- a/components/aboutMe/Photo.tsx +++ b/components/aboutMe/Photo.tsx @@ -1,12 +1,16 @@ import krsiak from '@/public/images/krsiak-daniel.webp' import Image from 'next/image' -const Photo = () => { +type PhotoProps = { + isMediumWidth?: boolean +} + +const Photo = ({ isMediumWidth = false }: PhotoProps) => { return ( -
    +
    Daniel Krsiak { height: 'auto', }} /> +
    +

    Daniel KrΕ‘iak

    +
    ) } diff --git a/components/homepage/ContactVcard.tsx b/components/homepage/ContactVcard.tsx index b3740bff..5156dfe9 100644 --- a/components/homepage/ContactVcard.tsx +++ b/components/homepage/ContactVcard.tsx @@ -1,3 +1,4 @@ +import Photo from '@/components/aboutMe/Photo' import DividerWithText from '@/components/shared/DividerWithText' import vcardQRcode from '@/public/images/svg/vcard-qr-code.svg' import Image from 'next/image' @@ -5,9 +6,15 @@ import Image from 'next/image' const ContactVcard = () => { return (
    - -
    - contact QR code + +
    + +
    +
    + +
    + contact QR code +
    ) diff --git a/components/homepage/Hero.tsx b/components/homepage/Hero.tsx index c97533f2..f5fa283e 100644 --- a/components/homepage/Hero.tsx +++ b/components/homepage/Hero.tsx @@ -1,71 +1,18 @@ -import TypeAnimationText from '@/components/homepage/TypeAnimationText' -import { CONTACT, EXTERNAL_URL, ID } from '@/utils/constants' -import ContactVcard from './ContactVcard' - -type HeroLinkProps = { - href: string - text: string - className: string - testId: string -} - -const sharedCss = 'w-[248px] text-md rounded-lg px-5 py-2.5 text-center font-medium focus:outline-none focus:ring-4' - -const HeroLink = ({ href, text, className = '', testId }: HeroLinkProps) => ( - - {text} - -) +import { ID } from '@/utils/constants' +import HeroContactLinks from './HeroContactLinks' +import HeroHeading from './HeroHeading' +import HeroMainLinks from './HeroMainLinks' +import HeroParagraph from './HeroParagraph' const Hero = () => { return (
    -

    - Daniel Krsiak -
    - -

    - -

    - Hi πŸ‘‹ I am React Developer based in Brno, Czech Republic πŸ‡¨πŸ‡Ώ -

    -
    -
    - - - -
    -
    - - + +
    - + +
    ) } diff --git a/components/homepage/HeroContactLinks.tsx b/components/homepage/HeroContactLinks.tsx new file mode 100644 index 00000000..4dd43735 --- /dev/null +++ b/components/homepage/HeroContactLinks.tsx @@ -0,0 +1,20 @@ +import { CONTACT } from '@/utils/constants' +import HeroLink from './HeroLink' + +const sharedCss = 'border border-gray-300 bg-white text-neutral-900 hover:bg-gray-100 focus:ring-gray-100' + +const HeroContactLinks = () => { + return ( +
    + + +
    + ) +} + +export default HeroContactLinks diff --git a/components/homepage/HeroHeading.tsx b/components/homepage/HeroHeading.tsx new file mode 100644 index 00000000..ca30b246 --- /dev/null +++ b/components/homepage/HeroHeading.tsx @@ -0,0 +1,13 @@ +import TypeAnimationText from '@/components/homepage/TypeAnimationText' + +const HeroHeading = () => { + return ( +

    + Daniel KrΕ‘iak +
    + +

    + ) +} + +export default HeroHeading diff --git a/components/homepage/HeroLink.tsx b/components/homepage/HeroLink.tsx new file mode 100644 index 00000000..cb50ead0 --- /dev/null +++ b/components/homepage/HeroLink.tsx @@ -0,0 +1,16 @@ +type HeroLinkProps = { + href: string + text: string + className: string + testId: string +} + +const sharedCss = 'w-[248px] text-md rounded-lg px-5 py-2.5 text-center font-medium focus:outline-none focus:ring-4' + +const HeroLink = ({ href, text, className = '', testId }: HeroLinkProps) => ( + + {text} + +) + +export default HeroLink diff --git a/components/homepage/HeroMainLinks.tsx b/components/homepage/HeroMainLinks.tsx new file mode 100644 index 00000000..0a7d393c --- /dev/null +++ b/components/homepage/HeroMainLinks.tsx @@ -0,0 +1,29 @@ +import { EXTERNAL_URL } from '@/utils/constants' +import HeroLink from './HeroLink' + +const HeroMainLinks = () => { + return ( +
    + + + +
    + ) +} + +export default HeroMainLinks diff --git a/components/homepage/HeroParagraph.tsx b/components/homepage/HeroParagraph.tsx new file mode 100644 index 00000000..1522ee24 --- /dev/null +++ b/components/homepage/HeroParagraph.tsx @@ -0,0 +1,9 @@ +const HeroParagraph = () => { + return ( +

    + Hi πŸ‘‹ I am React Developer based in Brno, Czech Republic πŸ‡¨πŸ‡Ώ +

    + ) +} + +export default HeroParagraph diff --git a/components/homepage/MyMindset.tsx b/components/homepage/MyMindset.tsx new file mode 100644 index 00000000..f28c376e --- /dev/null +++ b/components/homepage/MyMindset.tsx @@ -0,0 +1,22 @@ +import { mindsetInfo } from '@/data/whatido' +import Heading2 from '../shared/Heading2' + +const MyMindset = () => { + return ( +
    + πŸ₯‡πŸš€ I Have Committed Mindset + {mindsetInfo.map((mindset) => ( +
    +

    + + {mindset.id}. {mindset.title} + +

    +

    {mindset.description}

    +
    + ))} +
    + ) +} + +export default MyMindset diff --git a/components/homepage/Skills.tsx b/components/homepage/Skills.tsx index 9e1ca292..3ba19162 100644 --- a/components/homepage/Skills.tsx +++ b/components/homepage/Skills.tsx @@ -1,21 +1,7 @@ import DividerWithText from '@/components/shared/DividerWithText' import { iconsSkills1, iconsSkills2, iconsSkills3, iconsSkills4 } from '@/data/skills/skills-main' import { ID } from '@/utils/constants' -import { Icon } from '@/utils/interfaces' -import Image from 'next/image' - -type SkillsIconGroupProps = { - icons: Icon[] - className?: string -} - -const SkillsIconGroup = ({ icons, className = '' }: SkillsIconGroupProps) => ( -
    - {icons.map((item) => ( - {item.name} - ))} -
    -) +import SkillsIconGroup from './SkillsIconGroup' const Skills = () => { return ( diff --git a/components/homepage/SkillsForCompany.tsx b/components/homepage/SkillsForCompany.tsx new file mode 100644 index 00000000..6136db1a --- /dev/null +++ b/components/homepage/SkillsForCompany.tsx @@ -0,0 +1,22 @@ +import { skillsInfo } from '@/data/whatido' +import Heading2 from '../shared/Heading2' + +const SkillsForCompany = () => { + return ( +
    + πŸ’°πŸ“ˆ My Skills For Your Company + {skillsInfo.map((skill) => ( +
    +

    + + {skill.id}. {skill.title} + +

    +

    {skill.description}

    +
    + ))} +
    + ) +} + +export default SkillsForCompany diff --git a/components/homepage/SkillsIconGroup.tsx b/components/homepage/SkillsIconGroup.tsx new file mode 100644 index 00000000..ac6182a6 --- /dev/null +++ b/components/homepage/SkillsIconGroup.tsx @@ -0,0 +1,17 @@ +import { Icon } from '@/utils/interfaces' +import Image from 'next/image' + +type SkillsIconGroupProps = { + icons: Icon[] + className?: string +} + +const SkillsIconGroup = ({ icons, className = '' }: SkillsIconGroupProps) => ( +
    + {icons.map((item) => ( + {item.name} + ))} +
    +) + +export default SkillsIconGroup diff --git a/components/homepage/WhatIDoMindset.tsx b/components/homepage/WhatIDoMindset.tsx index afaba3a4..c7ffa23a 100644 --- a/components/homepage/WhatIDoMindset.tsx +++ b/components/homepage/WhatIDoMindset.tsx @@ -1,83 +1,6 @@ -import { YEARS } from '@/utils/constants' -import { SkillInfo } from '@/utils/interfaces' import DividerWithText from '../shared/DividerWithText' -import Heading2 from '../shared/Heading2' - -const skillsInfo: SkillInfo[] = [ - { - id: 1, - title: 'Passionate about JavaScript, TypeScript, and React', - description: `I have ${YEARS.javascript} years of experience creating modern, interactive web applications, utilizing Tailwind CSS to deliver visually appealing and\u00A0responsive designs.`, - }, - { - id: 2, - title: 'Proficient in technologies', - description: - 'I leverage React, Next.js, Redux, GraphQL, Jest, Playwright, and\u00A0Figma to ensure code reliability, scalability and\u00A0the\u00A0delivery of\u00A0high-quality solutions and\u00A0products.', - }, - { - id: 3, - title: 'Focus on type safety', - description: `With ${YEARS.typescript} years of experience in TypeScript, I focus on code safety, and creating robust and scalable codebases. Less errors save both time and\u00A0money.`, - }, -] - -const mindsetInfo: SkillInfo[] = [ - { - id: 1, - title: 'Committed to continuous learning', - description: - 'I continuously improve my technical skills and stay updated with trends by actively engaging in online communities and\u00A0learning to\u00A0enhance my knowledge and\u00A0expertise.', - }, - { - id: 2, - title: 'Collaborative by nature', - description: - 'I enjoy working in teams where I can contribute ideas. My strong communication skills enable me to explain concepts effectively to\u00A0stakeholders and\u00A0team members.', - }, - { - id: 3, - title: 'Delivering meaningful products to improve users lives', - description: - 'I am passionate about solving real-world problems to help users and customers. Products that streamline processes, and\u00A0increase value of a\u00A0business.', - }, -] - -const SkillsForCompany = () => { - return ( -
    - πŸ’°πŸ“ˆ My Skills For Your Company - {skillsInfo.map((skill) => ( -
    -

    - - {skill.id}. {skill.title} - -

    -

    {skill.description}

    -
    - ))} -
    - ) -} - -const MyMindset = () => { - return ( -
    - πŸ₯‡πŸš€ I Have Committed Mindset - {mindsetInfo.map((mindset) => ( -
    -

    - - {mindset.id}. {mindset.title} - -

    -

    {mindset.description}

    -
    - ))} -
    - ) -} +import MyMindset from './MyMindset' +import SkillsForCompany from './SkillsForCompany' const WhatIDoMindset = () => { return ( diff --git a/data/whatido/index.ts b/data/whatido/index.ts new file mode 100644 index 00000000..996f3917 --- /dev/null +++ b/data/whatido/index.ts @@ -0,0 +1,42 @@ +import { YEARS } from '@/utils/constants' +import { SkillInfo } from '@/utils/interfaces' + +export const skillsInfo: SkillInfo[] = [ + { + id: 1, + title: 'JavaScript, TypeScript, and React', + description: `I have ${YEARS.javascript} years of experience creating modern, interactive web applications, utilizing Tailwind CSS to deliver visually appealing and\u00A0responsive designs.`, + }, + { + id: 2, + title: 'Proficient in technologies', + description: + 'I leverage React, Next.js, Redux, GraphQL, Jest, Playwright, and\u00A0Figma to ensure code reliability, scalability and\u00A0the\u00A0delivery of\u00A0high-quality solutions and\u00A0products.', + }, + { + id: 3, + title: 'Focus on type safety', + description: `With ${YEARS.typescript} years of experience in TypeScript, I focus on code safety, and creating robust and scalable codebases. Less errors save both time and\u00A0money.`, + }, +] + +export const mindsetInfo: SkillInfo[] = [ + { + id: 1, + title: 'Continuous learning', + description: + 'I continuously improve my technical skills and stay updated with trends by actively engaging in online communities and\u00A0learning to\u00A0enhance my knowledge and\u00A0expertise.', + }, + { + id: 2, + title: 'Team player', + description: + 'I enjoy working in teams where I can contribute ideas. My strong communication skills enable me to explain concepts effectively to\u00A0stakeholders and\u00A0team members.', + }, + { + id: 3, + title: 'Delivering meaningful products', + description: + 'I am passionate about solving real-world problems to help users and customers. Products that streamline processes, and\u00A0increase value of a\u00A0business.', + }, +]