feat: add projects list

src/app/projects/page.tsx

@@ -1,16 +1,78 @@
+import { Section } from '@/components';
+import { ProjectsList } from '@/components/projects-list';
+
 export default function ProjectsPage() {
   return (
-    <>
-      <h1>Projects</h1>
-
-      {new Array(10).fill(0).map((_, i) => (
-        <p key={i}>
-          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores
-          quidem autem itaque sint vitae laudantium hic quaerat quo tempore.
-          Perferendis debitis animi voluptatem aperiam cum temporibus nemo
-          blanditiis iure exercitationem?
-        </p>
-      ))}
-    </>
+    <Section heading="Quests">
+      <ProjectsList
+        projects={[
+          {
+            date: 'from 2024',
+            description:
+              'A personal project to help people learn Japanese. I have developed a web application that uses spaced repetition to help users memorize Japanese vocabulary through a daily game.',
+            role: 'Solo Project',
+            url: 'https://japanesefy.com',
+            stack: ['Next.js', 'Typescript', 'Tailwind'],
+          },
+          {
+            date: 'from 2023 to 2024',
+            description:
+              'Led the re-architecture of the Fleek web application, a platform for decentralized site and storage hosting. I participated in defining the frontend and designing the product, ensuring alignment with a unique design system created by Fleek designers.',
+            role: 'Lead Frontend Engineer',
+            url: 'https://app.fleek.xyz',
+            stack: ['Next.js', 'Typescript', 'GraphQL', 'AWS', 'Web3'],
+          },
+          {
+            title: 'Non-fungible Apps',
+            date: 'from 2022 to 2023',
+            description:
+              'Researched on Non-Fungible Apps, an initiative aimed at decentralizing web3 app frontend infrastructure through NFTs. I have developed and deployed Solidity contracts and integrated them into a web app.',
+            role: 'Software Engineer',
+            url: 'https://github.com/fleekxyz/non-fungible-apps',
+            stack: [
+              'React.js',
+              'Typescript',
+              'Solidity',
+              'Hardhat',
+              'Ethers.js',
+              'Ethereum',
+              'Web3',
+            ],
+          },
+          {
+            date: 'from 2021 to 2022',
+            description:
+              'Developed the frontend application for Sonic. Sonic is a automated market maker (AMM) that allows users to trade tokens on the Internet Computer blockchain.',
+            role: 'Frontend Engineer',
+            url: 'https://app.sonic.ooo/swap',
+            stack: [
+              'React.js',
+              'Typescript',
+              'Chakra-UI',
+              'Internet Computer',
+              'Web3',
+            ],
+          },
+          {
+            title: 'EthTracker',
+            date: 'June 2024',
+            description:
+              'This is a web application that allows users to track their Ethereum wallet balance and transactions.',
+            url: 'https://ethtracker.zoruka.xyz/',
+            role: 'Frontend Engineer',
+            stack: ['React.js', 'Typescript', 'Tailwind', 'Ethereum', 'Web3'],
+          },
+          {
+            title: 'Rick and Morty Consumer',
+            date: 'September 2021',
+            description:
+              'A web application developed for a job interview. This application only fetches and shows data from Ricky and Morty API.',
+            url: 'https://zoruka.xyz/rick-and-morty-consumer/#/',
+            role: 'Frontend Engineer',
+            stack: ['React.js', 'Typescript', 'Material-UI', 'Redux'],
+          },
+        ]}
+      />
+    </Section>
   );
 }

src/components/index.ts

@@ -8,3 +8,4 @@ export * from './talk-balloon';
 export * from './section-heading';
 export * from './fathom-analytics';
 export * from './jobs-list';
+export * from './projects-list.module.scss';

src/components/jobs-list.tsx

@@ -13,22 +13,18 @@ export type JobsListProps = {
 };
 
 export const JobsList: React.FC<JobsListProps> = ({ jobs }) => {
-  return (
-    <>
-      {jobs.map(({ title, subtitle, description, link, company }) => (
-        <div className={styles.container}>
-          <div className={styles.header}>
-            <h2 className={styles.heading}>
-              {title}&nbsp;-&nbsp;
-              <a href={link} target="_blank">
-                {company}
-              </a>
-            </h2>
-            <span className={styles.subtitle}>{subtitle}</span>
-          </div>
-          <p>{description}</p>
-        </div>
-      ))}
-    </>
-  );
+  return jobs.map(({ title, subtitle, description, link, company }) => (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2 className={styles.heading}>
+          {title}&nbsp;-&nbsp;
+          <a href={link} target="_blank">
+            {company}
+          </a>
+        </h2>
+        <span className={styles.subtitle}>{subtitle}</span>
+      </div>
+      <p>{description}</p>
+    </div>
+  ));
 };

src/components/projects-list.module.scss

@@ -0,0 +1,52 @@
+.container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+
+  width: 100%;
+  max-width: 30rem;
+  margin: 1rem 0;
+}
+
+.image {
+  flex-shrink: 0;
+  height: 4rem;
+  width: 6rem;
+  border: 1px solid var(--dark);
+}
+
+.data {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  gap: 0.2rem;
+}
+
+.heading {
+  font-size: 0.8rem;
+  line-height: 1rem;
+  margin: 0rem 0px;
+  color: var(--dark);
+  text-wrap: wrap;
+
+  a {
+    color: var(--dark);
+  }
+}
+
+.role {
+  font-size: 1rem;
+  font-family: monospace;
+}
+
+.stack {
+  font-size: 0.8em;
+  font-family: monospace;
+  opacity: 0.5;
+}
+
+.description {
+  grid-column: span 2;
+  padding: 0;
+}

src/components/projects-list.tsx

@@ -0,0 +1,32 @@
+import styles from './projects-list.module.scss';
+
+export type Project = {
+  title?: string;
+  description: string;
+  date: string;
+  role: string;
+  stack: string[];
+  url: string;
+};
+
+export type ProjectsListProps = {
+  projects: Project[];
+};
+
+export const ProjectsList: React.FC<ProjectsListProps> = ({ projects }) => {
+  return projects.map(({ title, description, role, date, stack, url }) => (
+    <div className={styles.container}>
+      <div className={styles.data}>
+        <h2 className={styles.heading}>
+          <a href={url} target="_blank">
+            {title || new URL(url).hostname}
+          </a>
+        </h2>
+        <span className={styles.role}>{role}</span>
+        <span className={styles.stack}>{stack.join(', ')}</span>
+        <span className={styles.stack}>{date}</span>
+      </div>
+      <p className={styles.description}>{description}</p>
+    </div>
+  ));
+};