feat: localise headings

martapanc · Aug 24, 2023 · 49dc895 · 49dc895
1 parent f5d2251
commit 49dc895
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 45 deletions.
diff --git a/src/app/(public)/about/work/page.tsx b/src/app/(public)/about/work/page.tsx
@@ -6,6 +6,7 @@ import { flattenToArray, flattenToObject } from '@/lib/graphqlUtils';
 
 import Heading from '@/components/atoms/Heading';
 import Education from '@/components/organisms/about-work/Education';
+import Intro from '@/components/organisms/about-work/Intro';
 import Languages from '@/components/organisms/about-work/Languages';
 import Publications from '@/components/organisms/about-work/Publications';
 import WorkExperience from '@/components/organisms/about-work/WorkExperience';
@@ -91,36 +92,15 @@ const AboutPage = async () => {
   const { intro, jobs, languages, publications, schools, skills } =
     await queryData();
 
-  const noOfYears = (new Date().getFullYear() - 2015).toString();
-
   const iconDimension = 36;
-  const titleIconDimension = 42;
 
   return (
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
           <Heading title='aboutWork.title' />
 
-          <div>
-            <div className='m-2 flex'>
-              <Image
-                className='mr-2 h-auto'
-                src={intro.icon.url}
-                alt={intro.title}
-                width={titleIconDimension}
-                height={titleIconDimension}
-              />
-
-              <h2>{intro.title}</h2>
-            </div>
-
-            <div className='mb-5'>
-              <ReactMarkdown>
-                {intro.content.replace('8', noOfYears)}
-              </ReactMarkdown>
-            </div>
-          </div>
+          <Intro intro={intro} />
 
           <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'>
             {skills.map((skill: Skill) => (
@@ -149,12 +129,20 @@ const AboutPage = async () => {
             ))}
           </div>
 
+          <hr />
+
           <WorkExperience jobs={jobs} />
 
+          <hr />
+
           <Education schools={schools} />
 
+          <hr />
+
           <Languages languages={languages} />
 
+          <hr />
+
           <Publications publications={publications} />
         </div>
       </section>

diff --git a/src/components/atoms/SectionHeading.tsx b/src/components/atoms/SectionHeading.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import Image from 'next/image';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface SectionHeadingProps {
+  titlePrefix: string;
+}
+
+const SectionHeading = ({ titlePrefix }: SectionHeadingProps) => {
+  const { t } = useTranslation();
+
+  const titleIconDimension = 36;
+
+  return (
+    <div className='m-2 flex flex-col items-center'>
+      <Image
+        className='h-auto'
+        src={t(`${titlePrefix}.icon`)}
+        alt={t(`${titlePrefix}.title`)}
+        width={titleIconDimension}
+        height={titleIconDimension}
+      />
+
+      <h2 className='-mt-0.5 underline decoration-1 underline-offset-4 md:decoration-2'>
+        {t(`${titlePrefix}.title`)}
+      </h2>
+    </div>
+  );
+};
+
+export default SectionHeading;
diff --git a/src/components/organisms/about-work/Education.tsx b/src/components/organisms/about-work/Education.tsx
@@ -4,6 +4,8 @@ import Image from 'next/image';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
+import SectionHeading from '@/components/atoms/SectionHeading';
+
 import { School } from '@/types/School';
 
 export interface EducationProps {
@@ -12,10 +14,8 @@ export interface EducationProps {
 
 const Education = ({ schools }: EducationProps) => {
   return (
-    <div className=''>
-      <div className='m-2 flex'>
-        <h2>Education</h2>
-      </div>
+    <div className='my-4'>
+      <SectionHeading titlePrefix='aboutWork.education' />
 
       <div>
         {schools.map((school) => (

diff --git a/src/components/organisms/about-work/Intro.tsx b/src/components/organisms/about-work/Intro.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import SectionHeading from '@/components/atoms/SectionHeading';
+
+import { SoftwareDevIntro } from '@/types/ShortText';
+
+interface IntroProps {
+  intro: SoftwareDevIntro;
+}
+
+const Intro = ({ intro }: IntroProps) => {
+  const noOfYears = (new Date().getFullYear() - 2015).toString();
+
+  return (
+    <div>
+      <SectionHeading titlePrefix='aboutWork.softwareDevelopment' />
+
+      <div className='mb-5'>
+        <ReactMarkdown>{intro.content.replace('8', noOfYears)}</ReactMarkdown>
+      </div>
+    </div>
+  );
+};
+
+export default Intro;
diff --git a/src/components/organisms/about-work/Languages.tsx b/src/components/organisms/about-work/Languages.tsx
@@ -3,6 +3,8 @@
 import Image from 'next/image';
 import * as React from 'react';
 
+import SectionHeading from '@/components/atoms/SectionHeading';
+
 import { Language } from '@/types/Language';
 
 export interface LanguageProps {
@@ -11,12 +13,10 @@ export interface LanguageProps {
 
 const Languages = ({ languages }: LanguageProps) => {
   return (
-    <div className='mb-6'>
-      <div className='m-2 flex'>
-        <h2>Languages</h2>
-      </div>
+    <div className='mb-6 mt-4'>
+      <SectionHeading titlePrefix='aboutWork.languages' />
 
-      <div className='grid grid-cols-1 gap-3 md:grid-cols-4 md:gap-6'>
+      <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-4 md:gap-6'>
         {languages.map((language) => (
           <div
             key={language.id}

diff --git a/src/components/organisms/about-work/Publications.tsx b/src/components/organisms/about-work/Publications.tsx
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { AiOutlineFilePdf } from 'react-icons/ai';
 
+import SectionHeading from '@/components/atoms/SectionHeading';
 import UnstyledLink from '@/components/links/UnstyledLink';
 
 import { Publication } from '@/types/Publication';
@@ -13,12 +14,10 @@ export interface PublicationProps {
 
 const Publications = ({ publications }: PublicationProps) => {
   return (
-    <div className='mb-6'>
-      <div className='m-2 flex'>
-        <h2>Publications</h2>
-      </div>
+    <div className='mb-6 mt-4'>
+      <SectionHeading titlePrefix='aboutWork.publications' />
 
-      <div className='grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-8'>
+      <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-3 md:gap-8'>
         {publications.map((publication) => (
           <div
             key={publication.id}

diff --git a/src/components/organisms/about-work/WorkExperience.tsx b/src/components/organisms/about-work/WorkExperience.tsx
@@ -5,6 +5,8 @@ import { useTheme } from 'next-themes';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 
+import SectionHeading from '@/components/atoms/SectionHeading';
+
 import { Job } from '@/types/Job';
 
 export interface WorkExperienceProps {
@@ -15,10 +17,8 @@ const WorkExperience = ({ jobs }: WorkExperienceProps) => {
   const { theme } = useTheme();
 
   return (
-    <div className=''>
-      <div className='m-2 flex'>
-        <h2>Work Experience</h2>
-      </div>
+    <div className='my-4'>
+      <SectionHeading titlePrefix='aboutWork.workExperience' />
 
       <div>
         {jobs.map((job) => (

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -14,7 +14,7 @@
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/school_bbe225685d.svg"
     },
     "languages": {
-      "title": "Work Experience",
+      "title": "Languages",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/internet_60bf166c34.svg"
     },
     "publications": {

diff --git a/src/locales/it.json b/src/locales/it.json
@@ -6,19 +6,19 @@
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692734473/laptop_4a3ba3b30c.svg"
     },
     "workExperience": {
-      "title": "Work Experience",
+      "title": "Esperienza",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/work_f1bb1eb3dd.svg"
     },
     "education": {
-      "title": "Education",
+      "title": "Studi",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/school_bbe225685d.svg"
     },
     "languages": {
-      "title": "Work Experience",
+      "title": "Lingue",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/internet_60bf166c34.svg"
     },
     "publications": {
-      "title": "Publications",
+      "title": "Pubblicazioni",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/newspaper_e15ec94d21.svg"
     }
   }