Add new section to Home page and remove unused components and pages

README.md

@@ -27,13 +27,13 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser. T
 
 ## 🧙‍♂️ Useful commands
 
-#### $\textcolor{blue}{\textsf{Build the project:}}$
+Build the project:
 
 ```bash
 npm run build
 ```
 
-#### $\textcolor{blue}{\textsf{Commit build folder to}}$ $\textcolor{green}{\textsf{gh-pages}}$ $\textcolor{blue}{\textsf{branch:}}$
+Commit build folder to ``gh-pages`` branch:
 
 ```bash
 npm run deploy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mateuseap.github.io",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": true,
   "homepage": "https://mateuseap.github.io",
   "dependencies": {

src/components/DefaultPage/DefaultPage.tsx

@@ -1,13 +1,11 @@
 import { ReactNode } from 'react';
-import Sidebar from '../../components/Sidebar/Sidebar';
 import Starfield from '../../components/Starfield/Starfield';
 
 export interface DefaultPageProps {
   className?: string;
   childrenClassName?: string;
   children?: ReactNode;
   HtmlTag?: keyof JSX.IntrinsicElements;
-  sidebar?: boolean;
   starfield?: boolean;
 }
 
@@ -16,13 +14,11 @@ function DefaultPage({
   childrenClassName = 'h-full w-full flex flex-col flex-1 gap-y-8',
   children = null,
   HtmlTag = 'div',
-  sidebar = true,
   starfield = true,
 }: DefaultPageProps) {
   return (
     <HtmlTag className={className}>
       {starfield && <Starfield />}
-      {sidebar && <Sidebar />}
       {children && <div className={childrenClassName}>{children}</div>}
     </HtmlTag>
   );

src/components/Link/Link.tsx

@@ -0,0 +1,65 @@
+import clsx from 'clsx';
+import React from 'react';
+
+export interface LinkProps {
+  to: string;
+  leftIcon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+  variant?: 'primary' | 'link' | 'icon-button';
+  children?: React.ReactNode;
+  external?: boolean;
+  className?: string;
+};
+
+function Link({
+  to,
+  leftIcon,
+  rightIcon,
+  size = 'base',
+  variant = 'primary',
+  children,
+  external,
+  className,
+  ...restProps
+}: LinkProps) {
+  const iconWithStyles = (
+    icon: React.ReactElement,
+    size: 'sm' | 'base' | 'lg' | 'xl',
+  ) =>
+    React.cloneElement(icon, {
+      className: clsx(
+        'bg-rose-100/30 p-1',
+        'shadow-md rounded-md',
+        'group-hover:scale-[1.2] group-hover:shadow-[#b0b0b0] group-active:translate-y-[2px]',
+        'transition-all duration-300 ease-out',
+      ),
+      size: size === 'sm' ? 24 : 32,
+      ...icon.props,
+    });
+
+  return (
+    <a
+      href={to}
+      className={clsx(
+        'group flex w-fit items-center gap-2',
+        `text-${size}`,
+        {
+          'hover:underline': variant === 'link',
+        },
+        className,
+      )}
+      {...(external && {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      })}
+      {...restProps}
+    >
+      {leftIcon && iconWithStyles(leftIcon, size)}
+      {children}
+      {rightIcon && iconWithStyles(rightIcon, size)}
+    </a>
+  );
+}
+
+export default Link;

src/components/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,99 @@
+import clsx from 'clsx';
+import Link from '../../components/Link/Link';
+import { AiFillGithub } from 'react-icons/ai';
+import { FiExternalLink } from 'react-icons/fi';
+
+export interface ProjectCardProps {
+  name: string;
+  description: string;
+  githubRepoUrl?: string;
+  deployedAppUrl?: string;
+  technologiesUsed: Array<string>;
+  thumbnail: string;
+}
+
+function ProjectCard({
+  name,
+  description,
+  githubRepoUrl = undefined,
+  deployedAppUrl = undefined,
+  technologiesUsed,
+  thumbnail,
+}: ProjectCardProps) {
+  return (
+    <div
+      className={clsx(
+        'relative rounded-lg border-[1px] border-none bg-white/5 p-4',
+        'transition-all duration-500 ease-out',
+        'hover:bg-white/10',
+      )}
+    >
+      <div className='flex flex-col space-y-3'>
+        {deployedAppUrl ? (
+          <Link
+            to={deployedAppUrl}
+            external
+            rightIcon={<FiExternalLink size={22} />}
+            size='lg'
+            className='w-fit font-semibold'
+          >
+            <img
+              src={thumbnail}
+              alt={`${name} logo`}
+              width='32'
+              height='32'
+              className='rounded-md'
+            />
+            <span>{name}</span>
+          </Link>
+        ) : (
+          <p className='group flex w-fit items-center gap-2 text-lg font-semibold'>
+            <img
+              src={thumbnail}
+              alt={`${name} logo`}
+              width='32'
+              height='32'
+              className='rounded-md'
+            />
+            <span>{name}</span>
+          </p>
+        )}
+        <p className='text-base'>{description}</p>
+
+        <div className='flex flex-wrap items-center'>
+          {technologiesUsed.map(technology => (
+            <span
+              key={technology}
+              className='mr-2 mt-2 inline-block rounded-md border-[1px] border-zinc-700 px-2 py-1 font-mono text-xs font-semibold'
+            >
+              {technology}
+            </span>
+          ))}
+        </div>
+      </div>
+      {githubRepoUrl && (
+        <a
+          href={githubRepoUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+          className={clsx(
+            'group',
+            'absolute top-4 right-4 rounded-lg px-2 py-1',
+          )}
+        >
+          <AiFillGithub
+            size={28}
+            color='#ffe4e64d'
+            className={clsx(
+              'fill-rose-100/30',
+              'transition-all duration-300 ease-out',
+              'group-hover:scale-[1.2] group-hover:fill-white',
+            )}
+          />
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default ProjectCard;