Merge pull request #25 from martapanc/feat/routing-rethink

Feat/routing rethink

next.config.js

@@ -39,6 +39,15 @@ const nextConfig = {
   },
 
   staticPageGenerationTimeout: 600,
+
+  async rewrites() {
+    return [
+      {
+        source: '/downloads/cv.pdf',
+        destination: '/api/cv.pdf',
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

src/app/(public)/about/free-time/page.tsx → src/app/(public)/about/page.tsx

@@ -109,7 +109,7 @@ const AboutFreeTimePage = async () => {
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>Free Time</h1>
+          <h1 className='mb-5'>About me</h1>
 
           <div className='mb-5'>
             <p>

src/app/(public)/cv/page.tsx

@@ -1,18 +1,107 @@
+import Image from 'next/image';
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 
+import Heading from '@/components/atoms/headings/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';
 import CvCard from '@/components/organisms/cv/CvCard';
 
+import { queryJobs } from '@/queries/jobs';
+import { queryLanguages } from '@/queries/languages';
+import { queryPublications } from '@/queries/publications';
+import { querySchools } from '@/queries/schools';
+import { queryIntro } from '@/queries/short-texts';
+import { querySkills } from '@/queries/skills';
+
+import { Icon } from '@/types/Icon';
+import { Skill } from '@/types/Skill';
+
 export const metadata = {
-  title: 'CV | MartaCodes.it',
-  description: 'CV page',
+  title: 'About my Work | MartaCodes.it',
+  description: 'About page',
+};
+
+const queryData = async () => {
+  const intro = await queryIntro();
+
+  const jobs = await queryJobs();
+  const languages = await queryLanguages();
+  const publications = await queryPublications();
+  const schools = await querySchools();
+  const skills = await querySkills();
+
+  return {
+    intro,
+    jobs,
+    languages,
+    publications,
+    schools,
+    skills,
+  };
 };
 
-const CVPage = async () => {
+const AboutPage = async () => {
+  const { intro, jobs, languages, publications, schools, skills } =
+    await queryData();
+
+  const iconDimension = 36;
+
   return (
     <main className='min-h-main'>
-      <section>
+      <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5 text-center'>CV</h1>
+          <Heading title='aboutWork.title' />
+
+          <Intro intro={intro} />
+
+          <div className='mb-10 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 lg:gap-6'>
+            {skills.map((skill: Skill) => (
+              <div
+                key={skill.title}
+                className='skill-container rounded p-4 shadow-md dark:bg-slate-900 dark:drop-shadow-md'
+              >
+                <div className='flex'>
+                  {skill.icons.map((icon: Icon) => (
+                    <Image
+                      key={icon.id}
+                      height={iconDimension}
+                      width={iconDimension}
+                      alt={icon.name}
+                      src={icon.url}
+                    />
+                  ))}
+                </div>
+
+                <h3>{skill.title}</h3>
+
+                <span className='skill-description text-justify font-light'>
+                  <ReactMarkdown>{skill.description}</ReactMarkdown>
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <hr />
+
+          <WorkExperience jobs={jobs} />
+
+          <hr />
+
+          <Education schools={schools} />
+
+          <hr />
+
+          <Languages languages={languages} />
+
+          <hr />
+
+          <Publications publications={publications} />
+
+          <hr />
 
           <CvCard />
         </div>
@@ -21,4 +110,4 @@ const CVPage = async () => {
   );
 };
 
-export default CVPage;
+export default AboutPage;

src/components/atoms/headings/SectionHeading.tsx

@@ -14,7 +14,7 @@ const SectionHeading = ({ titlePrefix }: SectionHeadingProps) => {
   const titleIconDimension = 36;
 
   return (
-    <div className='m-2 flex flex-col items-center'>
+    <div className='m-2 mb-3 flex flex-col items-center'>
       <Image
         className='h-auto'
         src={t(`${titlePrefix}.icon`)}

src/components/layout/Header.tsx

@@ -1,14 +1,10 @@
 'use client';
 
-import { MenuItem } from '@mui/material';
-import { Menu } from '@mui/material';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import Headroom from 'react-headroom';
 import { useTranslation } from 'react-i18next';
-import { AiFillCaretDown, AiFillCaretUp } from 'react-icons/ai';
 
 import { useOnKeyDown } from '@/hooks/useOnKeyDown';
 
@@ -23,8 +19,9 @@ import UnstyledLink from '@/components/links/UnstyledLink';
 import { MobileMenu } from '@/components/molecules/MobileMenu/MobileMenu';
 
 export const links = [
-  { href: '/projects', label: 'headerMenu.projects' },
+  { href: '/about', label: 'headerMenu.about' },
   { href: '/cv', label: 'headerMenu.cv' },
+  { href: '/projects', label: 'headerMenu.projects' },
   { href: '/uses', label: 'headerMenu.uses' },
   { href: '/contacts', label: 'headerMenu.contact' },
 ];
@@ -36,15 +33,6 @@ export default function Header() {
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
   const pathname = usePathname();
 
   useEffect(() => {
@@ -76,40 +64,6 @@ export default function Header() {
             </UnstyledLink>
 
             <ul className='hidden items-center justify-between space-x-6 text-lg md:flex'>
-              <li>
-                <span
-                  className='animated-underline-2 dark:animated-underline flex items-center rounded-sm font-medium text-slate-950 dark:text-blue-50'
-                  aria-controls={open ? 'basic-menu' : undefined}
-                  aria-haspopup='true'
-                  aria-expanded={open ? 'true' : undefined}
-                  onClick={handleClick}
-                >
-                  {t('headerMenu.about')}
-                  {!open && <AiFillCaretDown className='ms-1.5' />}
-                  {open && <AiFillCaretUp className='ms-1.5' />}
-                </span>
-                <Menu
-                  id='basic-menu'
-                  anchorEl={anchorEl}
-                  open={open}
-                  onClose={handleClose}
-                  MenuListProps={{
-                    'aria-labelledby': 'basic-button',
-                  }}
-                >
-                  <MenuItem onClick={handleClose}>
-                    <Link href='/about/work'>
-                      👔 {t('headerMenu.aboutWork')}
-                    </Link>
-                  </MenuItem>
-                  <MenuItem onClick={handleClose}>
-                    <Link href='/about/free-time'>
-                      🪁 {t('headerMenu.aboutFreeTime')}
-                    </Link>
-                  </MenuItem>
-                </Menu>
-              </li>
-
               {links.map(({ href, label }) => (
                 <li key={`${href}${label}`}>
                   <UnstyledLink

src/components/molecules/MobileMenu/MobileMenu.tsx

@@ -19,11 +19,6 @@ export interface MobileMenuProps {
 export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
   const { t } = useTranslation();
 
-  const mobileLinks = [
-    { href: '/about/work', label: 'headerMenu.aboutWorkMobile' },
-    { href: '/about/free-time', label: 'headerMenu.aboutFreeTimeMobile' },
-    ...links,
-  ];
   const navigationVariants = {
     hidden: { opacity: 0, x: -50 },
     visible: (custom: number) => ({
@@ -49,7 +44,7 @@ export const MobileMenu = ({ isOpen }: MobileMenuProps) => {
             }}
           >
             <ul className='align-center flex h-full flex-col justify-center gap-4 text-center'>
-              {mobileLinks.map(({ href, label }, i) => (
+              {links.map(({ href, label }, i) => (
                 <NavigationItem
                   key={href}
                   href={href}

src/components/organisms/about-work/Intro.tsx

@@ -19,7 +19,9 @@ const Intro = ({ intro }: IntroProps) => {
       <SectionHeading titlePrefix='aboutWork.softwareDevelopment' />
 
       <div className='mb-5'>
-        <ReactMarkdown>{intro.content.replace('8', noOfYears)}</ReactMarkdown>
+        <ReactMarkdown className='text-justify'>
+          {intro.content.replace('8', noOfYears)}
+        </ReactMarkdown>
       </div>
     </div>
   );

src/components/organisms/about-work/Languages.tsx

@@ -16,11 +16,11 @@ const Languages = ({ languages }: LanguageProps) => {
     <div className='mb-6 mt-4'>
       <SectionHeading titlePrefix='aboutWork.languages' />
 
-      <div className='mt-4 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-2 lg:grid-cols-4 lg:gap-6 justify-items-center'>
         {languages.map((language) => (
           <div
             key={language.id}
-            className='flex flex-row items-center rounded-md p-4 shadow-md dark:bg-slate-900 md:w-64'
+            className='flex flex-row items-center rounded-md p-4 shadow-md dark:bg-slate-900 w-full sm:w-64'
           >
             <Image
               src={language.flag.url}