refactor: 👷 homepage layout and components

app/about-me/page.tsx

@@ -40,7 +40,7 @@ const About = () => {
         <HeadingInfo />
         <div className="mt-16 flex flex-col-reverse justify-between md:flex-row md:space-x-10">
           <JobsDescription />
-          <Photo />
+          <Photo isMediumWidth />
         </div>
       </div>
       <NextPageNavigation

app/page.tsx

@@ -1,4 +1,5 @@
 import NextPageNavigation from '@/components/NextPageNavigation'
+import ContactVcard from '@/components/homepage/ContactVcard'
 import Hero from '@/components/homepage/Hero'
 import Skills from '@/components/homepage/Skills'
 import SkillsMain from '@/components/homepage/SkillsMain'
@@ -38,6 +39,7 @@ const Page = () => {
       <Skills />
       <SkillsMain />
       <WhatIDoMindset />
+      <ContactVcard />
       {/* TODO: refactor for all pages into constants, urls, text, test IDs */}
       <NextPageNavigation
         pageLinkNext="/about-me"

components/aboutMe/JobsDescription.tsx

@@ -3,7 +3,7 @@ import { jobs } from '@/data/about'
 
 const JobsDescription = () => {
   return (
-    <div className="flex w-full flex-col md:w-2/3">
+    <div className="mt-16 flex w-full flex-col md:mt-0 md:w-2/3">
       <ol className="relative border-s border-neutral-200">
         {jobs.map((job) => (
           <JobItem key={job.id} path={job.path} title={job.title} description={job.description} years={job.years} />

components/aboutMe/Photo.tsx

@@ -1,19 +1,26 @@
 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 (
-    <div className="flex w-full flex-col items-center justify-start  md:w-1/3">
+    <div className={`flex w-full flex-col items-center justify-start ${isMediumWidth ? 'md:w-1/3' : ''}`}>
       <Image
         src={krsiak}
-        className="mb-8 mt-4 rounded-lg border border-neutral-300 bg-neutral-100 shadow-md md:mb-0 md:mt-0"
+        className="rounded-lg border border-neutral-300 bg-neutral-100 shadow-md md:mb-0 md:mt-0"
         alt="Daniel Krsiak"
         placeholder="blur"
         style={{
           width: '400px',
           height: 'auto',
         }}
       />
+      <div className="mt-2 flex flex-row justify-start">
+        <p className="text-sm text-gray-500">Daniel Kršiak</p>
+      </div>
     </div>
   )
 }

components/homepage/ContactVcard.tsx

@@ -1,13 +1,20 @@
+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'
 
 const ContactVcard = () => {
   return (
     <div className="mt-20">
-      <DividerWithText text="Scan to add my contact" />
-      <div className="flex flex-col items-center justify-center sm:flex-row">
-        <Image src={vcardQRcode} alt="contact QR code" width={256} height={256} />
+      <DividerWithText text="Contact me" />
+      <div className="mt-5">
+        <Photo />
+      </div>
+      <div className="mt-20">
+        <DividerWithText text="Add me to your contacts" />
+        <div className="mb-20 mt-5 flex flex-col items-center justify-center sm:flex-row">
+          <Image src={vcardQRcode} alt="contact QR code" width={256} height={256} />
+        </div>
       </div>
     </div>
   )

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) => (
-  <a data-testid={testId} href={href} target="_blank" rel="noopener noreferrer" className={`${sharedCss} ${className}`}>
-    {text}
-  </a>
-)
+import { ID } from '@/utils/constants'
+import HeroContactLinks from './HeroContactLinks'
+import HeroHeading from './HeroHeading'
+import HeroMainLinks from './HeroMainLinks'
+import HeroParagraph from './HeroParagraph'
 
 const Hero = () => {
   return (
     <div id={ID.hero}>
       <div className="flex flex-col items-center justify-center">
-        <h1 data-testid="hero-heading" className="text-center text-5xl font-bold sm:text-6xl lg:text-7xl">
-          Daniel Krsiak
-          <br />
-          <TypeAnimationText />
-        </h1>
-
-        <p data-testid="hero-paragraph-1" className="mb-3 mt-4 text-center text-lg font-semibold text-neutral-600">
-          Hi 👋 I am React Developer based in Brno, Czech Republic 🇨🇿
-        </p>
-      </div>
-      <div className="mt-10 flex flex-col items-center justify-center sm:flex-row">
-        <HeroLink
-          href={EXTERNAL_URL.linkedin}
-          text="LinkedIn"
-          className="mb-2 bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-300 sm:mb-0 sm:mr-2"
-          testId="hero-link-linkedin"
-        />
-        <HeroLink
-          href={EXTERNAL_URL.github}
-          text="GitHub"
-          className="mb-2 bg-gray-700 text-white hover:bg-gray-800 focus:ring-gray-300 sm:mb-0 sm:mr-2"
-          testId="hero-link-github"
-        />
-        <HeroLink
-          href={EXTERNAL_URL.resume}
-          text="Resume"
-          className="bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 sm:mb-0"
-          testId="hero-link-resume"
-        />
-      </div>
-      <div className="mt-4 flex flex-col items-center justify-center sm:flex-row">
-        <HeroLink
-          href={CONTACT.email.href}
-          text={CONTACT.email.text}
-          className="mb-2 border border-gray-300 bg-white text-neutral-900 hover:bg-gray-100 focus:ring-gray-100 sm:mb-0 sm:mr-2"
-          testId="hero-link-email"
-        />
-        <HeroLink
-          href={CONTACT.phone.href}
-          text={CONTACT.phone.text}
-          className="border border-gray-300 bg-white text-neutral-900 hover:bg-gray-100 focus:ring-gray-100"
-          testId="hero-link-phone"
-        />
+        <HeroHeading />
+        <HeroParagraph />
       </div>
-      <ContactVcard />
+      <HeroMainLinks />
+      <HeroContactLinks />
     </div>
   )
 }

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 (
+    <div className="mt-4 flex flex-col items-center justify-center sm:flex-row">
+      <HeroLink
+        href={CONTACT.email.href}
+        text={CONTACT.email.text}
+        className={`${sharedCss} mb-2 sm:mb-0 sm:mr-2`}
+        testId="hero-link-email"
+      />
+      <HeroLink href={CONTACT.phone.href} text={CONTACT.phone.text} className={sharedCss} testId="hero-link-phone" />
+    </div>
+  )
+}
+
+export default HeroContactLinks

components/homepage/HeroHeading.tsx

@@ -0,0 +1,13 @@
+import TypeAnimationText from '@/components/homepage/TypeAnimationText'
+
+const HeroHeading = () => {
+  return (
+    <h1 data-testid="hero-heading" className="text-center text-5xl font-bold sm:text-6xl lg:text-7xl">
+      Daniel Kršiak
+      <br />
+      <TypeAnimationText />
+    </h1>
+  )
+}
+
+export default HeroHeading

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) => (
+  <a data-testid={testId} href={href} target="_blank" rel="noopener noreferrer" className={`${sharedCss} ${className}`}>
+    {text}
+  </a>
+)
+
+export default HeroLink

components/homepage/HeroMainLinks.tsx

@@ -0,0 +1,29 @@
+import { EXTERNAL_URL } from '@/utils/constants'
+import HeroLink from './HeroLink'
+
+const HeroMainLinks = () => {
+  return (
+    <div className="mt-10 flex flex-col items-center justify-center sm:flex-row">
+      <HeroLink
+        href={EXTERNAL_URL.linkedin}
+        text="LinkedIn"
+        className="mb-2 bg-blue-700 text-white hover:bg-blue-800 focus:ring-blue-300 sm:mb-0 sm:mr-2"
+        testId="hero-link-linkedin"
+      />
+      <HeroLink
+        href={EXTERNAL_URL.github}
+        text="GitHub"
+        className="mb-2 bg-gray-700 text-white hover:bg-gray-800 focus:ring-gray-300 sm:mb-0 sm:mr-2"
+        testId="hero-link-github"
+      />
+      <HeroLink
+        href={EXTERNAL_URL.resume}
+        text="Resume"
+        className="bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 sm:mb-0"
+        testId="hero-link-resume"
+      />
+    </div>
+  )
+}
+
+export default HeroMainLinks

components/homepage/HeroParagraph.tsx

@@ -0,0 +1,9 @@
+const HeroParagraph = () => {
+  return (
+    <p data-testid="hero-paragraph-1" className="mb-3 mt-4 text-center text-lg font-semibold text-neutral-600">
+      Hi 👋 I am React Developer based in Brno, Czech Republic 🇨🇿
+    </p>
+  )
+}
+
+export default HeroParagraph

components/homepage/MyMindset.tsx

@@ -0,0 +1,22 @@
+import { mindsetInfo } from '@/data/whatido'
+import Heading2 from '../shared/Heading2'
+
+const MyMindset = () => {
+  return (
+    <div className="lg:w-1/2">
+      <Heading2 textColor="text-violet-600">🥇🚀 I Have Committed Mindset</Heading2>
+      {mindsetInfo.map((mindset) => (
+        <div className="mt-8" key={mindset.id}>
+          <p className="mt-4 text-lg text-neutral-600">
+            <span className="font-bold">
+              <span className="text-violet-600">{mindset.id}.</span> {mindset.title}
+            </span>
+          </p>
+          <p className="mt-2 text-lg text-neutral-600">{mindset.description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default MyMindset

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) => (
-  <div className={`flex justify-center space-x-2 ${className}`}>
-    {icons.map((item) => (
-      <Image key={item.name} src={item.path} alt={item.name} width={44} height={44} />
-    ))}
-  </div>
-)
+import SkillsIconGroup from './SkillsIconGroup'
 
 const Skills = () => {
   return (

components/homepage/SkillsForCompany.tsx

@@ -0,0 +1,22 @@
+import { skillsInfo } from '@/data/whatido'
+import Heading2 from '../shared/Heading2'
+
+const SkillsForCompany = () => {
+  return (
+    <div className="lg:w-1/2">
+      <Heading2 textColor="text-violet-600">💰📈 My Skills For Your Company</Heading2>
+      {skillsInfo.map((skill) => (
+        <div className="mt-8" key={skill.id}>
+          <p className="mt-4 text-lg text-neutral-600">
+            <span className="font-bold">
+              <span className="text-violet-600">{skill.id}.</span> {skill.title}
+            </span>
+          </p>
+          <p className="mt-2 text-lg text-neutral-600">{skill.description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default SkillsForCompany

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) => (
+  <div className={`flex justify-center space-x-2 ${className}`}>
+    {icons.map((item) => (
+      <Image key={item.name} src={item.path} alt={item.name} width={44} height={44} />
+    ))}
+  </div>
+)
+
+export default SkillsIconGroup