Merge pull request #77 from martapanc/develop

Develop

package.json

@@ -26,10 +26,10 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@heroicons/react": "^2.1.1",
-    "@mui/material": "^5.15.12",
+    "@mui/material": "^5.15.14",
     "@sendgrid/mail": "^8.1.1",
     "@types/cookie": "^0.6.0",
-    "@types/react-dom": "^18.2.20",
+    "@types/react-dom": "^18.2.22",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/styled-components": "^5.1.34",
     "@vercel/speed-insights": "^1.0.10",
@@ -38,63 +38,65 @@
     "cookie": "^0.6.0",
     "focus-trap-react": "^10.2.3",
     "formik": "^2.4.5",
-    "framer-motion": "^11.0.8",
-    "i18next": "^23.10.0",
+    "framer-motion": "^11.0.20",
+    "i18next": "^23.10.1",
     "inquirer-fuzzy-path": "^2.3.0",
     "js-cookie": "^3.0.5",
     "moment": "^2.30.1",
-    "next": "^14.1.2",
-    "next-cloudinary": "^6.1.0",
-    "next-themes": "^0.2.1",
-    "nodemailer": "^6.9.11",
+    "next": "^14.1.4",
+    "next-cloudinary": "^6.3.0",
+    "next-themes": "^0.3.0",
+    "nodemailer": "^6.9.13",
     "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",
-    "react-i18next": "^14.0.7",
+    "react-i18next": "^14.1.0",
     "react-icons": "^5.0.1",
+    "react-loader-spinner": "^6.1.6",
     "react-markdown": "^9.0.1",
     "react-moment": "^1.1.3",
     "react-string-replace": "^1.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-tippy": "^1.4.0",
-    "react-toastify": "^10.0.4",
+    "react-toastify": "^10.0.5",
     "react-wordcloud": "^1.2.7",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "styled-components": "^6.1.8",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.2.2",
     "typed.js": "^2.1.0",
     "unified": "^11.0.4",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.0.3",
-    "@commitlint/config-conventional": "^19.0.3",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/nextjs": "^7.6.17",
-    "@storybook/react": "^7.6.17",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-mdx-gfm": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/nextjs": "^8.0.4",
+    "@storybook/react": "^8.0.4",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.2.2",
     "@types/jest": "^29.5.12",
     "@types/js-cookie": "^3.0.6",
-    "@types/react": "^18.2.63",
+    "@types/node-fetch": "^2.6.11",
+    "@types/react": "^18.2.67",
     "@types/react-headroom": "^3.2.3",
     "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "autoprefixer": "^10.4.18",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.2",
+    "eslint-config-next": "^14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-storybook": "^0.8.0",
@@ -105,12 +107,12 @@
     "lint-staged": "^15.2.2",
     "next-router-mock": "^0.9.12",
     "next-sitemap": "^4.2.3",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.12",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.4",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.3"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [

src/app/layout.tsx

