feat: add Project type and base Card component

public/contacts/page.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const metadata = {
+  title: 'Projects | MartaCodes.it',
+  description: 'Projects page',
+};
+
+const ProjectsPage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>Projects</h1>
+
+          <div className='grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'></div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default ProjectsPage;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const metadata = {
+  title: 'Contacts | MartaCodes.it',
+  description: 'Contacts page',
+};
+
+const ProjectsPage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>Contacts</h1>
+
+          <div className='grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'></div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default ProjectsPage;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const metadata = {
+  title: 'CV | MartaCodes.it',
+  description: 'CV page',
+};
+
+const ProjectsPage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>CV</h1>
+
+          <div className='grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'></div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default ProjectsPage;

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const metadata = {
+  title: 'Uses | MartaCodes.it',
+  description: 'Uses page',
+};
+
+const ProjectsPage = async () => {
+  return (
+    <main className='min-h-main'>
+      <section>
+        <div className='layout relative flex flex-col py-12'>
+          <h1 className='mb-5'>Uses</h1>
+
+          <div className='grid grid-cols-1 gap-5 md:grid-cols-3 md:gap-6'></div>
+        </div>
+      </section>
+    </main>
+  );
+};
+
+export default ProjectsPage;

src/components/layout/Footer.tsx

@@ -68,7 +68,10 @@ function SocialLinks() {
           className='focus-visible:ring-primary-300 inline-flex items-center justify-center rounded-sm focus:outline-none focus-visible:ring'
           href={socialLink.href}
         >
-          <socialLink.icon 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' />
+          <socialLink.icon
+            size={50}
+            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>
       ))}
     </div>
