Add google fonts

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/.pnpm/typescript@5.0.2/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

app/fonts.ts

@@ -0,0 +1,31 @@
+import {
+  Aleo,
+  Aref_Ruqaa,
+  Barlow,
+  JetBrains_Mono,
+  Poppins,
+} from 'next/font/google';
+
+export const aleo = Aleo({
+  weight: ['300', '400', '700'],
+  display: 'swap',
+});
+
+export const aref_ruqaa = Aref_Ruqaa({
+  weight: ['400', '700'],
+  display: 'swap',
+});
+
+export const barlow = Barlow({
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  style: 'italic',
+  display: 'swap',
+});
+
+export const jetbrains_mono = JetBrains_Mono({
+  display: 'swap',
+});
+
+export const poppins = Poppins({
+  weight: ['300', '400', '700', '100', '200', '500', '600', '800', '900'],
+});

components/pages/project-card.tsx

@@ -1,62 +0,0 @@
-import clsx from 'clsx';
-import { Project } from 'pages/projects';
-import { Children, cloneElement, isValidElement, ReactElement } from 'react';
-import { VscGithubInverted } from 'react-icons/vsc';
-
-type ProjectCardProps = {
-  project: Project;
-  icon?: ReactElement<{ className?: string }>;
-};
-
-const ProjectCard = ({ project, icon }: ProjectCardProps) => {
-  const Icon = Children.map(icon, (child) => {
-    if (!isValidElement(child)) return child;
-    return cloneElement(child, {
-      className: 'w-8 h-8',
-    });
-  });
-
-  return (
-    <>
-      <div
-        className={clsx(
-          'py-3 px-4 rounded-lg bg-slate-100',
-          'hover:bg-slate-200',
-          'transition-all duration-300',
-          'flex items-center cursor-pointer',
-          'justify-between dark:bg-rua-gray-800',
-          'hover:dark:bg-rua-gray-700'
-        )}
-      >
-        {Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
-
-        <a
-          href={project.url}
-          className="w-[calc(100%_-_40px)]"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <h2
-            className={clsx(
-              'text-xl overflow-hidden',
-              'text-ellipsis whitespace-nowrap'
-            )}
-          >
-            {project.name}
-          </h2>
-          <span
-            className={clsx(
-              'overflow-hidden break-keep text-ellipsis',
-              'whitespace-nowrap inline-block',
-              'w-[inherit]'
-            )}
-          >
-            {project.description}
-          </span>
-        </a>
-      </div>
-    </>
-  );
-};
-
-export default ProjectCard;