@@ -10,6 +10,7 @@ import meta from '@/data/meta.json';
 import LayoutClient from '@/app/layout-client';
 
 export const metadata = {
+  metadataBase: new URL('https://martacodes.it'),
   authors: [
     {
       url: meta.href,

src/app/opengraph-image.alt.txt

@@ -0,0 +1 @@
+MartaCodes.it

src/app/sitemap.ts

@@ -0,0 +1,19 @@
+const URL = 'https://martacodes.it';
+
+export default async function sitemap() {
+  const routes = [
+    '',
+    '/cv',
+    '/work',
+    '/about',
+    '/projects',
+    '/uses',
+    '/recruiters-info',
+    '/contacts',
+  ].map((route) => ({
+    url: `${URL}${route}`,
+    lastModified: new Date().toISOString(),
+  }));
+
+  return [...routes];
+}

src/components/layout/Footer.tsx

@@ -37,11 +37,12 @@ function FooterLinks() {
 
   return (
     <div className='flex flex-wrap justify-center gap-x-8 gap-y-4'>
-      {footerLinks.map(({ href, label }) => (
+      {footerLinks.map(({ href, label, name }) => (
         <UnstyledLink
-          key={label}
+          key={name}
           className='animated-underline focus-visible:ring-primary-300 rounded-sm text-sm font-medium text-blue-950 focus:outline-none focus-visible:ring dark:text-gray-200'
           href={href}
+          aria-label={name}
         >
           {t(label)}
         </UnstyledLink>
@@ -60,17 +61,22 @@ function SocialLinks() {
           href={'mailto:' + emailAddress}
           className='focus-visible:ring-primary-300 rounded-sm align-middle focus:outline-none focus-visible:ring'
         >
-          <FiMail className='hover:text-primary-500 dark:hover:text-primary-300 h-7 w-7 align-middle text-blue-900 dark:text-gray-300' />
+          <FiMail
+            className='hover:text-primary-500 dark:hover:text-primary-300 h-7 w-7 align-middle text-blue-900 dark:text-gray-300'
+            aria-label='Send an Email'
+          />
         </a>
       </div>
       {socialLinks.map((socialLink) => (
         <UnstyledLink
           key={socialLink.id}
           className='focus-visible:ring-primary-300 inline-flex items-center justify-center rounded-sm focus:outline-none focus-visible:ring'
           href={socialLink.href}
+          aria-label={socialLink.id}
         >
           <socialLink.icon
             size={50}
+            aria-label={socialLink.id}
             className='hover:text-primary-500 dark:hover:text-primary-300 my-auto h-6 w-6 align-middle text-blue-900 transition-colors dark:text-gray-300'
           />
         </UnstyledLink>
@@ -88,31 +94,38 @@ function Copyright() {
 type FooterLink = {
   href: string;
   label: string;
+  name: string;
 };
 const footerLinks: FooterLink[] = [
   {
     href: 'https://martas-links.vercel.app',
     label: 'footerMenu.links',
+    name: "Marta's Links",
   },
   {
     href: '/recruiters-info',
     label: 'footerMenu.recruiters',
+    name: 'Info for Recruiters',
   },
   {
     href: 'https://github.com/martapanc/martacodes.it',
     label: 'footerMenu.sourceCode',
+    name: 'Sourcecode',
   },
   {
     href: 'https://martapancaldi.hashnode.dev/',
     label: 'footerMenu.blog',
+    name: 'Hashnode - Blog',
   },
   {
     href: 'https://www.polywork.com/marta_pancaldi',
     label: 'footerMenu.updates',
+    name: 'Polywork - Updates',
   },
   {
     href: 'https://analytics.eu.umami.is/share/Dw94G9vRDiMT9YXN/MartaCodes.it',
     label: 'footerMenu.analytics',
+    name: 'Umami - Analytics',
   },
   // {
   //   href: '/',
@@ -121,6 +134,7 @@ const footerLinks: FooterLink[] = [
   {
     href: '/contacts',
     label: 'footerMenu.feedback',
+    name: 'Contacts',
   },
 ];
 

src/components/organisms/home/Intro.tsx

@@ -26,7 +26,7 @@ const Intro = ({ greeting, codeSnippets }: IntroProps) => {
         <span className='inline-block animate-waving-hand'>👋</span>
       </h1>
 
-      <div className='mt-8 flex flex-col-reverse lg:flex-row'>
+      <div className='mt-8 flex flex-col-reverse lg:flex-row gap-3 md:gap-10'>
         <TagCloud />
 
         <Terminal codeSnippets={shuffleArray(codeSnippets)} />

src/components/organisms/home/Projects.tsx

@@ -37,6 +37,7 @@ const Projects = ({ projects }: ProjectsProps) => {
         <Link
           href='/projects'
           className='animated-underline-2 dark:animated-underline font-semibold'
+          aria-label='Projects'
         >
           here
         </Link>

src/components/organisms/home/SkillSummary.tsx

@@ -10,10 +10,10 @@ const font = Inter({ weight: '400', subsets: ['latin'] });
 
 import clsxm from '@/lib/clsxm';
 
-import { HomePage } from '@/types/Homepage';
+import { HomepageContent } from '@/types/HomepageContent';
 
 interface SkillsProps {
-  homePage: HomePage;
+  homePage: HomepageContent;
 }
 
 const SkillSummary = ({ homePage }: SkillsProps) => {

src/components/organisms/home/Summary.tsx

@@ -19,7 +19,7 @@ import jobs from '@/data/jobs.json';
 
 import Photo from '@/components/organisms/home/Photo';
 
-import { HomePage } from '@/types/Homepage';
+import { HomepageContent } from '@/types/HomepageContent';
 
 interface LinkProps {
   key: string;
@@ -89,7 +89,7 @@ function buildEduLogo(logo: EduLogoProps, logoVersion: string) {
 }
 
 export interface SummaryProps {
-  homePage: HomePage;
+  homePage: HomepageContent;
 }
 
 const Summary = ({ homePage }: SummaryProps) => {

src/components/organisms/home/TagCloud.tsx

@@ -1,6 +1,11 @@
 'use client';
 
-import ReactWordcloud from '@cyberblast/react-wordcloud';
+import dynamic from 'next/dynamic';
+
+const ReactWordcloudWithCustomLoading = dynamic(
+  () => import('@cyberblast/react-wordcloud'),
+);
+import { AttributeValue } from '@cyberblast/react-wordcloud';
 import React from 'react';
 
 import 'tippy.js/dist/tippy.css';
@@ -18,6 +23,7 @@ interface Options {
   padding?: number;
   randomSeed?: string;
   enableTooltip?: boolean;
+  svgAttributes?: Record<string, AttributeValue>;
 }
 
 const TagCloud = () => {
@@ -34,8 +40,12 @@ const TagCloud = () => {
   };
 
   return (
-    <div className='flex flex-col w-full justify-center mt-6 h-80 md:h-[260px] lg:h-[288px] lg:w-1/2 lg:justify-between items-end lg:mt-0 me-10 rounded-lg bg-gray-50 dark:bg-gray-900 p-1 drop-shadow-lg'>
-      <ReactWordcloud callbacks={callbacks} options={options} words={tags} />
+    <div className='flex flex-col w-full mt-6 h-80 md:h-[260px] lg:h-[288px] lg:w-1/2 items-end lg:mt-0 rounded-lg bg-gray-50 dark:bg-gray-900 p-1 drop-shadow-lg'>
+      <ReactWordcloudWithCustomLoading
+        callbacks={callbacks}
+        options={options}
+        words={tags}
+      />
     </div>
   );
 };

src/components/organisms/home/Terminal.tsx

@@ -17,15 +17,17 @@ export interface CodeSnippetsProps {
 
 const Terminal = ({ codeSnippets }: CodeSnippetsProps) => {
   const [loading, setLoading] = useState(true);
-
+  const [ideStyle, setIdeStyle] = useState(atomOneLight);
   const { theme } = useTheme();
 
-  const ideStyle = theme === 'dark' ? darcula : atomOneLight;
+  useEffect(() => {
+    setIdeStyle(theme === 'dark' ? darcula : atomOneLight);
+  }, [theme]);
 
   useEffect(() => {
     setTimeout(() => {
       setLoading(false);
-    }, 2000);
+    }, 500);
   }, []);
 
   useEffect(() => {
@@ -57,7 +59,7 @@ const Terminal = ({ codeSnippets }: CodeSnippetsProps) => {
   }, [loading]);
 
   return (
-    <div className='w-full lg:w-1/2 h-60 lg:h-[288px] me-4 drop-shadow-lg'>
+    <div className='w-full lg:w-1/2 h-60 lg:h-[288px] drop-shadow-lg'>
       <div className='bg-terminal-bar-light dark:bg-terminal-bar-dark h-5 rounded-t-lg px-4 py-1 flex'>
         <div className='w-[12px] h-[12px] rounded-full me-1.5 bg-terminal-red'></div>
         <div className='w-[12px] h-[12px] rounded-full me-1.5 bg-terminal-amber'></div>

src/components/organisms/home/Updates.tsx → src/components/organisms/home/UpdatesSummary.tsx

@@ -10,13 +10,13 @@ const font3 = Square_Peg({ weight: '400', subsets: ['latin'] });
 
 import clsxm from '@/lib/clsxm';
 
-import { Updates } from '@/types/Homepage';
+import { Updates } from '@/types/HomepageContent';
 
 interface UpdatesProps {
   updates: Updates;
 }
 
-const Updates = ({ updates }: UpdatesProps) => {
+const UpdatesSummary = ({ updates }: UpdatesProps) => {
   return (
     <div className='flex flex-col w-full'>
       <div className='tracking-widest text-sm font-semibold text-slate-500 mb-5 text-end'>
@@ -92,4 +92,4 @@ const Updates = ({ updates }: UpdatesProps) => {
   );
 };
 
-export default Updates;
+export default UpdatesSummary;