feat: improve Summary section

package.json

@@ -49,6 +49,7 @@
     "nodemailer": "^6.9.11",
     "plop": "^4.0.1",
     "react": "^18.2.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
     "react-headroom": "^3.2.1",

src/components/organisms/home/Photo.tsx

@@ -28,36 +28,23 @@ const Photo = () => {
   }, [theme]);
 
   return (
-    <div className='flex h-[500px] md:h-[300px] w-full justify-center mt-6 lg:h-[280px] lg:w-1/2 lg:justify-end lg:mt-0 bg-sky-100 dark:bg-blue-950 rounded-md'>
-      <div className='flex items-center flex-col-reverse p-3 md:ms-3 md:flex-row'>
-        <div className='flex flex-col items-center md:me-8 md:items-end text-lg photo-description'>
-          <div className='my-5 text-blue-600 dark:text-blue-300 text-xl font-semibold md:text-end'>
-            Software Engineer
-          </div>
-          <div className='my-5 text-blue-700 dark:text-blue-200 text-xl font-semibold md:text-end'>
-            Lifelong learner
-          </div>
-          <div className='my-5 text-blue-800 dark:text-blue-100 text-xl xs:text-md font-semibold md:text-end'>
-            WFH enthusiast
-          </div>
-        </div>
-        <div className='flex flex-col items-center mb-2'>
-          <Image
-            className={clsxm('mb-4 rounded-full', avatar)}
-            src='https://res.cloudinary.com/dwrurydlt/image/upload/v1694699676/avatar_md_nobg_ef5553f75b.png'
-            alt='Avatar'
-            width={190}
-            height={0}
-            style={{ height: '190px' }}
-          />
-          <Image
-            src={signatureUrl}
-            alt='Signature'
-            width={250}
-            height={0}
-            style={{ height: '46px' }}
-          />
-        </div>
+    <div className='flex h-[300px] w-full justify-center lg:h-[280px] lg:w-1/2 lg:justify-end lg:mt-0 rounded-md'>
+      <div className='flex flex-col items-center mb-2'>
+        <Image
+          className={clsxm('mb-4 rounded-full', avatar)}
+          src='https://res.cloudinary.com/dwrurydlt/image/upload/v1694699676/avatar_md_nobg_ef5553f75b.png'
+          alt='Avatar'
+          width={190}
+          height={0}
+          style={{ height: '190px' }}
+        />
+        <Image
+          src={signatureUrl}
+          alt='Signature'
+          width={250}
+          height={0}
+          style={{ height: '46px' }}
+        />
       </div>
     </div>
   );

src/components/organisms/home/Summary.tsx

@@ -1,17 +1,24 @@
 'use client';
 
+import clsx from 'clsx';
+import { Inter } from 'next/font/google';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTheme } from 'next-themes';
 import React, { useEffect, useState } from 'react';
+import ReactCountryFlag from 'react-country-flag';
 import ReactMarkdown from 'react-markdown';
 import reactStringReplace from 'react-string-replace';
 import rehypeRaw from 'rehype-raw';
 
 import clsxm from '@/lib/clsxm';
+import { isWindowsOS } from '@/lib/helper';
 
+import edu from '@/data/edu.json';
 import jobs from '@/data/jobs.json';
 