@@ -87,7 +90,7 @@ type FooterLink = {
 };
 const footerLinks: FooterLink[] = [
   {
-    href: 'https://martas.links',
+    href: 'https://martas-links.vercel.app',
     label: 'footerMenu.links',
   },
   {

src/components/layout/Header.tsx

@@ -26,7 +26,7 @@ export const links = [
   { href: '/projects', label: 'headerMenu.projects' },
   { href: '/cv', label: 'headerMenu.cv' },
   { href: '/uses', label: 'headerMenu.uses' },
-  { href: '/contact', label: 'headerMenu.contact' },
+  { href: '/contacts', label: 'headerMenu.contact' },
 ];
 
 export default function Header() {

src/components/organisms/projects/ProjectCard.tsx

@@ -0,0 +1,99 @@
+import { Button } from '@mui/material';
+import Image from 'next/image';
+import { useTheme } from 'next-themes';
+import * as React from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
+import { RxCross1 } from 'react-icons/rx';
+import ReactMarkdown from 'react-markdown';
+
+import clsxm from '@/lib/clsxm';
+
+import UnstyledLink from '@/components/links/UnstyledLink';
+
+import { Project, ToolIcon } from '@/types/Project';
+
+export interface ProjectCardProps {
+  project: Project;
+}
+
+const ProjectCard = ({ project }: ProjectCardProps) => {
+  const { t } = useTranslation();
+
+  const { theme } = useTheme();
+
+  const [showDescription, setShowDescription] = useState(false);
+
+  const toggleDescription = () => {
+    setShowDescription(!showDescription);
+  };
+
+  const iconColor = theme === 'dark' ? 'white' : 'black';
+
+  return (
+    <div className='rounded p-4 shadow-md dark:bg-slate-900 dark:drop-shadow-md min-w-fit max-w-xs'>
+      <div
+        className={clsxm('mt-4 transition-all duration-500', {
+          'max-h-0 opacity-0': showDescription,
+          'max-h-full opacity-100': !showDescription,
+        })}
+      >
+        <h3>{project.title}</h3>
+
+        <div className='text-justify font-light text-sm mb-3'>
+          <ReactMarkdown>{project.shortDescription}</ReactMarkdown>
+        </div>
+
+        <div className='flex flex-row mb-3'>
+          <IconContext.Provider value={{ color: iconColor, size: '24px' }}>
+            {project.tools.map((toolIcon: ToolIcon) => (
+              <span key={toolIcon.title} className='me-1'>
+                <toolIcon.icon />
+              </span>
+            ))}
+          </IconContext.Provider>
+        </div>
+
+        <div className='w-full'>
+          <Image
+            className='object-cover'
+            src={project.image.url}
+            alt={project.image.alternativeText || 'Project Image'}
+            width={0}
+            height={0}
+            style={{ width: '100%', height: 'auto' }}
+          />
+        </div>
+
+        <div className=''>
+          {project.longDescription && (
+            <Button onClick={toggleDescription}>
+              {t('projects.readMore')}
+            </Button>
+          )}
+
+          {!project.longDescription && (
+            <UnstyledLink href=''>{t('projects.readMore')}</UnstyledLink>
+          )}
+        </div>
+      </div>
+
+      <div
+        className={clsxm('mt-4 transition-all duration-500', {
+          'max-h-0 opacity-0': !showDescription,
+          'max-h-full opacity-100': showDescription,
+        })}
+      >
+        <div>{project.longDescription}</div>
+        <div>
+          <Button onClick={toggleDescription}>
+            <RxCross1 />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCard;

src/components/organisms/projects/__stories__/ProjectCard.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/react';
+import {
+  SiNextdotjs,
+  SiReact,
+  SiStrapi,
+  SiTailwindcss,
+  SiTypescript,
+  SiVercel,
+} from 'react-icons/si';
+
+import ProjectCard, {
+  ProjectCardProps,
+} from '@/components/organisms/projects/ProjectCard';
+
+import { Project } from '@/types/Project';
+
+const meta: Meta<typeof ProjectCard> = {
+  title: 'Project Card',
+  component: ProjectCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const project: Project = {
+  id: '0',
+  title: 'MartaCodes.it',
+  image: {
+    id: '0',
+    name: 'cover',
+    url: 'https://mpancaldi.web.app/static/media/website.453e6dfc9313266430d7.webp',
+    alternativeText: '',
+  },
+  shortDescription: 'This very website :)',
+  longDescription:
+    "Built with ReactJS and later migrated to Typescript, it's also a chance to play around with my web development skills and experiment with front-end technologies.",
+  tools: [
+    { title: 'nextjs', icon: SiNextdotjs },
+    { title: 'react', icon: SiReact },
+    { title: 'typescript', icon: SiTypescript },
+    { title: 'tailwind', icon: SiTailwindcss },
+    { title: 'strapi', icon: SiStrapi },
+    { title: 'vercel', icon: SiVercel },
+  ],
+  date: '2023-08-01',
+  tags: ['react', 'webdev', 'frontend', 'personal', 'typescript'],
+  links: {
+    github: 'https://github.com/martapanc/react-gh-pages/',
+    website: 'https://martacodes.it/',
+  },
+};
+
+export const SampleStory = (args: ProjectCardProps) => {
+  return <ProjectCard {...args} />;
+};
+SampleStory.args = {
+  project,
+};

src/data/locales/en.json

@@ -42,5 +42,8 @@
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/newspaper_e15ec94d21.svg"
     }
   },
-  "aboutFreeTime": {}
+  "aboutFreeTime": {},
+  "projects": {
+    "readMore": "Read More"
+  }
 }

src/data/locales/it.json

@@ -40,6 +40,9 @@
     "publications": {
       "title": "Pubblicazioni",
       "icon": "https://res.cloudinary.com/dwrurydlt/image/upload/v1692894192/newspaper_e15ec94d21.svg"
+    },
+    "projects": {
+      "readMore": "Leggi di più"
     }
   }
 }

src/theme/index.ts

@@ -13,17 +13,6 @@ export const lightTheme = createTheme({
       primary: '#000',
     },
   },
-  // components: {
-  //   MuiMenu: {
-  //     styleOverrides: {
-  //       list: {
-  //         '&[role="menu"], &[role="listbox"]': {
-  //           backgroundColor: '#E2E8F0'
-  //         },
-  //       },
-  //     },
-  //   },
-  // }
 });
 
 export const darkTheme = createTheme({

src/types/Project.ts

@@ -0,0 +1,20 @@
+import { IconType } from 'react-icons';
+
+import { Icon } from '@/types/Icon';
+
+export interface ToolIcon {
+  icon: IconType;
+  title: string;
+}
+
+export interface Project {
+  id: string;
+  title: string;
+  image: Icon;
+  shortDescription: string;
+  longDescription?: string;
+  tools: ToolIcon[];
+  date: string;
+  tags: string[];
+  links: object;
+}