feat: reorganise header routes

martapanc · Sep 14, 2023 · e5ba1ab · e5ba1ab
1 parent a817928
commit e5ba1ab
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 173 deletions.
diff --git a/src/app/(public)/about/free-time/page.tsx → src/app/(public)/about/page.tsx b/src/app/(public)/about/free-time/page.tsx → src/app/(public)/about/page.tsx
diff --git a/src/app/(public)/about/work/page.tsx b/src/app/(public)/about/work/page.tsx
diff --git a/src/app/(public)/cv/cv/page.tsx b/src/app/(public)/cv/cv/page.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import CvCard from '@/components/organisms/cv/CvCard';
+
+export const metadata = {
+  title: 'CV | MartaCodes.it',
+  description: 'CV page',
+};
+
+const CVPage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5 text-center'>CV</h1>
+
+          <CvCard />
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default CVPage;
diff --git a/src/app/(public)/cv/page.tsx b/src/app/(public)/cv/page.tsx
@@ -1,24 +1,108 @@
+import Image from 'next/image';
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 
-import CvCard from '@/components/organisms/cv/CvCard';
+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 { 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-3 md: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 />
 
-          <CvCard />
+          <Publications publications={publications} />
         </div>
       </section>
     </main>
   );
 };
 
-export default CVPage;
+export default AboutPage;
diff --git a/src/components/layout/Header.tsx b/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

diff --git a/src/components/molecules/MobileMenu/MobileMenu.tsx b/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}

diff --git a/src/data/locales/en.json b/src/data/locales/en.json
@@ -5,6 +5,7 @@
     "aboutWorkMobile": "About ~ Work & Career",
     "aboutFreeTime": "Free Time",
     "aboutFreeTimeMobile": "About ~ Free Time",
+    "experience": "Work",
     "projects": "Projects",
     "cv": "CV",
     "uses": "Uses",
@@ -20,7 +21,7 @@
     "feedback": "Feedback"
   },
   "aboutWork": {
-    "title": "Work & Career",
+    "title": "My CV",
     "softwareDevelopment": {
       "title": "Software Development",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692734473/laptop_4a3ba3b30c.svg"

diff --git a/src/data/locales/it.json b/src/data/locales/it.json
@@ -1,6 +1,6 @@
 {
   "headerMenu": {
-    "about": "About",
+    "about": "Su di me",
     "aboutWork": "Lavoro",
     "aboutWorkMobile": "About ~ Lavoro",
     "aboutFreeTime": "Tempo Libero",
@@ -20,7 +20,7 @@
     "feedback": "Feedback"
   },
   "aboutWork": {
-    "title": "Carriera Lavorativa",
+    "title": "CV",
     "softwareDevelopment": {
       "title": "Sviluppo Software",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692734473/laptop_4a3ba3b30c.svg"