+import Photo from '@/components/organisms/home/Photo';
+
 import { HomePage } from '@/types/Homepage';
 
 interface LinkProps {
@@ -25,6 +32,19 @@ interface LinkProps {
   height: number;
 }
 
+interface EduLogoProps {
+  key: string;
+  label: string;
+  href: string;
+  classes: string;
+  color: string;
+  colorDark: string;
+  alt: string;
+  flag: string;
+}
+
+const font = Inter({ weight: '400', subsets: ['latin'] });
+
 function buildLink(link: LinkProps, logoVersion: string) {
   const logoUrl = logoVersion === 'dark' ? link.imageDark : link.image;
 
@@ -46,6 +66,29 @@ function buildLink(link: LinkProps, logoVersion: string) {
   );
 }
 
+function buildEduLogo(logo: EduLogoProps, logoVersion: string) {
+  const logoColor =
+    'text-[' + (logoVersion === 'dark' ? logo.colorDark : logo.color) + ']';
+
+  const useSvgFlags =
+    typeof window !== 'undefined' && isWindowsOS(window.navigator);
+
+  return (
+    <Link
+      key={logo.key}
+      href={logo.href}
+      target='_blank'
+      rel='noopener noreferrer'
+      className='hover:no-underline'
+    >
+      <span className={clsxm(logoColor, 'font-semibold')}>
+        {logo.label}{' '}
+        <ReactCountryFlag countryCode={logo.flag} svg={useSvgFlags} />
+      </span>
+    </Link>
+  );
+}
+
 export interface SummaryProps {
   homePage: HomePage;
 }
@@ -59,40 +102,52 @@ const Summary = ({ homePage }: SummaryProps) => {
     setLogoVersion(theme === 'dark' ? 'dark' : 'light');
   }, [theme]);
 
-  const introduction_1 = reactStringReplace(
+  const intro = reactStringReplace(
     homePage.introduction.now,
     jobs.appetize.key,
     () => buildLink(jobs.appetize, logoVersion),
   );
 
-  let introduction_2 = reactStringReplace(
-    homePage.introduction.cv,
-    jobs.bjss.key,
-    () => buildLink(jobs.bjss, logoVersion),
+  let education = reactStringReplace(
+    homePage.introduction.education,
+    edu.uom.key,
+    () => buildEduLogo(edu.uom, logoVersion),
+  );
+  education = reactStringReplace(education, edu.unibz.key, () =>
+    buildEduLogo(edu.unibz, logoVersion),
+  );
+  education = reactStringReplace(education, edu.cofc.key, () =>
+    buildEduLogo(edu.cofc, logoVersion),
+  );
+
+  let work = reactStringReplace(homePage.introduction.work, jobs.bjss.key, () =>
+    buildLink(jobs.bjss, logoVersion),
   );
-  introduction_2 = reactStringReplace(introduction_2, jobs.booking.key, () =>
+  work = reactStringReplace(work, jobs.booking.key, () =>
     buildLink(jobs.booking, logoVersion),
   );
-  introduction_2 = reactStringReplace(introduction_2, jobs.resourcify.key, () =>
+  work = reactStringReplace(work, jobs.resourcify.key, () =>
     buildLink(jobs.resourcify, logoVersion),
   );
 
-  const introductionParts = [
-    homePage.introduction.skills,
-    homePage.introduction.fullStack,
-    homePage.introduction.freeTime,
-  ];
-
   return (
-    <div className='text-base antialiased'>
-      <p className='mb-4 md:mb-1'>{introduction_1}</p>
-      <p className='mb-4'>{introduction_2}</p>
+    <div className={clsx('flex md:flex-row flex-col-reverse', font.className)}>
+      <div className='text-lg antialiased'>
+        <p className='mb-4'>{intro}</p>
+
+        <p className='mb-4 md:mb-1'>{work}</p>
+
+        <p className='mb-4'>{education}</p>
+
+        <ReactMarkdown className='mb-4 md:mb-1' rehypePlugins={[rehypeRaw]}>
+          {homePage.introduction.passion}
+        </ReactMarkdown>
 
-      {introductionParts.map((introPart, id) => (
-        <ReactMarkdown key={id} className='mb-4' rehypePlugins={[rehypeRaw]}>
-          {introPart}
+        <ReactMarkdown className='mb-4' rehypePlugins={[rehypeRaw]}>
+          {homePage.introduction.freeTime}
         </ReactMarkdown>
-      ))}
+      </div>
+      <Photo />
     </div>
   );
 };

src/components/pages/home-page.tsx

@@ -14,7 +14,7 @@ export default function HomePage({ homePage, codeSnippets }: HomePageProps) {
   return (
     <section className='dark:bg-dark bg-white'>
       <div className='dark:bg-gradient-linear-dark bg-gradient-linear-light'>
-        <div className='layout relative flex flex-col py-16 md:pt-24 pb-16'>
+        <div className='layout relative flex flex-col py-16 md:pt-24 pb-5 md:pb-16'>
           <Intro greeting={homePage.greeting} codeSnippets={codeSnippets} />
         </div>
       </div>

src/data/edu.json

@@ -0,0 +1,32 @@
+{
+  "uom": {
+    "key": "{uom}",
+    "label": "University of Manchester",
+    "href": "https://www.manchester.ac.uk/study/masters/courses/list/02069/msc-advanced-computer-science/",
+    "classes": "ms-0.5",
+    "color": "#6B2C91",
+    "colorDark": "#935FB2",
+    "alt": "University of Manchester",
+    "flag": "GB"
+  },
+  "unibz": {
+    "key": "{unibz}",
+    "label": "UniBZ",
+    "href": "https://www.unibz.it/en/faculties/engineering/bachelor-computer-science/",
+    "classes": "ms-1",
+    "color": "#007BE4",
+    "colorDark": "#63A8E4",
+    "alt": "UniBZ - Free University of Bolzano",
+    "flag": "IT"
+  },
+  "cofc": {
+    "key": "{cofc}",
+    "label": "College of Charleston",
+    "href": "https://charleston.edu/compsci/index.php",
+    "classes": "mx-1",
+    "color": "#6C202A",
+    "colorDark": "#A23846",
+    "alt": "College of Charleston",
+    "flag": "US"
+  }
+}

src/data/en/home.json

@@ -2,7 +2,10 @@
   "greeting": "Hey there, I'm Marta ",
   "introduction": {
     "now": "I'm a software engineer based in Italy, and I'm currently working at {Appetize}.",
-    "cv": "I hold a MSc in Advanced Computer Science from the University of Manchester, and have spent the last 6 years working for several companies, including {Booking}, {BJSS} and {Resourcify}.",
+    "passion": "I love writing code for work and for fun. I'm happiest when I'm learning, experimenting with new tech stacks and solving complex problems.",
+    "education": "I hold a MSc in Advanced Computer Science from the {uom}; I also completed a trilingual BSc degree at {unibz}, with an exchange semester at the {cofc}.",
+    "work": "I've spent the last 7 years working for several companies, including {Booking}, {BJSS} and {Resourcify}.",
+    "cv": "I hold a <span class=\"font-semibold\">MSc in Advanced Computer Science</span> from the University of Manchester, and have spent the last 6 years working for several companies, including {Booking}, {BJSS} and {Resourcify}.",
     "skills": "My skill set spans a range of programming languages like <span class=\"strong\">Java</span>, <span class=\"strong\">Kotlin</span>, <span class=\"strong\">Python</span>, <span class=\"strong\">C#</span> and <span class=\"strong\">TypeScript</span>, as well as frontend frameworks such as <span class=\"strong\">React</span> and <span class=\"strong\">Angular</span>.",
     "fullStack": "While I have a solid foundation in backend development, my heart truly lies in the realm of full-stack engineering.",
     "freeTime": "In my free time, I’m a fiction writer ✍🏻, an avid bookworm 📚, an oboist and alto singer 🎶, and a travel photographer 📷."

src/types/Homepage.ts

@@ -5,6 +5,9 @@ export interface HomePage {
 
 export interface Introduction {
   now: string;
+  passion: string;
+  education: string;
+  work: string;
   cv: string;
   skills: string;
   fullStack: string;

yarn.lock

@@ -13832,6 +13832,7 @@ __metadata:
     prettier: "npm:^3.2.5"
     prettier-plugin-tailwindcss: "npm:^0.5.12"
     react: "npm:^18.2.0"
+    react-country-flag: "npm:^3.1.0"
     react-dom: "npm:^18.2.0"
     react-google-recaptcha: "npm:^3.1.0"
     react-headroom: "npm:^3.2.1"
@@ -17092,6 +17093,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-country-flag@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "react-country-flag@npm:3.1.0"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10c0/6271cde6cf355c66e2b669c74e98596d771534154210bbb84cd84788f46710c7ee14671229cb92203d09aeb4c30206bb882b73d63d95a73f96cdaca09ed2bd0d
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"